After services post

app/application.ts

@@ -1,5 +1,5 @@
-import {bootstrap} from 'angular2/platform/browser';
-import {Component} from 'angular2/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {Component} from '@angular/core';
 import {UserService} from './services/user.service';
 import {KlassService} from './services/klass.service';
 import {FooterComponent} from './components/footer.component';
@@ -14,7 +14,6 @@ import {KlassComponent} from './components/klass.component';
     <footer></footer>`,
   directives: [ContentComponent, FooterComponent]
 })
-
 export class AppComponent{}
 
 bootstrap(AppComponent, [UserService, KlassService])

app/components/content.component.ts

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {HeaderComponent} from './header.component';
 import {LoginComponent} from './login.component';
 import {KlassesComponent} from './klasses.component';

app/components/footer.component.ts

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'footer',

app/components/header.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, Output, EventEmitter} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {UserService} from '../services/user.service';
 import {User} from '../models/user';
 

app/components/klass.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, Output, EventEmitter} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {KlassService} from '../services/klass.service';
 import {Klass} from '../models/klass';
 

app/components/klasses.component.ts

@@ -1,11 +1,11 @@
-import {Component, Output, EventEmitter} from 'angular2/core';
+import {Component, Output, EventEmitter} from '@angular/core';
 import {KlassService} from '../services/klass.service';
 import {Klass} from '../models/klass';
 
 @Component({
   selector: 'klasses',
   template: `
-    <div *ngFor="#klass of klassService.getAvailableClasses()">
+    <div *ngFor="#klass of _klassService.getAvailableClasses()">
       <img [src]='klass.poster' class="u-pull-left"/>
       <strong>{{klass.title}}</strong><br>
       <small>By: {{klass.instructor}}</small>
@@ -16,7 +16,7 @@ import {Klass} from '../models/klass';
 })
 export class KlassesComponent{
   @Output() classSelected = new EventEmitter();
-  constructor(private klassService: KlassService) {}
+  constructor(private _klassService: KlassService) {}
 
   goToClass(klass){
     this.classSelected.emit(klass);

app/components/login.component.ts

@@ -1,4 +1,4 @@
-import {Component, Output, EventEmitter} from 'angular2/core';
+import {Component, Output, EventEmitter} from '@angular/core';
 import {UserService} from '../services/user.service';
 
 @Component({

app/services/klass.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {Klass} from '../models/klass';
 
 var AVAILABLR_CLASSES: Klass[] = [{

app/services/user.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {User} from '../models/user';
 
 var GUEST: User ={ email: '[email protected]', name: "Guest User", loggedIn: false};

index.html

@@ -11,25 +11,13 @@
 
     <!-- IE polyfills -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
-
-    <script src="node_modules/angular2/bundles/angular2-polyfills.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.src.js"></script>
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
 
+    <script src="systemjs.config.js"></script>
     <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/application').then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err);  });
     </script>
   </body>
 </html>

package.json

@@ -18,17 +18,29 @@
   "author": "Abdulmalek Al-Gahmi",
   "license": "ISC",
   "dependencies": {
-    "angular2": "^2.0.0-beta.15",
+    "@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",
+    "@angular/upgrade":  "2.0.0-rc.1",
+
+    "systemjs": "0.19.27",
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "^0.1.2",
-    "rxjs": "^5.0.0-beta.2",
-    "systemjs": "^0.19.26",
-    "zone.js": "^0.6.12"
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "^0.6.12",
+
+    "angular2-in-memory-web-api": "0.0.7",
+    "bootstrap": "^3.3.6"
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
     "lite-server": "^2.2.0",
     "typescript": "^1.8.10",
-    "typings": "^0.8.1"
+    "typings":"^0.8.1"
   }
 }