styles(app): update overall app styles (#659)

Author: MarkPieszak

src/app/app.component.ts

@@ -3,13 +3,41 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-  <h1>Universal Demo using Angular and Angular CLI</h1>
-  <a routerLink="/">Home</a>
-  <a routerLink="/lazy">Lazy</a>
-  <a routerLink="/lazy/nested">Lazy_Nested</a>
-  <router-outlet></router-outlet>
+  <div class="app-container">
+    <h1>Angular Universal Demo utilizing Angular & Angular CLI</h1>
+    <nav class="nav-links">
+      <a routerLink="/">Home</a>
+      <a routerLink="/lazy">Lazy-loaded Route</a>
+      <a routerLink="/lazy/nested">Nested Routes work too</a>
+    </nav>
+    <div class="router-container">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
   `,
-  styles: []
+  styles: [`
+    :host {
+      background: #f1f1f1;
+      font-family: Roboto,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+      font-display: swap;
+    }
+    .nav-links {
+      background: #008591;
+    }
+    .nav-links a {
+      color: #fff;
+      display: inline-block;
+      padding: 1rem;
+      margin-right: 3rem;
+      text-decoration: none;
+      font-weight: bold;
+      letter-spacing: 0.1rem;
+    }
+    .router-container {
+      border: 0.5rem #00afc4 solid;
+      padding: 2rem;
+    }
+  `]
 })
 export class AppComponent {
 

src/app/app.module.ts

@@ -2,8 +2,8 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 
-import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
+import {AppComponent} from './app.component';
+import {HomeComponent} from './home/home.component';
 import {TransferHttpCacheModule} from '@nguniversal/common';
 
 @NgModule({

src/app/home/home.component.ts

@@ -1,15 +1,16 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  template: `<h3>{{ message }}</h3>`
+  template: `
+    <h3>{{ message }}</h3>
+    <img [src]="image">
+  `
 })
-export class HomeComponent implements OnInit {
-  public message: string;
+export class HomeComponent {
+  public message = `Angular Universal`;
+  // tslint:disable-next-line:max-line-length
+  public image = 'https://camo.githubusercontent.com/81f72f2fdf98aa1d30b5b215bc8ca9420b249e81/68747470733a2f2f616e67756c61722e696f2f67656e6572617465642f696d616765732f6d61726b6574696e672f636f6e636570742d69636f6e732f756e6976657273616c2e706e67';
 
   constructor() {}
-
-  ngOnInit() {
-    this.message = 'Hello';
-  }
 }

src/app/lazy/lazy.module.ts

@@ -3,7 +3,12 @@ import {RouterModule} from '@angular/router';
 
 @Component({
   selector: 'app-lazy-view',
-  template: `<h3>i'm lazy</h3>`
+  template: `
+    <h3>This is content from a lazy-loaded route</h3>
+    <div>Check your Networks tab to see that the js file got loaded</div>
+    <br>
+    <div><em>/lazy/nested/</em> routes to the same page</div>
+  `
 })
 export class LazyComponent {}