updating to angular 2 rc1

Author: jdgarvey

README.md

@@ -9,13 +9,14 @@ This is a simple Angular 2 website using the brand new router. It demonstrates h
 
 
 ```bash
-git clone https://github.com/onehungrymind/fem-ng2-simple-app.git
-cd fem-ng2-simple-app
+git clone https://github.com/simpulton/angular2-website-routes.git
+cd angular2-website-routes
 npm i
+typings install
 npm start
 ```
 
-Then navigate your browser to [http://localhost:8080](http://localhost:8080) and use the app.
+Then navigate your browser to [http://localhost:3001](http://localhost:3001) and use the app.
 
 ## Testing
 The test setup includes `webpack.test.config.js`, `spec-bundle.js`, and `karma.conf.js`. To run unit tests, execute `npm test` in your terminal.

app/about/about.component.ts

@@ -1,9 +1,9 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {StateService} from '../common/state.service';
 
 @Component({
   selector: 'about',
-  templateUrl: 'app/about/about.component.html'
+  template: require('./about.component.html')
 })
 export class AboutComponent implements OnInit{
   title: string = 'About Page';

app/app.component.html

@@ -4,9 +4,9 @@ <h1 id="logo">
   </h1>
 
   <div id="menu">
-    <a [routerLink]="['/Home']" class="btn">Home</a>
-    <a [routerLink]="['/About']" class="btn">About</a>
-    <a [routerLink]="['/Experiments']" class="btn">Experiments</a>
+    <a [routerLink]="['/home']" class="btn">Home</a>
+    <a [routerLink]="['/about']" class="btn">About</a>
+    <a [routerLink]="['/experiments']" class="btn">Experiments</a>
   </div>
 
   <div class="color"></div>

app/app.component.ts

@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {Component} from '@angular/core';
+import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
 import {AboutComponent} from './about/about.component';
 import {ExperimentsComponent} from './experiments/experiments.component';
 import {HomeComponent} from './home/home.component';
@@ -8,14 +8,14 @@ import {ExperimentsService} from './common/experiments.service';
 
 @Component({
   selector: 'app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  template: require('./app.component.html'),
+  styles: [require('./app.component.css')],
   directives: [ ROUTER_DIRECTIVES ],
   providers: [StateService, ExperimentsService],
 })
-@RouteConfig([
-  {path: '/home',        name: 'Home',        component: HomeComponent, useAsDefault: true },
-  {path: '/about',       name: 'About',       component: AboutComponent },
-  {path: '/experiments', name: 'Experiments', component: ExperimentsComponent }
+@Routes([
+  {path: '/home',        component: HomeComponent },
+  {path: '/about',       component: AboutComponent },
+  {path: '/experiments', component: ExperimentsComponent }
 ])
 export class AppComponent {}

app/app.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'angular2/testing';
+import { describe, it, expect } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 

app/boot.ts

@@ -1,8 +1,8 @@
 import 'core-js';
 import 'zone.js/dist/zone';
 
-import {bootstrap} from 'angular2/platform/browser';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {ROUTER_PROVIDERS} from '@angular/router';
 import {AppComponent} from './app.component';
 
 bootstrap(AppComponent, [

app/common/experiments.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from '@angular/core';
 import {Experiment} from './experiment.model';
 
 @Injectable()

app/common/state.service.ts

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

app/experiments/experiment-details/experiment.detail.component.ts

@@ -1,9 +1,9 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {Experiment} from '../../common/experiment.model';
 
 @Component({
   selector: 'experiment',
-  templateUrl: 'app/experiments/experiment-details/experiment.detail.component.html',
+  template: require('./experiment.detail.component.html'),
   styles: [`
     .experiment {
       cursor: pointer;

app/experiments/experiments.component.html

@@ -5,7 +5,7 @@ <h1>
   {{ body }}
 </p>
 <hr/>
-<experiment *ngFor="#experiment of experiments" [experiment]="experiment"></experiment>
+<experiment *ngFor="let experiment of experiments" [experiment]="experiment"></experiment>
 <hr/>
 <div>
   <h2 class="text-error">Experiments: {{message}}</h2>

app/experiments/experiments.component.ts

@@ -1,13 +1,13 @@
-import {Component, OnInit} from 'angular2/core';
-import {NgFor} from 'angular2/common';
+import {Component, OnInit} from '@angular/core';
+import {NgFor} from '@angular/common';
 import {Experiment} from '../common/experiment.model';
 import {ExperimentsService} from '../common/experiments.service';
 import {StateService} from '../common/state.service';
 import {ExperimentDetailComponent} from './experiment-details/experiment.detail.component';
 
 @Component({
   selector: 'experiments',
-  templateUrl: 'app/experiments/experiments.component.html',
+  template: require('./experiments.component.html'),
   directives: [ExperimentDetailComponent]
 })
 export class ExperimentsComponent implements OnInit {

app/home/home.component.spec.ts

@@ -3,13 +3,13 @@ import {
   describe,
   expect,
   it
-} from 'angular2/testing';
+} from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
 
 describe('Home Component', () => {
   it('should be named `HomeComponent`', () => {
-    expect(HomeComponent.name).toBe('HomeComponent');
+    expect(HomeComponent['name']).toBe('HomeComponent');
   });
 
   it('should have a method called `updateMessage`', () => {

app/home/home.component.ts

@@ -1,9 +1,9 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, OnInit} from '@angular/core';
 import {StateService} from '../common/state.service';
 
 @Component({
   selector: 'home',
-  templateUrl: 'app/home/home.component.html'
+  template: require('./home.component.html')
 })
 export class HomeComponent implements OnInit {
   title: string = 'Home Page';

package.json

@@ -7,34 +7,38 @@
     "url": "https://github.com/onehungrymind/fem-ng2-simple-app/"
   },
   "scripts": {
-    "start": "webpack-dev-server --inline --watch",
-    "test": "karma start",
-    "postinstall": "typings install"
+    "start": "webpack-dev-server --inline --colors --watch --display-error-details --display-cached  --port 3001 --hot",
+    "test": "karma start"
   },
   "dependencies": {
-    "angular2": "^2.0.0-beta.13",
-    "es6-promise": "^3.0.2",
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "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",
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
-    "systemjs": "^0.19.8",
-    "zone.js": "^0.6.6"
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.7",
+    "systemjs": "^0.19.27",
+    "zone.js": "^0.6.12"
   },
   "devDependencies": {
-    "awesome-typescript-loader": "^0.16.0-rc.0",
-    "core-js": "^2.2.0",
+    "awesome-typescript-loader": "^0.17.0",
+    "core-js": "^2.4.0",
     "jasmine-core": "^2.4.1",
     "karma": "^0.13.22",
-    "karma-coverage": "^0.5.5",
-    "karma-jasmine": "^0.3.7",
+    "karma-coverage": "^1.0.0",
+    "karma-jasmine": "^1.0.2",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.24",
+    "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^1.7.0",
-    "phantomjs-prebuilt": "^2.1.5",
+    "phantomjs-prebuilt": "^2.1.7",
+    "raw-loader": "^0.5.1",
     "source-map-loader": "^0.1.5",
-    "typescript": "^1.7.3",
-    "webpack": "^1.12.14",
+    "typescript": "^1.8.10",
+    "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1"
   }
 }

spec-bundle.js

@@ -1,8 +1,5 @@
-
 require('core-js');
-require('zone.js/dist/zone.js');
-// require('zone.js/dist/long-stack-trace-zone.js');
-require('zone.js/dist/jasmine-patch.js');
+require('zone.js');
 
 var testContext = require.context('./app', true, /\.spec\.ts/);
 

typings.json

@@ -1,7 +1,5 @@
 {
-  "dependencies": {
-    "es6-promise": "github:typed-typings/npm-es6-promise#fb04188767acfec1defd054fc8024fafa5cd4de7"
-  },
+  "dependencies": {},
   "devDependencies": {},
   "ambientDependencies": {
     "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",

webpack.config.js

@@ -22,7 +22,8 @@ module.exports = {
       { test: /\.js$/, loader: 'source-map-loader', exclude: [ root('node_modules/rxjs') ] }
     ],
     loaders: [
-      { test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] }
+      { test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] },
+      { test: /\.(html|css)$/, loader: 'raw-loader' }
     ]
   },
   devServer: {

webpack.test.config.js

@@ -17,7 +17,8 @@ module.exports = {
   module: {
     loaders: [
       { test: /\.js$/, loader: "source-map-loader", exclude: [ root('node_modules/rxjs') ]},
-      { test: /\.ts$/, loader: 'awesome-typescript-loader' }
+      { test: /\.ts$/, loader: 'awesome-typescript-loader' },
+      { test: /\.(html|css)$/, loader: 'raw-loader' }
     ]
   }
 };