starting point

Author: brandonroberts

db.json

@@ -3,12 +3,15 @@
     {
       "id": "1",
       "name": "Interstellar",
-      "rating": 4.5
+      "description": "Space",
+      "earnings": 25000000
     },
     {
       "id": "2",
       "name": "Inception",
-      "rating": 1.0
+      "description": "I forgot",
+      "earnings": 50000000
     }
-  ]
-}
+  ],
+  "books": []
+}

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "concurrently \"npm run server\" \"ng serve\"",
+    "server": "json-server db.json --watch",
     "build": "ng build",
     "test": "jest",
     "lint": "ng lint",
@@ -18,16 +19,20 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~7.2.0",
+    "@angular/cdk": "~7.3.0",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
     "@angular/forms": "~7.2.0",
+    "@angular/material": "~7.3.0",
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
     "@ngrx/effects": "^7.4.0",
     "@ngrx/entity": "^7.4.0",
+    "@ngrx/router-store": "^7.4.0",
     "@ngrx/store": "^7.4.0",
+    "@ngrx/store-devtools": "^7.4.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

src/app/app-routing.module.ts

@@ -0,0 +1,32 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.nav-link {
+  color: rgba(0,0,0,.54);
+  display: flex;
+  align-items:center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+mat-toolbar {
+  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+  z-index: 1;
+}
+
+mat-toolbar > .mat-mini-fab {
+  margin-right: 10px;
+}
+
+mat-sidenav {
+  box-shadow: 3px 0 6px rgba(0,0,0,.24);
+  width: 200px;
+}
+
+.mat-sidenav-container {
+  background: #f5f5f5;
+  flex: 1;
+}

src/app/app.component.css

@@ -0,0 +1,25 @@
+<mat-toolbar color="primary">
+  <button (click)="sidenav.toggle()" mat-mini-fab><mat-icon>menu</mat-icon></button>
+  <span>
+    {{ title }}
+  </span>
+</mat-toolbar>
+
+<mat-sidenav-container>
+  <mat-sidenav #sidenav mode="side" class="app-sidenav">
+    <nav>
+      <a mat-button
+        class="nav-link"
+        *ngFor="let link of links"
+        [routerLink]="link.path"
+        routerLinkActive="active">
+        <mat-icon>{{link.icon}}</mat-icon>
+        {{link.label}}
+      </a>
+    </nav>
+  </mat-sidenav>
+
+  <div class="app-content">
+    <router-outlet></router-outlet>
+  </div>
+</mat-sidenav-container>

src/app/app.component.html

@@ -1,11 +1,14 @@
 import { Component } from "@angular/core";
 
 @Component({
-  selector: "ngrx-root",
-  template: `
-    <h1>NgRx Workshop Example</h1>
-    <router-outlet></router-outlet>
-  `,
-  styles: []
+  selector: "app-root",
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent {}
+export class AppComponent {
+  title = 'NgRx Workshop';
+  links = [
+    { path: '/movies', icon: 'movie', label: 'Movies'},
+    { path: '/books', icon: 'book', label: 'Books'}
+  ];  
+}

src/app/app.component.ts

@@ -1,23 +1,37 @@
 import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NgModule } from "@angular/core";
+import { RouterModule } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
 import { StoreModule } from "@ngrx/store";
-import { reducers, metaReducers } from "./shared/state";
+import { StoreDevtoolsModule } from "@ngrx/store-devtools";
 import { EffectsModule } from "@ngrx/effects";
+
+import { MaterialModule } from './material.module';
 import { MoviesModule } from "./movies/movies.module";
 
+import { AppComponent } from "./app.component";
+
+import { reducers, metaReducers } from "./shared/state";
+import { BooksModule } from './books/books.module';
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
-    AppRoutingModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    RouterModule.forRoot([
+      { path: '', pathMatch: 'full', redirectTo: '/movies' }
+    ]),
     StoreModule.forRoot(reducers, { metaReducers }),
+    StoreDevtoolsModule.instrument(),
     EffectsModule.forRoot([]),
-    MoviesModule
+    MaterialModule,
+    MoviesModule,
+    BooksModule
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/app.module.ts

@@ -0,0 +1,2 @@
+import { Book } from "src/app/shared/models/book.model";
+import { Action } from "@ngrx/store";

src/app/books/actions/books-api.actions.ts

@@ -0,0 +1,2 @@
+import { Book } from "src/app/shared/models/book.model";
+import { Action } from "@ngrx/store";

src/app/books/actions/books-page.actions.ts

@@ -0,0 +1,4 @@
+import * as BooksPageActions from './books-page.actions';
+import * as BooksApiActions from './books-api.actions';
+
+export { BooksPageActions, BooksApiActions };