Skip to content

Commit 3394746

Browse files
sinediedsinedied
authored
Merge pull request #155 from dvaJi/feature/angular-material
Add angular-material UI choice
2 parents e8a85e1 + 20c5218 commit 3394746

31 files changed

+460
-15
lines changed

‎generators/app/prompts.js

+4
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ module.exports = [
8888
value: 'bootstrap',
8989
name: 'Bootstrap (more website-oriented)'
9090
},
91+
{
92+
value: 'material',
93+
name: 'Angular Material (more website-oriented)'
94+
},
9195
{
9296
value: 'ionic',
9397
name: 'Ionic (more mobile-oriented)'

‎generators/app/templates/_package.json

+4
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@
5252
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
5353
"bootstrap": "4.0.0-beta",
5454
"font-awesome": "^4.7.0",
55+
<% } else if (props.ui === 'material') { -%>
56+
"@angular/cdk": "^2.0.0-beta.12",
57+
"@angular/material": "^2.0.0-beta.12",
58+
"font-awesome": "^4.7.0",
5559
<% } -%>
5660
"core-js": "^2.4.1",
5761
"lodash": "^4.17.4",

‎generators/app/templates/src/_main.scss

+2
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,8 @@
260260
<% } else if (props.ui === 'bootstrap') { -%>
261261
@import "~bootstrap/scss/bootstrap";
262262
@import "~font-awesome/scss/font-awesome.scss";
263+
<% } else if (props.ui === 'material') { -%>
264+
@import "~font-awesome/scss/font-awesome.scss";
263265
<% } -%>
264266

265267
// Theme customization

‎generators/app/templates/src/app/__material.material.module.ts

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { NgModule } from '@angular/core';
2+
import { CdkTableModule } from '@angular/cdk/table';
3+
import { OverlayModule } from '@angular/cdk/overlay';
4+
import {
5+
MatAutocompleteModule,
6+
MatButtonModule,
7+
MatButtonToggleModule,
8+
MatCardModule,
9+
MatCheckboxModule,
10+
MatChipsModule,
11+
MatDatepickerModule,
12+
MatDialogModule,
13+
MatExpansionModule,
14+
MatGridListModule,
15+
MatIconModule,
16+
MatInputModule,
17+
MatListModule,
18+
MatMenuModule,
19+
MatNativeDateModule,
20+
MatProgressBarModule,
21+
MatProgressSpinnerModule,
22+
MatRadioModule,
23+
MatRippleModule,
24+
MatSelectModule,
25+
MatSidenavModule,
26+
MatSliderModule,
27+
MatSlideToggleModule,
28+
MatSnackBarModule,
29+
MatTabsModule,
30+
MatToolbarModule,
31+
MatTooltipModule,
32+
} from '@angular/material';
33+
34+
@NgModule({
35+
exports: [
36+
// CDk
37+
CdkTableModule,
38+
OverlayModule,
39+
40+
// Material
41+
MatAutocompleteModule,
42+
MatButtonModule,
43+
MatButtonToggleModule,
44+
MatCardModule,
45+
MatCheckboxModule,
46+
MatChipsModule,
47+
MatDatepickerModule,
48+
MatDialogModule,
49+
MatExpansionModule,
50+
MatGridListModule,
51+
MatIconModule,
52+
MatInputModule,
53+
MatListModule,
54+
MatMenuModule,
55+
MatProgressBarModule,
56+
MatProgressSpinnerModule,
57+
MatRadioModule,
58+
MatRippleModule,
59+
MatSelectModule,
60+
MatSidenavModule,
61+
MatSlideToggleModule,
62+
MatSliderModule,
63+
MatSnackBarModule,
64+
MatTabsModule,
65+
MatToolbarModule,
66+
MatTooltipModule,
67+
MatNativeDateModule,
68+
]
69+
})
70+
export class MaterialModule { }

‎generators/app/templates/src/app/_app.module.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import { NgModule } from '@angular/core';
77
import { FormsModule } from '@angular/forms';
88
import { HttpModule } from '@angular/http';
99
import { TranslateModule } from '@ngx-translate/core';
10-
<% if (props.ui === 'bootstrap') { -%>
10+
<% if (props.ui === 'material') { -%>
11+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
12+
import { MaterialModule } from './material.module';
13+
<% } else if (props.ui === 'bootstrap') { -%>
1114
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
1215
<% } else if (props.ui === 'ionic') { -%>
1316
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
@@ -35,7 +38,10 @@ import { LoginModule } from './login/login.module';
3538
FormsModule,
3639
HttpModule,
3740
TranslateModule.forRoot(),
38-
<% if (props.ui === 'bootstrap') { -%>
41+
<% if (props.ui === 'material') { -%>
42+
BrowserAnimationsModule,
43+
MaterialModule,
44+
<% } else if (props.ui === 'bootstrap') { -%>
3945
NgbModule.forRoot(),
4046
<% } else if (props.ui === 'ionic') { -%>
4147
IonicModule.forRoot(AppComponent, {locationStrategy: 'path'}),

‎generators/app/templates/src/app/about/__material.about.component.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="app-content text-center">
2+
<h1>
3+
<span translate>APP_NAME</span>
4+
</h1>
5+
<p>
6+
<i class="fa fa-bookmark-o"></i> <span translate>Version</span> {{version}}
7+
</p>
8+
</div>

‎generators/app/templates/src/app/core/_core.module.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { HttpModule, Http, XHRBackend, ConnectionBackend, RequestOptions } from
55
import { TranslateModule } from '@ngx-translate/core';
66
<% if (props.ui === 'bootstrap') { -%>
77
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
8+
<% } else if (props.ui === 'material') { -%>
9+
import { MaterialModule } from './../material.module';
810
<% } else if (props.ui === 'ionic') { -%>
911
import { IonicModule } from 'ionic-angular';
1012
<% } -%>
1113

1214
import { ShellComponent } from './shell/shell.component';
13-
<% if (props.ui === 'bootstrap') { -%>
15+
<% if (props.ui === 'bootstrap' || props.ui === 'material') { -%>
1416
import { HeaderComponent } from './shell/header/header.component';
1517
<% } -%>
1618
<% if (props.auth) { -%>
@@ -34,6 +36,8 @@ export function createHttpService(backend: ConnectionBackend,
3436
TranslateModule,
3537
<% if (props.ui === 'bootstrap') { -%>
3638
NgbModule,
39+
<% } else if (props.ui === 'material') { -%>
40+
MaterialModule,
3741
<% } else if (props.ui === 'ionic') { -%>
3842
IonicModule,
3943
<% } -%>
@@ -45,7 +49,7 @@ export function createHttpService(backend: ConnectionBackend,
4549
],
4650
<% } -%>
4751
declarations: [
48-
<% if (props.ui === 'bootstrap') { -%>
52+
<% if (props.ui === 'bootstrap' || props.ui === 'material') { -%>
4953
HeaderComponent,
5054
<% } -%>
5155
ShellComponent

‎generators/app/templates/src/app/core/shell/__material.shell.component.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<app-header></app-header>
2+
<router-outlet></router-outlet>

‎generators/app/templates/src/app/core/shell/__material.shell.component.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-shell',
5+
templateUrl: './shell.component.html',
6+
styleUrls: ['./shell.component.scss']
7+
})
8+
export class ShellComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() { }
13+
14+
}

‎generators/app/templates/src/app/core/shell/header/__material._header.component.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<mat-toolbar class="mat-elevation-z6 navbar" color="primary">
2+
<span><a class="toolbar-brand" href="https://github.com/ngx-rocket" translate>APP_NAME</a></span>
3+
<span class="example-spacer"></span>
4+
<button mat-button routerLink="/home" routerLinkActive="active">
5+
<i class="fa fa-home"></i>
6+
<span translate>Home</span>
7+
</button>
8+
<button mat-button routerLink="/about" routerLinkActive="active">
9+
<i class="fa fa-question-circle"></i>
10+
<span translate>About</span>
11+
</button>
12+
<button mat-button [matMenuTriggerFor]="langMenu">
13+
{{currentLanguage}}
14+
</button>
15+
<mat-menu #langMenu="matMenu">
16+
<button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">
17+
{{language}}
18+
</button>
19+
</mat-menu>
20+
<% if (props.auth) { -%>
21+
<button mat-icon-button [matMenuTriggerFor]="userMenu">
22+
<i class="fa fa-user-circle"></i>
23+
</button>
24+
<mat-menu #userMenu="matMenu">
25+
<mat-list>
26+
<mat-list-item><span translate>Logged in as</span>&nbsp;<b>{{username}}</b></mat-list-item>
27+
</mat-list>
28+
<button mat-menu-item (click)="logout()" translate>Logout</button>
29+
</mat-menu>
30+
<% } -%>
31+
</mat-toolbar>

‎generators/app/templates/src/app/core/shell/header/__material._header.component.spec.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { MaterialModule } from './../../../material.module';
3+
import { TranslateModule } from '@ngx-translate/core';
4+
import { RouterTestingModule } from '@angular/router/testing';
5+
6+
<% if (props.auth) { -%>
7+
import { AuthenticationService } from '../../authentication/authentication.service';
8+
import { MockAuthenticationService } from '../../authentication/authentication.service.mock';
9+
<% } -%>
10+
import { I18nService } from '../../i18n.service';
11+
import { HeaderComponent } from './header.component';
12+
13+
describe('HeaderComponent', () => {
14+
let component: HeaderComponent;
15+
let fixture: ComponentFixture<HeaderComponent>;
16+
17+
beforeEach(async(() => {
18+
TestBed.configureTestingModule({
19+
imports: [
20+
RouterTestingModule,
21+
MaterialModule,
22+
TranslateModule.forRoot()
23+
],
24+
declarations: [HeaderComponent],
25+
providers: [
26+
<% if (props.auth) { -%>
27+
{ provide: AuthenticationService, useClass: MockAuthenticationService },
28+
<% } -%>
29+
I18nService
30+
]
31+
})
32+
.compileComponents();
33+
}));
34+
35+
beforeEach(() => {
36+
fixture = TestBed.createComponent(HeaderComponent);
37+
component = fixture.componentInstance;
38+
fixture.detectChanges();
39+
});
40+
41+
it('should create', () => {
42+
expect(component).toBeTruthy();
43+
});
44+
});

‎generators/app/templates/src/app/core/shell/header/__material._header.component.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Component, OnInit } from '@angular/core';
2+
<% if (props.auth) { -%>
3+
import { Router } from '@angular/router';
4+
5+
import { AuthenticationService } from '../../authentication/authentication.service';
6+
<% } else { -%>
7+
8+
<% } -%>
9+
import { I18nService } from '../../i18n.service';
10+
11+
@Component({
12+
selector: 'app-header',
13+
templateUrl: './header.component.html',
14+
styleUrls: ['./header.component.scss']
15+
})
16+
export class HeaderComponent implements OnInit {
17+
18+
menuHidden = true;
19+
langMenu: Object;
20+
userMenu: Object;
21+
22+
<% if (props.auth) { -%>
23+
constructor(private router: Router,
24+
private authenticationService: AuthenticationService,
25+
private i18nService: I18nService) { }
26+
<% } else { -%>
27+
constructor(private i18nService: I18nService) { }
28+
<% } -%>
29+
30+
ngOnInit() { }
31+
32+
toggleMenu() {
33+
this.menuHidden = !this.menuHidden;
34+
}
35+
36+
setLanguage(language: string) {
37+
this.i18nService.language = language;
38+
}
39+
40+
<% if (props.auth) { -%>
41+
logout() {
42+
this.authenticationService.logout()
43+
.subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
44+
}
45+
46+
<% } -%>
47+
get currentLanguage(): string {
48+
return this.i18nService.language;
49+
}
50+
51+
get languages(): string[] {
52+
return this.i18nService.supportedLanguages;
53+
}
54+
55+
<% if (props.auth) { -%>
56+
get username(): string {
57+
const credentials = this.authenticationService.credentials;
58+
return credentials ? credentials.username : null;
59+
}
60+
61+
<% } -%>
62+
}

‎generators/app/templates/src/app/core/shell/header/__material.header.component.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import "src/theme/theme-variables";
2+
3+
.navbar {
4+
position: sticky;
5+
}
6+
7+
.toolbar-brand {
8+
color: #fff;
9+
text-decoration: none;
10+
}
11+
12+
.example-spacer {
13+
flex: 1 1 auto;
14+
}

‎generators/app/templates/src/app/home/__material.home.component.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="app-content text-center">
2+
<h1>
3+
<img class="logo" src="assets/ngx-rocket-logo.png" alt="angular logo" />
4+
<span translate>Hello world !</span>
5+
</h1>
6+
<app-loader [isLoading]="isLoading"></app-loader>
7+
<q [hidden]="isLoading" class="text-center">{{quote}}</q>
8+
</div>

‎generators/app/templates/src/app/home/_home.component.spec.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
22
import { Http, BaseRequestOptions } from '@angular/http';
33
import { MockBackend } from '@angular/http/testing';
4-
<% if (props.ui === 'ionic') { -%>
4+
<% if (props.ui === 'material') { -%>
5+
import { MaterialModule } from './../material.module';
6+
<% } else if (props.ui === 'ionic') { -%>
57
import { IonicModule } from 'ionic-angular';
68
<% } -%>
79

@@ -16,7 +18,9 @@ describe('HomeComponent', () => {
1618
beforeEach(async(() => {
1719
TestBed.configureTestingModule({
1820
imports: [
19-
<% if (props.ui === 'ionic') { -%>
21+
<% if (props.ui === 'material') { -%>
22+
MaterialModule,
23+
<% } else if (props.ui === 'ionic') { -%>
2024
IonicModule.forRoot(HomeComponent),
2125
<% } -%>
2226
SharedModule

‎generators/app/templates/src/app/home/_home.module.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { TranslateModule } from '@ngx-translate/core';
4-
<% if (props.ui === 'ionic') { -%>
4+
<% if (props.ui === 'material') { -%>
5+
import { MaterialModule } from './../material.module';
6+
<% } else if (props.ui === 'ionic') { -%>
57
import { IonicModule } from 'ionic-angular';
68
<% } -%>
79

@@ -17,7 +19,9 @@ import { QuoteService } from './quote.service';
1719
TranslateModule,
1820
CoreModule,
1921
SharedModule,
20-
<% if (props.ui === 'ionic') { -%>
22+
<% if (props.ui === 'material') { -%>
23+
MaterialModule,
24+
<% } else if (props.ui === 'ionic') { -%>
2125
IonicModule,
2226
<% } -%>
2327
HomeRoutingModule

0 commit comments

Comments
 (0)