Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

Commit 34d68e3

Browse files
Only1MrAndersonOnly1MrAnderson
committed
refactor(Components): change to app.module and lazy loaded modules to use shared module
1 parent 86bdde6 commit 34d68e3

17 files changed

+257
-177
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"@angular/common": "4.4.4",
3333
"@angular/compiler": "4.4.4",
3434
"@angular/core": "4.4.4",
35+
"@angular/flex-layout": "2.0.0-beta.9",
3536
"@angular/forms": "4.4.4",
3637
"@angular/http": "4.4.4",
3738
"@angular/material": "2.0.0-beta.12",

‎src/app/app.component.html‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,8 @@
11
<div class="app-fullpage">
22
<header>
3-
<mat-toolbar color="accent" class="mat-elevation-z6">
4-
<button mat-icon-button (click)="sidenav.toggle()" aria-label="menu">
5-
<mat-icon>
6-
menu
7-
</mat-icon>
8-
</button>
9-
<span class="title"> RxJS Docs </span>
10-
</mat-toolbar>
3+
<app-toolbar></app-toolbar>
114
</header>
12-
<mat-sidenav-container>
13-
<mat-sidenav #sidenav role="navigation">
14-
<mat-nav-list (click)="sidenav.toggle()">
15-
<a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
16-
[routerLinkActiveOptions]="menu.options"
17-
[routerLink]="menu.link">
18-
{{menu.title}}
19-
</a>
20-
</mat-nav-list>
21-
</mat-sidenav>
22-
<main class="app-content">
23-
<router-outlet></router-outlet>
24-
</main>
25-
</mat-sidenav-container>
5+
<main class="app-content">
6+
<router-outlet></router-outlet>
7+
</main>
268
</div>

‎src/app/app.component.scss‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.title {
2-
padding: 0 16px;
3-
font-weight: 600;
4-
}
5-
61
.app-fullpage {
72
position: absolute;
83
top: 0;
@@ -11,29 +6,14 @@
116
right: 0;
127
display: flex;
138
flex-direction: column;
14-
159
header {
1610
z-index: 10;
1711
}
1812
}
1913

20-
mat-sidenav-container {
21-
flex: 1 1 auto;
22-
width: 100%;
23-
height: 100%;
24-
}
25-
26-
mat-sidenav {
27-
width: 200px;
28-
}
29-
3014
.app-content {
3115
min-height: 100%;
3216
overflow: auto;
3317
display: flex;
3418
flex-direction: column;
3519
}
36-
37-
38-
39-

‎src/app/app.component.spec.ts‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,29 @@
1-
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { RouterTestingModule } from '@angular/router/testing';
3-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4-
import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
5-
import { AppComponent } from './app.component';
1+
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
2+
import { RouterTestingModule } from "@angular/router/testing";
3+
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
4+
import { AppComponent } from "./app.component";
5+
import { ToolbarModule } from "./toolbar/toolbar.module";
66

7-
describe('AppComponent', () => {
7+
describe("AppComponent", () => {
88
let component: AppComponent;
99
let fixture: ComponentFixture<AppComponent>;
1010

11-
beforeEach(async(() => {
12-
TestBed.configureTestingModule({
13-
imports: [
14-
RouterTestingModule,
15-
BrowserAnimationsModule,
16-
MatToolbarModule,
17-
MatSidenavModule,
18-
MatIconModule,
19-
MatButtonModule,
20-
MatListModule
21-
],
22-
declarations: [AppComponent]
11+
beforeEach(
12+
async(() => {
13+
TestBed.configureTestingModule({
14+
imports: [RouterTestingModule, BrowserAnimationsModule, ToolbarModule],
15+
declarations: [AppComponent]
16+
}).compileComponents();
2317
})
24-
.compileComponents();
25-
}));
18+
);
2619

2720
beforeEach(() => {
2821
fixture = TestBed.createComponent(AppComponent);
2922
component = fixture.componentInstance;
3023
fixture.detectChanges();
3124
});
3225

33-
it('should create', () => {
26+
it("should create", () => {
3427
expect(component).toBeTruthy();
3528
});
3629
});

‎src/app/app.component.ts‎

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
1-
import { Component } from '@angular/core';
2-
3-
interface Menu {
4-
title: string;
5-
link: string;
6-
options: { exact: boolean };
7-
}
1+
import { Component } from "@angular/core";
82

93
@Component({
10-
selector: 'app-root',
11-
templateUrl: './app.component.html',
12-
styleUrls: ['./app.component.scss']
4+
selector: "app-root",
5+
templateUrl: "./app.component.html",
6+
styleUrls: ["./app.component.scss"]
137
})
14-
export class AppComponent {
15-
menus: Menu[] = [
16-
{
17-
title: 'Home',
18-
link: '/',
19-
options: { exact: true }
20-
},
21-
{
22-
title: 'Operators',
23-
link: '/operators',
24-
options: { exact: false }
25-
},
26-
{
27-
title: 'Companies',
28-
link: '/companies',
29-
options: { exact: false }
30-
},
31-
{
32-
title: 'Team',
33-
link: '/team',
34-
options: { exact: false }
35-
}
36-
];
37-
}
8+
export class AppComponent {}

‎src/app/app.module.ts‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
1-
import { BrowserModule } from '@angular/platform-browser';
2-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
3-
import { NgModule } from '@angular/core';
4-
import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
5-
import { RouterModule, PreloadAllModules } from '@angular/router';
1+
import { BrowserModule } from "@angular/platform-browser";
2+
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
3+
import { NgModule } from "@angular/core";
4+
import { RouterModule, PreloadAllModules } from "@angular/router";
65

7-
import { AppComponent } from './app.component';
8-
import { RXJS_DOC_ROUTES } from './app.routing';
6+
import { AppComponent } from "./app.component";
7+
import { RXJS_DOC_ROUTES } from "./app.routing";
8+
import { ToolbarModule } from "./toolbar/toolbar.module";
99

1010
@NgModule({
11-
declarations: [
12-
AppComponent,
13-
],
11+
declarations: [AppComponent],
1412
imports: [
1513
BrowserModule,
1614
BrowserAnimationsModule,
17-
RouterModule.forRoot(RXJS_DOC_ROUTES, { preloadingStrategy: PreloadAllModules }),
18-
MatToolbarModule,
19-
MatSidenavModule,
20-
MatIconModule,
21-
MatButtonModule,
22-
MatListModule
15+
ToolbarModule,
16+
RouterModule.forRoot(RXJS_DOC_ROUTES, {
17+
preloadingStrategy: PreloadAllModules
18+
})
2319
],
2420
providers: [],
2521
bootstrap: [AppComponent]
2622
})
27-
export class AppModule { }
23+
export class AppModule {}

‎src/app/companies/companies.module.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { NgModule } from '@angular/core';
1+
import { NgModule } from "@angular/core";
22

3-
import { CompaniesComponent } from './companies.component';
4-
import { routing } from './companies.routing';
3+
import { CompaniesComponent } from "./companies.component";
4+
import { routing } from "./companies.routing";
5+
import { SharedModule } from "../shared.module";
56

67
@NgModule({
7-
imports: [routing],
8-
declarations: [CompaniesComponent]
8+
imports: [routing, SharedModule],
9+
declarations: [CompaniesComponent]
910
})
10-
export class CompaniesModule { }
11+
export class CompaniesModule {}

‎src/app/operators/operators.module.ts‎

Lines changed: 26 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,26 @@
1-
import { NgModule, InjectionToken, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
3-
import { LayoutModule } from '@angular/cdk/layout';
41
import {
5-
MatSidenavModule,
6-
MatIconModule,
7-
MatListModule,
8-
MatToolbarModule,
9-
MatExpansionModule,
10-
MatCardModule,
11-
MatInputModule,
12-
MatMenuModule,
13-
MatButtonModule,
14-
MatTooltipModule
15-
} from '@angular/material';
16-
import { ClipboardModule } from 'ngx-clipboard';
17-
import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs';
2+
NgModule,
3+
InjectionToken,
4+
CUSTOM_ELEMENTS_SCHEMA
5+
} from "@angular/core";
6+
import { LayoutModule } from "@angular/cdk/layout";
7+
import { ClipboardModule } from "ngx-clipboard";
188

19-
import { OperatorsRoutingModule } from './operators.routing';
20-
import { OperatorsComponent, OPERATORS_TOKEN } from './operators.component';
21-
import { OperatorComponent } from './components/operator/operator.component';
22-
import { OperatorHeaderComponent } from './components/operator-header/operator-header.component';
23-
import { OperatorParametersComponent } from './components/operator-parameters/operator-parameters.component';
24-
import { OperatorExamplesComponent } from './components/operator-examples/operator-examples.component';
25-
import { RelatedOperatorsComponent } from './components/related-operators/related-operators.component';
26-
import { OperatorExtrasComponent } from './components/operator-extras/operator-extras.component';
27-
import { AdditionalResourcesComponent } from './components/additional-resources/additional-resources.component';
28-
import { MarbleDiagramComponent } from './components/marble-diagram/marble-diagram.component';
29-
import { WalkthroughComponent } from './components/walkthrough/walkthrough.component';
30-
import { HighlightJsDirective } from './directives/highlight-js.directive';
31-
import { SafeUrlPipe } from './pipes/safe-url.pipe';
9+
import { ALL_OPERATORS, OperatorDoc } from "../../operator-docs";
10+
import { OperatorsRoutingModule } from "./operators.routing";
11+
import { OperatorsComponent, OPERATORS_TOKEN } from "./operators.component";
12+
import { OperatorComponent } from "./components/operator/operator.component";
13+
import { OperatorHeaderComponent } from "./components/operator-header/operator-header.component";
14+
import { OperatorParametersComponent } from "./components/operator-parameters/operator-parameters.component";
15+
import { OperatorExamplesComponent } from "./components/operator-examples/operator-examples.component";
16+
import { RelatedOperatorsComponent } from "./components/related-operators/related-operators.component";
17+
import { OperatorExtrasComponent } from "./components/operator-extras/operator-extras.component";
18+
import { AdditionalResourcesComponent } from "./components/additional-resources/additional-resources.component";
19+
import { MarbleDiagramComponent } from "./components/marble-diagram/marble-diagram.component";
20+
import { WalkthroughComponent } from "./components/walkthrough/walkthrough.component";
21+
import { HighlightJsDirective } from "./directives/highlight-js.directive";
22+
import { SafeUrlPipe } from "./pipes/safe-url.pipe";
23+
import { SharedModule } from "../shared.module";
3224

3325
@NgModule({
3426
declarations: [
@@ -46,23 +38,12 @@ import { SafeUrlPipe } from './pipes/safe-url.pipe';
4638
SafeUrlPipe
4739
],
4840
imports: [
49-
CommonModule,
41+
SharedModule,
5042
OperatorsRoutingModule,
5143
ClipboardModule,
52-
LayoutModule,
53-
MatSidenavModule,
54-
MatIconModule,
55-
MatListModule,
56-
MatToolbarModule,
57-
MatCardModule,
58-
MatInputModule,
59-
MatMenuModule,
60-
MatButtonModule,
61-
MatTooltipModule
44+
LayoutModule
6245
],
63-
providers: [
64-
{ provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }
65-
],
66-
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
46+
providers: [{ provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }],
47+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
6748
})
68-
export class OperatorsModule { }
49+
export class OperatorsModule {}

‎src/app/rxjs/rxjs.module.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { NgModule } from '@angular/core';
1+
import { NgModule } from "@angular/core";
22

3-
import { RxjsComponent } from './rxjs.component';
4-
import { routing } from './rxjs.routing';
3+
import { RxjsComponent } from "./rxjs.component";
4+
import { routing } from "./rxjs.routing";
5+
import { SharedModule } from "../shared.module";
56

67
@NgModule({
7-
imports: [routing],
8-
declarations: [RxjsComponent]
8+
imports: [routing, SharedModule],
9+
declarations: [RxjsComponent]
910
})
10-
export class RxjsModule { }
11+
export class RxjsModule {}

‎src/app/shared.module.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { NgModule } from "@angular/core";
2+
import { CommonModule } from "@angular/common";
3+
import { FlexLayoutModule } from "@angular/flex-layout";
4+
import {
5+
MatToolbarModule,
6+
MatSidenavModule,
7+
MatIconModule,
8+
MatButtonModule,
9+
MatListModule,
10+
MatExpansionModule,
11+
MatCardModule,
12+
MatInputModule,
13+
MatMenuModule,
14+
MatTooltipModule
15+
} from "@angular/material";
16+
17+
@NgModule({
18+
declarations: [],
19+
imports: [
20+
CommonModule,
21+
MatToolbarModule,
22+
MatSidenavModule,
23+
MatIconModule,
24+
MatButtonModule,
25+
MatListModule,
26+
MatExpansionModule,
27+
MatCardModule,
28+
MatInputModule,
29+
MatMenuModule,
30+
MatTooltipModule,
31+
FlexLayoutModule
32+
],
33+
providers: [],
34+
entryComponents: [],
35+
exports: [
36+
CommonModule,
37+
MatToolbarModule,
38+
MatSidenavModule,
39+
MatIconModule,
40+
MatButtonModule,
41+
MatListModule,
42+
MatExpansionModule,
43+
MatCardModule,
44+
MatInputModule,
45+
MatMenuModule,
46+
MatTooltipModule,
47+
FlexLayoutModule
48+
]
49+
})
50+
export class SharedModule {}

0 commit comments

Comments
 (0)