Chapter 9 upgraded to RC.1. References to angular-upgrade remvoed

chapter_09/app/app.component.ts

@@ -1,12 +1,12 @@
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 import { SHARED_PROVIDERS, SHARED_DIRECTIVES, AuthenticationService } from './shared/shared';
-import { HTTP_PROVIDERS } from 'angular2/http';
-import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, Router } from 'angular2/router';
+import { HTTP_PROVIDERS } from '@angular/http';
+import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, Router, RouteConfig } from '@angular/router-deprecated';
 import { TimerComponent } from './timer/timer';
 import { TasksComponent, TaskEditorComponent } from './tasks/tasks';
-import { FORM_PROVIDERS } from 'angular2/common';
+import { FORM_PROVIDERS } from '@angular/common';
 import { LoginComponent } from './login/login';
-import { AnimationBuilder } from 'angular2/src/animate/animation_builder';
+import { AnimationBuilder } from '@angular/platform-browser/src/animate/animation_builder';
 
 @Component({
   selector: 'pomodoro-app',

chapter_09/app/login/login.component.ts

@@ -1,6 +1,6 @@
-import { Component } from 'angular2/core';
-import { FormBuilder, ControlGroup, Validators, Control } from 'angular2/common';
-import { Router } from 'angular2/router';
+import { Component } from '@angular/core';
+import { FormBuilder, ControlGroup, Validators, Control } from '@angular/common';
+import { Router } from '@angular/router-deprecated';
 import { AuthenticationService } from '../shared/shared';
 
 @Component({

chapter_09/app/main.ts

@@ -1,5 +1,6 @@
 import 'rxjs/add/operator/map';
-import { bootstrap } from 'angular2/platform/browser';
+
+import { bootstrap } from '@angular/platform-browser-dynamic';
 import AppComponent from './app.component';
 
 bootstrap(AppComponent, [])

chapter_09/app/shared/directives/highlight.directive.ts

@@ -1,6 +1,6 @@
-import { Directive, ElementRef } from 'angular2/core';
-import { AnimationBuilder } from 'angular2/src/animate/animation_builder';
-import { CssAnimationBuilder } from 'angular2/src/animate/css_animation_builder';
+import { Directive, ElementRef } from '@angular/core';
+import { AnimationBuilder } from '@angular/platform-browser/src/animate/animation_builder';
+import { CssAnimationBuilder } from '@angular/platform-browser/src/animate/css_animation_builder';
 
 @Directive({
   selector: '.pomodoro-highlight',

chapter_09/app/shared/directives/router-outlet.directive.ts

@@ -3,11 +3,11 @@ import {
   ViewContainerRef,
   DynamicComponentLoader,
   Attribute,
-  Input } from 'angular2/core';
+  Input } from '@angular/core';
 import {
   Router,
   RouterOutlet,
-  ComponentInstruction } from 'angular2/router';
+  ComponentInstruction } from '@angular/router-deprecated';
 import { AuthenticationService } from '../shared';
 
 @Directive({

chapter_09/app/shared/pipes/formatted-time.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from 'angular2/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
   name: 'pomodoroFormattedTime'

chapter_09/app/shared/pipes/queued-only.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from 'angular2/core';
+import { Pipe, PipeTransform } from '@angular/core';
 import { Queueable } from '../shared';
 
 @Pipe({
@@ -8,7 +8,7 @@ import { Queueable } from '../shared';
 export default class QueuedOnlyPipe implements PipeTransform {
   transform(queueableItems: Queueable[], ...args: any[]): Queueable[] {
     return queueableItems.filter((queueableItem: Queueable) => {
-      return queueableItem.queued === args[0]
+      return queueableItem.queued === args[0];
     });
   }
 }

chapter_09/app/shared/services/authentication.service.ts

@@ -1,10 +1,12 @@
-import { Injectable, EventEmitter } from 'angular2/core';
+import { Injectable, EventEmitter } from '@angular/core';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import 'rxjs/add/operator/map';
 
 @Injectable()
 export default class AuthenticationService {
   userIsloggedIn: EventEmitter<boolean>;
 
-  constructor() {
+  constructor(public http: Http) {
     this.userIsloggedIn = new EventEmitter();
   }
 
@@ -15,6 +17,7 @@ export default class AuthenticationService {
       // @NOTE: In a normal case scenario this check should
       // be performed against a web service, which would return
       // the session token upon validating the user successfully
+      // Please refer to {@link httpLogin()}.
       if (username === '[email protected]' &&
         password === 'letmein') {
         validCredentials = true;
@@ -26,6 +29,32 @@ export default class AuthenticationService {
     });
   }
 
+  httpLogin(credentials): Promise<boolean> {
+    return new Promise(resolve => {
+
+      const url = '/api/authentication'; // Or your own API Auth url
+      const body = JSON.stringify(credentials);
+      const headers = new Headers({ 'Content-Type': 'application/json' });
+      const options = new RequestOptions({ headers: headers });
+
+      this.http.post(url, body, options)
+        .map(response => response.json())
+        .subscribe(authResponse => {
+            let validCredentials: boolean = false;
+
+            if(authResponse && authResponse.token) {
+              validCredentials = true;
+              window.sessionStorage.setItem('token', authResponse.token);
+            }
+
+            this.userIsloggedIn.emit(validCredentials);
+            resolve(validCredentials);
+          },
+          error => console.log(error)
+        );
+    });
+  }
+
   logout(): Promise<boolean> {
     return new Promise(resolve => {
       window.sessionStorage.removeItem('token');

chapter_09/app/shared/services/settings.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from 'angular2/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export default class SettingsService {

chapter_09/app/shared/services/task.service.ts

@@ -1,7 +1,8 @@
-import { Injectable } from 'angular2/core';
-import { Http, Response } from 'angular2/http';
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import { Task } from '../shared';
+import 'rxjs/add/operator/map'; 
 
 @Injectable()
 export default class TaskService {

chapter_09/app/tasks/task-editor.component.ts

@@ -1,13 +1,13 @@
-import { Component } from 'angular2/core';
-import { Title } from 'angular2/platform/browser';
+import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import {
   Router,
   ROUTER_DIRECTIVES,
   ComponentInstruction,
   CanActivate,
   OnActivate,
   CanDeactivate,
-OnDeactivate } from 'angular2/router';
+  OnDeactivate } from '@angular/router-deprecated';
 import { Task, TaskService, AuthenticationService } from '../shared/shared';
 
 @Component({

chapter_09/app/tasks/task-icons.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from 'angular2/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Task } from '../shared/shared';
 
 @Component({

chapter_09/app/tasks/task-tooltip.directive.ts

@@ -1,5 +1,5 @@
 import { Task } from '../shared/shared';
-import { Input, Directive, HostListener } from 'angular2/core';
+import { Input, Directive, HostListener } from '@angular/core';
 
 @Directive({
   selector: '[task]'

chapter_09/app/tasks/tasks.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from 'angular2/core';
+import { Component, OnInit } from '@angular/core';
 import TaskIconsComponent from './task-icons.component';
 import TaskTooltipDirective from './task-tooltip.directive';
 import {
@@ -8,7 +8,7 @@ import {
   SHARED_PIPES,
   SHARED_DIRECTIVES
 } from '../shared/shared';
-import { Router } from 'angular2/router';
+import { Router } from '@angular/router-deprecated';
 
 @Component({
   selector: 'pomodoro-tasks',

chapter_09/app/timer/timer-widget.component.ts

@@ -1,12 +1,13 @@
-import { Component, OnInit, ElementRef } from 'angular2/core';
-import { RouteParams, CanReuse, OnReuse } from 'angular2/router';
+import { Component, OnInit, ElementRef } from '@angular/core';
+import { RouteParams, CanReuse, OnReuse } from '@angular/router-deprecated';
 import { SettingsService, TaskService } from '../shared/shared';
-import { AnimationBuilder } from 'angular2/src/animate/animation_builder';
-import { CssAnimationBuilder } from 'angular2/src/animate/css_animation_builder';
+import { AnimationBuilder } from '@angular/platform-browser/src/animate/animation_builder';
+import { CssAnimationBuilder } from '@angular/platform-browser/src/animate/css_animation_builder';
 
 @Component({
   selector: 'pomodoro-timer-widget',
   styleUrls: ['app/timer/timer-widget.component.css'],
+  providers: [],
   template: `
     <div class="text-center">
       <img src="/app/shared/assets/img/pomodoro.png"

chapter_09/app/timer/timer.component.ts

@@ -1,5 +1,5 @@
-import { Component } from 'angular2/core';
-import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
 import TimerWidgetComponent from './timer-widget.component';
 
 @Component({

chapter_09/index.html

@@ -4,21 +4,15 @@
     <meta charset="utf-8">
     <title>My Angular 2 Pomodoro Application</title>
 
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.js"></script>
-    <script src="node_modules/angular2/bundles/http.js"></script>
-    <script src="node_modules/angular2/bundles/router.js"></script>
+
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          built: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
       System.import ('built/app/main')
         .then(null, console.error.bind(console));
     </script>

chapter_09/package.json

@@ -21,8 +21,18 @@
     "typings": "typings"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.17",
+    "@angular/common":  "2.0.0-rc.1",
+    "@angular/compiler":  "2.0.0-rc.1",
+    "@angular/core":  "2.0.0-rc.1",
+    "@angular/http":  "2.0.0-rc.1",
+    "@angular/platform-browser":  "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
+    "@angular/router":  "2.0.0-rc.1",
+    "@angular/router-deprecated":  "2.0.0-rc.1",
+
     "bootstrap": "^3.3.6",
+
+    "systemjs": "0.19.26",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.6",
@@ -31,7 +41,6 @@
   "devDependencies": {
     "concurrently": "^2.0.0",
     "lite-server": "^2.1.0",
-    "systemjs": "0.19.26",
     "typescript": "1.8.10",
     "typings": "0.8.1"
   }

chapter_09/typings.json

@@ -1,5 +1,5 @@
 {
   "ambientDependencies": {
-    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c"
+    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
   }
 }

chapter_10/package.json

@@ -31,7 +31,6 @@
     "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
     "@angular/router":  "2.0.0-rc.1",
     "@angular/router-deprecated":  "2.0.0-rc.1",
-    "@angular/upgrade":  "2.0.0-rc.1",
 
     "bootstrap": "^3.3.6",