Merge pull request #4 from alisaduncan/routing

Routing

Author: alisaduncan

README.md

@@ -5,7 +5,7 @@ A working version of the application can be found at [https://alisaduncan.github
 
 This project was an opportunity for me to play with Angular, RxJS, and Material. The app calls [JSONPlaceholder](https://jsonplaceholder.typicode.com/) API to retrieve users and POST a new user. The code contains examples on utilizing Angular's HttpClient and corresponding unit tests. Unit tests for the view have been disabled for now.
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.2.7.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.
 
 ## Prerequisites
 

angular.json

@@ -21,7 +21,7 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -122,7 +122,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "css"
+      "styleext": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

package-lock.json

@@ -4,37 +4,37 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --open",
-    "build": "ng build",
+    "start": "ng serve --aot --open",
+    "build": "ng build --prod",
+    "build:docs": "ng build --prod --base-href https://alisaduncan.github.io/tutorial-angular-httpclient/",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.3",
-    "@angular/cdk": "^6.2.0",
-    "@angular/common": "^6.0.3",
-    "@angular/compiler": "^6.0.3",
-    "@angular/core": "^6.0.3",
-    "@angular/flex-layout": "^6.0.0-beta.16",
-    "@angular/forms": "^6.0.3",
-    "@angular/http": "^6.0.3",
-    "@angular/material": "^6.2.1",
-    "@angular/platform-browser": "^6.0.3",
-    "@angular/platform-browser-dynamic": "^6.0.3",
-    "@angular/router": "^6.0.3",
+    "@angular/animations": "^6.1.0",
+    "@angular/cdk": "^6.4.2",
+    "@angular/common": "^6.1.0",
+    "@angular/compiler": "^6.1.0",
+    "@angular/core": "^6.1.0",
+    "@angular/flex-layout": "^6.0.0-beta.17",
+    "@angular/forms": "^6.1.0",
+    "@angular/http": "^6.1.0",
+    "@angular/material": "^6.4.2",
+    "@angular/platform-browser": "^6.1.0",
+    "@angular/platform-browser-dynamic": "^6.1.0",
+    "@angular/router": "^6.1.0",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "rxjs": "^6.0.0",
-    "zone.js": "^0.8.26"
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.3",
-    "@angular-devkit/build-angular": "~0.6.8",
-    "typescript": "~2.7.2",
-    "@angular/cli": "~6.0.8",
-    "@angular/language-service": "^6.0.3",
+    "@angular-devkit/build-angular": "~0.7.0",
+    "@angular/cli": "~6.1.2",
+    "@angular/compiler-cli": "^6.1.0",
+    "@angular/language-service": "^6.1.0",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
@@ -48,6 +48,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1"
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2"
   }
 }

package.json

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

src/app/app-routing.module.ts

@@ -1,20 +1,10 @@
-<div fxLayout="column" fxFlex>
+<div fxLayout="column" fxFlex class="app">
   <mat-toolbar color="primary">
-    Angular HttpClient
+    Angular Sample
   </mat-toolbar>
 
+  <router-outlet></router-outlet>
+</div>
 
-  <mat-nav-list>
-    <mat-list-item *ngFor="let user of users" (click)="selectedUser = user">
-       <mat-icon matListAvatar svgIcon="avatars:{{user.avatar}}" class="avatar"></mat-icon>
-      <h1 mat-line>{{ user.name }}</h1>
-      <h6 mat-line>{{ user.bs }}</h6>
-    </mat-list-item>
-  </mat-nav-list>
-
-  <button mat-fab (click)="openAdminDialog()" class="fab-bottom-right">
-    <mat-icon>add</mat-icon>
-  </button>
 
-</div>
 

src/app/app.component.css

@@ -0,0 +1,4 @@
+.app {
+
+}
+

src/app/app.component.html

@@ -16,7 +16,7 @@ describe('AppComponent', () => {
     }).compileComponents();
   }));
 
-  xit('should create the app', async(() => {
+  it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
@@ -28,10 +28,10 @@ describe('AppComponent', () => {
     expect(app.title).toEqual('app');
   }));
 
-  xit('should render title in a h1 tag', async(() => {
+  xit('should render title in a mat-toolbar', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+    expect(compiled.querySelector('mat-toolbar').textContent).toContain('Angular Sample');
   }));
 });

src/app/app.component.scss

@@ -1,53 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry, MatDialog } from '@angular/material';
-
-import { filter, map } from 'rxjs/operators';
-
-import { UserService } from './user.service';
-import { User } from './user';
-import { DialogComponent } from './dialog/dialog.component';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
-  public users: User[] = [];
-  private selectedUser: User = new User;
-  private name: string;
-  private bs: string;
-
-  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer, private userService: UserService, private dialog: MatDialog) {
-    const avatarsSafeUrl = sanitizer.bypassSecurityTrustResourceUrl('./assets/avatars.svg');
-    iconRegistry.addSvgIconSetInNamespace('avatars', avatarsSafeUrl);
-  }
-
-  public ngOnInit() {
-    this.userService.getUsers().subscribe(
-      users => {
-        this.users = users;
-        this.selectedUser = this.users[0];
-      }
-    );
-  }
-
-  public openAdminDialog() {
-    this.dialog.open(DialogComponent).afterClosed()
-      .subscribe(user => {
-        if (!user.name || !user.bs) {
-          return;
-        }
+export class AppComponent {
 
-        this.users.push({
-          id: this.users.length + 1,
-          name: user.name,
-          bs: user.bs,
-          avatar: 'svg-6'
-        });
-        this.selectedUser = user;
-        this.userService.addUser(user).subscribe();
-      });
-  }
 }