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

Commit 1b46319

Browse files
ashwin-sureshkumarashwin-sureshkumar
authored
Merge pull request #135 from Only1MrAnderson/sharedModule
* refactor(Components): change to app.module and lazy loaded modules to use shared module * refactor(ToolbarComponent): to resolve layout issue with sidenav * refactor(sharedModule): removed duplicate import of sidemodule * fix(sidenav): resolved sidenav import issue
2 parents 29af945 + cf60a35 commit 1b46319

19 files changed

+252
-163
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: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
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 (navToggle)="sidenav.toggle()"></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">
5+
<main class="app-content">
6+
<mat-sidenav-container>
7+
<mat-sidenav #sidenav role="navigation">
8+
<mat-nav-list (click)="sidenav.toggle()">
9+
<a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
10+
{{menu.title}}
11+
</a>
12+
</mat-nav-list>
13+
</mat-sidenav>
2314
<router-outlet></router-outlet>
24-
</main>
25-
</mat-sidenav-container>
15+
</mat-sidenav-container>
16+
</main>
2617
</div>

‎src/app/app.component.scss‎

Lines changed: 8 additions & 18 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,24 @@
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
}
3620

21+
mat-sidenav-container {
22+
flex: 1 1 auto;
23+
width: 100%;
24+
height: calc(100vh - 64px);
25+
}
3726

38-
39-
27+
mat-sidenav {
28+
width: 200px;
29+
}

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

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,35 @@
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";
6+
import { MatSidenavModule } from "@angular/material";
67

7-
describe('AppComponent', () => {
8+
describe("AppComponent", () => {
89
let component: AppComponent;
910
let fixture: ComponentFixture<AppComponent>;
1011

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]
12+
beforeEach(
13+
async(() => {
14+
TestBed.configureTestingModule({
15+
imports: [
16+
RouterTestingModule,
17+
BrowserAnimationsModule,
18+
ToolbarModule,
19+
MatSidenavModule
20+
],
21+
declarations: [AppComponent]
22+
}).compileComponents();
2323
})
24-
.compileComponents();
25-
}));
24+
);
2625

2726
beforeEach(() => {
2827
fixture = TestBed.createComponent(AppComponent);
2928
component = fixture.componentInstance;
3029
fixture.detectChanges();
3130
});
3231

33-
it('should create', () => {
32+
it("should create", () => {
3433
expect(component).toBeTruthy();
3534
});
3635
});

‎src/app/app.component.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component } from "@angular/core";
22

33
interface Menu {
44
title: string;
@@ -7,30 +7,30 @@ interface Menu {
77
}
88

99
@Component({
10-
selector: 'app-root',
11-
templateUrl: './app.component.html',
12-
styleUrls: ['./app.component.scss']
10+
selector: "app-root",
11+
templateUrl: "./app.component.html",
12+
styleUrls: ["./app.component.scss"]
1313
})
1414
export class AppComponent {
1515
menus: Menu[] = [
1616
{
17-
title: 'Home',
18-
link: '/',
17+
title: "Home",
18+
link: "/",
1919
options: { exact: true }
2020
},
2121
{
22-
title: 'Operators',
23-
link: '/operators',
22+
title: "Operators",
23+
link: "/operators",
2424
options: { exact: false }
2525
},
2626
{
27-
title: 'Companies',
28-
link: '/companies',
27+
title: "Companies",
28+
link: "/companies",
2929
options: { exact: false }
3030
},
3131
{
32-
title: 'Team',
33-
link: '/team',
32+
title: "Team",
33+
link: "/team",
3434
options: { exact: false }
3535
}
3636
];

‎src/app/app.module.ts‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
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";
9+
import { MatSidenavModule, MatListModule } from "@angular/material";
910

1011
@NgModule({
11-
declarations: [
12-
AppComponent,
13-
],
12+
declarations: [AppComponent],
1413
imports: [
1514
BrowserModule,
1615
BrowserAnimationsModule,
17-
RouterModule.forRoot(RXJS_DOC_ROUTES, { preloadingStrategy: PreloadAllModules }),
18-
MatToolbarModule,
16+
ToolbarModule,
17+
MatListModule,
1918
MatSidenavModule,
20-
MatIconModule,
21-
MatButtonModule,
22-
MatListModule
19+
RouterModule.forRoot(RXJS_DOC_ROUTES, {
20+
preloadingStrategy: PreloadAllModules
21+
})
2322
],
2423
providers: [],
2524
bootstrap: [AppComponent]
2625
})
27-
export class AppModule { }
26+
export class AppModule {}

‎src/app/companies/companies.component.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
<p>
2-
companies works!
3-
</p>
1+

‎src/app/companies/companies.component.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit } from "@angular/core";
22

33
@Component({
4-
selector: 'app-companies',
5-
templateUrl: './companies.component.html',
6-
styleUrls: ['./companies.component.scss']
4+
selector: "app-companies",
5+
templateUrl: "./companies.component.html",
6+
styleUrls: ["./companies.component.scss"]
77
})
88
export class CompaniesComponent implements OnInit {
9+
constructor() {}
910

10-
constructor() { }
11-
12-
ngOnInit() {
13-
}
11+
ngOnInit() {}
1412
}
15-

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
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";
6+
import { environment } from "../../environments/environment";
57

68
@NgModule({
7-
imports: [routing],
8-
declarations: [CompaniesComponent]
9+
imports: [routing, SharedModule],
10+
declarations: [CompaniesComponent]
911
})
10-
export class CompaniesModule { }
12+
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 {}

0 commit comments

Comments
 (0)