feat: add share module, add header toolbar

.angular-cli.json

@@ -17,7 +17,7 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
+      "prefix": "anms",
       "styles": [
         "styles.scss"
       ],

src/app/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: []
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,5 +1,28 @@
+<md-toolbar color="primary" class="toolbar">
+  <span>Angular NGrx Material Starter</span>
+  <span class="spacer"></span>
+  <button md-button>About</button>
+  <button md-button>Features</button>
+  <button md-button>Examples</button>
+  <button md-icon-button [mdMenuTriggerFor]="toolbarMenu">
+    <md-icon>more_vert</md-icon>
+  </button>
+  <md-menu #toolbarMenu="mdMenu">
+    <button md-menu-item>
+      <md-icon>person</md-icon>
+      <span>Manage account</span>
+    </button>
+    <button md-menu-item>
+      <md-icon>settings</md-icon>
+      <span>Settings</span>
+    </button>
+    <button md-menu-item>
+      <md-icon>power_settings_new</md-icon>
+      <span>Logout</span>
+    </button>
+  </md-menu>
+</md-toolbar>
 <h1>
   {{title}}
-
-  <button md-raised-button>Raised button</button>
 </h1>
+<router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,12 @@
+
+
+.toolbar{
+
+  button {
+    margin: 0 10px 0 0;
+  }
+
+  .spacer {
+    flex: 1 1 auto;
+  }
+}

src/app/app.component.spec.ts

@@ -1,10 +1,16 @@
 import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
+import { SharedModule } from './shared/shared.module';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        SharedModule
+      ],
       declarations: [
         AppComponent
       ],
@@ -17,16 +23,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app works!'`, async(() => {
+  it(`should have as title 'anms works!'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
+    expect(app.title).toEqual('anms works!');
   }));
 
   it('should render title in a h1 tag', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+    expect(compiled.querySelector('h1').textContent).toContain('anms works!');
   }));
 });

src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+  selector: 'anms-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app works!';
+  title = 'anms works!';
 }

src/app/app.module.ts

@@ -1,21 +1,20 @@
-import 'hammerjs';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdButtonModule } from '@angular/material';
 
+import { SharedModule } from './shared/shared.module';
 
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 @NgModule({
   imports: [
+    BrowserAnimationsModule,
     BrowserModule,
-    FormsModule,
     HttpModule,
-    BrowserAnimationsModule,
-    MdButtonModule
+    AppRoutingModule,
+    SharedModule
   ],
   declarations: [
     AppComponent

src/app/core/core.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: []
+})
+export class CoreModule { }

src/app/shared/shared.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule  } from '@angular/forms';
+import {
+  MdButtonModule,
+  MdToolbarModule,
+  MdMenuModule,
+  MdIconModule
+} from '@angular/material';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+
+    MdButtonModule,
+    MdToolbarModule,
+    MdMenuModule,
+    MdIconModule
+  ],
+  declarations: [],
+  exports: [
+    CommonModule,
+    FormsModule,
+
+    MdButtonModule,
+    MdMenuModule,
+    MdToolbarModule,
+    MdIconModule
+  ]
+})
+export class SharedModule { }

src/index.html

@@ -10,6 +10,6 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-  <app-root>Loading...</app-root>
+  <anms-root>Loading...</anms-root>
 </body>
 </html>

src/reset.scss

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

src/styles.scss

@@ -1,2 +1,26 @@
-/* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import 'reset.scss';
+
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$anms-primary: mat-palette($mat-amber);
+$anms-accent:  mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$anms-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$anms-theme: mat-light-theme($anms-primary, $anms-accent, $anms-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($anms-theme);

tslint.json

@@ -105,13 +105,13 @@
     "directive-selector": [
       true,
       "attribute",
-      "app",
+      "anms",
       "camelCase"
     ],
     "component-selector": [
       true,
       "element",
-      "app",
+      "anms",
       "kebab-case"
     ],
     "use-input-property-decorator": true,