Adjustments to conform to video section 1/2

Author: wardbell

app-styles.css

@@ -120,7 +120,7 @@ md-toolbar.dark {
 }
 
 .md-title-icon > i {
-    background-image: url("favicon.ico");
+    background-image: url("pluralsight.ico");
     background-size: 50%;
     background-repeat: no-repeat;
     background-position: center center;

app/section-01/app.component.ts

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'my-app', // to use me, put <my-app> in index.html
   template: `<h1>Hello {{name}}</h1>`
 })
-export class AppComponent  { name = 'Angular'; }
+export class AppComponent  {
+  name = 'Angular';
+}

app/section-01/app.module.ts

@@ -3,9 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }  from './app.component';
 
+// This decorator describes the class that follows it
 @NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  imports:      [ BrowserModule ], // What stuff do I need?
+  declarations: [ AppComponent ],  // What's in my app?
+  bootstrap:    [ AppComponent ]   // Where do I start?
 })
 export class AppModule { }

app/section-01/main.ts

@@ -1,4 +1,6 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app.module';
 
+// Start here --> AppModule
 platformBrowserDynamic().bootstrapModule(AppModule);

app/section-02/app.component.ts

@@ -1,32 +1,31 @@
 import { Component } from '@angular/core';
 
-// [] means property binding - Component to DOM
-// () means event binding - DOM to Component
+// {{}} interpolation - Component to DOM
+// []   property binding - Component to DOM
+// ()   event binding - DOM to Component
 
 @Component({
-  selector: 'my-app',
+  selector: 'my-app', // to use me, put <my-app> in index.html
   template: `
   <h1>{{name}}</h1>
 
   <fieldset>
+    <!-- <img src={{image}}/> -->
     <!-- <img src="{{image}}"/> -->
     <img [src]="image"/>
   </fieldset>
 
   <fieldset>
+    <label [style.color]="color">Favorite Color</label>
     <button (click)="clicked()">Toggle color</button>
-    <label [style.color]="color">
-      Favorite color:
 
-      <!-- <select #selector (change)="colorChange(selector.value)"> -->
+    <!-- <select #selector (change)="colorChange(selector.value)"> -->
 
-      <select (change)="colorChange($event.target.value)">
-        <option>red</option>
-        <option>blue</option>
-        <option>green</option>
-      </select>
-
-    </label>
+    <select (change)="colorChange($event.target.value)">
+      <option>red</option>
+      <option>blue</option>
+      <option>green</option>
+    </select>
   </fieldset>
   `,
 })

app/section-02/app.module.ts

@@ -3,9 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }  from './app.component';
 
+// This decorator describes the class that follows it
 @NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  imports:      [ BrowserModule ], // What stuff do I need?
+  declarations: [ AppComponent ],  // What's in my app?
+  bootstrap:    [ AppComponent ]   // Where do I start?
 })
 export class AppModule { }

app/section-02/main.ts

@@ -1,4 +1,6 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app.module';
 
+// Start here --> AppModule
 platformBrowserDynamic().bootstrapModule(AppModule);