02 01b

.gitignore

@@ -3,4 +3,5 @@ typings
 app/**/*.js
 app/**/*.js.map
 npm-debug.log*
-.DS_store
+.DS_store
+.idea

README.md

@@ -1,51 +1,4 @@
-# Angular 2 Essential Training
+# UPDATE
+The repository for the **Angular Essential Training** course can be found at https://github.com/coursefiles/angular2-essential-training.  
 
-This is the repository for my course, [Angular 2 Essential Training](https://www.lynda.com/AngularJS-tutorials/AngularJS-2-Essential-Training/422834-2.html). 
-The full course is available at [lynda.com](https://lynda.com).  
-
-## Course Description
-
-JavaScript frameworks help you code more quickly, by providing special functionality for developing specific types of web projects. Angular was designed by Google to address challenges programmers face building single-page applications. This course introduces you to the essentials of this "superheroic" framework, including declarative templates, two-way data binding, and dependency injection. Justin Schwartzenberger steps through the framework one feature at a time, focusing on the new component-based architecture of Angular 2. After completing this training, you'll be able to tackle the other project-based courses in our library and create your own Angular app.
-
-Topics include:
-- What is Angular?
-- Setting up an Angular template
-- Creating a component
-- Displaying data
-- Working with events
-- Using two-way data binding
-- Creating a subcomponent
-- Using the built-in HTTP module
-- Using the built-in router module
-
-## Instructions
-
-1. Make sure you have these installed
-  - [node.js](http://nodejs.org/)
-  - [git](http://git-scm.com/)
-
-2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) 
-
-    `git clone https://github.com/LyndaExerciseFiles/angular2-essential-training.git`
-
-3. CD to the folder
-
-    `cd angular2-essential-training`
-
-4. Run the following to install the project dependencies:
-
-    `npm install`
-
-5. Run the npm start command to build the code, watch for file changes, and serve up the site locally:
-
-    `npm start`
-
-Note that the site will run using `lite-server` and will be served up at the following local address:  
-    http://localhost:3000
-
-*If you use a code editor that launches its own web server please note that it may run on a different port number. 
-You will want to use `npm start` for this project.*
-
-## More Stuff
-Check out some of my [other courses on lynda.com](https://lynda.com/justinschwartzenberger). 
-You can also [follow me on twitter](https://twitter.com/schwarty), or read [my blog](http://schwarty.com).
+*This is the old location of the code and is no longer being maintained*

app/app.component.css

@@ -0,0 +1,30 @@
+:host {
+  display: flex;
+  font-family: Arial, Helvetica, sans-serif;
+  min-height: 100%;
+}
+nav {
+  display: flex;
+  flex-direction: column;
+  width: 68px;
+  background-color: #53ace4;
+}
+nav .icon {
+  width: 48px;
+  height: 48px;
+  margin: 10px;
+}
+section {
+  width: 100%;
+  background-color: #32435b;
+}
+section > header {
+  color: #ffffff;
+  padding: 10px;
+}
+section > header > h1 {
+  font-size: 2em;
+}
+section > header .description {
+  font-style: italic;
+}

app/app.component.html

@@ -0,0 +1,18 @@
+<nav>
+  <a routerLink="/">
+    <img src="media/04.png" class="icon" />
+  </a>
+  <a routerLink="/Movies">
+    <img src="media/03.png" class="icon" />
+  </a>
+  <a routerLink="/Series">
+    <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>
+</section>

app/app.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mw-app',
+  templateUrl: 'app/app.component.html',
+  styleUrls: ['app/app.component.css']
+})
+export class AppComponent { }

app/app.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HttpModule, XHRBackend } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { MediaItemComponent } from './media-item.component';
+import { MediaItemListComponent } from './media-item-list.component';
+import { FavoriteDirective } from './favorite.directive';
+import { CategoryListPipe } from './category-list.pipe';
+import { MediaItemFormComponent } from './media-item-form.component';
+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,
+    HttpModule,
+    routing
+  ],
+  declarations: [
+    AppComponent,
+    MediaItemComponent,
+    MediaItemListComponent,
+    FavoriteDirective,
+    CategoryListPipe,
+    MediaItemFormComponent
+  ],
+  providers: [
+    MediaItemService,
+    { provide: lookupListToken, useValue: lookupLists },
+    { provide: XHRBackend, useClass: MockXHRBackend }
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule {}

app/app.routing.ts

@@ -0,0 +1,12 @@
+import { Routes, RouterModule } from '@angular/router';
+
+import { MediaItemFormComponent } from './media-item-form.component';
+import { MediaItemListComponent } from './media-item-list.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

@@ -0,0 +1,16 @@
+import { Pipe } from '@angular/core';
+
+@Pipe({
+  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(', ');
+  }
+}

app/favorite.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+
+@Directive({
+  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;
+  }
+}

app/main.ts

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

app/media-item-form.component.css

@@ -0,0 +1,52 @@
+:host {
+  display: block;
+  padding: 10px;
+}
+ul {
+  list-style-type: none;
+}
+ul li {
+  margin: 10px 0;
+}
+header, label {
+  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;
+}
+.ng-invalid:not(form):not(.ng-pristine):not(.required-invalid) {
+  border: 1px solid #d93a3e;
+}
+input[required].ng-invalid {
+  border-right: 5px solid #d93a3e;
+}
+input[required]:not(.required-invalid),
+input[required].ng-invalid:not(.required-invalid) {
+  border-right: 5px solid #37ad79;
+}
+.error {
+  color: #d93a3e;
+}
+#year {
+  width: 50px;
+}
+button[type=submit] {
+  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;
+}

app/media-item-form.component.html

@@ -0,0 +1,44 @@
+<header>
+  <h2>Add Media to Watch</h2>
+</header>
+<form
+  [formGroup]="form"
+  (ngSubmit)="onSubmit(form.value)">
+  <ul>
+    <li>
+      <label for="medium">Medium</label>
+      <select name="medium" id="medium" formControlName="medium">
+        <option *ngFor="let medium of lookupLists.mediums" value="{{medium}}">{{medium}}</option>
+      </select>
+    </li>
+    <li>
+      <label for="name">Name</label>
+      <input type="text" name="name" id="name" formControlName="name">
+      <div *ngIf="form.controls.name.errors?.pattern" class="error">
+        Name has invalid characters
+      </div>
+    </li>
+    <li>
+      <label for="category">Category</label>
+      <select name="category" id="category" formControlName="category">
+        <option value="Action">Action</option>
+        <option value="Science Fiction">Science Fiction</option>
+        <option value="Comedy">Comedy</option>
+        <option value="Drama">Drama</option>
+        <option value="Horror">Horror</option>
+        <option value="Romance">Romance</option>
+      </select>
+    </li>
+    <li>
+      <label for="year">Year</label>
+      <input type="text" name="year" id="year" maxlength="4" formControlName="year">
+      <div *ngIf="form.controls.year.errors?.year" class="error">
+        Must be between 
+        {{form.controls.year.errors?.year.min}} 
+        and 
+        {{form.controls.year.errors?.year.max}}
+      </div>
+    </li>
+  </ul>
+  <button type="submit" [disabled]="!form.valid">Save</button>
+</form>

app/media-item-form.component.ts

@@ -0,0 +1,59 @@
+import { Component, Inject } from '@angular/core';
+import { Validators, FormBuilder } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { MediaItemService } from './media-item.service';
+import { lookupListToken } from './providers';
+
+@Component({
+  selector: 'mw-media-item-form',
+  templateUrl: 'app/media-item-form.component.html',
+  styleUrls: ['app/media-item-form.component.css']
+})
+export class MediaItemFormComponent {
+  form;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private mediaItemService: MediaItemService,
+    @Inject(lookupListToken) public lookupLists,
+    private router: Router) {}
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      medium: this.formBuilder.control('Movies'),
+      name: this.formBuilder.control('', Validators.compose([
+        Validators.required,
+        Validators.pattern('[\\w\\-\\s\\/]+')
+      ])),
+      category: this.formBuilder.control(''),
+      year: this.formBuilder.control('', this.yearValidator),
+    });
+  }
+
+  yearValidator(control) {
+    if (control.value.trim().length === 0) {
+      return null;
+    }
+    let year = parseInt(control.value);
+    let minYear = 1800;
+    let maxYear = 2500;
+    if (year >= minYear && year <= maxYear) {
+      return null;
+    } else {
+      return {
+        'year': {
+          min: minYear,
+          max: maxYear
+        }
+      };
+    }
+  }
+
+  onSubmit(mediaItem) {
+    this.mediaItemService.add(mediaItem)
+      .subscribe(() => {
+        this.router.navigate(['/', mediaItem.medium]);
+      });
+  }
+}