Merge branch '07_03b' into 07_04b

app/app.component.css

@@ -1,6 +1,6 @@
 :host {
-    display: flex;
-    font-family: Arial, Helvetica, sans-serif;
+  display: flex;
+  font-family: Arial, Helvetica, sans-serif;
 }
 nav {
     display: flex;
@@ -15,16 +15,16 @@ nav .icon {
     margin: 10px;
 }
 section {
-    width: 100%;
-    background-color: #32435b;
+  width: 100%;
+  background-color: #32435b;
 }
 section > header {
-    color: #ffffff;
-    padding: 10px;
+  color: #ffffff;
+  padding: 10px;
 }
 section > header > h1 {
-    font-size: 2em;
+  font-size: 2em;
 }
 section > header .description {
-    font-style: italic;
+  font-style: italic;
 }

app/app.component.html

@@ -1,18 +1,18 @@
 <nav>
-    <a>
-        <img src="media/04.png" class="icon" />
-    </a>
-    <a>
-        <img src="media/03.png" class="icon" />
-    </a>
-    <a>
-        <img src="media/02.png" class="icon" />
-    </a>
+  <a>
+    <img src="media/04.png" class="icon" />
+  </a>
+  <a>
+    <img src="media/03.png" class="icon" />
+  </a>
+  <a>
+    <img src="media/02.png" class="icon" />
+  </a>
 </nav>
 <section>
-    <header>
-        <h1>Media Watch List</h1>
-        <p class="description">Keeping track of the media I want to watch.</p>
-    </header>
-    <router-outlet></router-outlet>
+  <header>
+    <h1>Media Watch List</h1>
+    <p class="description">Keeping track of the media I want to watch.</p>
+  </header>
+  <router-outlet></router-outlet>
 </section>

app/app.component.ts

@@ -1,17 +1,8 @@
-import {Component} from 'angular2/core';
-import {MediaItemListComponent} from './media-item-list.component';
-import {MediaItemFormComponent} from './media-item-form.component';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import { Component } from '@angular/core';
 
-@RouteConfig([
-    { path: '/:medium', component: MediaItemListComponent, name: 'List' },
-    { path: '/add', component: MediaItemFormComponent, name: 'AddMediaItem' }
-])
 @Component({
-    selector: 'media-tracker-app',
-    directives: [ROUTER_DIRECTIVES],
-    templateUrl: 'app/app.component.html',
-    styleUrls: ['app/app.component.css']
+  selector: 'media-tracker-app',
+  templateUrl: 'app/app.component.html',
+  styleUrls: ['app/app.component.css']
 })
-export class AppComponent {
-}
+export class AppComponent { }

app/app.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HTTP_PROVIDERS, XHRBackend } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { MediaItemComponent } from './media-item.component';
+import { MediaItemListComponent } from './media-item-list.component';
+import { MediaItemFormComponent } from './media-item-form.component';
+import { FavoriteDirective } from './favorite.directive';
+import { CategoryListPipe } from './category-list.pipe';
+import { MediaItemService } from './media-item.service';
+import { lookupListToken, lookupLists } from './providers';
+import { MockXHRBackend } from './mock-xhr-backend';
+import { routing } from './app.routing';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    routing
+  ],
+  declarations: [
+    AppComponent,
+    MediaItemComponent,
+    MediaItemListComponent,
+    MediaItemFormComponent,
+    FavoriteDirective,
+    CategoryListPipe
+  ],
+  providers: [
+    MediaItemService,
+    { provide: lookupListToken, useValue: lookupLists },
+    HTTP_PROVIDERS,
+    { provide: XHRBackend, useClass: MockXHRBackend }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

app/app.routing.ts

@@ -0,0 +1,12 @@
+import { Routes, RouterModule } from '@angular/router';
+
+import { MediaItemListComponent } from './media-item-list.component';
+import { MediaItemFormComponent } from './media-item-form.component';
+
+const appRoutes: Routes = [
+  { path: 'add', component: MediaItemFormComponent },
+  { path: ':medium', component: MediaItemListComponent },
+  { path: '', pathMatch: 'full', redirectTo: 'all' }
+];
+
+export const routing = RouterModule.forRoot(appRoutes);

app/category-list.pipe.ts

@@ -1,16 +1,16 @@
-import {Pipe} from 'angular2/core';
+import { Pipe } from '@angular/core';
 
 @Pipe({
-    name: 'categoryList'
+  name: 'categoryList'
 })
 export class CategoryListPipe {
-    transform(mediaItems) {
-        var categories = [];
-        mediaItems.forEach(mediaItem => {
-            if (categories.indexOf(mediaItem.category) <= -1) {
-                categories.push(mediaItem.category);
-            }
-        });
-        return categories.join(', ');
-    }
+  transform(mediaItems) {
+    var categories = [];
+    mediaItems.forEach(mediaItem => {
+      if (categories.indexOf(mediaItem.category) <= -1) {
+        categories.push(mediaItem.category);
+      }
+    });
+    return categories.join(', ');
+  }
 }

app/favorite.directive.ts

@@ -1,24 +1,21 @@
-import {Directive, HostBinding, HostListener, Input} from 'angular2/core';
+import { Directive, HostBinding, HostListener, Input } from '@angular/core';
 
 @Directive({
-    selector: '[mwFavorite]'
+  selector: '[mwFavorite]'
 })
 export class FavoriteDirective {
-    @HostBinding('class.is-favorite') isFavorite = true;
-    @HostBinding('class.is-favorite-hovering') hovering = false;
-
-    @HostListener('mouseenter')
-    onMouseEnter() {
-        this.hovering = true;
-    }
-
-    @HostListener('mouseleave')
-    onMouseLeave() {
-        this.hovering = false;
-    }
-
-    @Input()
-    set mwFavorite(value) {
-        this.isFavorite = value;
-    }
-}
+  @HostBinding('class.is-favorite') isFavorite = true;
+  @HostBinding('class.is-favorite-hovering') hovering = false;
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.hovering = true;
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.hovering = false;
+  }
+
+  @Input() set mwFavorite(value) {
+    this.isFavorite = value;
+  }
+}

app/main.ts

@@ -1,16 +1,5 @@
-import {bootstrap} from 'angular2/platform/browser';
-import {AppComponent} from './app.component';
-import {MediaItemService} from './media-item.service';
-import {provide} from 'angular2/core';
-import {LOOKUP_LISTS, lookupLists} from './providers';
-import {HTTP_PROVIDERS, XHRBackend} from 'angular2/http';
-import {MockXHRBackend} from './mock-xhr-backend';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-bootstrap(AppComponent, [
-        MediaItemService,
-        provide(LOOKUP_LISTS, { useValue: lookupLists }),
-        HTTP_PROVIDERS,
-        provide(XHRBackend, { useClass: MockXHRBackend }),
-        ROUTER_PROVIDERS
-    ]);
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

app/media-item-form.component.css

@@ -1,52 +1,52 @@
 :host {
-    display: block;
-    padding: 10px;
+  display: block;
+  padding: 10px;
 }
 ul {
-    list-style-type: none;
+  list-style-type: none;
 }
 ul li {
-    margin: 10px 0;
+  margin: 10px 0;
 }
 header, label {
-    color: #53ace4;
+  color: #53ace4;
 }
 input, select {
-    background-color: #29394b;
-    color: #c6c5c3;
-    border-radius: 3px;
-    border: none;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
-    border-color: #53ace4;
-    padding: 6px;
+  background-color: #29394b;
+  color: #c6c5c3;
+  border-radius: 3px;
+  border: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
+  border-color: #53ace4;
+  padding: 6px;
 }
 .ng-invalid:not(.ng-pristine):not(.required-invalid) {
-    border: 1px solid #d93a3e;
+  border: 1px solid #d93a3e;
 }
 input[required].ng-invalid {
-    border-right: 5px solid #d93a3e;
+  border-right: 5px solid #d93a3e;
 }
 input[required]:not(.required-invalid),
 input[required].ng-invalid:not(.required-invalid) {
-    border-right: 5px solid #37ad79;
+  border-right: 5px solid #37ad79;
 }
 .error {
-    color: #d93a3e;
+  color: #d93a3e;
 }
 #year {
-    width: 50px;
+  width: 50px;
 }
 button[type=submit] {
-    background-color: #45bf94;
-    border: 0;
-    padding: 10px;
-    font-size: 1em;
-    border-radius: 4px;
-    color: #ffffff;
-    cursor: pointer;
+  background-color: #45bf94;
+  border: 0;
+  padding: 10px;
+  font-size: 1em;
+  border-radius: 4px;
+  color: #ffffff;
+  cursor: pointer;
 }
 button[type=submit]:disabled {
-    background-color: #333;
-    color: #666;
-    cursor: default;
+  background-color: #333;
+  color: #666;
+  cursor: default;
 }