diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/css/animations.css b/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.animations.css
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/app/css/animations.css
rename to public/docs/_examples/upgrade-phonecat/ts/classes/app/app.animations.css
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.config.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.config.ts
new file mode 100644
index 0000000000..9b99261074
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.config.ts
@@ -0,0 +1,12 @@
+// #docregion
+export default ['$routeProvider',
+  function config($routeProvider) {
+    $routeProvider.
+      when('/phones', {
+        template: '<phone-list></phone-list>'
+      }).
+      when('/phones/:phoneId', {
+        template: '<phone-detail></phone-detail>'
+      }).
+      otherwise('/phones');
+}];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/css/app.css b/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.css
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/css/app.css
rename to public/docs/_examples/upgrade-phonecat/ts/classes/app/app.css
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.module.ts
new file mode 100644
index 0000000000..d4e0e8b25c
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion pre-bootstrap
+import core from './core/core.module';
+import phoneList from './phone-list/phone-list.module';
+import phoneDetail from './phone-detail/phone-detail.module';
+import appConfig from './app.config';
+
+angular.module('phonecatApp', [
+  'ngAnimate',
+  'ngRoute',
+  core.name,
+  phoneList.name,
+  phoneDetail.name
+]).config(appConfig);
+
+// #enddocregion pre-bootstrap
+// #docregion bootstrap
+angular.bootstrap(document.documentElement, ['phonecatApp']);
+// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/checkmark.filter.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.spec.ts
similarity index 76%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/checkmark.filter.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.spec.ts
index bae35e6875..6704c74999 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/checkmark.filter.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.spec.ts
@@ -1,10 +1,10 @@
 // #docregion top
-import '../../app/js/core/core.module';
+import '../core.module';
 // #enddocregion top
 
 describe('checkmarkFilter', function() {
 
-  beforeEach(angular.mock.module('phonecat.core'));
+  beforeEach(angular.mock.module('core'));
 
   it('should convert boolean values to unicode checkmark or cross',
       inject(function(checkmarkFilter) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/checkmark.filter.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.ts
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/checkmark.filter.ts
rename to public/docs/_examples/upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.ts
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/core.module.ts
new file mode 100644
index 0000000000..041f56ea79
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/core.module.ts
@@ -0,0 +1,6 @@
+// #docregion
+import checkmarkFilter from './checkmark/checkmark.filter';
+import phone from './phone/phone.module';
+
+export default angular.module('core', [phone.name])
+  .filter('checkmark', checkmarkFilter);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.module.ts
new file mode 100644
index 0000000000..d60c3c9a07
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.module.ts
@@ -0,0 +1,5 @@
+// #docregion
+import Phone from './phone.service';
+
+export default angular.module('core.phone', ['ngResource'])
+  .factory('Phone', Phone);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.service.spec.ts
new file mode 100644
index 0000000000..269ce500e9
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,47 @@
+// #docregion top
+import './phone.module';
+// #enddocregion top
+
+'use strict';
+
+describe('Phone', function() {
+  var $httpBackend;
+  var Phone;
+  var phonesData = [
+    {name: 'Phone X'},
+    {name: 'Phone Y'},
+    {name: 'Phone Z'}
+  ];
+
+  // Add a custom equality tester before each test
+  beforeEach(function() {
+    jasmine.addCustomEqualityTester(angular.equals);
+  });
+
+  // Load the module that contains the `Phone` service before each test
+  beforeEach(angular.mock.module('core.phone'));
+
+  // Instantiate the service and "train" `$httpBackend` before each test
+  beforeEach(inject(function(_$httpBackend_, _Phone_) {
+    $httpBackend = _$httpBackend_;
+    $httpBackend.expectGET('phones/phones.json').respond(phonesData);
+
+    Phone = _Phone_;
+  }));
+
+  // Verify that there are no outstanding expectations or requests after each test
+  afterEach(function () {
+    $httpBackend.verifyNoOutstandingExpectation();
+    $httpBackend.verifyNoOutstandingRequest();
+  });
+
+  it('should fetch the phones data from `/phones/phones.json`', function() {
+    var phones = Phone.query();
+
+    expect(phones).toEqual([]);
+
+    $httpBackend.flush();
+    expect(phones).toEqual(phonesData);
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.service.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.service.ts
new file mode 100644
index 0000000000..861ff78832
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.service.ts
@@ -0,0 +1,12 @@
+// #docregion
+export default ['$resource',
+  function Phone($resource) {
+    return $resource('phones/:phoneId.json', {}, {
+      query: {
+        method: 'GET',
+        params: {phoneId: 'phones'},
+        isArray: true
+      }
+    });
+  }
+];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/css/.gitkeep b/public/docs/_examples/upgrade-phonecat/ts/classes/app/css/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html
index db01afac1c..096a0ef1bd 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/index.html
@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <title>Google Phone Gallery</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
-  <link rel="stylesheet" href="css/app.css">
-  <link rel="stylesheet" href="css/animations.css">
+  <link rel="stylesheet" href="app.css">
+  <link rel="stylesheet" href="app.animations.css">
   <!-- #docregion scripts -->
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="bower_components/jquery/dist/jquery.js"></script>
@@ -15,7 +15,7 @@
   <script src="bower_components/angular-resource/angular-resource.js"></script>
   <script src="systemjs.config.js"></script>
   <script>
-    System.import('js/app.module');
+    System.import('./app.module');
   </script>
   <!-- #enddocregion scripts -->
 </head>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/app.module.ts
deleted file mode 100644
index 01e3328c1e..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/app.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// #docregion pre-bootstrap
-
-import core from './core/core.module';
-import phoneList from './phone_list/phone_list.module';
-import phoneDetail from './phone_detail/phone_detail.module';
-
-angular.module('phonecatApp', [
-  'ngRoute',
-  core.name,
-  phoneList.name,
-  phoneDetail.name
-]).config(configure);
-
-configure.$inject = ['$routeProvider'];
-
-function configure($routeProvider) {
-  $routeProvider.
-    when('/phones', {
-      templateUrl: 'js/phone_list/phone_list.html',
-      controller: 'PhoneListCtrl',
-      controllerAs: 'vm'
-    }).
-    when('/phones/:phoneId', {
-      templateUrl: 'js/phone_detail/phone_detail.html',
-      controller: 'PhoneDetailCtrl',
-      controllerAs: 'vm'
-    }).
-    otherwise({
-      redirectTo: '/phones'
-    });
-}
-// #enddocregion pre-bootstrap
-// #docregion bootstrap
-angular.bootstrap(document.documentElement, ['phonecatApp']);
-// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/core.module.ts
deleted file mode 100644
index c20ce33683..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/core.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import Phone from './phone.factory';
-import checkmarkFilter from './checkmark.filter';
-
-export default angular.module('phonecat.core', [
-    'ngResource'
-  ])
-  .factory('Phone', Phone)
-  .filter('checkmark', checkmarkFilter);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/phone.factory.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/phone.factory.ts
deleted file mode 100644
index a8492b29fc..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/phone.factory.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-Phone.$inject = ['$resource'];
-
-function Phone($resource) {
-  return $resource('phones/:phoneId.json', {}, {
-    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
-  });
-}
-
-export default Phone;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.controller.ts
deleted file mode 100644
index c5b96b6f08..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.controller.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-interface PhoneRouteParams {
-  phoneId: string
-}
-
-class PhoneDetailCtrl {
-  phone:any;
-  mainImageUrl:string;
-  constructor($routeParams:PhoneRouteParams, Phone) {
-    this.phone = Phone.get({phoneId: $routeParams.phoneId}, (phone) =>
-      this.mainImageUrl = phone.images[0]
-    );
-  }
-
-  setImage(url:string) {
-    this.mainImageUrl = url;
-  }
-}
-
-PhoneDetailCtrl.$inject = ['$routeParams', 'Phone'];
-
-export default PhoneDetailCtrl;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.html b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.html
deleted file mode 100644
index 954c65c2cd..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<div class="phone-images">
-  <img ng-src="{{img}}"
-       class="phone"
-       ng-repeat="img in vm.phone.images"
-       ng-class="{active: vm.mainImageUrl==img}">
-</div>
-
-<h1>{{vm.phone.name}}</h1>
-
-<p>{{vm.phone.description}}</p>
-
-<ul class="phone-thumbs">
-  <li ng-repeat="img in vm.phone.images">
-    <img ng-src="{{img}}" ng-click="vm.setImage(img)">
-  </li>
-</ul>
-
-<ul class="specs">
-  <li>
-    <span>Availability and Networks</span>
-    <dl>
-      <dt>Availability</dt>
-      <dd ng-repeat="availability in vm.phone.availability">{{availability}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Battery</span>
-    <dl>
-      <dt>Type</dt>
-      <dd>{{vm.phone.battery.type}}</dd>
-      <dt>Talk Time</dt>
-      <dd>{{vm.phone.battery.talkTime}}</dd>
-      <dt>Standby time (max)</dt>
-      <dd>{{vm.phone.battery.standbyTime}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Storage and Memory</span>
-    <dl>
-      <dt>RAM</dt>
-      <dd>{{vm.phone.storage.ram}}</dd>
-      <dt>Internal Storage</dt>
-      <dd>{{vm.phone.storage.flash}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Connectivity</span>
-    <dl>
-      <dt>Network Support</dt>
-      <dd>{{vm.phone.connectivity.cell}}</dd>
-      <dt>WiFi</dt>
-      <dd>{{vm.phone.connectivity.wifi}}</dd>
-      <dt>Bluetooth</dt>
-      <dd>{{vm.phone.connectivity.bluetooth}}</dd>
-      <dt>Infrared</dt>
-      <dd>{{vm.phone.connectivity.infrared | checkmark}}</dd>
-      <dt>GPS</dt>
-      <dd>{{vm.phone.connectivity.gps | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Android</span>
-    <dl>
-      <dt>OS Version</dt>
-      <dd>{{vm.phone.android.os}}</dd>
-      <dt>UI</dt>
-      <dd>{{vm.phone.android.ui}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Size and Weight</span>
-    <dl>
-      <dt>Dimensions</dt>
-      <dd ng-repeat="dim in vm.phone.sizeAndWeight.dimensions">{{dim}}</dd>
-      <dt>Weight</dt>
-      <dd>{{vm.phone.sizeAndWeight.weight}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Display</span>
-    <dl>
-      <dt>Screen size</dt>
-      <dd>{{vm.phone.display.screenSize}}</dd>
-      <dt>Screen resolution</dt>
-      <dd>{{vm.phone.display.screenResolution}}</dd>
-      <dt>Touch screen</dt>
-      <dd>{{vm.phone.display.touchScreen | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Hardware</span>
-    <dl>
-      <dt>CPU</dt>
-      <dd>{{vm.phone.hardware.cpu}}</dd>
-      <dt>USB</dt>
-      <dd>{{vm.phone.hardware.usb}}</dd>
-      <dt>Audio / headphone jack</dt>
-      <dd>{{vm.phone.hardware.audioJack}}</dd>
-      <dt>FM Radio</dt>
-      <dd>{{vm.phone.hardware.fmRadio | checkmark}}</dd>
-      <dt>Accelerometer</dt>
-      <dd>{{vm.phone.hardware.accelerometer | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Camera</span>
-    <dl>
-      <dt>Primary</dt>
-      <dd>{{vm.phone.camera.primary}}</dd>
-      <dt>Features</dt>
-      <dd>{{vm.phone.camera.features.join(', ')}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Additional Features</span>
-    <dd>{{vm.phone.additionalFeatures}}</dd>
-  </li>
-</ul>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.module.ts
deleted file mode 100644
index 16e7ac0baf..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import PhoneDetailCtrl from './phone_detail.controller';
-
-export default angular.module('phonecat.detail', [
-    'ngRoute',
-    'phonecat.core'
-  ])
-  .controller('PhoneDetailCtrl', PhoneDetailCtrl);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.controller.ts
deleted file mode 100644
index f1a5beb808..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.controller.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-class PhoneListCtrl {
-  phones:any[];
-  orderProp:string;
-  query:string;
-  constructor(Phone) {
-    this.phones = Phone.query();
-    this.orderProp = 'age';
-  }
-}
-
-PhoneListCtrl.$inject = ['Phone'];
-
-export default PhoneListCtrl;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.module.ts
deleted file mode 100644
index 758b937927..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.module.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-import PhoneListCtrl from './phone_list.controller';
-
-export default angular.module('phonecat.list', ['phonecat.core'])
-  .controller('PhoneListCtrl', PhoneListCtrl);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.component.spec.ts
new file mode 100644
index 0000000000..4d0b3c0cb7
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.component.spec.ts
@@ -0,0 +1,38 @@
+// #docregion top
+import './phone-detail.module';
+// #enddocregion top
+
+describe('phoneDetail', function(){
+
+    // Load the module that contains the `phoneDetail` component before each test
+    beforeEach(angular.mock.module('phoneDetail'));
+
+    // Test the controller
+    describe('PhoneDetailController', function() {
+      var $httpBackend, ctrl;
+      var xyzPhoneData = {
+        name: 'phone xyz',
+        images: ['image/url1.png', 'image/url2.png']
+      };
+
+      beforeEach(inject(function($componentController, _$httpBackend_, $routeParams) {
+        $httpBackend = _$httpBackend_;
+        $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);
+
+        $routeParams.phoneId = 'xyz';
+
+        ctrl = $componentController('phoneDetail', {$scope: {}});
+      }));
+
+      it('should fetch the phone details', function() {
+        jasmine.addCustomEqualityTester(angular.equals);
+
+        expect(ctrl.phone).toEqual({});
+
+        $httpBackend.flush();
+        expect(ctrl.phone).toEqual(xyzPhoneData);
+      });
+
+    });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.component.ts
new file mode 100644
index 0000000000..5e3a35a3d4
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.component.ts
@@ -0,0 +1,26 @@
+// #docregion
+interface PhoneRouteParams {
+  phoneId: string
+}
+
+class PhoneDetailController {
+  phone:any;
+  mainImageUrl:string;
+
+  static $inject = ['$routeParams', 'Phone'];
+  constructor($routeParams:PhoneRouteParams, Phone) {
+    this.phone = Phone.get({phoneId: $routeParams.phoneId}, phone => {
+      this.setImage(phone.images[0]);
+    });
+  }
+
+  setImage(imageUrl) {
+    this.mainImageUrl = imageUrl;
+  }
+
+}
+
+export default {
+  templateUrl: 'phone-detail/phone-detail.template.html',
+  controller: PhoneDetailController
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.module.ts
new file mode 100644
index 0000000000..d9e95c0761
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.module.ts
@@ -0,0 +1,9 @@
+// #docregion
+import phoneDetail from './phone-detail.component';
+import phone from '../core/phone/phone.module';
+
+export default angular.module('phoneDetail', [
+    'ngRoute',
+    phone.name
+  ])
+  .component('phoneDetail', phoneDetail);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.template.html b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.template.html
new file mode 100644
index 0000000000..019ccf45c7
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.template.html
@@ -0,0 +1,118 @@
+<div class="phone-images">
+  <img ng-src="{{img}}"
+       class="phone"
+       ng-repeat="img in $ctrl.phone.images"
+       ng-class="{active: $ctrl.mainImageUrl==img}">
+</div>
+
+<h1>{{$ctrl.phone.name}}</h1>
+
+<p>{{$ctrl.phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in $ctrl.phone.images">
+    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)">
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Battery</span>
+    <dl>
+      <dt>Type</dt>
+      <dd>{{$ctrl.phone.battery.type}}</dd>
+      <dt>Talk Time</dt>
+      <dd>{{$ctrl.phone.battery.talkTime}}</dd>
+      <dt>Standby time (max)</dt>
+      <dd>{{$ctrl.phone.battery.standbyTime}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Storage and Memory</span>
+    <dl>
+      <dt>RAM</dt>
+      <dd>{{$ctrl.phone.storage.ram}}</dd>
+      <dt>Internal Storage</dt>
+      <dd>{{$ctrl.phone.storage.flash}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{$ctrl.phone.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{$ctrl.phone.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Android</span>
+    <dl>
+      <dt>OS Version</dt>
+      <dd>{{$ctrl.phone.android.os}}</dd>
+      <dt>UI</dt>
+      <dd>{{$ctrl.phone.android.ui}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Size and Weight</span>
+    <dl>
+      <dt>Dimensions</dt>
+      <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
+      <dt>Weight</dt>
+      <dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Display</span>
+    <dl>
+      <dt>Screen size</dt>
+      <dd>{{$ctrl.phone.display.screenSize}}</dd>
+      <dt>Screen resolution</dt>
+      <dd>{{$ctrl.phone.display.screenResolution}}</dd>
+      <dt>Touch screen</dt>
+      <dd>{{$ctrl.phone.display.touchScreen | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Hardware</span>
+    <dl>
+      <dt>CPU</dt>
+      <dd>{{$ctrl.phone.hardware.cpu}}</dd>
+      <dt>USB</dt>
+      <dd>{{$ctrl.phone.hardware.usb}}</dd>
+      <dt>Audio / headphone jack</dt>
+      <dd>{{$ctrl.phone.hardware.audioJack}}</dd>
+      <dt>FM Radio</dt>
+      <dd>{{$ctrl.phone.hardware.fmRadio | checkmark}}</dd>
+      <dt>Accelerometer</dt>
+      <dd>{{$ctrl.phone.hardware.accelerometer | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Camera</span>
+    <dl>
+      <dt>Primary</dt>
+      <dd>{{$ctrl.phone.camera.primary}}</dd>
+      <dt>Features</dt>
+      <dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Additional Features</span>
+    <dd>{{$ctrl.phone.additionalFeatures}}</dd>
+  </li>
+</ul>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.component.spec.ts
new file mode 100644
index 0000000000..f0cf9987f9
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.component.spec.ts
@@ -0,0 +1,37 @@
+// #docregion top
+import './phone-list.module';
+// #enddocregion top
+
+describe('phoneList', function() {
+
+  // Load the module that contains the `phoneList` component before each test
+  beforeEach(angular.mock.module('phoneList'));
+
+  // Test the controller
+  describe('PhoneListController', function() {
+    var $httpBackend, ctrl;
+
+    beforeEach(inject(function($componentController, _$httpBackend_) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json')
+                  .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+
+      ctrl = $componentController('phoneList', {$scope: {}});
+    }));
+
+    it('should create a `phones` model with 2 phones fetched with `$http`', function() {
+      jasmine.addCustomEqualityTester(angular.equals);
+
+      expect(ctrl.phones).toEqual([]);
+
+      $httpBackend.flush();
+      expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+    });
+
+    it('should set a default value for the `orderProp` model', function() {
+      expect(ctrl.orderProp).toBe('age');
+    });
+
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.component.ts
new file mode 100644
index 0000000000..1d3f28e23a
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+class PhoneListController {
+  phones:any[];
+  orderProp:string;
+  query:string;
+
+  static $inject = ['Phone'];
+  constructor(Phone) {
+    this.phones = Phone.query();
+    this.orderProp = 'age';
+  }
+
+}
+
+export default {
+  templateUrl: 'phone-list/phone-list.template.html',
+  controller: PhoneListController
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.module.ts
new file mode 100644
index 0000000000..feae92f9af
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.module.ts
@@ -0,0 +1,6 @@
+// #docregion
+import phoneList from './phone-list.component';
+import phone from '../core/phone/phone.module';
+
+export default angular.module('phoneList', [phone.name])
+  .component('phoneList', phoneList);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.html b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.template.html
similarity index 77%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.html
rename to public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.template.html
index 471f474e89..95283ee032 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/phone-list/phone-list.template.html
@@ -3,9 +3,9 @@
     <div class="col-md-2">
       <!--Sidebar content-->
 
-      Search: <input ng-model="vm.query">
+      Search: <input ng-model="$ctrl.query">
       Sort by:
-      <select ng-model="vm.orderProp">
+      <select ng-model="$ctrl.orderProp">
         <option value="name">Alphabetical</option>
         <option value="age">Newest</option>
       </select>
@@ -15,7 +15,7 @@
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="phone in vm.phones | filter:vm.query | orderBy:vm.orderProp"
+        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
             class="thumbnail phone-listing">
           <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
           <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/classes/app/systemjs.config.js
index 9a46070388..089b9c0d8a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/systemjs.config.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/app/systemjs.config.js
@@ -5,7 +5,7 @@
 var pkgPath =  global.packagePath || '../node_modules/'; // path to packages
 System.config({
   packages: {
-    'js': { defaultExtension: 'js' },
+    './': { defaultExtension: 'js' },
   }
 });
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/protractor-conf.js b/public/docs/_examples/upgrade-phonecat/ts/classes/e2e-tests/protractor-conf.js
similarity index 94%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/protractor-conf.js
rename to public/docs/_examples/upgrade-phonecat/ts/classes/e2e-tests/protractor-conf.js
index 118c7b9ec2..a4099af352 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/protractor-conf.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/e2e-tests/protractor-conf.js
@@ -2,7 +2,7 @@ exports.config = {
   allScriptsTimeout: 11000,
 
   specs: [
-    'e2e/*.js'
+    '*.js'
   ],
 
   capabilities: {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/e2e/scenarios.js b/public/docs/_examples/upgrade-phonecat/ts/classes/e2e-tests/scenarios.js
similarity index 83%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/test/e2e/scenarios.js
rename to public/docs/_examples/upgrade-phonecat/ts/classes/e2e-tests/scenarios.js
index 5a505b5dae..f5774c189a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/e2e/scenarios.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/e2e-tests/scenarios.js
@@ -20,8 +20,8 @@ describe('PhoneCat App', function() {
 
 
     it('should filter the phone list as a user types into the search box', function() {
-      var phoneList = element.all(by.repeater('phone in vm.phones'));
-      var query = element(by.model('vm.query'));
+      var phoneList = element.all(by.repeater('phone in $ctrl.phones'));
+      var query = element(by.model('$ctrl.query'));
 
       expect(phoneList.count()).toBe(20);
 
@@ -36,8 +36,8 @@ describe('PhoneCat App', function() {
 
     it('should be possible to control phone order via the drop down select box', function() {
 
-      var phoneNameColumn = element.all(by.repeater('phone in vm.phones').column('phone.name'));
-      var query = element(by.model('vm.query'));
+      var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
+      var query = element(by.model('$ctrl.query'));
 
       function getNames() {
         return phoneNameColumn.map(function(elm) {
@@ -52,7 +52,7 @@ describe('PhoneCat App', function() {
         "MOTOROLA XOOM\u2122"
       ]);
 
-      element(by.model('vm.orderProp')).element(by.css('option[value="name"]')).click();
+      element(by.model('$ctrl.orderProp')).element(by.css('option[value="name"]')).click();
 
       expect(getNames()).toEqual([
         "MOTOROLA XOOM\u2122",
@@ -62,7 +62,7 @@ describe('PhoneCat App', function() {
 
 
     it('should render phone specific links', function() {
-      var query = element(by.model('vm.query'));
+      var query = element(by.model('$ctrl.query'));
       query.sendKeys('nexus');
       element.all(by.css('.phones li a')).first().click();
       browser.getLocationAbsUrl().then(function(url) {
@@ -80,7 +80,7 @@ describe('PhoneCat App', function() {
 
 
     it('should display nexus-s page', function() {
-      expect(element(by.binding('vm.phone.name')).getText()).toBe('Nexus S');
+      expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
     });
 
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/classes/karma.conf.1.js
new file mode 100644
index 0000000000..5124a02418
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/karma.conf.1.js
@@ -0,0 +1,42 @@
+module.exports = function(config){
+  config.set({
+
+    basePath: './app',
+
+    // #docregion files
+    files : [
+      'bower_components/angular/angular.js',
+      'bower_components/angular-route/angular-route.js',
+      'bower_components/angular-resource/angular-resource.js',
+      'bower_components/angular-animate/angular-animate.js',
+      'bower_components/angular-mocks/angular-mocks.js',
+      '../node_modules/systemjs/dist/system.src.js',
+      '../karma_test_shim.js',
+      {pattern: '**/*.module.js', included: false, watched: true},
+      {pattern: '*!(.module|.spec).js', included: false, watched: true},
+      {pattern: '!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: '**/*.spec.js', included: false, watched: true}
+    ],
+    // #enddocregion files
+
+    autoWatch : true,
+
+    frameworks: ['jasmine'],
+
+    browsers : ['Chrome', 'Firefox'],
+
+    plugins : [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-jasmine'
+    ],
+
+    junitReporter : {
+      outputFile: 'test_out/unit.xml',
+      suite: 'unit'
+    },
+
+    logLevel: config.LOG_DEBUG
+
+  });
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/classes/karma_test_shim.js
similarity index 87%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/test/karma_test_shim.js
rename to public/docs/_examples/upgrade-phonecat/ts/classes/karma_test_shim.js
index 15cbee5d7d..d03229f0f5 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/karma_test_shim.js
@@ -5,7 +5,7 @@ __karma__.loaded = function() {};
 
 System.config({
   packages: {
-    'base/app/js': {
+    'base': {
       defaultExtension: false,
       format: 'register',
       map: Object.keys(window.__karma__.files).
@@ -13,7 +13,7 @@ System.config({
             reduce(function createPathRecords(pathsMapping, appPath) {
               // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
               // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
-              var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
+              var moduleName = appPath.replace(/^\/base\//, './').replace(/\.js$/, '');
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
@@ -36,7 +36,7 @@ Promise.all(
 });
 
 function onlyAppFiles(filePath) {
-  return /^\/base\/app\/js\/.*\.js$/.test(filePath)
+  return /^\/base\/.*\.(?!\.spec\.)js$/.test(filePath)
 }
 
 function onlySpecFiles(path) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/classes/package.1.json
index 0b7b72bf3e..6c8c0c8a0a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/classes/package.1.json
@@ -9,34 +9,29 @@
     "systemjs": "0.19.25"
   },
   "devDependencies": {
+    "bower": "^1.3.1",
+    "http-server": "^0.6.1",
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
-    "http-server": "^0.6.1",
-    "tmp": "0.0.23",
-    "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "typescript": "1.8.9",
+    "tmp": "0.0.23",
+    "typescript": "^1.8.9",
     "typings": "^0.7.12"
   },
   "scripts": {
     "postinstall": "bower install",
-
     "prestart": "npm install",
     "start": "http-server -a 0.0.0.0 -p 8000",
-
     "pretest": "npm install",
-    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
-    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
-
+    "test": "node node_modules/karma/bin/karma start karma.conf.js",
+    "test-single-run": "node node_modules/karma/bin/karma start karma.conf.js  --single-run",
     "preupdate-webdriver": "npm install",
     "update-webdriver": "webdriver-manager update",
-
     "preprotractor": "npm run update-webdriver",
-    "protractor": "protractor test/protractor-conf.js",
-
+    "protractor": "protractor e2e-tests/protractor-conf.js",
     "typings": "typings",
     "tsc": "tsc -p . -w"
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/jasmine_matchers.d.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/test/jasmine_matchers.d.ts
deleted file mode 100644
index 6d24879775..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/jasmine_matchers.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-declare module jasmine {
-  interface Matchers {
-    toEqualData(expected: any):boolean;
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/classes/test/karma.conf.1.js
deleted file mode 100644
index 8f2e7d178f..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/karma.conf.1.js
+++ /dev/null
@@ -1,38 +0,0 @@
-module.exports = function(config){
-  config.set({
-
-    basePath : '..',
-
-    // #docregion files
-    files : [
-      'app/bower_components/angular/angular.js',
-      'app/bower_components/angular-route/angular-route.js',
-      'app/bower_components/angular-resource/angular-resource.js',
-      'app/bower_components/angular-animate/angular-animate.js',
-      'app/bower_components/angular-mocks/angular-mocks.js',
-      'node_modules/systemjs/dist/system.src.js',
-      'test/karma_test_shim.js',
-      {pattern: 'app/js/**/*.js', included: false, watched: true},
-      {pattern: 'test/unit/**/*.js', included: false, watched: true}
-    ],
-    // #enddocregion files
-
-    autoWatch : true,
-
-    frameworks: ['jasmine'],
-
-    browsers : ['Chrome', 'Firefox'],
-
-    plugins : [
-      'karma-chrome-launcher',
-      'karma-firefox-launcher',
-      'karma-jasmine'
-    ],
-
-    junitReporter : {
-      outputFile: 'test_out/unit.xml',
-      suite: 'unit'
-    }
-
-  });
-};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone.factory.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone.factory.spec.ts
deleted file mode 100644
index d7c95d347e..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone.factory.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion top
-import '../../app/js/core/core.module';
-// #enddocregion top
-
-describe('phoneFactory', function() {
-
-  // load modules
-  beforeEach(angular.mock.module('phonecat.core'));
-
-  // Test service availability
-  it('check the existence of Phone factory', inject(function(Phone) {
-    expect(Phone).toBeDefined();
-  }));
-
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone_detail.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone_detail.controller.spec.ts
deleted file mode 100644
index 02a3e20240..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone_detail.controller.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docregion top
-import '../../app/js/phone_detail/phone_detail.module';
-// #enddocregion top
-
-describe('PhoneDetailCtrl', function(){
-  var scope, $httpBackend, ctrl,
-      xyzPhoneData = function() {
-        return {
-          name: 'phone xyz',
-          images: ['image/url1.png', 'image/url2.png']
-        }
-      };
-
-  beforeEach(angular.mock.module('phonecat.detail'));
-
-  beforeEach(function(){
-    jasmine.addMatchers({
-      toEqualData: function(util, customEqualityTesters) {
-        return {
-          compare: function(actual, expected) {
-            return {pass: angular.equals(actual, expected)};
-          }
-        };
-      }
-    });
-  });
-
-  beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
-    $httpBackend = _$httpBackend_;
-    $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
-
-    $routeParams.phoneId = 'xyz';
-    scope = $rootScope.$new();
-    ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
-  }));
-
-
-  it('should fetch phone detail', function() {
-    expect(ctrl.phone).toEqualData({});
-    $httpBackend.flush();
-
-    expect(ctrl.phone).toEqualData(xyzPhoneData());
-  });
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone_list.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone_list.controller.spec.ts
deleted file mode 100644
index efec5d5f08..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/phone_list.controller.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docregion top
-import '../../app/js/phone_list/phone_list.module';
-// #enddocregion top
-
-describe('PhoneListCtrl', function(){
-  var scope, ctrl, $httpBackend;
-
-  beforeEach(angular.mock.module('phonecat.list'));
-
-  beforeEach(function(){
-    jasmine.addMatchers({
-      toEqualData: function(util, customEqualityTesters) {
-        return {
-          compare: function(actual, expected) {
-            return {pass: angular.equals(actual, expected)};
-          }
-        };
-      }
-    });
-  });
-
-  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
-    $httpBackend = _$httpBackend_;
-    $httpBackend.expectGET('phones/phones.json').
-        respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-
-    scope = $rootScope.$new();
-    ctrl = $controller('PhoneListCtrl', {$scope: scope});
-  }));
-
-
-  it('should create "phones" model with 2 phones fetched from xhr', function() {
-    expect(ctrl.phones).toEqualData([]);
-    $httpBackend.flush();
-
-    expect(ctrl.phones).toEqualData(
-        [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-  });
-
-
-  it('should set the default value of orderProp model', function() {
-    expect(ctrl.orderProp).toBe('age');
-  });
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/css/animations.css b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.animations.css
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/css/animations.css
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.animations.css
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.config.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.config.ts
new file mode 100644
index 0000000000..9b99261074
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.config.ts
@@ -0,0 +1,12 @@
+// #docregion
+export default ['$routeProvider',
+  function config($routeProvider) {
+    $routeProvider.
+      when('/phones', {
+        template: '<phone-list></phone-list>'
+      }).
+      when('/phones/:phoneId', {
+        template: '<phone-detail></phone-detail>'
+      }).
+      otherwise('/phones');
+}];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/css/app.css b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.css
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/css/app.css
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.css
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.module.ts
similarity index 50%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.module.ts
index 974836e396..10cec2d666 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/app.module.ts
@@ -1,45 +1,33 @@
 // #docregion adapter-import
 import { UpgradeAdapter } from '@angular/upgrade';
 // #enddocregion adapter-import
-// #docregion adapter-state-import
-import upgradeAdapter from './core/upgrade_adapter';
-// #enddocregion adapter-state-import
 // #docregion http-import
 import { HTTP_PROVIDERS } from '@angular/http';
 // #enddocregion http-import
-import core from './core/core.module';
-import phoneList from './phone_list/phone_list.module';
-import phoneDetail from './phone_detail/phone_detail.module';
+// #docregion adapter-state-import
+import upgradeAdapter from './core/upgrade-adapter';
+// #enddocregion adapter-state-import
 
-// #docregion add-http-providers
-upgradeAdapter.addProvider(HTTP_PROVIDERS);
-// #enddocregion add-http-providers
+import core from './core/core.module';
+import phoneList from './phone-list/phone-list.module';
+import phoneDetail from './phone-detail/phone-detail.module';
+import appConfig from './app.config';
 
 angular.module('phonecatApp', [
+  'ngAnimate',
   'ngRoute',
   core.name,
   phoneList.name,
   phoneDetail.name
-]).config(configure);
+]).config(appConfig);
 
-configure.$inject = ['$routeProvider'];
+// #docregion add-http-providers
+upgradeAdapter.addProvider(HTTP_PROVIDERS);
+// #enddocregion add-http-providers
 
-function configure($routeProvider) {
-  $routeProvider.
-    when('/phones', {
-      templateUrl: 'js/phone_list/phone_list.html',
-      controller: 'PhoneListCtrl',
-      controllerAs: 'vm'
-    }).
-    when('/phones/:phoneId', {
-      templateUrl: 'js/phone_detail/phone_detail.html',
-      controller: 'PhoneDetailCtrl',
-      controllerAs: 'vm'
-    }).
-    otherwise({
-      redirectTo: '/phones'
-    });
-}
+// #docregion upgrade-route-params
+upgradeAdapter.upgradeNg1Provider('$routeParams');
+// #enddocregion upgrade-route-params
 
 // #docregion bootstrap
 upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.spec.ts
similarity index 87%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.spec.ts
index c1794fd7c0..6ba43be772 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.spec.ts
@@ -1,6 +1,6 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject, expect} from '@angular/core/testing';
-import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe';
+import {CheckmarkPipe} from './checkmark.pipe';
 
 describe('CheckmarkPipe', function() {
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.ts
similarity index 54%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.ts
index d129a44e50..c3c3c73f72 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.ts
@@ -1,8 +1,8 @@
 // #docregion
-import { Pipe } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({name: 'checkmark'})
-export class CheckmarkPipe {
+export class CheckmarkPipe implements PipeTransform {
   transform(input:string): string {
     return input ? '\u2713' : '\u2718';
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/core.module.ts
new file mode 100644
index 0000000000..6c464b8ddd
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/core.module.ts
@@ -0,0 +1,4 @@
+// #docregion
+import phone from './phone/phone.module';
+
+export default angular.module('core', [phone.name]);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.module.ts
new file mode 100644
index 0000000000..7b8d127731
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.module.ts
@@ -0,0 +1,8 @@
+// #docregion
+import {Phone} from './phone.service';
+import upgradeAdapter from '../upgrade-adapter';
+
+upgradeAdapter.addProvider(Phone);
+
+export default angular.module('core.phone', [])
+  .factory('phone', upgradeAdapter.downgradeNg2Provider(Phone));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.service.spec.ts
new file mode 100644
index 0000000000..e0dceedfa3
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,43 @@
+// #docregion
+import {provide} from '@angular/core';
+import {describe, beforeEach, beforeEachProviders, it, inject} from '@angular/core/testing';
+import {Http, BaseRequestOptions, ResponseOptions, Response} from '@angular/http';
+import {MockBackend} from '@angular/http/testing';
+import {Phone, PhoneData} from './phone.service';
+
+describe('Phone', function() {
+  var phone;
+  var phonesData:PhoneData[] = [
+    {name: 'Phone X', snippet: '', images: []},
+    {name: 'Phone Y', snippet: '', images: []},
+    {name: 'Phone Z', snippet: '', images: []}
+  ];
+  var mockBackend;
+
+  // load providers
+  beforeEachProviders(() => [
+    Phone,
+    MockBackend,
+    BaseRequestOptions,
+    provide(Http, {
+      useFactory: (backend, options) => new Http(backend, options),
+      deps: [MockBackend, BaseRequestOptions]
+    })
+  ]);
+
+  beforeEach(inject([MockBackend, Phone], (_mockBackend_, _phone_) => {
+    mockBackend = _mockBackend_;
+    phone = _phone_;
+  }));
+
+  it('should fetch the phones data from `/phones/phones.json`', (done) => {
+    mockBackend.connections.subscribe(connection => {
+      connection.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
+    });
+    phone.query().subscribe(result => {
+      expect(result).toEqual(phonesData);
+      done();
+    });
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.service.ts
similarity index 52%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.service.ts
index d292bc54ee..e47358c75e 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/phones.service.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/phone/phone.service.ts
@@ -1,37 +1,35 @@
-// #docregion full
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+// #docregion
+import {Injectable} from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 
-// #docregion phone-interface
-export interface Phone {
+// #docregion phonedata-interface
+export interface PhoneData {
   name: string;
-  snippet?: string;
-  images?: string[];
+  snippet: string;
+  images: string[];
 }
-// #enddocregion phone-interface
+// #enddocregion phonedata-interface
 
-// #docregion fullclass
 // #docregion class
+// #docregion fullclass
 @Injectable()
-export class Phones {
+export class Phone {
 // #enddocregion class
 
   constructor(private http: Http) { }
 
-  query():Observable<Phone[]> {
+  query():Observable<PhoneData[]> {
     return this.http.get(`phones/phones.json`)
       .map((res:Response) => res.json());
   }
 
-  get(id: string):Observable<Phone> {
+  get(id: string):Observable<PhoneData> {
     return this.http.get(`phones/${id}.json`)
       .map((res:Response) => res.json());
   }
-
 // #docregion class
 }
-// #enddocregion class
 // #enddocregion fullclass
-// #docregion full
+// #enddocregion class
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/upgrade-adapter.ts
similarity index 59%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/upgrade-adapter.ts
index f1ad63012a..f5659ad5b4 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/core/upgrade-adapter.ts
@@ -1,9 +1,8 @@
-// #docregion full
-import { UpgradeAdapter } from '@angular/upgrade';
+// #docregion
+import {UpgradeAdapter} from '@angular/upgrade';
 
 // #docregion adapter-init
 const upgradeAdapter = new UpgradeAdapter();
 // #enddocregion adapter-init
 
 export default upgradeAdapter;
-// #enddocregion full
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/css/.gitkeep b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/css/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
index 310d1ab348..75aed6c6e6 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
@@ -4,8 +4,9 @@
   <meta charset="utf-8">
   <title>Google Phone Gallery</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
-  <link rel="stylesheet" href="css/app.css">
-  <link rel="stylesheet" href="css/animations.css">
+  <link rel="stylesheet" href="app.css">
+  <link rel="stylesheet" href="app.animations.css">
+  <!-- #docregion scripts -->
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="bower_components/jquery/dist/jquery.js"></script>
   <script src="bower_components/angular/angular.js"></script>
@@ -18,8 +19,9 @@
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="systemjs.config.js"></script>
   <script>
-    System.import('js/app.module');
+    System.import('./app.module');
   </script>
+  <!-- #enddocregion scripts -->
 </head>
 <body>
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts
deleted file mode 100644
index 7ec8dd42f2..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/app.module.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docregion adapter-import
-import { UpgradeAdapter } from '@angular/upgrade';
-// #enddocregion adapter-import
-// #docregion adapter-state-import
-import upgradeAdapter from './core/upgrade_adapter';
-// #enddocregion adapter-state-import
-// #docregion http-import
-import { HTTP_PROVIDERS } from '@angular/http';
-// #enddocregion http-import
-import core from './core/core.module';
-import phoneList from './phone_list/phone_list.module';
-import phoneDetail from './phone_detail/phone_detail.module';
-
-upgradeAdapter.addProvider(HTTP_PROVIDERS);
-// #docregion upgrade-route-params
-upgradeAdapter.upgradeNg1Provider('$routeParams');
-// #enddocregion
-angular.module('phonecatApp', [
-  'ngRoute',
-  core.name,
-  phoneList.name,
-  phoneDetail.name
-]).config(configure);
-
-configure.$inject = ['$routeProvider'];
-
-function configure($routeProvider) { }
-  // #docregion list-route
-  $routeProvider.
-    when('/phones', {
-      template: '<pc-phone-list></pc-phone-list>'
-    }).
-  // #enddocregion list-route
-  // #docregion detail-route
-    when('/phones/:phoneId', {
-      template: '<pc-phone-detail></pc-phone-detail>'
-    }).
-  // #enddocregion detail-route
-    otherwise({
-      redirectTo: '/phones'
-    });
-}
-
-// #docregion app-bootstrap
-upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
-// #enddocregion app-bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts
deleted file mode 100644
index c3e1ba514b..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Phones } from './phones.service';
-import upgradeAdapter from './upgrade_adapter';
-
-upgradeAdapter.addProvider(Phones);
-
-export default angular.module('phonecat.core', [])
-  .factory('phones', upgradeAdapter.downgradeNg2Provider(Phones));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts
deleted file mode 100644
index f1ad63012a..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/core/upgrade_adapter.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion full
-import { UpgradeAdapter } from '@angular/upgrade';
-
-// #docregion adapter-init
-const upgradeAdapter = new UpgradeAdapter();
-// #enddocregion adapter-init
-
-export default upgradeAdapter;
-// #enddocregion full
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts
deleted file mode 100644
index 2a31fb503d..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import PhoneDetail from './phone_detail.component';
-import upgradeAdapter from '../core/upgrade_adapter';
-
-export default angular.module('phonecat.detail', [
-    'ngRoute',
-    'phonecat.core'
-  ])
-  .directive('pcPhoneDetail',
-    <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(PhoneDetail))
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts
deleted file mode 100644
index d876e28861..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion full
-// #docregion top
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Phones, Phone } from '../core/phones.service';
-import PhoneFilterPipe from './phone_filter.pipe';
-import OrderByPipe from './order_by.pipe';
-
-@Component({
-  selector: 'pc-phone-list',
-  templateUrl: 'js/phone_list/phone_list.html',
-  pipes: [PhoneFilterPipe, OrderByPipe],
-})
-class PhoneList {
-// #enddocregion top
-
-  phones:Observable<Phone[]>;
-  orderProp:string;
-  query:string;
-  constructor(phones:Phones) {
-    this.phones = phones.query();
-    this.orderProp = 'age';
-  }
-}
-
-export default PhoneList;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.module.ts
deleted file mode 100644
index 4632cc90f5..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import PhoneList from './phone_list.component';
-import upgradeAdapter from '../core/upgrade_adapter';
-
-export default angular.module('phonecat.list', [
-    'phonecat.core'
-  ])
-  .directive('pcPhoneList',
-    <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(PhoneList));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts
deleted file mode 100644
index d967ce464e..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion top
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Phone, Phones } from '../core/phones.service';
-
-@Component({
-  selector: 'pc-phone-list',
-  templateUrl: 'js/phone_list/phone_list.html'
-})
-class PhoneList {
-// #enddocregion top
-
-  phones:Observable<Phone[]>;
-  orderProp:string;
-  query:string;
-  constructor(phones:Phones) {
-    this.phones = phones.query();
-    this.orderProp = 'age';
-  }
-}
-
-export default PhoneList;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail-without-pipes.component.ts
similarity index 52%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail-without-pipes.component.ts
index 0926ffeb84..19d61f82a6 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail-without-pipes.component.ts
@@ -1,29 +1,30 @@
 // #docregion
 import { Component, Inject } from '@angular/core';
-import { Phone, Phones } from '../core/phones.service';
+import {Phone, PhoneData} from '../core/phone/phone.service';
 
 interface PhoneRouteParams {
   phoneId: string
 }
 
 @Component({
-  selector: 'pc-phone-detail',
-  templateUrl: 'js/phone_detail/phone_detail.html'
+  selector: 'phone-detail',
+  templateUrl: 'phone-detail/phone-detail.html'
 })
-class PhoneDetail {
-  phone:Phone = undefined;
+export default class PhoneDetail {
+  phone:PhoneData;
   mainImageUrl:string;
+
   constructor(@Inject('$routeParams') $routeParams:PhoneRouteParams,
-              phones:Phones) {
-    phones.get($routeParams.phoneId)
+              phone:Phone) {
+    phone.get($routeParams.phoneId)
       .subscribe(phone => {
         this.phone = phone;
-        this.mainImageUrl = phone.images[0];
+        this.setImage(phone.images[0]);
       });
   }
 
   setImage(url:string) {
     this.mainImageUrl = url;
   }
+
 }
-export default PhoneDetail;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.spec.ts
similarity index 76%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.spec.ts
index a94a28f055..aa02d6f1d6 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.spec.ts
@@ -2,6 +2,7 @@
 import {provide} from '@angular/core';
 import {HTTP_PROVIDERS} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
+
 import {
   describe,
   beforeEachProviders,
@@ -11,10 +12,10 @@ import {
 } from '@angular/core/testing';
 import {TestComponentBuilder} from '@angular/compiler/testing';
 
-import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
-import {Phones, Phone} from '../../app/js/core/phones.service';
+import PhoneDetail from './phone-detail.component';
+import {Phone, PhoneData} from '../core/phone/phone.service';
 
-function xyzPhoneData():Phone {
+function xyzPhoneData():PhoneData {
   return {
     name: 'phone xyz',
     snippet: '',
@@ -22,8 +23,8 @@ function xyzPhoneData():Phone {
   }
 }
 
-class MockPhones extends Phones {
-  get(id):Observable<Phone> {
+class MockPhone extends Phone {
+  get(id: string):Observable<PhoneData> {
     return Observable.of(xyzPhoneData());
   }
 }
@@ -31,7 +32,7 @@ class MockPhones extends Phones {
 describe('PhoneDetail', () => {
 
   beforeEachProviders(() => [
-    provide(Phones, {useClass: MockPhones}),
+    provide(Phone, {useClass: MockPhone}),
     provide('$routeParams', {useValue: {phoneId: 'xyz'}}),
     HTTP_PROVIDERS
   ]);
@@ -40,7 +41,6 @@ describe('PhoneDetail', () => {
     return tcb.createAsync(PhoneDetail).then((fixture) => {
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
-
       expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name);
     });
   }));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.ts
similarity index 52%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.ts
index dc6c1ff4fd..aa68f7ebcf 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.ts
@@ -1,33 +1,34 @@
 // #docregion
 // #docregion top
 import { Component, Inject } from '@angular/core';
-import { Phones, Phone } from '../core/phones.service';
-import { CheckmarkPipe } from '../core/checkmark.pipe';
+import { Phone, PhoneData } from '../core/phone/phone.service';
+import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe';
 
 interface PhoneRouteParams {
   phoneId: string
 }
 
 @Component({
-  selector: 'pc-phone-detail',
-  templateUrl: 'js/phone_detail/phone_detail.html',
+  selector: 'phone-detail',
+  templateUrl: 'phone-detail/phone-detail.template.html',
   pipes: [CheckmarkPipe]
 })
-class PhoneDetail {
 // #enddocregion top
-  phone:Phone = undefined;
+export default class PhoneDetail {
+  phone:PhoneData;
   mainImageUrl:string;
+
   constructor(@Inject('$routeParams') $routeParams:PhoneRouteParams,
-              phones:Phones) {
-    phones.get($routeParams.phoneId)
+              phone:Phone) {
+    phone.get($routeParams.phoneId)
       .subscribe(phone => {
         this.phone = phone;
-        this.mainImageUrl = phone.images[0];
+        this.setImage(phone.images[0]);
       });
   }
 
   setImage(url:string) {
     this.mainImageUrl = url;
   }
+
 }
-export default PhoneDetail;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.module.ts
new file mode 100644
index 0000000000..251cf8223d
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.module.ts
@@ -0,0 +1,11 @@
+// #docregion
+import PhoneDetail from './phone-detail.component';
+import phone from '../core/phone/phone.module';
+import upgradeAdapter from '../core/upgrade-adapter';
+
+export default angular.module('phoneDetail', [
+    'ngRoute',
+    phone.name
+  ])
+  .directive('phoneDetail',
+    <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(PhoneDetail));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.template.html
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.html
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.template.html
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.spec.ts
similarity index 89%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.spec.ts
index f8a8401b7f..f19f5d3534 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.spec.ts
@@ -1,7 +1,7 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
 
-import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
+import OrderByPipe from './order-by.pipe';
 
 describe('OrderByPipe', function() {
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.ts
similarity index 74%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.ts
index 162b91cf60..3366ceae7a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/order_by.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.ts
@@ -1,8 +1,8 @@
 // #docregion
-import { Pipe } from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({name: 'orderBy'})
-export default class OrderByPipe {
+export default class OrderByPipe implements PipeTransform {
 
   transform<T>(input:T[], property:string): T[] {
     if (input) {
@@ -15,7 +15,7 @@ export default class OrderByPipe {
           return 0;
         }
       });
-    } else {
+    } else {
       return input;
     }
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.spec.ts
similarity index 80%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.spec.ts
index 6de1e5722d..a891438e0b 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.spec.ts
@@ -1,12 +1,11 @@
 // #docregion
 import { describe, beforeEachProviders, it, inject } from '@angular/core/testing';
 
-import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
-import { Phone } from '../../app/js/core/phones.service';
+import PhoneFilterPipe from './phone-filter.pipe';
+import {PhoneData} from '../core/phone/phone.service';
 
-describe('PhoneFilterPipe', () => {
-
-  let phones:Phone[] = [
+describe('PhoneFilterPipe', function() {
+  let phones:PhoneData[] = [
     {name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
     {name: 'Motorola DROID', snippet: 'an Android-for-business smartphone', images: []}
   ];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.ts
similarity index 55%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.ts
index 9f38608e8f..7c6e0630e0 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.ts
@@ -1,19 +1,20 @@
 // #docregion
-import { Pipe } from '@angular/core';
-import { Phone } from '../core/phones.service';
+import { Pipe, PipeTransform } from '@angular/core';
+import {PhoneData} from '../core/phone/phone.service';
+
 
 @Pipe({name: 'phoneFilter'})
-export default class PhoneFilterPipe {
+export default class PhoneFilterPipe implements PipeTransform {
 
-  transform(input:Phone[], query:string = ''): Phone[] {
-    if (input) {
+  transform(input:PhoneData[], query:string): PhoneData[] {
+    if (query) {
       query = query.toLowerCase();
       return input.filter((phone) => {
         const name = phone.name.toLowerCase();
         const snippet = phone.snippet.toLowerCase();
         return name.indexOf(query) >= 0 || snippet.indexOf(query) >= 0;
       });
-    } else {
+    } else {
       return input;
     }
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_async.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-async.template.html
similarity index 99%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_async.html
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-async.template.html
index c77090c96c..1f6cc09906 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_async.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-async.template.html
@@ -15,7 +15,6 @@
     </div>
     <div class="col-md-10">
       <!--Body content-->
-
       <!-- #docregion list -->
       <ul class="phones">
         <li *ngFor="let phone of phones | phoneFilter:query | orderBy:orderProp"
@@ -26,7 +25,6 @@
         </li>
       </ul>
       <!-- #enddocregion list -->
-
     </div>
   </div>
 </div>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.component.ts
new file mode 100644
index 0000000000..f7e568d9f0
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.component.ts
@@ -0,0 +1,21 @@
+// #docregion
+import {Component} from '@angular/core';
+import {Phone, PhoneData} from '../core/phone/phone.service';
+
+@Component({
+  selector: 'phone-list',
+  templateUrl: 'phone-list/phone-list.template.html'
+})
+export class PhoneList {
+  phones:PhoneData[];
+  orderProp:string;
+  query:string;
+
+  constructor(phone:Phone) {
+    phone.query().subscribe(phones => {
+      this.phones = phones;
+    });
+    this.orderProp = 'age';
+  }
+
+}
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.template.html
similarity index 99%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.html
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.template.html
index 1a9d3fefb3..25618e578a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.template.html
@@ -15,7 +15,6 @@
     </div>
     <div class="col-md-10">
       <!--Body content-->
-
       <!-- #docregion list -->
       <ul class="phones">
         <li *ngFor="let phone of phones | filter:query | orderBy:orderProp"
@@ -26,7 +25,6 @@
         </li>
       </ul>
       <!-- #enddocregion list -->
-
     </div>
   </div>
 </div>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.spec.ts
similarity index 79%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.spec.ts
index d3d87f2a6f..4ef46ab338 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.spec.ts
@@ -2,6 +2,7 @@
 import {provide} from '@angular/core';
 import {HTTP_PROVIDERS} from '@angular/http';
 import {Observable} from 'rxjs/Rx';
+
 import {
   describe,
   beforeEachProviders,
@@ -11,13 +12,16 @@ import {
 } from '@angular/core/testing';
 import {TestComponentBuilder} from '@angular/compiler/testing';
 
-import PhoneList from '../../app/js/phone_list/phone_list.component';
-import {Phones, Phone} from '../../app/js/core/phones.service';
+import PhoneList from './phone-list.component';
+import {Phone, PhoneData} from '../core/phone/phone.service';
 
-class MockPhones extends Phones {
-  query():Observable<Phone[]> {
+class MockPhone extends Phone {
+  query():Observable<PhoneData[]> {
     return Observable.of(
-      [{name: 'Nexus S', snippet: ''}, {name: 'Motorola DROID', snippet: ''}]
+      [
+        {name: 'Nexus S', snippet: '', images: []},
+        {name: 'Motorola DROID', snippet: '', images: []}
+      ]
     )
   }
 }
@@ -25,25 +29,21 @@ class MockPhones extends Phones {
 describe('PhoneList', () => {
 
   beforeEachProviders(() => [
-    provide(Phones, {useClass: MockPhones}),
+    provide(Phone, {useClass: MockPhone}),
     HTTP_PROVIDERS
   ]);
 
-
   it('should create "phones" model with 2 phones fetched from xhr',
       inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
-
       let compiled = fixture.debugElement.nativeElement;
-
       expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
       expect(compiled.querySelector('.phone-listing:nth-child(1)').textContent).toContain('Nexus S');
       expect(compiled.querySelector('.phone-listing:nth-child(2)').textContent).toContain('Motorola DROID');
     });
   }));
 
-
   it('should set the default value of orderProp model',
       inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.ts
new file mode 100644
index 0000000000..94b4491dba
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.ts
@@ -0,0 +1,25 @@
+// #docregion
+// #docregion top
+import {Component} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Phone, PhoneData} from '../core/phone/phone.service';
+import PhoneFilterPipe from './phone-filter.pipe';
+import OrderByPipe from './order-by.pipe';
+
+@Component({
+  selector: 'phone-list',
+  templateUrl: 'phone-list/phone-list.template.html',
+  pipes: [PhoneFilterPipe, OrderByPipe]
+})
+// #enddocregion top
+export default class PhoneList {
+  phones:Observable<PhoneData[]>;
+  orderProp:string;
+  query:string;
+
+  constructor(phone:Phone) {
+    this.phones = phone.query();
+    this.orderProp = 'age';
+  }
+
+}
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.module.ts
new file mode 100644
index 0000000000..6842d5a7fc
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.module.ts
@@ -0,0 +1,8 @@
+// #docregion
+import PhoneList from './phone-list.component';
+import phone from '../core/phone/phone.module';
+import upgradeAdapter from '../core/upgrade-adapter';
+
+export default angular.module('phoneList', [phone.name])
+  .directive('phoneList',
+    <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(PhoneList));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.template.html
similarity index 99%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.html
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.template.html
index 7934a38283..29dcf85365 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.template.html
@@ -15,7 +15,6 @@
     </div>
     <div class="col-md-10">
       <!--Body content-->
-
       <!-- #docregion list -->
       <ul class="phones">
         <li *ngFor="let phone of phones | async | phoneFilter:query | orderBy:orderProp"
@@ -26,7 +25,6 @@
         </li>
       </ul>
       <!-- #enddocregion list -->
-
     </div>
   </div>
 </div>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/systemjs.config.js
index b7b216914c..5765cb282b 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/systemjs.config.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/systemjs.config.js
@@ -8,7 +8,7 @@ System.config({
     '@angular':                   pkgPath + '@angular'
   },
   packages: {
-    'js':                                { defaultExtension: 'js' },
+    './':                                { defaultExtension: 'js' },
 
     '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
     '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
@@ -17,6 +17,7 @@ System.config({
     '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
     '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
     '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router-deprecated':        { main: 'index.js', defaultExtension: 'js' },
     '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
     'rxjs':                              { defaultExtension: 'js' }
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/protractor-conf.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/e2e-tests/protractor-conf.js
similarity index 94%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/protractor-conf.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/e2e-tests/protractor-conf.js
index 490e9bd078..6252ae848e 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/protractor-conf.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/e2e-tests/protractor-conf.js
@@ -2,7 +2,7 @@ exports.config = {
   allScriptsTimeout: 11000,
 
   specs: [
-    'e2e/*.js'
+    '*.js'
   ],
 
   capabilities: {
@@ -10,7 +10,7 @@ exports.config = {
   },
 
   directConnect: true,
-
+  
   baseUrl: 'http://localhost:8000/',
 
   framework: 'jasmine',
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/e2e/scenarios.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/e2e-tests/scenarios.js
similarity index 81%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/e2e/scenarios.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/e2e-tests/scenarios.js
index 1da0896c0d..81f2d9f7fc 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/e2e/scenarios.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/e2e-tests/scenarios.js
@@ -18,6 +18,7 @@ describe('PhoneCat App', function() {
       browser.get('app/index.html#/phones');
     });
 
+
     it('should filter the phone list as a user types into the search box', function() {
       var phoneList = element.all(by.css('.phones li'));
       var query = element(by.css('input'));
@@ -28,17 +29,13 @@ describe('PhoneCat App', function() {
       expect(phoneList.count()).toBe(1);
 
       query.clear();
-      // https://github.com/angular/protractor/issues/2019
-      var str = 'motorola';
-      for (var i = 0; i < str.length; i++) {
-        query.sendKeys(str.charAt(i));
-      }
-
+      query.sendKeys('motorola');
       expect(phoneList.count()).toBe(8);
     });
 
 
     it('should be possible to control phone order via the drop down select box', function() {
+
       var phoneNameColumn = element.all(by.css('.phones .name'));
       var query = element(by.css('input'));
 
@@ -48,12 +45,7 @@ describe('PhoneCat App', function() {
         });
       }
 
-      //let's narrow the dataset to make the test assertions shorter
-      // https://github.com/angular/protractor/issues/2019
-      var str = 'tablet';
-      for (var i = 0; i < str.length; i++) {
-        query.sendKeys(str.charAt(i));
-      }
+      query.sendKeys('tablet'); //let's narrow the dataset to make the test assertions shorter
 
       expect(getNames()).toEqual([
         "Motorola XOOM\u2122 with Wi-Fi",
@@ -71,11 +63,7 @@ describe('PhoneCat App', function() {
 
     it('should render phone specific links', function() {
       var query = element(by.css('input'));
-      // https://github.com/angular/protractor/issues/2019
-      var str = 'nexus';
-      for (var i = 0; i < str.length; i++) {
-        query.sendKeys(str.charAt(i));
-      }
+      query.sendKeys('nexus');
       element.all(by.css('.phones li a')).first().click();
       browser.getLocationAbsUrl().then(function(url) {
         expect(url).toEqual('/phones/nexus-s');
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/karma.conf.1.js
new file mode 100644
index 0000000000..2c6ae448a0
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/karma.conf.1.js
@@ -0,0 +1,59 @@
+module.exports = function(config){
+  config.set({
+
+    baseDir: '.',
+
+    // #docregion ng2
+    // #docregion html
+    files : [
+    // #enddocregion html
+    // #enddocregion ng2
+      'app/bower_components/angular/angular.js',
+      'app/bower_components/angular-route/angular-route.js',
+      'app/bower_components/angular-resource/angular-resource.js',
+      'app/bower_components/angular-animate/angular-animate.js',
+      'app/bower_components/angular-mocks/angular-mocks.js',
+      'node_modules/systemjs/dist/system-polyfills.js',
+      'node_modules/systemjs/dist/system.src.js',
+      // #docregion ng2
+      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/reflect-metadata/Reflect.js',
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
+      // #enddocregion ng2
+      'karma_test_shim.js',
+      {pattern: 'app/**/*.module.js', included: false, watched: true},
+      {pattern: 'app/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/**/*.spec.js', included: false, watched: true},
+      // #docregion html
+      {pattern: 'app/**/*.html', included: false, watched: true}
+    // #docregion ng2
+    ],
+    // #enddocregion ng2
+
+    proxies: {
+      // required for component assets fetched by Angular's compiler
+      "/": "/base/app/"
+    },
+    // #enddocregion html
+
+    autoWatch : true,
+
+    frameworks: ['jasmine'],
+
+    browsers : ['Chrome', 'Firefox'],
+
+    plugins : [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-jasmine'
+    ],
+
+    junitReporter : {
+      outputFile: 'test_out/unit.xml',
+      suite: 'unit'
+    }
+  });
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/karma_test_shim.js
similarity index 75%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma_test_shim.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_components/karma_test_shim.js
index 7aa6c9ec90..edb4033652 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/karma_test_shim.js
@@ -5,11 +5,11 @@ __karma__.loaded = function() {};
 
 System.config({
   map: {
-    'rxjs': 'base/node_modules/rxjs',
-    '@angular': 'base/node_modules/@angular'
+    'rxjs':                       'base/node_modules/rxjs',
+    '@angular':                   'base/node_modules/@angular'
   },
   packages: {
-    'base/app/js': {
+    'base': {
       defaultExtension: false,
       format: 'register',
       map: Object.keys(window.__karma__.files).
@@ -17,7 +17,7 @@ System.config({
             reduce(function createPathRecords(pathsMapping, appPath) {
               // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
               // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
-              var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
+              var moduleName = appPath.replace(/^\/base\//, './').replace(/\.js$/, '');
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
@@ -29,6 +29,7 @@ System.config({
     '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
     '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
     '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router-deprecated':        { main: 'index.js', defaultExtension: 'js' },
     '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
     'rxjs':                              { defaultExtension: 'js' }
   }
@@ -37,26 +38,26 @@ System.config({
 // #docregion ng2
 System.import('@angular/core/testing').then(function(testing) {
   return System.import('@angular/platform-browser-dynamic/testing').then(function(browserTesting) {
-    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_PLATFORM_PROVIDERS,
-                                 browserTesting.TEST_BROWSER_APPLICATION_PROVIDERS);
+    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+                                 browserTesting.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
   });
 }).then(function() {
-  return Promise.all(
+  Promise.all(
     Object.keys(window.__karma__.files) // All files served by Karma.
     .filter(onlySpecFiles)
     .map(function(moduleName) {
       // loads all spec files via their global module names
       return System.import(moduleName);
-  }));
-}).then(function() {
-  __karma__.start();
-}, function(error) {
-  __karma__.error(error.stack || error);
+  }))
+  .then(function() {
+    __karma__.start();
+  }, function(error) {
+    __karma__.error(error.stack || error);
+  });
 });
-// #enddocregion ng2
 
 function onlyAppFiles(filePath) {
-  return /^\/base\/app\/js\/.*\.js$/.test(filePath)
+  return /^\/base\/.*\.(?!\.spec\.)js$/.test(filePath)
 }
 
 function onlySpecFiles(path) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
index 425ad7b82f..15902577d7 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
@@ -6,14 +6,15 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "@angular/common":  "0.0.0-3",
-    "@angular/compiler":  "0.0.0-3",
-    "@angular/core":  "0.0.0-3",
-    "@angular/http":  "0.0.0-3",
-    "@angular/platform-browser":  "0.0.0-3",
-    "@angular/platform-browser-dynamic":  "0.0.0-3",
-    "@angular/router":  "0.0.0-3",
-    "@angular/upgrade":  "0.0.0-3",
+    "@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",
 
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.3",
@@ -27,28 +28,22 @@
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
-    "http-server": "^0.6.1",
-    "tmp": "0.0.23",
-    "bower": "^1.3.1",
     "shelljs": "^0.2.6",
     "typescript": "1.8.10",
     "typings": "^0.7.12"
   },
   "scripts": {
     "postinstall": "bower install",
-
     "prestart": "npm install",
     "start": "http-server -a 0.0.0.0 -p 8000",
 
-    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
-    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
+    "test": "node node_modules/karma/bin/karma start karma.conf.js",
+    "test-single-run": "node node_modules/karma/bin/karma start karma.conf.js  --single-run",
 
     "preupdate-webdriver": "npm install",
     "update-webdriver": "webdriver-manager update",
-
     "preprotractor": "npm run update-webdriver",
-    "protractor": "protractor test/protractor-conf.js",
-
+    "protractor": "protractor e2e-tests/protractor-conf.js",
     "typings": "typings",
     "tsc": "tsc -p . -w"
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phones.service.spec.ts
deleted file mode 100644
index c70f25c5ca..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phones.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
-import {HTTP_PROVIDERS} from '@angular/http';
-import {Phones} from '../../app/js/core/phones.service';
-
-describe('Phones', function() {
-
-  // load providers
-  beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);
-
-  // Test service availability
-  it('check the existence of Phones', inject([Phones], (phones) => {
-    expect(phones).toBeDefined();
-  }));
-
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/app.component.ts
similarity index 62%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/app.component.ts
index a959a641a2..bfcc6e391a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/app.component.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/app.component.ts
@@ -1,9 +1,9 @@
 // #docregion
 import { Component } from '@angular/core';
-import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router';
+import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
 
-import PhoneList from './phone_list/phone_list.component';
-import PhoneDetail from './phone_detail/phone_detail.component';
+import PhoneList from './phone-list/phone-list.component';
+import PhoneDetail from './phone-detail/phone-detail.component';
 
 @RouteConfig([
   {path:'/phones', name: 'Phones', component: PhoneList},
@@ -11,7 +11,7 @@ import PhoneDetail from './phone_detail/phone_detail.component';
   {path:'/', redirectTo: ['Phones']}
 ])
 @Component({
-  selector: 'pc-app',
+  selector: 'phonecat-app',
   template: '<router-outlet></router-outlet>',
   directives: [ROUTER_DIRECTIVES]
 })
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/checkmark/checkmark.pipe.spec.ts
similarity index 80%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/checkmark/checkmark.pipe.spec.ts
index c9a1def071..aedfbd011b 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/checkmark.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/checkmark/checkmark.pipe.spec.ts
@@ -1,9 +1,9 @@
 // #docregion
 import { describe, beforeEachProviders, it, inject, expect } from '@angular/core/testing';
 
-import { CheckmarkPipe } from '../../app/js/core/checkmark.pipe';
+import {CheckmarkPipe} from './checkmark.pipe';
 
-describe('CheckmarkPipe', () => {
+describe('CheckmarkPipe', function() {
 
   beforeEachProviders(() => [CheckmarkPipe]);
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/checkmark/checkmark.pipe.ts
similarity index 53%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/checkmark/checkmark.pipe.ts
index d129a44e50..68a40c8b00 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/checkmark.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/checkmark/checkmark.pipe.ts
@@ -1,8 +1,8 @@
 // #docregion
-import { Pipe } from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({name: 'checkmark'})
-export class CheckmarkPipe {
+export class CheckmarkPipe implements PipeTransform {
   transform(input:string): string {
     return input ? '\u2713' : '\u2718';
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/phone/phone.service.spec.ts
new file mode 100644
index 0000000000..e0dceedfa3
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,43 @@
+// #docregion
+import {provide} from '@angular/core';
+import {describe, beforeEach, beforeEachProviders, it, inject} from '@angular/core/testing';
+import {Http, BaseRequestOptions, ResponseOptions, Response} from '@angular/http';
+import {MockBackend} from '@angular/http/testing';
+import {Phone, PhoneData} from './phone.service';
+
+describe('Phone', function() {
+  var phone;
+  var phonesData:PhoneData[] = [
+    {name: 'Phone X', snippet: '', images: []},
+    {name: 'Phone Y', snippet: '', images: []},
+    {name: 'Phone Z', snippet: '', images: []}
+  ];
+  var mockBackend;
+
+  // load providers
+  beforeEachProviders(() => [
+    Phone,
+    MockBackend,
+    BaseRequestOptions,
+    provide(Http, {
+      useFactory: (backend, options) => new Http(backend, options),
+      deps: [MockBackend, BaseRequestOptions]
+    })
+  ]);
+
+  beforeEach(inject([MockBackend, Phone], (_mockBackend_, _phone_) => {
+    mockBackend = _mockBackend_;
+    phone = _phone_;
+  }));
+
+  it('should fetch the phones data from `/phones/phones.json`', (done) => {
+    mockBackend.connections.subscribe(connection => {
+      connection.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
+    });
+    phone.query().subscribe(result => {
+      expect(result).toEqual(phonesData);
+      done();
+    });
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/phone/phone.service.ts
similarity index 75%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/phone/phone.service.ts
index 96cce48520..aabc995b3c 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/core/phone/phone.service.ts
@@ -5,34 +5,32 @@ import { Observable } from 'rxjs/Rx';
 
 import 'rxjs/add/operator/map';
 
-// #docregion phone-interface
-export interface Phone {
+// #docregion phonedata-interface
+export interface PhoneData {
   name: string;
   snippet: string;
   images: string[];
 }
-// #enddocregion phone-interface
+// #enddocregion phonedata-interface
 
-// #docregion fullclass
 // #docregion class
+// #docregion fullclass
 @Injectable()
-export class Phones {
+export class Phone {
 // #enddocregion class
 
   constructor(private http: Http) { }
 
-  query():Observable<Phone[]> {
+  query():Observable<PhoneData[]> {
     return this.http.get(`phones/phones.json`)
       .map((res:Response) => res.json());
   }
 
-  get(id: string):Observable<Phone> {
+  get(id: string):Observable<PhoneData> {
     return this.http.get(`phones/${id}.json`)
       .map((res:Response) => res.json());
   }
-
 // #docregion class
 }
-// #enddocregion class
 // #enddocregion fullclass
-// #docregion full
+// #enddocregion class
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/css/.gitkeep b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/css/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
index a1dfd126cf..d255279e0c 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
@@ -14,13 +14,13 @@
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="systemjs.config.js"></script>
   <script>
-    System.import('js/main');
+    System.import('./main');
   </script>
   <!-- #enddocregion scripts -->
 </head>
 <!-- #docregion body -->
 <body>
-  <pc-app></pc-app>
+  <phonecat-app></phonecat-app>
 </body>
 <!-- #enddocregion body -->
 </html>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts
deleted file mode 100644
index a6bfb4cb13..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// #docregion
-// #docregion top
-import { Component, Inject } from '@angular/core';
-import { RouteParams } from '@angular/router';
-
-import { Phones, Phone } from '../core/phones.service';
-import { CheckmarkPipe } from '../core/checkmark.pipe';
-
-@Component({
-  selector: 'pc-phone-detail',
-  templateUrl: 'js/phone_detail/phone_detail.html',
-  pipes: [CheckmarkPipe]
-})
-class PhoneDetail {
-// #enddocregion top
-  phone:Phone = undefined;
-  mainImageUrl:string;
-  constructor(params:RouteParams,
-              phones:Phones) {
-    phones.get(params.get('phoneId'))
-      .subscribe(phone => {
-        this.phone = phone;
-        this.mainImageUrl = phone.images[0];
-      });
-  }
-
-  setImage(url:string) {
-    this.mainImageUrl = url;
-  }
-}
-export default PhoneDetail;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts
deleted file mode 100644
index 2899bfbbb0..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docregion full
-// #docregion top
-import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { Observable } from 'rxjs';
-
-import { Phones, Phone } from '../core/phones.service';
-import PhoneFilterPipe from './phone_filter.pipe';
-import OrderByPipe from './order_by.pipe';
-
-@Component({
-  selector: 'pc-phone-list',
-  templateUrl: 'js/phone_list/phone_list.html',
-  pipes: [PhoneFilterPipe, OrderByPipe],
-  directives: [RouterLink]
-})
-class PhoneList {
-// #enddocregion top
-
-  phones:Observable<Phone[]>;
-  orderProp:string;
-  query:string;
-  constructor(phones:Phones) {
-    this.phones = phones.query();
-    this.orderProp = 'age';
-  }
-}
-
-export default PhoneList;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/main.ts
similarity index 82%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/main.ts
index fa854b1946..fcda5350b8 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/main.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/main.ts
@@ -3,9 +3,9 @@
 import { provide } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { bootstrap } from '@angular/platform-browser-dynamic';
-import { ROUTER_PROVIDERS } from '@angular/router';
+import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
-import { Phones } from './core/phones.service';
+import {Phone} from './core/phone/phone.service';
 import AppComponent from './app.component';
 // #enddocregion importbootstrap
 
@@ -18,6 +18,6 @@ bootstrap(AppComponent, [
   HTTP_PROVIDERS,
   ROUTER_PROVIDERS,
   provide(LocationStrategy, {useClass: HashLocationStrategy}),
-  Phones
+  Phone
 ]);
 // #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.spec.ts
similarity index 73%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.spec.ts
index 380eb62470..a08fb622fb 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.spec.ts
@@ -1,9 +1,13 @@
+// #docregion
+
 import { provide } from '@angular/core';
+
 // #docregion routeparams
-import { RouteParams } from '@angular/router';
+import { RouteParams } from '@angular/router-deprecated';
 // #enddocregion routeparams
 import { HTTP_PROVIDERS } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
+
 import {
   describe,
   beforeEachProviders,
@@ -13,10 +17,10 @@ import {
 } from '@angular/core/testing';
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
-import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
-import { Phones, Phone } from '../../app/js/core/phones.service';
+import PhoneDetail from './phone-detail.component';
+import {Phone, PhoneData} from '../core/phone/phone.service';
 
-function xyzPhoneData():Phone {
+function xyzPhoneData():PhoneData {
   return {
     name: 'phone xyz',
     snippet: '',
@@ -24,17 +28,17 @@ function xyzPhoneData():Phone {
   }
 }
 
-class MockPhones extends Phones {
-  get(id):Observable<Phone> {
+class MockPhone extends Phone {
+  get(id):Observable<PhoneData> {
     return Observable.of(xyzPhoneData());
   }
 }
 
-// #docregion routeparams
 describe('PhoneDetail', () => {
 
+  // #docregion routeparams
   beforeEachProviders(() => [
-    provide(Phones, {useClass: MockPhones}),
+    provide(Phone, {useClass: MockPhone}),
     provide(RouteParams, {useValue: new RouteParams({phoneId: 'xyz'})}),
     HTTP_PROVIDERS
   ]);
@@ -44,7 +48,6 @@ describe('PhoneDetail', () => {
     return tcb.createAsync(PhoneDetail).then((fixture) => {
       fixture.detectChanges();
       let compiled = fixture.debugElement.nativeElement;
-
       expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name);
     });
   }));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.ts
new file mode 100644
index 0000000000..b45ce08d6a
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.ts
@@ -0,0 +1,31 @@
+// #docregion
+// #docregion top
+import {Component, Inject} from '@angular/core';
+import {RouteParams} from '@angular/router-deprecated';
+import {Phone, PhoneData} from '../core/phone/phone.service';
+import {CheckmarkPipe} from '../core/checkmark/checkmark.pipe';
+
+@Component({
+  selector: 'phone-detail',
+  templateUrl: 'phone-detail/phone-detail.template.html',
+  pipes: [CheckmarkPipe]
+})
+// #enddocregion top
+export default class PhoneDetail {
+  phone:PhoneData = undefined;
+  mainImageUrl:string;
+
+  constructor(routeParams:RouteParams,
+              phone:Phone) {
+    phone.get(routeParams.get('phoneId'))
+      .subscribe(phone => {
+        this.phone = phone;
+        this.setImage(phone.images[0]);
+      });
+  }
+
+  setImage(url:string) {
+    this.mainImageUrl = url;
+  }
+
+}
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.template.html
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.html
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.template.html
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/order-by.pipe.spec.ts
similarity index 83%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/order-by.pipe.spec.ts
index 416ca0797b..5a64f34c17 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/order_by.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/order-by.pipe.spec.ts
@@ -1,9 +1,8 @@
 // #docregion
 import { describe, beforeEachProviders, it, inject } from '@angular/core/testing';
+import OrderByPipe from './order-by.pipe';
 
-import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
-
-describe('OrderByPipe', () => {
+describe('OrderByPipe', function() {
 
   let input:any[] = [
     {name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/order-by.pipe.ts
similarity index 74%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/order-by.pipe.ts
index 162b91cf60..3366ceae7a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/order-by.pipe.ts
@@ -1,8 +1,8 @@
 // #docregion
-import { Pipe } from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({name: 'orderBy'})
-export default class OrderByPipe {
+export default class OrderByPipe implements PipeTransform {
 
   transform<T>(input:T[], property:string): T[] {
     if (input) {
@@ -15,7 +15,7 @@ export default class OrderByPipe {
           return 0;
         }
       });
-    } else {
+    } else {
       return input;
     }
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-filter.pipe.spec.ts
similarity index 84%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-filter.pipe.spec.ts
index 78747b0aa0..e23dd30e3d 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-filter.pipe.spec.ts
@@ -1,12 +1,11 @@
 // #docregion
 import {describe, beforeEachProviders, it, inject} from '@angular/core/testing';
 
-import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
-import {Phone} from '../../app/js/core/phones.service';
+import PhoneFilterPipe from './phone-filter.pipe';
+import {PhoneData} from '../core/phone/phone.service';
 
 describe('PhoneFilterPipe', function() {
-
-  let phones:Phone[] = [
+  let phones:PhoneData[] = [
     {name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
     {name: 'Motorola DROID', snippet: 'an Android-for-business smartphone', images: []}
   ];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-filter.pipe.ts
similarity index 56%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-filter.pipe.ts
index 9f38608e8f..42b4c1b9c7 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-filter.pipe.ts
@@ -1,19 +1,19 @@
 // #docregion
-import { Pipe } from '@angular/core';
-import { Phone } from '../core/phones.service';
+import { Pipe, PipeTransform } from '@angular/core';
+import {PhoneData} from '../core/phone/phone.service';
 
 @Pipe({name: 'phoneFilter'})
-export default class PhoneFilterPipe {
+export default class PhoneFilterPipe implements PipeTransform {
 
-  transform(input:Phone[], query:string = ''): Phone[] {
-    if (input) {
+  transform(input:PhoneData[], query:string): PhoneData[] {
+    if (query) {
       query = query.toLowerCase();
       return input.filter((phone) => {
         const name = phone.name.toLowerCase();
         const snippet = phone.snippet.toLowerCase();
         return name.indexOf(query) >= 0 || snippet.indexOf(query) >= 0;
       });
-    } else {
+    } else {
       return input;
     }
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.spec.ts
similarity index 80%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.spec.ts
index 85a6f7335f..15882bc167 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.spec.ts
@@ -2,7 +2,7 @@
 import { provide, ApplicationRef } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { HTTP_PROVIDERS } from '@angular/http';
-import { ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT } from '@angular/router';
+import { ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT } from '@angular/router-deprecated';
 import { Observable } from 'rxjs/Rx';
 import {
   describe,
@@ -15,44 +15,42 @@ import {
 import { MockLocationStrategy } from '@angular/common/testing';
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
-import AppComponent from '../../app/js/app.component';
-import PhoneList from '../../app/js/phone_list/phone_list.component';
-import { Phones, Phone } from '../../app/js/core/phones.service';
+import AppComponent from '../app.component';
+import PhoneList from './phone-list.component';
+import {Phone, PhoneData} from '../core/phone/phone.service';
 
-class MockPhones extends Phones {
-  query():Observable<Phone[]> {
-    return Observable.of(
-      [{name: 'Nexus S', snippet: ''}, {name: 'Motorola DROID', snippet: ''}]
-    )
+
+class MockPhone extends Phone {
+  query():Observable<PhoneData[]> {
+    return Observable.of([
+      {name: 'Nexus S', snippet: '', images: []},
+      {name: 'Motorola DROID', snippet: '', images: []}
+    ])
   }
 }
 
 describe('PhoneList', () => {
 
   beforeEachProviders(() => [
+    provide(Phone, {useClass: MockPhone}),
     HTTP_PROVIDERS,
     ROUTER_PROVIDERS,
     provide(ApplicationRef, {useClass: MockApplicationRef}),
     provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}),
     provide(LocationStrategy, {useClass: MockLocationStrategy}),
-    provide(Phones, {useClass: MockPhones})
   ]);
 
-
   it('should create "phones" model with 2 phones fetched from xhr',
       inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
       fixture.detectChanges();
-
       let compiled = fixture.debugElement.nativeElement;
-
       expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
       expect(compiled.querySelector('.phone-listing:nth-child(1)').textContent).toContain('Nexus S');
       expect(compiled.querySelector('.phone-listing:nth-child(2)').textContent).toContain('Motorola DROID');
     });
   }));
 
-
   it('should set the default value of orderProp model',
       inject([TestComponentBuilder], (tcb) => {
     return tcb.createAsync(PhoneList).then((fixture) => {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.ts
new file mode 100644
index 0000000000..ae77bf4e3e
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.ts
@@ -0,0 +1,27 @@
+// #docregion
+// #docregion top
+import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router-deprecated';
+import {Observable} from 'rxjs/Observable';
+import {Phone, PhoneData} from '../core/phone/phone.service';
+import PhoneFilterPipe from './phone-filter.pipe';
+import OrderByPipe from './order-by.pipe';
+
+@Component({
+  selector: 'phone-list',
+  templateUrl: 'phone-list/phone-list.template.html',
+  pipes: [PhoneFilterPipe, OrderByPipe],
+  directives: [RouterLink]
+})
+// #enddocregion top
+export default class PhoneList {
+  phones:Observable<PhoneData[]>;
+  orderProp:string;
+  query:string;
+
+  constructor(phone:Phone) {
+    this.phones = phone.query();
+    this.orderProp = 'age';
+  }
+
+}
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.template.html
similarity index 99%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.html
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.template.html
index e88b4662aa..14b5b39289 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.template.html
@@ -15,7 +15,6 @@
     </div>
     <div class="col-md-10">
       <!--Body content-->
-
       <!-- #docregion list -->
       <ul class="phones">
         <li *ngFor="let phone of phones | async | phoneFilter:query | orderBy:orderProp"
@@ -26,7 +25,6 @@
         </li>
       </ul>
       <!-- #enddocregion list -->
-
     </div>
   </div>
 </div>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/systemjs.config.js
index b7b216914c..5765cb282b 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/systemjs.config.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/systemjs.config.js
@@ -8,7 +8,7 @@ System.config({
     '@angular':                   pkgPath + '@angular'
   },
   packages: {
-    'js':                                { defaultExtension: 'js' },
+    './':                                { defaultExtension: 'js' },
 
     '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
     '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
@@ -17,6 +17,7 @@ System.config({
     '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
     '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
     '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router-deprecated':        { main: 'index.js', defaultExtension: 'js' },
     '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
     'rxjs':                              { defaultExtension: 'js' }
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/protractor-conf.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/e2e-tests/protractor-conf.js
similarity index 85%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/protractor-conf.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/e2e-tests/protractor-conf.js
index a1ea324632..35873b4abb 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/protractor-conf.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/e2e-tests/protractor-conf.js
@@ -2,7 +2,7 @@ exports.config = {
   allScriptsTimeout: 11000,
 
   specs: [
-    'e2e/*.js'
+    '*.js'
   ],
 
   capabilities: {
@@ -15,11 +15,11 @@ exports.config = {
 
   framework: 'jasmine',
 
-  jasmineNodeOpts: {
-    defaultTimeoutInterval: 30000
-  },
-
   // #docregion ng2
-  useAllAngular2AppRoots: true
+  useAllAngular2AppRoots: true,
   // #enddocregion ng2
+  
+  jasmineNodeOpts: {
+    defaultTimeoutInterval: 30000
+  }
 };
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/e2e/scenarios.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/e2e-tests/scenarios.js
similarity index 86%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/e2e/scenarios.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/e2e-tests/scenarios.js
index 2e4b884563..624b8ce70a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/e2e/scenarios.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/e2e-tests/scenarios.js
@@ -20,6 +20,7 @@ describe('PhoneCat App', function() {
       browser.get('app/index.html#/phones');
     });
 
+
     it('should filter the phone list as a user types into the search box', function() {
       var phoneList = element.all(by.css('.phones li'));
       var query = element(by.css('input'));
@@ -30,17 +31,13 @@ describe('PhoneCat App', function() {
       expect(phoneList.count()).toBe(1);
 
       query.clear();
-      // https://github.com/angular/protractor/issues/2019
-      var str = 'motorola';
-      for (var i = 0; i < str.length; i++) {
-        query.sendKeys(str.charAt(i));
-      }
-
+      query.sendKeys('motorola');
       expect(phoneList.count()).toBe(8);
     });
 
 
     it('should be possible to control phone order via the drop down select box', function() {
+
       var phoneNameColumn = element.all(by.css('.phones .name'));
       var query = element(by.css('input'));
 
@@ -50,12 +47,7 @@ describe('PhoneCat App', function() {
         });
       }
 
-      //let's narrow the dataset to make the test assertions shorter
-      // https://github.com/angular/protractor/issues/2019
-      var str = 'tablet';
-      for (var i = 0; i < str.length; i++) {
-        query.sendKeys(str.charAt(i));
-      }
+      query.sendKeys('tablet'); //let's narrow the dataset to make the test assertions shorter
 
       expect(getNames()).toEqual([
         "Motorola XOOM\u2122 with Wi-Fi",
@@ -63,13 +55,13 @@ describe('PhoneCat App', function() {
       ]);
 
       element(by.css('select')).element(by.css('option[value="name"]')).click();
+
       expect(getNames()).toEqual([
         "MOTOROLA XOOM\u2122",
         "Motorola XOOM\u2122 with Wi-Fi"
       ]);
     });
 
-
     // #docregion links
     it('should render phone specific links', function() {
       var query = element(by.css('input'));
@@ -83,8 +75,10 @@ describe('PhoneCat App', function() {
         expect(url.endsWith('/phones/nexus-s')).toBe(true);
       });
     });
+    // #enddocregion links
+    
   });
-  // #enddocregion links
+
 
   describe('Phone detail view', function() {
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/karma.conf.1.js
new file mode 100644
index 0000000000..101d96c8b3
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/karma.conf.1.js
@@ -0,0 +1,51 @@
+// #docregion
+module.exports = function(config){
+  config.set({
+
+    baseDir: '.',
+
+    // #docregion ng2
+    files : [
+    // #enddocregion ng2
+      'node_modules/systemjs/dist/system-polyfills.js',
+      'node_modules/systemjs/dist/system.src.js',
+      // #docregion ng2
+      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/reflect-metadata/Reflect.js',
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
+      // #enddocregion ng2
+      'karma_test_shim.js',
+      {pattern: 'app/**/*.module.js', included: false, watched: true},
+      {pattern: 'app/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/**/*.spec.js', included: false, watched: true},
+      {pattern: 'app/**/*.html', included: false, watched: true}
+    // #docregion ng2
+    ],
+    // #enddocregion ng2
+
+    proxies: {
+      // required for component assets fetched by Angular's compiler
+      "/": "/base/app/"
+    },
+
+    autoWatch : true,
+
+    frameworks: ['jasmine'],
+
+    browsers : ['Chrome', 'Firefox'],
+
+    plugins : [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-jasmine'
+    ],
+
+    junitReporter : {
+      outputFile: 'test_out/unit.xml',
+      suite: 'unit'
+    }
+  });
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/karma_test_shim.js
similarity index 75%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma_test_shim.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_final/karma_test_shim.js
index 7aa6c9ec90..edb4033652 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/karma_test_shim.js
@@ -5,11 +5,11 @@ __karma__.loaded = function() {};
 
 System.config({
   map: {
-    'rxjs': 'base/node_modules/rxjs',
-    '@angular': 'base/node_modules/@angular'
+    'rxjs':                       'base/node_modules/rxjs',
+    '@angular':                   'base/node_modules/@angular'
   },
   packages: {
-    'base/app/js': {
+    'base': {
       defaultExtension: false,
       format: 'register',
       map: Object.keys(window.__karma__.files).
@@ -17,7 +17,7 @@ System.config({
             reduce(function createPathRecords(pathsMapping, appPath) {
               // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
               // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
-              var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
+              var moduleName = appPath.replace(/^\/base\//, './').replace(/\.js$/, '');
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
@@ -29,6 +29,7 @@ System.config({
     '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
     '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
     '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router-deprecated':        { main: 'index.js', defaultExtension: 'js' },
     '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
     'rxjs':                              { defaultExtension: 'js' }
   }
@@ -37,26 +38,26 @@ System.config({
 // #docregion ng2
 System.import('@angular/core/testing').then(function(testing) {
   return System.import('@angular/platform-browser-dynamic/testing').then(function(browserTesting) {
-    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_PLATFORM_PROVIDERS,
-                                 browserTesting.TEST_BROWSER_APPLICATION_PROVIDERS);
+    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+                                 browserTesting.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
   });
 }).then(function() {
-  return Promise.all(
+  Promise.all(
     Object.keys(window.__karma__.files) // All files served by Karma.
     .filter(onlySpecFiles)
     .map(function(moduleName) {
       // loads all spec files via their global module names
       return System.import(moduleName);
-  }));
-}).then(function() {
-  __karma__.start();
-}, function(error) {
-  __karma__.error(error.stack || error);
+  }))
+  .then(function() {
+    __karma__.start();
+  }, function(error) {
+    __karma__.error(error.stack || error);
+  });
 });
-// #enddocregion ng2
 
 function onlyAppFiles(filePath) {
-  return /^\/base\/app\/js\/.*\.js$/.test(filePath)
+  return /^\/base\/.*\.(?!\.spec\.)js$/.test(filePath)
 }
 
 function onlySpecFiles(path) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
index e8f21a01ce..7351dff732 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
@@ -6,14 +6,15 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "@angular/common":  "0.0.0-3",
-    "@angular/compiler":  "0.0.0-3",
-    "@angular/core":  "0.0.0-3",
-    "@angular/http":  "0.0.0-3",
-    "@angular/platform-browser":  "0.0.0-3",
-    "@angular/platform-browser-dynamic":  "0.0.0-3",
-    "@angular/router":  "0.0.0-3",
-    "@angular/upgrade":  "0.0.0-3",
+    "@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",
 
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.3",
@@ -27,9 +28,6 @@
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
-    "http-server": "^0.6.1",
-    "tmp": "0.0.23",
-    "bower": "^1.3.1",
     "shelljs": "^0.2.6",
     "typescript": "1.8.10",
     "typings": "^0.7.12"
@@ -39,15 +37,13 @@
 
     "start": "http-server -a 0.0.0.0 -p 8000",
 
-    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
-    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
+    "test": "node node_modules/karma/bin/karma start karma.conf.js",
+    "test-single-run": "node node_modules/karma/bin/karma start karma.conf.js  --single-run",
 
     "preupdate-webdriver": "npm install",
     "update-webdriver": "webdriver-manager update",
-
     "preprotractor": "npm run update-webdriver",
-    "protractor": "protractor test/protractor-conf.js",
-
+    "protractor": "protractor e2e-tests/protractor-conf.js",
     "typings": "typings",
     "tsc": "tsc -p . -w"
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts
deleted file mode 100644
index 8d3fc5270f..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/unit/phones.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { describe, beforeEachProviders, it, inject } from '@angular/core/testing';
-import { HTTP_PROVIDERS } from '@angular/http';
-import { Phones } from '../../app/js/core/phones.service';
-
-describe('Phones', () => {
-
-  // load providers
-  beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);
-
-  // Test service availability
-  it('check the existence of Phones', inject([Phones], (phones) => {
-    expect(phones).toBeDefined();
-  }));
-
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/css/animations.css b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.animations.css
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/css/animations.css
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.animations.css
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.config.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.config.ts
new file mode 100644
index 0000000000..9b99261074
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.config.ts
@@ -0,0 +1,12 @@
+// #docregion
+export default ['$routeProvider',
+  function config($routeProvider) {
+    $routeProvider.
+      when('/phones', {
+        template: '<phone-list></phone-list>'
+      }).
+      when('/phones/:phoneId', {
+        template: '<phone-detail></phone-detail>'
+      }).
+      otherwise('/phones');
+}];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/css/app.css b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.css
similarity index 97%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/app/css/app.css
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.css
index 951ea087cc..f41c420776 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/css/app.css
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.css
@@ -44,7 +44,7 @@ img.phone {
   display: none;
 }
 
-img.phone:first-child {
+img.phone:first-of-type {
   display: block;
 }
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.module.ts
new file mode 100644
index 0000000000..55e4c30b6c
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/app.module.ts
@@ -0,0 +1,29 @@
+// #docregion http-import
+import {HTTP_PROVIDERS} from '@angular/http';
+// #enddocregion http-import
+// #docregion adapter-import
+import {UpgradeAdapter} from '@angular/upgrade';
+// #enddocregion adapter-import
+// #docregion adapter-state-import
+import upgradeAdapter from './core/upgrade-adapter';
+// #enddocregion adapter-state-import
+import core from './core/core.module';
+import phoneList from './phone-list/phone-list.module';
+import phoneDetail from './phone-detail/phone-detail.module';
+import appConfig from './app.config';
+
+angular.module('phonecatApp', [
+  'ngAnimate',
+  'ngRoute',
+  core.name,
+  phoneList.name,
+  phoneDetail.name
+]).config(appConfig);
+
+// #docregion add-http-providers
+upgradeAdapter.addProvider(HTTP_PROVIDERS);
+// #enddocregion add-http-providers
+
+// #docregion bootstrap
+upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
+// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/checkmark.filter.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/checkmark/checkmark.filter.spec.ts
similarity index 76%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/checkmark.filter.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/checkmark/checkmark.filter.spec.ts
index bae35e6875..6704c74999 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/checkmark.filter.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/checkmark/checkmark.filter.spec.ts
@@ -1,10 +1,10 @@
 // #docregion top
-import '../../app/js/core/core.module';
+import '../core.module';
 // #enddocregion top
 
 describe('checkmarkFilter', function() {
 
-  beforeEach(angular.mock.module('phonecat.core'));
+  beforeEach(angular.mock.module('core'));
 
   it('should convert boolean values to unicode checkmark or cross',
       inject(function(checkmarkFilter) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/checkmark.filter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/checkmark/checkmark.filter.ts
similarity index 71%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/checkmark.filter.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/checkmark/checkmark.filter.ts
index 84544b80a1..cd0215064f 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/checkmark.filter.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/checkmark/checkmark.filter.ts
@@ -1,6 +1,6 @@
 // #docregion
 export default function checkmarkFilter() {
-  return function(input:string):string {
+  return function(input:boolean):string {
     return input ? '\u2713' : '\u2718';
   };
 }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/core.module.ts
new file mode 100644
index 0000000000..041f56ea79
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/core.module.ts
@@ -0,0 +1,6 @@
+// #docregion
+import checkmarkFilter from './checkmark/checkmark.filter';
+import phone from './phone/phone.module';
+
+export default angular.module('core', [phone.name])
+  .filter('checkmark', checkmarkFilter);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.module.ts
new file mode 100644
index 0000000000..7b8d127731
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.module.ts
@@ -0,0 +1,8 @@
+// #docregion
+import {Phone} from './phone.service';
+import upgradeAdapter from '../upgrade-adapter';
+
+upgradeAdapter.addProvider(Phone);
+
+export default angular.module('core.phone', [])
+  .factory('phone', upgradeAdapter.downgradeNg2Provider(Phone));
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.spec.ts
new file mode 100644
index 0000000000..e0dceedfa3
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,43 @@
+// #docregion
+import {provide} from '@angular/core';
+import {describe, beforeEach, beforeEachProviders, it, inject} from '@angular/core/testing';
+import {Http, BaseRequestOptions, ResponseOptions, Response} from '@angular/http';
+import {MockBackend} from '@angular/http/testing';
+import {Phone, PhoneData} from './phone.service';
+
+describe('Phone', function() {
+  var phone;
+  var phonesData:PhoneData[] = [
+    {name: 'Phone X', snippet: '', images: []},
+    {name: 'Phone Y', snippet: '', images: []},
+    {name: 'Phone Z', snippet: '', images: []}
+  ];
+  var mockBackend;
+
+  // load providers
+  beforeEachProviders(() => [
+    Phone,
+    MockBackend,
+    BaseRequestOptions,
+    provide(Http, {
+      useFactory: (backend, options) => new Http(backend, options),
+      deps: [MockBackend, BaseRequestOptions]
+    })
+  ]);
+
+  beforeEach(inject([MockBackend, Phone], (_mockBackend_, _phone_) => {
+    mockBackend = _mockBackend_;
+    phone = _phone_;
+  }));
+
+  it('should fetch the phones data from `/phones/phones.json`', (done) => {
+    mockBackend.connections.subscribe(connection => {
+      connection.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
+    });
+    phone.query().subscribe(result => {
+      expect(result).toEqual(phonesData);
+      done();
+    });
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.ts
similarity index 52%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.ts
index d292bc54ee..e47358c75e 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/js/core/phones.service.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.ts
@@ -1,37 +1,35 @@
-// #docregion full
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+// #docregion
+import {Injectable} from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 
-// #docregion phone-interface
-export interface Phone {
+// #docregion phonedata-interface
+export interface PhoneData {
   name: string;
-  snippet?: string;
-  images?: string[];
+  snippet: string;
+  images: string[];
 }
-// #enddocregion phone-interface
+// #enddocregion phonedata-interface
 
-// #docregion fullclass
 // #docregion class
+// #docregion fullclass
 @Injectable()
-export class Phones {
+export class Phone {
 // #enddocregion class
 
   constructor(private http: Http) { }
 
-  query():Observable<Phone[]> {
+  query():Observable<PhoneData[]> {
     return this.http.get(`phones/phones.json`)
       .map((res:Response) => res.json());
   }
 
-  get(id: string):Observable<Phone> {
+  get(id: string):Observable<PhoneData> {
     return this.http.get(`phones/${id}.json`)
       .map((res:Response) => res.json());
   }
-
 // #docregion class
 }
-// #enddocregion class
 // #enddocregion fullclass
-// #docregion full
+// #enddocregion class
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/upgrade-adapter.ts
similarity index 59%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/upgrade-adapter.ts
index f1ad63012a..f5659ad5b4 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/core/upgrade-adapter.ts
@@ -1,9 +1,8 @@
-// #docregion full
-import { UpgradeAdapter } from '@angular/upgrade';
+// #docregion
+import {UpgradeAdapter} from '@angular/upgrade';
 
 // #docregion adapter-init
 const upgradeAdapter = new UpgradeAdapter();
 // #enddocregion adapter-init
 
 export default upgradeAdapter;
-// #enddocregion full
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/css/.gitkeep b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/css/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
index 5a79c8007f..36cafbac01 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <title>Google Phone Gallery</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
-  <link rel="stylesheet" href="css/app.css">
-  <link rel="stylesheet" href="css/animations.css">
+  <link rel="stylesheet" href="app.css">
+  <link rel="stylesheet" href="app.animations.css">
   <!-- #docregion scripts -->
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="bower_components/jquery/dist/jquery.js"></script>
@@ -22,9 +22,9 @@
   <script src="systemjs.config.js"></script>
   <!-- #docregion systemconfig -->
   <script>
-    System.import('js/app.module');
+    System.import('./app.module');
   </script>
-  <!-- #enddocregion systemconfig -->
+  <!-- #enddocregion ng2 -->
   <!-- #enddocregion scripts -->
 </head>
 <body>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts
deleted file mode 100644
index e02e7dcf1a..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Phones } from './phones.service';
-import checkmarkFilter from './checkmark.filter';
-import upgradeAdapter from './upgrade_adapter';
-
-upgradeAdapter.addProvider(Phones);
-
-export default angular.module('phonecat.core', [])
-  .factory('phones', upgradeAdapter.downgradeNg2Provider(Phones))
-  .filter('checkmark', checkmarkFilter);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts
deleted file mode 100644
index ef24ac5814..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docregion
-import { Phones, Phone } from '../core/phones.service';
-
-interface PhoneRouteParams {
-  phoneId: string
-}
-
-class PhoneDetailCtrl {
-  phone:Phone;
-  mainImageUrl:string;
-  constructor($routeParams:PhoneRouteParams, phones:Phones) {
-    phones.get($routeParams.phoneId)
-      .subscribe(phone => {
-        this.phone = phone;
-        this.mainImageUrl = phone.images[0];
-      });
-  }
-  setImage(url:string) {
-    this.mainImageUrl = url;
-  }
-}
-
-PhoneDetailCtrl.$inject = ['$routeParams', 'phones'];
-
-export default PhoneDetailCtrl;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.html
deleted file mode 100644
index 954c65c2cd..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<div class="phone-images">
-  <img ng-src="{{img}}"
-       class="phone"
-       ng-repeat="img in vm.phone.images"
-       ng-class="{active: vm.mainImageUrl==img}">
-</div>
-
-<h1>{{vm.phone.name}}</h1>
-
-<p>{{vm.phone.description}}</p>
-
-<ul class="phone-thumbs">
-  <li ng-repeat="img in vm.phone.images">
-    <img ng-src="{{img}}" ng-click="vm.setImage(img)">
-  </li>
-</ul>
-
-<ul class="specs">
-  <li>
-    <span>Availability and Networks</span>
-    <dl>
-      <dt>Availability</dt>
-      <dd ng-repeat="availability in vm.phone.availability">{{availability}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Battery</span>
-    <dl>
-      <dt>Type</dt>
-      <dd>{{vm.phone.battery.type}}</dd>
-      <dt>Talk Time</dt>
-      <dd>{{vm.phone.battery.talkTime}}</dd>
-      <dt>Standby time (max)</dt>
-      <dd>{{vm.phone.battery.standbyTime}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Storage and Memory</span>
-    <dl>
-      <dt>RAM</dt>
-      <dd>{{vm.phone.storage.ram}}</dd>
-      <dt>Internal Storage</dt>
-      <dd>{{vm.phone.storage.flash}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Connectivity</span>
-    <dl>
-      <dt>Network Support</dt>
-      <dd>{{vm.phone.connectivity.cell}}</dd>
-      <dt>WiFi</dt>
-      <dd>{{vm.phone.connectivity.wifi}}</dd>
-      <dt>Bluetooth</dt>
-      <dd>{{vm.phone.connectivity.bluetooth}}</dd>
-      <dt>Infrared</dt>
-      <dd>{{vm.phone.connectivity.infrared | checkmark}}</dd>
-      <dt>GPS</dt>
-      <dd>{{vm.phone.connectivity.gps | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Android</span>
-    <dl>
-      <dt>OS Version</dt>
-      <dd>{{vm.phone.android.os}}</dd>
-      <dt>UI</dt>
-      <dd>{{vm.phone.android.ui}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Size and Weight</span>
-    <dl>
-      <dt>Dimensions</dt>
-      <dd ng-repeat="dim in vm.phone.sizeAndWeight.dimensions">{{dim}}</dd>
-      <dt>Weight</dt>
-      <dd>{{vm.phone.sizeAndWeight.weight}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Display</span>
-    <dl>
-      <dt>Screen size</dt>
-      <dd>{{vm.phone.display.screenSize}}</dd>
-      <dt>Screen resolution</dt>
-      <dd>{{vm.phone.display.screenResolution}}</dd>
-      <dt>Touch screen</dt>
-      <dd>{{vm.phone.display.touchScreen | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Hardware</span>
-    <dl>
-      <dt>CPU</dt>
-      <dd>{{vm.phone.hardware.cpu}}</dd>
-      <dt>USB</dt>
-      <dd>{{vm.phone.hardware.usb}}</dd>
-      <dt>Audio / headphone jack</dt>
-      <dd>{{vm.phone.hardware.audioJack}}</dd>
-      <dt>FM Radio</dt>
-      <dd>{{vm.phone.hardware.fmRadio | checkmark}}</dd>
-      <dt>Accelerometer</dt>
-      <dd>{{vm.phone.hardware.accelerometer | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Camera</span>
-    <dl>
-      <dt>Primary</dt>
-      <dd>{{vm.phone.camera.primary}}</dd>
-      <dt>Features</dt>
-      <dd>{{vm.phone.camera.features.join(', ')}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Additional Features</span>
-    <dd>{{vm.phone.additionalFeatures}}</dd>
-  </li>
-</ul>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.module.ts
deleted file mode 100644
index 16e7ac0baf..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import PhoneDetailCtrl from './phone_detail.controller';
-
-export default angular.module('phonecat.detail', [
-    'ngRoute',
-    'phonecat.core'
-  ])
-  .controller('PhoneDetailCtrl', PhoneDetailCtrl);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts
deleted file mode 100644
index ae4c39b0c9..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion
-import { Phones, Phone } from '../core/phones.service';
-
-class PhoneListCtrl {
-  phones:Phone[];
-  orderProp:string;
-  query:string;
-  constructor(phones:Phones) {
-    phones.query()
-      .subscribe(phones => this.phones = phones);
-    this.orderProp = 'age';
-  }
-}
-
-PhoneListCtrl.$inject = ['phones'];
-
-export default PhoneListCtrl;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.module.ts
deleted file mode 100644
index d2e7200778..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.module.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-import PhoneListCtrl from './phone_list.controller';
-
-export default angular.module('phonecat.list', [])
-  .controller('PhoneListCtrl', PhoneListCtrl);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.spec.ts
new file mode 100644
index 0000000000..0d6cc5f4d1
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.spec.ts
@@ -0,0 +1,42 @@
+// #docregion
+import {Observable} from 'rxjs/Rx'
+import './phone-detail.module';
+import {Phone, PhoneData} from '../core/phone/phone.service';
+
+describe('phoneDetail', function(){
+
+    // Load the module that contains the `phoneDetail` component before each test
+    beforeEach(angular.mock.module('phoneDetail'));
+
+    // Supply a hand-instantianted instance of the Phone service
+    beforeEach(angular.mock.module(function($provide) {
+      $provide.value('phone', new Phone(null));
+    }));
+
+    // Test the controller
+    describe('PhoneDetailController', function() {
+      var $componentController, phone;
+      var xyzPhoneData:PhoneData = {
+        name: 'phone xyz',
+        snippet: '',
+        images: ['image/url1.png', 'image/url2.png']
+      };
+
+      beforeEach(inject(function(_$componentController_, _phone_, $routeParams) {
+        $componentController = _$componentController_;
+        phone = _phone_;
+        $routeParams.phoneId = 'xyz';
+      }));
+
+      it('should fetch the phone details', function() {
+        spyOn(phone, 'get').and.returnValue(Observable.of(xyzPhoneData));
+
+        let ctrl = $componentController('phoneDetail', {$scope: {}});
+
+        expect(phone.get).toHaveBeenCalledWith('xyz');
+        expect(ctrl.phone).toEqual(xyzPhoneData);
+      });
+
+    });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.ts
new file mode 100644
index 0000000000..aaae28ce22
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.ts
@@ -0,0 +1,29 @@
+// #docregion
+import {Phone, PhoneData} from '../core/phone/phone.service';
+
+interface PhoneRouteParams {
+  phoneId: string
+}
+
+class PhoneDetailController {
+  phone:PhoneData;
+  mainImageUrl:string;
+
+  static $inject = ['$routeParams', 'phone'];
+  constructor($routeParams:PhoneRouteParams, phone:Phone) {
+    phone.get($routeParams.phoneId).subscribe(phone => {
+      this.phone = phone;
+      this.setImage(phone.images[0]);
+    });
+  }
+
+  setImage(imageUrl) {
+    this.mainImageUrl = imageUrl;
+  }
+
+}
+
+export default {
+  templateUrl: 'phone-detail/phone-detail.template.html',
+  controller: PhoneDetailController
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.module.ts
new file mode 100644
index 0000000000..d9e95c0761
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.module.ts
@@ -0,0 +1,9 @@
+// #docregion
+import phoneDetail from './phone-detail.component';
+import phone from '../core/phone/phone.module';
+
+export default angular.module('phoneDetail', [
+    'ngRoute',
+    phone.name
+  ])
+  .component('phoneDetail', phoneDetail);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.template.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.template.html
new file mode 100644
index 0000000000..019ccf45c7
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.template.html
@@ -0,0 +1,118 @@
+<div class="phone-images">
+  <img ng-src="{{img}}"
+       class="phone"
+       ng-repeat="img in $ctrl.phone.images"
+       ng-class="{active: $ctrl.mainImageUrl==img}">
+</div>
+
+<h1>{{$ctrl.phone.name}}</h1>
+
+<p>{{$ctrl.phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in $ctrl.phone.images">
+    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)">
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Battery</span>
+    <dl>
+      <dt>Type</dt>
+      <dd>{{$ctrl.phone.battery.type}}</dd>
+      <dt>Talk Time</dt>
+      <dd>{{$ctrl.phone.battery.talkTime}}</dd>
+      <dt>Standby time (max)</dt>
+      <dd>{{$ctrl.phone.battery.standbyTime}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Storage and Memory</span>
+    <dl>
+      <dt>RAM</dt>
+      <dd>{{$ctrl.phone.storage.ram}}</dd>
+      <dt>Internal Storage</dt>
+      <dd>{{$ctrl.phone.storage.flash}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{$ctrl.phone.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{$ctrl.phone.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Android</span>
+    <dl>
+      <dt>OS Version</dt>
+      <dd>{{$ctrl.phone.android.os}}</dd>
+      <dt>UI</dt>
+      <dd>{{$ctrl.phone.android.ui}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Size and Weight</span>
+    <dl>
+      <dt>Dimensions</dt>
+      <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
+      <dt>Weight</dt>
+      <dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Display</span>
+    <dl>
+      <dt>Screen size</dt>
+      <dd>{{$ctrl.phone.display.screenSize}}</dd>
+      <dt>Screen resolution</dt>
+      <dd>{{$ctrl.phone.display.screenResolution}}</dd>
+      <dt>Touch screen</dt>
+      <dd>{{$ctrl.phone.display.touchScreen | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Hardware</span>
+    <dl>
+      <dt>CPU</dt>
+      <dd>{{$ctrl.phone.hardware.cpu}}</dd>
+      <dt>USB</dt>
+      <dd>{{$ctrl.phone.hardware.usb}}</dd>
+      <dt>Audio / headphone jack</dt>
+      <dd>{{$ctrl.phone.hardware.audioJack}}</dd>
+      <dt>FM Radio</dt>
+      <dd>{{$ctrl.phone.hardware.fmRadio | checkmark}}</dd>
+      <dt>Accelerometer</dt>
+      <dd>{{$ctrl.phone.hardware.accelerometer | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Camera</span>
+    <dl>
+      <dt>Primary</dt>
+      <dd>{{$ctrl.phone.camera.primary}}</dd>
+      <dt>Features</dt>
+      <dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Additional Features</span>
+    <dd>{{$ctrl.phone.additionalFeatures}}</dd>
+  </li>
+</ul>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.spec.ts
new file mode 100644
index 0000000000..a3941d6d93
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.spec.ts
@@ -0,0 +1,37 @@
+// #docregion
+import {Observable} from 'rxjs/Rx';
+import './phone-list.module';
+import {Phone, PhoneData} from '../core/phone/phone.service';
+
+describe('phoneList', function() {
+
+  // Load the module that contains the `phoneList` component before each test
+  beforeEach(angular.mock.module('phoneList'));
+
+  // Supply a hand-instantianted instance of the Phone service
+  beforeEach(angular.mock.module(function($provide) {
+    $provide.value('phone', new Phone(null));
+  }));
+
+  // Test the controller
+  describe('PhoneListController', function() {
+    var ctrl;
+
+    beforeEach(inject(function($componentController, phone) {
+      spyOn(phone, 'query').and.returnValue(Observable.of(
+        [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
+      ));
+      ctrl = $componentController('phoneList', {$scope: {}});
+    }));
+
+    it('should create a `phones` model with 2 phones fetched with `$http`', function() {
+      expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+    });
+
+    it('should set a default value for the `orderProp` model', function() {
+      expect(ctrl.orderProp).toBe('age');
+    });
+
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.ts
new file mode 100644
index 0000000000..b9a10cf288
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.ts
@@ -0,0 +1,22 @@
+import {Phone, PhoneData} from '../core/phone/phone.service';
+
+// #docregion
+class PhoneListController {
+  phones:PhoneData[];
+  orderProp:string;
+  query:string;
+
+  static $inject = ['phone'];
+  constructor(phone:Phone) {
+    phone.query().subscribe(phones => {
+      this.phones = phones;
+    });
+    this.orderProp = 'age';
+  }
+
+}
+
+export default {
+  templateUrl: 'phone-list/phone-list.template.html',
+  controller: PhoneListController
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.module.ts
new file mode 100644
index 0000000000..feae92f9af
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.module.ts
@@ -0,0 +1,6 @@
+// #docregion
+import phoneList from './phone-list.component';
+import phone from '../core/phone/phone.module';
+
+export default angular.module('phoneList', [phone.name])
+  .component('phoneList', phoneList);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.template.html
similarity index 77%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.html
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.template.html
index 471f474e89..95283ee032 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.template.html
@@ -3,9 +3,9 @@
     <div class="col-md-2">
       <!--Sidebar content-->
 
-      Search: <input ng-model="vm.query">
+      Search: <input ng-model="$ctrl.query">
       Sort by:
-      <select ng-model="vm.orderProp">
+      <select ng-model="$ctrl.orderProp">
         <option value="name">Alphabetical</option>
         <option value="age">Newest</option>
       </select>
@@ -15,7 +15,7 @@
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="phone in vm.phones | filter:vm.query | orderBy:vm.orderProp"
+        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
             class="thumbnail phone-listing">
           <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
           <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js
index 6eb2cccc14..2de98008c9 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/systemjs.config.js
@@ -9,7 +9,7 @@ System.config({
     '@angular':                   pkgPath + '@angular'
   },
   packages: {
-    'js':                                { defaultExtension: 'js' },
+    './':                                { defaultExtension: 'js' },
 
     '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
     '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
@@ -18,6 +18,7 @@ System.config({
     '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
     '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
     '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router-deprecated':        { main: 'index.js', defaultExtension: 'js' },
     '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
     'rxjs':                              { defaultExtension: 'js' }
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/test/protractor-conf.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/e2e-tests/protractor-conf.js
similarity index 86%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/test/protractor-conf.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/e2e-tests/protractor-conf.js
index 118c7b9ec2..6252ae848e 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/test/protractor-conf.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/e2e-tests/protractor-conf.js
@@ -2,15 +2,15 @@ exports.config = {
   allScriptsTimeout: 11000,
 
   specs: [
-    'e2e/*.js'
+    '*.js'
   ],
 
   capabilities: {
     'browserName': 'chrome'
   },
 
-  chromeOnly: true,
-
+  directConnect: true,
+  
   baseUrl: 'http://localhost:8000/',
 
   framework: 'jasmine',
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/e2e/scenarios.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/e2e-tests/scenarios.js
similarity index 79%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/e2e/scenarios.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/e2e-tests/scenarios.js
index f20d0a294c..81f2d9f7fc 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/e2e/scenarios.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/e2e-tests/scenarios.js
@@ -18,9 +18,10 @@ describe('PhoneCat App', function() {
       browser.get('app/index.html#/phones');
     });
 
+
     it('should filter the phone list as a user types into the search box', function() {
-      var phoneList = element.all(by.repeater('phone in vm.phones'));
-      var query = element(by.model('vm.query'));
+      var phoneList = element.all(by.css('.phones li'));
+      var query = element(by.css('input'));
 
       expect(phoneList.count()).toBe(20);
 
@@ -35,8 +36,8 @@ describe('PhoneCat App', function() {
 
     it('should be possible to control phone order via the drop down select box', function() {
 
-      var phoneNameColumn = element.all(by.repeater('phone in vm.phones').column(0));
-      var query = element(by.model('vm.query'));
+      var phoneNameColumn = element.all(by.css('.phones .name'));
+      var query = element(by.css('input'));
 
       function getNames() {
         return phoneNameColumn.map(function(elm) {
@@ -51,7 +52,7 @@ describe('PhoneCat App', function() {
         "MOTOROLA XOOM\u2122"
       ]);
 
-      element(by.model('vm.orderProp')).element(by.css('option[value="name"]')).click();
+      element(by.css('select')).element(by.css('option[value="name"]')).click();
 
       expect(getNames()).toEqual([
         "MOTOROLA XOOM\u2122",
@@ -61,7 +62,7 @@ describe('PhoneCat App', function() {
 
 
     it('should render phone specific links', function() {
-      var query = element(by.model('vm.query'));
+      var query = element(by.css('input'));
       query.sendKeys('nexus');
       element.all(by.css('.phones li a')).first().click();
       browser.getLocationAbsUrl().then(function(url) {
@@ -79,7 +80,7 @@ describe('PhoneCat App', function() {
 
 
     it('should display nexus-s page', function() {
-      expect(element(by.binding('vm.phone.name')).getText()).toBe('Nexus S');
+      expect(element(by.css('h1')).getText()).toBe('Nexus S');
     });
 
 
@@ -89,10 +90,10 @@ describe('PhoneCat App', function() {
 
 
     it('should swap main image if a thumbnail image is clicked on', function() {
-      element(by.css('.phone-thumbs li:nth-child(3) img')).click();
+      element(by.css('.phone-thumbs li:nth-of-type(3) img')).click();
       expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
 
-      element(by.css('.phone-thumbs li:nth-child(1) img')).click();
+      element(by.css('.phone-thumbs li:nth-of-type(1) img')).click();
       expect(element(by.css('img.phone.active')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
   });
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/karma.conf.1.js
new file mode 100644
index 0000000000..5acbe3ce0e
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/karma.conf.1.js
@@ -0,0 +1,50 @@
+// #docregion
+module.exports = function(config){
+  config.set({
+
+    baseDir: '.',
+
+    // #docregion ng2
+    files : [
+    // #enddocregion ng2
+      'app/bower_components/angular/angular.js',
+      'app/bower_components/angular-route/angular-route.js',
+      'app/bower_components/angular-resource/angular-resource.js',
+      'app/bower_components/angular-animate/angular-animate.js',
+      'app/bower_components/angular-mocks/angular-mocks.js',
+      'node_modules/systemjs/dist/system-polyfills.js',
+      'node_modules/systemjs/dist/system.src.js',
+      // #docregion ng2
+      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/reflect-metadata/Reflect.js',
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
+      // #enddocregion ng2
+      'karma_test_shim.js',
+      {pattern: 'app/**/*.module.js', included: false, watched: true},
+      {pattern: 'app/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: 'app/**/*.spec.js', included: false, watched: true}
+    // #docregion ng2
+    ],
+    // #enddocregion ng2
+
+    autoWatch : true,
+
+    frameworks: ['jasmine'],
+
+    browsers : ['Chrome', 'Firefox'],
+
+    plugins : [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-jasmine'
+    ],
+
+    junitReporter : {
+      outputFile: 'test_out/unit.xml',
+      suite: 'unit'
+    }
+  });
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/karma_test_shim.js
similarity index 75%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js
rename to public/docs/_examples/upgrade-phonecat/ts/ng2_initial/karma_test_shim.js
index 7aa6c9ec90..edb4033652 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/karma_test_shim.js
@@ -5,11 +5,11 @@ __karma__.loaded = function() {};
 
 System.config({
   map: {
-    'rxjs': 'base/node_modules/rxjs',
-    '@angular': 'base/node_modules/@angular'
+    'rxjs':                       'base/node_modules/rxjs',
+    '@angular':                   'base/node_modules/@angular'
   },
   packages: {
-    'base/app/js': {
+    'base': {
       defaultExtension: false,
       format: 'register',
       map: Object.keys(window.__karma__.files).
@@ -17,7 +17,7 @@ System.config({
             reduce(function createPathRecords(pathsMapping, appPath) {
               // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
               // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
-              var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
+              var moduleName = appPath.replace(/^\/base\//, './').replace(/\.js$/, '');
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
@@ -29,6 +29,7 @@ System.config({
     '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
     '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
     '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
+    '@angular/router-deprecated':        { main: 'index.js', defaultExtension: 'js' },
     '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
     'rxjs':                              { defaultExtension: 'js' }
   }
@@ -37,26 +38,26 @@ System.config({
 // #docregion ng2
 System.import('@angular/core/testing').then(function(testing) {
   return System.import('@angular/platform-browser-dynamic/testing').then(function(browserTesting) {
-    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_PLATFORM_PROVIDERS,
-                                 browserTesting.TEST_BROWSER_APPLICATION_PROVIDERS);
+    testing.setBaseTestProviders(browserTesting.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+                                 browserTesting.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
   });
 }).then(function() {
-  return Promise.all(
+  Promise.all(
     Object.keys(window.__karma__.files) // All files served by Karma.
     .filter(onlySpecFiles)
     .map(function(moduleName) {
       // loads all spec files via their global module names
       return System.import(moduleName);
-  }));
-}).then(function() {
-  __karma__.start();
-}, function(error) {
-  __karma__.error(error.stack || error);
+  }))
+  .then(function() {
+    __karma__.start();
+  }, function(error) {
+    __karma__.error(error.stack || error);
+  });
 });
-// #enddocregion ng2
 
 function onlyAppFiles(filePath) {
-  return /^\/base\/app\/js\/.*\.js$/.test(filePath)
+  return /^\/base\/.*\.(?!\.spec\.)js$/.test(filePath)
 }
 
 function onlySpecFiles(path) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
index 425ad7b82f..fd751b2c2d 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
@@ -6,14 +6,15 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "@angular/common":  "0.0.0-3",
-    "@angular/compiler":  "0.0.0-3",
-    "@angular/core":  "0.0.0-3",
-    "@angular/http":  "0.0.0-3",
-    "@angular/platform-browser":  "0.0.0-3",
-    "@angular/platform-browser-dynamic":  "0.0.0-3",
-    "@angular/router":  "0.0.0-3",
-    "@angular/upgrade":  "0.0.0-3",
+    "@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",
 
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.3",
@@ -22,33 +23,28 @@
     "systemjs": "0.19.26"
   },
   "devDependencies": {
+    "bower": "^1.3.1",
     "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.1.4",
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "~0.3.7",
     "protractor": "^3.0.0",
-    "http-server": "^0.6.1",
-    "tmp": "0.0.23",
-    "bower": "^1.3.1",
     "shelljs": "^0.2.6",
     "typescript": "1.8.10",
     "typings": "^0.7.12"
   },
   "scripts": {
     "postinstall": "bower install",
-
     "prestart": "npm install",
     "start": "http-server -a 0.0.0.0 -p 8000",
 
-    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
-    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
+    "test": "node node_modules/karma/bin/karma start karma.conf.js",
+    "test-single-run": "node node_modules/karma/bin/karma start karma.conf.js  --single-run",
 
     "preupdate-webdriver": "npm install",
     "update-webdriver": "webdriver-manager update",
-
     "preprotractor": "npm run update-webdriver",
-    "protractor": "protractor test/protractor-conf.js",
-
+    "protractor": "protractor e2e-tests/protractor-conf.js",
     "typings": "typings",
     "tsc": "tsc -p . -w"
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts
deleted file mode 100644
index b28fc2d8c4..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// #docregion
-import { Observable } from 'rxjs/Rx';
-import '../../app/js/phone_detail/phone_detail.module';
-import { Phones } from '../../app/js/core/phones.service';
-
-describe('PhoneDetailCtrl', () => {
-  var scope, phones, $controller,
-      xyzPhoneData = function() {
-        return {
-          name: 'phone xyz',
-          snippet: '',
-          images: ['image/url1.png', 'image/url2.png']
-        }
-      };
-
-  beforeEach(angular.mock.module('phonecat.detail'));
-
-  // Supply a hand-instantianted instance of the Phones service
-  beforeEach(angular.mock.module(function($provide) {
-    $provide.factory('phones', function() {
-      return new Phones(null);
-    });
-  }));
-
-  beforeEach(inject(function(_phones_, _$controller_, $rootScope, $routeParams) {
-    phones = _phones_;
-    $controller = _$controller_;
-    $routeParams.phoneId = 'xyz';
-    scope = $rootScope.$new();
-  }));
-
-
-  it('should fetch phone detail', function() {
-    spyOn(phones, 'get').and.returnValue(Observable.of(xyzPhoneData()));
-
-    let ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
-
-    expect(phones.get).toHaveBeenCalledWith('xyz');
-    expect(ctrl.phone).toEqual(xyzPhoneData());
-  });
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts
deleted file mode 100644
index 3df1418d9a..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// #docregion
-import { Observable } from 'rxjs/Rx';
-import '../../app/js/phone_list/phone_list.module';
-import { Phones } from '../../app/js/core/phones.service';
-
-describe('PhoneListCtrl', () => {
-  var scope, ctrl, $httpBackend;
-
-  beforeEach(angular.mock.module('phonecat.list'));
-
-  // Supply a hand-instantianted instance of the Phones service
-  beforeEach(angular.mock.module(function($provide) {
-    $provide.factory('phones', function() {
-      return new Phones(null);
-    });
-  }));
-
-  beforeEach(inject(function(phones, $rootScope, $controller) {
-    spyOn(phones, 'query').and.returnValue(Observable.of(
-      [{name: 'Nexus S'}, {name: 'Motorola DROID'}]
-    ));
-    scope = $rootScope.$new();
-    ctrl = $controller('PhoneListCtrl', {$scope: scope});
-  }));
-
-
-  it('should create "phones" model with 2 phones fetched from xhr', function() {
-    expect(ctrl.phones).toEqual(
-        [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-  });
-
-
-  it('should set the default value of orderProp model', function() {
-    expect(ctrl.orderProp).toBe('age');
-  });
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts
deleted file mode 100644
index 8d3fc5270f..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { describe, beforeEachProviders, it, inject } from '@angular/core/testing';
-import { HTTP_PROVIDERS } from '@angular/http';
-import { Phones } from '../../app/js/core/phones.service';
-
-describe('Phones', () => {
-
-  // load providers
-  beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);
-
-  // Test service availability
-  it('check the existence of Phones', inject([Phones], (phones) => {
-    expect(phones).toBeDefined();
-  }));
-
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/css/animations.css b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.animations.css
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/css/animations.css
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.animations.css
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.config.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.config.ts
new file mode 100644
index 0000000000..9b99261074
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.config.ts
@@ -0,0 +1,12 @@
+// #docregion
+export default ['$routeProvider',
+  function config($routeProvider) {
+    $routeProvider.
+      when('/phones', {
+        template: '<phone-list></phone-list>'
+      }).
+      when('/phones/:phoneId', {
+        template: '<phone-detail></phone-detail>'
+      }).
+      otherwise('/phones');
+}];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/css/app.css b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.css
similarity index 97%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/css/app.css
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.css
index 951ea087cc..f41c420776 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/css/app.css
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.css
@@ -44,7 +44,7 @@ img.phone {
   display: none;
 }
 
-img.phone:first-child {
+img.phone:first-of-type {
   display: block;
 }
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.module.ts
new file mode 100644
index 0000000000..d4e0e8b25c
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion pre-bootstrap
+import core from './core/core.module';
+import phoneList from './phone-list/phone-list.module';
+import phoneDetail from './phone-detail/phone-detail.module';
+import appConfig from './app.config';
+
+angular.module('phonecatApp', [
+  'ngAnimate',
+  'ngRoute',
+  core.name,
+  phoneList.name,
+  phoneDetail.name
+]).config(appConfig);
+
+// #enddocregion pre-bootstrap
+// #docregion bootstrap
+angular.bootstrap(document.documentElement, ['phonecatApp']);
+// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/checkmark.filter.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/checkmark/checkmark.filter.spec.ts
similarity index 76%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/checkmark.filter.spec.ts
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/checkmark/checkmark.filter.spec.ts
index bae35e6875..6704c74999 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/unit/checkmark.filter.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/checkmark/checkmark.filter.spec.ts
@@ -1,10 +1,10 @@
 // #docregion top
-import '../../app/js/core/core.module';
+import '../core.module';
 // #enddocregion top
 
 describe('checkmarkFilter', function() {
 
-  beforeEach(angular.mock.module('phonecat.core'));
+  beforeEach(angular.mock.module('core'));
 
   it('should convert boolean values to unicode checkmark or cross',
       inject(function(checkmarkFilter) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/checkmark.filter.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/checkmark/checkmark.filter.ts
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/checkmark.filter.ts
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/checkmark/checkmark.filter.ts
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/core.module.ts
new file mode 100644
index 0000000000..041f56ea79
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/core.module.ts
@@ -0,0 +1,6 @@
+// #docregion
+import checkmarkFilter from './checkmark/checkmark.filter';
+import phone from './phone/phone.module';
+
+export default angular.module('core', [phone.name])
+  .filter('checkmark', checkmarkFilter);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.module.ts
new file mode 100644
index 0000000000..d60c3c9a07
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.module.ts
@@ -0,0 +1,5 @@
+// #docregion
+import Phone from './phone.service';
+
+export default angular.module('core.phone', ['ngResource'])
+  .factory('Phone', Phone);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.spec.ts
new file mode 100644
index 0000000000..269ce500e9
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.spec.ts
@@ -0,0 +1,47 @@
+// #docregion top
+import './phone.module';
+// #enddocregion top
+
+'use strict';
+
+describe('Phone', function() {
+  var $httpBackend;
+  var Phone;
+  var phonesData = [
+    {name: 'Phone X'},
+    {name: 'Phone Y'},
+    {name: 'Phone Z'}
+  ];
+
+  // Add a custom equality tester before each test
+  beforeEach(function() {
+    jasmine.addCustomEqualityTester(angular.equals);
+  });
+
+  // Load the module that contains the `Phone` service before each test
+  beforeEach(angular.mock.module('core.phone'));
+
+  // Instantiate the service and "train" `$httpBackend` before each test
+  beforeEach(inject(function(_$httpBackend_, _Phone_) {
+    $httpBackend = _$httpBackend_;
+    $httpBackend.expectGET('phones/phones.json').respond(phonesData);
+
+    Phone = _Phone_;
+  }));
+
+  // Verify that there are no outstanding expectations or requests after each test
+  afterEach(function () {
+    $httpBackend.verifyNoOutstandingExpectation();
+    $httpBackend.verifyNoOutstandingRequest();
+  });
+
+  it('should fetch the phones data from `/phones/phones.json`', function() {
+    var phones = Phone.query();
+
+    expect(phones).toEqual([]);
+
+    $httpBackend.flush();
+    expect(phones).toEqual(phonesData);
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.ts
new file mode 100644
index 0000000000..861ff78832
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.ts
@@ -0,0 +1,12 @@
+// #docregion
+export default ['$resource',
+  function Phone($resource) {
+    return $resource('phones/:phoneId.json', {}, {
+      query: {
+        method: 'GET',
+        params: {phoneId: 'phones'},
+        isArray: true
+      }
+    });
+  }
+];
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/css/.gitkeep b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/css/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html
index b0d5e4caf2..babbef49c3 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/index.html
@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <title>Google Phone Gallery</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
-  <link rel="stylesheet" href="css/app.css">
-  <link rel="stylesheet" href="css/animations.css">
+  <link rel="stylesheet" href="app.css">
+  <link rel="stylesheet" href="app.animations.css">
   <!-- #docregion scripts -->
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="bower_components/jquery/dist/jquery.js"></script>
@@ -13,18 +13,19 @@
   <script src="bower_components/angular-animate/angular-animate.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
-  <!--<script src="js/app.module.js"></script>-->
-  <!--<script src="js/core/core.module.js"></script>-->
-  <!--<script src="js/core/checkmark.filter.js"></script>-->
-  <!--<script src="js/core/phone.factory.js"></script>-->
-  <!--<script src="js/phone_detail/phone_detail.module.js"></script>-->
-  <!--<script src="js/phone_detail/phone.animation.js"></script>-->
-  <!--<script src="js/phone_detail/phone_detail.controller.js"></script>-->
-  <!--<script src="js/phone_list/phone_list.module.js"></script>-->
-  <!--<script src="js/phone_list/phone_list.controller.js"></script>-->
+  <!--<script src="app.module.js"></script>-->
+  <!--<script src="app.config.js"></script>-->
+  <!--<script src="core/core.module.js"></script>-->
+  <!--<script src="core/checkmark/checkmark.filter.js"></script>-->
+  <!--<script src="core/phone/phone.module.js"></script>-->
+  <!--<script src="core/phone/phone.service.js"></script>-->
+  <!--<script src="phone-list/phone-list.module.js"></script>-->
+  <!--<script src="phone-liset/phone-list.component.js"></script>-->
+  <!--<script src="phone-detail/phone-detail.module.js"></script>-->
+  <!--<script src="phone-detail/phone-detail.component.js"></script>-->
   <script src="systemjs.config.js"></script>
   <script>
-    System.import('js/app.module');
+    System.import('./app.module');
   </script>
   <!-- #enddocregion scripts -->
 </head>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/app.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/app.module.ts
deleted file mode 100644
index 835518a9c0..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/app.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// #docregion pre-bootstrap
-import core from './core/core.module';
-import phoneList from './phone_list/phone_list.module';
-import phoneDetail from './phone_detail/phone_detail.module';
-
-angular.module('phonecatApp', [
-  'ngAnimate',
-  'ngRoute',
-  core.name,
-  phoneList.name,
-  phoneDetail.name
-]).config(configure);
-
-configure.$inject = ['$routeProvider'];
-
-function configure($routeProvider) {
-  $routeProvider.
-    when('/phones', {
-      templateUrl: 'js/phone_list/phone_list.html',
-      controller: 'PhoneListCtrl',
-      controllerAs: 'vm'
-    }).
-    when('/phones/:phoneId', {
-      templateUrl: 'js/phone_detail/phone_detail.html',
-      controller: 'PhoneDetailCtrl',
-      controllerAs: 'vm'
-    }).
-    otherwise({
-      redirectTo: '/phones'
-    });
-}
-// #enddocregion pre-bootstrap
-// #docregion bootstrap
-angular.bootstrap(document.documentElement, ['phonecatApp']);
-// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/core.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/core.module.ts
deleted file mode 100644
index c20ce33683..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/core.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import Phone from './phone.factory';
-import checkmarkFilter from './checkmark.filter';
-
-export default angular.module('phonecat.core', [
-    'ngResource'
-  ])
-  .factory('Phone', Phone)
-  .filter('checkmark', checkmarkFilter);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/phone.factory.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/phone.factory.ts
deleted file mode 100644
index a8492b29fc..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/core/phone.factory.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-Phone.$inject = ['$resource'];
-
-function Phone($resource) {
-  return $resource('phones/:phoneId.json', {}, {
-    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
-  });
-}
-
-export default Phone;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.controller.ts
deleted file mode 100644
index c8745c0cd2..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.controller.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-PhoneDetailCtrl.$inject = ['$routeParams', 'Phone'];
-
-function PhoneDetailCtrl($routeParams, Phone) {
-  var vm = this;
-  vm.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
-    vm.mainImageUrl = phone.images[0];
-  });
-  vm.setImage = function(imageUrl) {
-    vm.mainImageUrl = imageUrl;
-  };
-}
-
-export default PhoneDetailCtrl;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.html b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.html
deleted file mode 100644
index 954c65c2cd..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<div class="phone-images">
-  <img ng-src="{{img}}"
-       class="phone"
-       ng-repeat="img in vm.phone.images"
-       ng-class="{active: vm.mainImageUrl==img}">
-</div>
-
-<h1>{{vm.phone.name}}</h1>
-
-<p>{{vm.phone.description}}</p>
-
-<ul class="phone-thumbs">
-  <li ng-repeat="img in vm.phone.images">
-    <img ng-src="{{img}}" ng-click="vm.setImage(img)">
-  </li>
-</ul>
-
-<ul class="specs">
-  <li>
-    <span>Availability and Networks</span>
-    <dl>
-      <dt>Availability</dt>
-      <dd ng-repeat="availability in vm.phone.availability">{{availability}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Battery</span>
-    <dl>
-      <dt>Type</dt>
-      <dd>{{vm.phone.battery.type}}</dd>
-      <dt>Talk Time</dt>
-      <dd>{{vm.phone.battery.talkTime}}</dd>
-      <dt>Standby time (max)</dt>
-      <dd>{{vm.phone.battery.standbyTime}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Storage and Memory</span>
-    <dl>
-      <dt>RAM</dt>
-      <dd>{{vm.phone.storage.ram}}</dd>
-      <dt>Internal Storage</dt>
-      <dd>{{vm.phone.storage.flash}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Connectivity</span>
-    <dl>
-      <dt>Network Support</dt>
-      <dd>{{vm.phone.connectivity.cell}}</dd>
-      <dt>WiFi</dt>
-      <dd>{{vm.phone.connectivity.wifi}}</dd>
-      <dt>Bluetooth</dt>
-      <dd>{{vm.phone.connectivity.bluetooth}}</dd>
-      <dt>Infrared</dt>
-      <dd>{{vm.phone.connectivity.infrared | checkmark}}</dd>
-      <dt>GPS</dt>
-      <dd>{{vm.phone.connectivity.gps | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Android</span>
-    <dl>
-      <dt>OS Version</dt>
-      <dd>{{vm.phone.android.os}}</dd>
-      <dt>UI</dt>
-      <dd>{{vm.phone.android.ui}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Size and Weight</span>
-    <dl>
-      <dt>Dimensions</dt>
-      <dd ng-repeat="dim in vm.phone.sizeAndWeight.dimensions">{{dim}}</dd>
-      <dt>Weight</dt>
-      <dd>{{vm.phone.sizeAndWeight.weight}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Display</span>
-    <dl>
-      <dt>Screen size</dt>
-      <dd>{{vm.phone.display.screenSize}}</dd>
-      <dt>Screen resolution</dt>
-      <dd>{{vm.phone.display.screenResolution}}</dd>
-      <dt>Touch screen</dt>
-      <dd>{{vm.phone.display.touchScreen | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Hardware</span>
-    <dl>
-      <dt>CPU</dt>
-      <dd>{{vm.phone.hardware.cpu}}</dd>
-      <dt>USB</dt>
-      <dd>{{vm.phone.hardware.usb}}</dd>
-      <dt>Audio / headphone jack</dt>
-      <dd>{{vm.phone.hardware.audioJack}}</dd>
-      <dt>FM Radio</dt>
-      <dd>{{vm.phone.hardware.fmRadio | checkmark}}</dd>
-      <dt>Accelerometer</dt>
-      <dd>{{vm.phone.hardware.accelerometer | checkmark}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Camera</span>
-    <dl>
-      <dt>Primary</dt>
-      <dd>{{vm.phone.camera.primary}}</dd>
-      <dt>Features</dt>
-      <dd>{{vm.phone.camera.features.join(', ')}}</dd>
-    </dl>
-  </li>
-  <li>
-    <span>Additional Features</span>
-    <dd>{{vm.phone.additionalFeatures}}</dd>
-  </li>
-</ul>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.module.ts
deleted file mode 100644
index 5ea1739577..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import PhoneDetailCtrl from './phone_detail.controller';
-
-export default angular.module('phonecat.detail', [
-    'phonecat.core',
-    'ngRoute'
-  ])
-  .controller('PhoneDetailCtrl', PhoneDetailCtrl);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.controller.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.controller.ts
deleted file mode 100644
index 63dc2a6548..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.controller.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-PhoneListCtrl.$inject = ['Phone'];
-
-function PhoneListCtrl(Phone) {
-  var vm = this;
-  vm.phones = Phone.query();
-  vm.orderProp = 'age';
-}
-
-export default PhoneListCtrl;
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.module.ts
deleted file mode 100644
index 758b937927..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.module.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-import PhoneListCtrl from './phone_list.controller';
-
-export default angular.module('phonecat.list', ['phonecat.core'])
-  .controller('PhoneListCtrl', PhoneListCtrl);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.spec.ts
new file mode 100644
index 0000000000..4d0b3c0cb7
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.spec.ts
@@ -0,0 +1,38 @@
+// #docregion top
+import './phone-detail.module';
+// #enddocregion top
+
+describe('phoneDetail', function(){
+
+    // Load the module that contains the `phoneDetail` component before each test
+    beforeEach(angular.mock.module('phoneDetail'));
+
+    // Test the controller
+    describe('PhoneDetailController', function() {
+      var $httpBackend, ctrl;
+      var xyzPhoneData = {
+        name: 'phone xyz',
+        images: ['image/url1.png', 'image/url2.png']
+      };
+
+      beforeEach(inject(function($componentController, _$httpBackend_, $routeParams) {
+        $httpBackend = _$httpBackend_;
+        $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);
+
+        $routeParams.phoneId = 'xyz';
+
+        ctrl = $componentController('phoneDetail', {$scope: {}});
+      }));
+
+      it('should fetch the phone details', function() {
+        jasmine.addCustomEqualityTester(angular.equals);
+
+        expect(ctrl.phone).toEqual({});
+
+        $httpBackend.flush();
+        expect(ctrl.phone).toEqual(xyzPhoneData);
+      });
+
+    });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.ts
new file mode 100644
index 0000000000..1e72fc1228
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.ts
@@ -0,0 +1,16 @@
+// #docregion
+
+export default {
+  templateUrl: 'phone-detail/phone-detail.template.html',
+  controller: ['$routeParams', 'Phone',
+    function PhoneDetailController($routeParams, Phone) {
+      var vm = this;
+      vm.phone = Phone.get({phoneId: $routeParams.phoneId}, (phone) => {
+        vm.setImage(phone.images[0]);
+      });
+      vm.setImage = function setImage(imageUrl) {
+        vm.mainImageUrl = imageUrl;
+      };
+    }
+  ]
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.module.ts
new file mode 100644
index 0000000000..d9e95c0761
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.module.ts
@@ -0,0 +1,9 @@
+// #docregion
+import phoneDetail from './phone-detail.component';
+import phone from '../core/phone/phone.module';
+
+export default angular.module('phoneDetail', [
+    'ngRoute',
+    phone.name
+  ])
+  .component('phoneDetail', phoneDetail);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.template.html b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.template.html
new file mode 100644
index 0000000000..019ccf45c7
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.template.html
@@ -0,0 +1,118 @@
+<div class="phone-images">
+  <img ng-src="{{img}}"
+       class="phone"
+       ng-repeat="img in $ctrl.phone.images"
+       ng-class="{active: $ctrl.mainImageUrl==img}">
+</div>
+
+<h1>{{$ctrl.phone.name}}</h1>
+
+<p>{{$ctrl.phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in $ctrl.phone.images">
+    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)">
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Battery</span>
+    <dl>
+      <dt>Type</dt>
+      <dd>{{$ctrl.phone.battery.type}}</dd>
+      <dt>Talk Time</dt>
+      <dd>{{$ctrl.phone.battery.talkTime}}</dd>
+      <dt>Standby time (max)</dt>
+      <dd>{{$ctrl.phone.battery.standbyTime}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Storage and Memory</span>
+    <dl>
+      <dt>RAM</dt>
+      <dd>{{$ctrl.phone.storage.ram}}</dd>
+      <dt>Internal Storage</dt>
+      <dd>{{$ctrl.phone.storage.flash}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{$ctrl.phone.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{$ctrl.phone.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Android</span>
+    <dl>
+      <dt>OS Version</dt>
+      <dd>{{$ctrl.phone.android.os}}</dd>
+      <dt>UI</dt>
+      <dd>{{$ctrl.phone.android.ui}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Size and Weight</span>
+    <dl>
+      <dt>Dimensions</dt>
+      <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
+      <dt>Weight</dt>
+      <dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Display</span>
+    <dl>
+      <dt>Screen size</dt>
+      <dd>{{$ctrl.phone.display.screenSize}}</dd>
+      <dt>Screen resolution</dt>
+      <dd>{{$ctrl.phone.display.screenResolution}}</dd>
+      <dt>Touch screen</dt>
+      <dd>{{$ctrl.phone.display.touchScreen | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Hardware</span>
+    <dl>
+      <dt>CPU</dt>
+      <dd>{{$ctrl.phone.hardware.cpu}}</dd>
+      <dt>USB</dt>
+      <dd>{{$ctrl.phone.hardware.usb}}</dd>
+      <dt>Audio / headphone jack</dt>
+      <dd>{{$ctrl.phone.hardware.audioJack}}</dd>
+      <dt>FM Radio</dt>
+      <dd>{{$ctrl.phone.hardware.fmRadio | checkmark}}</dd>
+      <dt>Accelerometer</dt>
+      <dd>{{$ctrl.phone.hardware.accelerometer | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Camera</span>
+    <dl>
+      <dt>Primary</dt>
+      <dd>{{$ctrl.phone.camera.primary}}</dd>
+      <dt>Features</dt>
+      <dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Additional Features</span>
+    <dd>{{$ctrl.phone.additionalFeatures}}</dd>
+  </li>
+</ul>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.spec.ts
new file mode 100644
index 0000000000..f0cf9987f9
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.spec.ts
@@ -0,0 +1,37 @@
+// #docregion top
+import './phone-list.module';
+// #enddocregion top
+
+describe('phoneList', function() {
+
+  // Load the module that contains the `phoneList` component before each test
+  beforeEach(angular.mock.module('phoneList'));
+
+  // Test the controller
+  describe('PhoneListController', function() {
+    var $httpBackend, ctrl;
+
+    beforeEach(inject(function($componentController, _$httpBackend_) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json')
+                  .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+
+      ctrl = $componentController('phoneList', {$scope: {}});
+    }));
+
+    it('should create a `phones` model with 2 phones fetched with `$http`', function() {
+      jasmine.addCustomEqualityTester(angular.equals);
+
+      expect(ctrl.phones).toEqual([]);
+
+      $httpBackend.flush();
+      expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+    });
+
+    it('should set a default value for the `orderProp` model', function() {
+      expect(ctrl.orderProp).toBe('age');
+    });
+
+  });
+
+});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.ts
new file mode 100644
index 0000000000..5e6db2e74f
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+export default {
+  templateUrl: 'phone-list/phone-list.template.html',
+  controller: ['Phone',
+    function PhoneListController(Phone) {
+      this.phones = Phone.query();
+      this.orderProp = 'age';
+    }
+  ]
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.module.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.module.ts
new file mode 100644
index 0000000000..feae92f9af
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.module.ts
@@ -0,0 +1,6 @@
+// #docregion
+import phoneList from './phone-list.component';
+import phone from '../core/phone/phone.module';
+
+export default angular.module('phoneList', [phone.name])
+  .component('phoneList', phoneList);
diff --git a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.html b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.template.html
similarity index 77%
rename from public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.html
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.template.html
index 471f474e89..95283ee032 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.template.html
@@ -3,9 +3,9 @@
     <div class="col-md-2">
       <!--Sidebar content-->
 
-      Search: <input ng-model="vm.query">
+      Search: <input ng-model="$ctrl.query">
       Sort by:
-      <select ng-model="vm.orderProp">
+      <select ng-model="$ctrl.orderProp">
         <option value="name">Alphabetical</option>
         <option value="age">Newest</option>
       </select>
@@ -15,7 +15,7 @@
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="phone in vm.phones | filter:vm.query | orderBy:vm.orderProp"
+        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
             class="thumbnail phone-listing">
           <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
           <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js
index 9a46070388..089b9c0d8a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js
@@ -5,7 +5,7 @@
 var pkgPath =  global.packagePath || '../node_modules/'; // path to packages
 System.config({
   packages: {
-    'js': { defaultExtension: 'js' },
+    './': { defaultExtension: 'js' },
   }
 });
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/protractor-conf.js b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/e2e-tests/protractor-conf.js
similarity index 94%
rename from public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/protractor-conf.js
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/e2e-tests/protractor-conf.js
index 118c7b9ec2..a4099af352 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/protractor-conf.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/e2e-tests/protractor-conf.js
@@ -2,7 +2,7 @@ exports.config = {
   allScriptsTimeout: 11000,
 
   specs: [
-    'e2e/*.js'
+    '*.js'
   ],
 
   capabilities: {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/e2e/scenarios.js b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/e2e-tests/scenarios.js
similarity index 83%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/e2e/scenarios.js
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/e2e-tests/scenarios.js
index 5a505b5dae..f5774c189a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/e2e/scenarios.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/e2e-tests/scenarios.js
@@ -20,8 +20,8 @@ describe('PhoneCat App', function() {
 
 
     it('should filter the phone list as a user types into the search box', function() {
-      var phoneList = element.all(by.repeater('phone in vm.phones'));
-      var query = element(by.model('vm.query'));
+      var phoneList = element.all(by.repeater('phone in $ctrl.phones'));
+      var query = element(by.model('$ctrl.query'));
 
       expect(phoneList.count()).toBe(20);
 
@@ -36,8 +36,8 @@ describe('PhoneCat App', function() {
 
     it('should be possible to control phone order via the drop down select box', function() {
 
-      var phoneNameColumn = element.all(by.repeater('phone in vm.phones').column('phone.name'));
-      var query = element(by.model('vm.query'));
+      var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
+      var query = element(by.model('$ctrl.query'));
 
       function getNames() {
         return phoneNameColumn.map(function(elm) {
@@ -52,7 +52,7 @@ describe('PhoneCat App', function() {
         "MOTOROLA XOOM\u2122"
       ]);
 
-      element(by.model('vm.orderProp')).element(by.css('option[value="name"]')).click();
+      element(by.model('$ctrl.orderProp')).element(by.css('option[value="name"]')).click();
 
       expect(getNames()).toEqual([
         "MOTOROLA XOOM\u2122",
@@ -62,7 +62,7 @@ describe('PhoneCat App', function() {
 
 
     it('should render phone specific links', function() {
-      var query = element(by.model('vm.query'));
+      var query = element(by.model('$ctrl.query'));
       query.sendKeys('nexus');
       element.all(by.css('.phones li a')).first().click();
       browser.getLocationAbsUrl().then(function(url) {
@@ -80,7 +80,7 @@ describe('PhoneCat App', function() {
 
 
     it('should display nexus-s page', function() {
-      expect(element(by.binding('vm.phone.name')).getText()).toBe('Nexus S');
+      expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
     });
 
 
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/karma.conf.1.js
new file mode 100644
index 0000000000..5124a02418
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/karma.conf.1.js
@@ -0,0 +1,42 @@
+module.exports = function(config){
+  config.set({
+
+    basePath: './app',
+
+    // #docregion files
+    files : [
+      'bower_components/angular/angular.js',
+      'bower_components/angular-route/angular-route.js',
+      'bower_components/angular-resource/angular-resource.js',
+      'bower_components/angular-animate/angular-animate.js',
+      'bower_components/angular-mocks/angular-mocks.js',
+      '../node_modules/systemjs/dist/system.src.js',
+      '../karma_test_shim.js',
+      {pattern: '**/*.module.js', included: false, watched: true},
+      {pattern: '*!(.module|.spec).js', included: false, watched: true},
+      {pattern: '!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},
+      {pattern: '**/*.spec.js', included: false, watched: true}
+    ],
+    // #enddocregion files
+
+    autoWatch : true,
+
+    frameworks: ['jasmine'],
+
+    browsers : ['Chrome', 'Firefox'],
+
+    plugins : [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-jasmine'
+    ],
+
+    junitReporter : {
+      outputFile: 'test_out/unit.xml',
+      suite: 'unit'
+    },
+
+    logLevel: config.LOG_DEBUG
+
+  });
+};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/karma_test_shim.js b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/karma_test_shim.js
similarity index 87%
rename from public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/karma_test_shim.js
rename to public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/karma_test_shim.js
index 15cbee5d7d..d03229f0f5 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/karma_test_shim.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/karma_test_shim.js
@@ -5,7 +5,7 @@ __karma__.loaded = function() {};
 
 System.config({
   packages: {
-    'base/app/js': {
+    'base': {
       defaultExtension: false,
       format: 'register',
       map: Object.keys(window.__karma__.files).
@@ -13,7 +13,7 @@ System.config({
             reduce(function createPathRecords(pathsMapping, appPath) {
               // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
               // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
-              var moduleName = appPath.replace(/^\/base\/app\/js\//, './').replace(/\.js$/, '');
+              var moduleName = appPath.replace(/^\/base\//, './').replace(/\.js$/, '');
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
@@ -36,7 +36,7 @@ Promise.all(
 });
 
 function onlyAppFiles(filePath) {
-  return /^\/base\/app\/js\/.*\.js$/.test(filePath)
+  return /^\/base\/.*\.(?!\.spec\.)js$/.test(filePath)
 }
 
 function onlySpecFiles(path) {
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/package.1.json
index cec9c37aee..6c8c0c8a0a 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/package.1.json
@@ -26,12 +26,12 @@
     "prestart": "npm install",
     "start": "http-server -a 0.0.0.0 -p 8000",
     "pretest": "npm install",
-    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
-    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
+    "test": "node node_modules/karma/bin/karma start karma.conf.js",
+    "test-single-run": "node node_modules/karma/bin/karma start karma.conf.js  --single-run",
     "preupdate-webdriver": "npm install",
     "update-webdriver": "webdriver-manager update",
     "preprotractor": "npm run update-webdriver",
-    "protractor": "protractor test/protractor-conf.js",
+    "protractor": "protractor e2e-tests/protractor-conf.js",
     "typings": "typings",
     "tsc": "tsc -p . -w"
   }
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/jasmine_matchers.d.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/jasmine_matchers.d.ts
deleted file mode 100644
index 6d24879775..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/jasmine_matchers.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-declare module jasmine {
-  interface Matchers {
-    toEqualData(expected: any):boolean;
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/karma.conf.1.js
deleted file mode 100644
index 8f2e7d178f..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/karma.conf.1.js
+++ /dev/null
@@ -1,38 +0,0 @@
-module.exports = function(config){
-  config.set({
-
-    basePath : '..',
-
-    // #docregion files
-    files : [
-      'app/bower_components/angular/angular.js',
-      'app/bower_components/angular-route/angular-route.js',
-      'app/bower_components/angular-resource/angular-resource.js',
-      'app/bower_components/angular-animate/angular-animate.js',
-      'app/bower_components/angular-mocks/angular-mocks.js',
-      'node_modules/systemjs/dist/system.src.js',
-      'test/karma_test_shim.js',
-      {pattern: 'app/js/**/*.js', included: false, watched: true},
-      {pattern: 'test/unit/**/*.js', included: false, watched: true}
-    ],
-    // #enddocregion files
-
-    autoWatch : true,
-
-    frameworks: ['jasmine'],
-
-    browsers : ['Chrome', 'Firefox'],
-
-    plugins : [
-      'karma-chrome-launcher',
-      'karma-firefox-launcher',
-      'karma-jasmine'
-    ],
-
-    junitReporter : {
-      outputFile: 'test_out/unit.xml',
-      suite: 'unit'
-    }
-
-  });
-};
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone.factory.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone.factory.spec.ts
deleted file mode 100644
index d7c95d347e..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone.factory.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion top
-import '../../app/js/core/core.module';
-// #enddocregion top
-
-describe('phoneFactory', function() {
-
-  // load modules
-  beforeEach(angular.mock.module('phonecat.core'));
-
-  // Test service availability
-  it('check the existence of Phone factory', inject(function(Phone) {
-    expect(Phone).toBeDefined();
-  }));
-
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone_detail.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone_detail.controller.spec.ts
deleted file mode 100644
index 02a3e20240..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone_detail.controller.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docregion top
-import '../../app/js/phone_detail/phone_detail.module';
-// #enddocregion top
-
-describe('PhoneDetailCtrl', function(){
-  var scope, $httpBackend, ctrl,
-      xyzPhoneData = function() {
-        return {
-          name: 'phone xyz',
-          images: ['image/url1.png', 'image/url2.png']
-        }
-      };
-
-  beforeEach(angular.mock.module('phonecat.detail'));
-
-  beforeEach(function(){
-    jasmine.addMatchers({
-      toEqualData: function(util, customEqualityTesters) {
-        return {
-          compare: function(actual, expected) {
-            return {pass: angular.equals(actual, expected)};
-          }
-        };
-      }
-    });
-  });
-
-  beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
-    $httpBackend = _$httpBackend_;
-    $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
-
-    $routeParams.phoneId = 'xyz';
-    scope = $rootScope.$new();
-    ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
-  }));
-
-
-  it('should fetch phone detail', function() {
-    expect(ctrl.phone).toEqualData({});
-    $httpBackend.flush();
-
-    expect(ctrl.phone).toEqualData(xyzPhoneData());
-  });
-});
diff --git a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone_list.controller.spec.ts b/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone_list.controller.spec.ts
deleted file mode 100644
index efec5d5f08..0000000000
--- a/public/docs/_examples/upgrade-phonecat/ts/typescript-conversion/test/unit/phone_list.controller.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docregion top
-import '../../app/js/phone_list/phone_list.module';
-// #enddocregion top
-
-describe('PhoneListCtrl', function(){
-  var scope, ctrl, $httpBackend;
-
-  beforeEach(angular.mock.module('phonecat.list'));
-
-  beforeEach(function(){
-    jasmine.addMatchers({
-      toEqualData: function(util, customEqualityTesters) {
-        return {
-          compare: function(actual, expected) {
-            return {pass: angular.equals(actual, expected)};
-          }
-        };
-      }
-    });
-  });
-
-  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
-    $httpBackend = _$httpBackend_;
-    $httpBackend.expectGET('phones/phones.json').
-        respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-
-    scope = $rootScope.$new();
-    ctrl = $controller('PhoneListCtrl', {$scope: scope});
-  }));
-
-
-  it('should create "phones" model with 2 phones fetched from xhr', function() {
-    expect(ctrl.phones).toEqualData([]);
-    $httpBackend.flush();
-
-    expect(ctrl.phones).toEqualData(
-        [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-  });
-
-
-  it('should set the default value of orderProp model', function() {
-    expect(ctrl.orderProp).toBe('age');
-  });
-});
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 95ee9314b9..350357e36e 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -44,7 +44,7 @@ include ../_util-fns
   4. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial)
       1. [Bootstrapping A Hybrid 1+2 PhoneCat](#bootstrapping-a-hybrid-1-2-phonecat)
       2. [Upgrading the Phone factory](#upgrading-the-phone-factory)
-      3. [Upgrading Controllers to Components](#upgrading-controllers-to-components)
+      3. [Upgrading Components](#upgrading-components)
       4. [Switching To The Angular 2 Router And Bootstrap](#switching-to-the-angular-2-router-and-bootstrap)
       5. [Saying Goodbye to Angular 1](#saying-goodbye-to-angular-1)
 
@@ -60,7 +60,7 @@ include ../_util-fns
 
   ## Following The Angular Style Guide
 
-  The [Angular Style Guide](https://github.com/johnpapa/angular-styleguide)
+  The [Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
   collects patterns and practices that have been proven to result in
   cleaner and more maintainable Angular 1 applications. It contains a wealth
   of information about how to write and organize Angular code - and equally
@@ -80,7 +80,7 @@ include ../_util-fns
     states that there should be one component per file. This not only makes
     components easy to navigate and find, but will also allow us to migrate
     them between languages and frameworks one at a time. In this example application,
-    each controller, factory, and filter is in its own source file.
+    each controller, component, service, and filter is in its own source file.
   * The [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)
     and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)
     rules define similar principles on a higher level of abstraction: Different parts of the
@@ -740,82 +740,75 @@ figure
 
   To follow along with the tutorial, clone the
   [angular-phonecat](https://github.com/angular/angular-phonecat) repository
-  and apply the steps as we go
+  and apply the steps as we go.
   
-.alert.is-important
-  :marked
-    If you do clone this repository, note that it doesn't look like this guide
-    assumes yet. There's [a pull request](https://github.com/angular/angular-phonecat/pull/289)
-    that will change this. Meanwhile, you'll find a good starting point from
-    [this commit](https://github.com/teropa/angular-phonecat/commit/d6fb83e1c2db9d1812c7c478fdb8d92301ef0061).
-  
-:marked
-  In terms of project structure, this is where our work begins
+  In terms of project structure, this is where our work begins:
   
 .filetree
   .file angular-phonecat
   .children
     .file bower.json
+    .file karma.conf.js
     .file package.json
     .file app
     .children
-      .file js
+      .file core
       .children
-        .file core
+        .file checkmark
         .children
           .file checkmark.filter.js
-          .file core.module.js
-          .file phone.factory.js
-        .file phone_detail
+          .file checkmark.filter.spec.js
+        .file phone
         .children
-          .file phone_detail.html
-          .file phone_detail.module.js
-          .file phone_detail.controller.js
-        .file phone_list
-        .children
-          .file phone_list.html
-          .file phone_list.module.js
-          .file phone_list.controller.js
-        .file app.module.js
-      .file css
+          .file phone.module.js
+          .file phone.service.js
+          .file phone.service.spec.js
+        .file core.module.js
+      .file phone-detail
+      .children
+        .file phone-detail.component.js
+        .file phone-detail.component.spec.js
+        .file phone-detail.module.js
+        .file phone-detail.template.html
+      .file phone-list
       .children
-        .file animations.css
-        .file app.css
+        .file phone-list.component.js
+        .file phone-list.component.spec.js
+        .file phone-list.module.js
+        .file phone-list.template.html
       .file img
       .children
         .file  ...
       .file phones
       .children
         .file  ...
+      .file app.animations.js
+      .file app.config.js
+      .file app.css
+      .file app.module.js
       .file index.html
-    .file test
+    .file e2e-tests
     .children
-      .file e2e
-      .children
-        .file scenarios.js
-      .file unit
-      .children
-        .file checkmark.filter.spec.js
-        .file phone_detail.controller.spec.js
-        .file phone.factory.spec.js
-        .file phone_list.controller.spec.js
-      .file karma.conf.js
       .file protractor-conf.js
+      .file scenarios.js
 
 :marked
   This is actually a pretty good starting point. In particular, this organization
-  follows the [Angular Style Guide](https://github.com/johnpapa/angular-styleguide),
+  follows the [Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md),
   which is an important [preparation step](#following-the-angular-style-guide) before
   a successful upgrade. 
   
-  * Each controller, factory, and filter is in its own source file, as per the
-    [Rule of 1](https://github.com/johnpapa/angular-styleguide#single-responsibility).
-  * The `core`, `phoneDetail`, and `phoneList` modules are each in their
+  * Each component, service, and filter is in its own source file, as per the
+    [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility).
+  * The `core`, `phone-detail`, and `phone-list` modules are each in their
     own subdirectory. Those subdirectories contain the JavaScript code as well as
     the HTML templates that go with each particular feature. This is in line with the
-    [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide#style-y152)
-    and [Modularity](https://github.com/johnpapa/angular-styleguide#modularity)
+    [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y152)
+    and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)
     rules.
+  * Unit tests are located side-by-side with application code where they are easily
+    found, as described in the rules for 
+    [Organizing Tests](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y197).
 
 :marked
   ## Switching to TypeScript And Module Loading
@@ -829,12 +822,6 @@ figure
   instead. We'll replace this approach with the
   [SystemJS loader](https://github.com/systemjs/systemjs).
 
-.alert.is-helpful
-  :marked
-    Angular 2 itself doesn't require either TypeScript or SystemJS.
-    There will soon be other editions of this guide that show how to
-    do the upgrade using ES5.
-    
 :marked
   We will also start to gradually phase out the Bower package manager in favor
   of NPM. We'll install all new dependencies using NPM, and will eventually be
@@ -859,9 +846,7 @@ code-example(format="").
 
 :marked
   We can now use Typings to install the type definitions for Angular 1 and the Jasmine
-  unit test framework. This will add a `typings` directory to the project and install
-  a number of `.d.ts` files under it. It will also create a `typings.json` file to the
-  project, which contains metadata about the type definitions we've installed:
+  unit test framework:
   
 code-example(format="").
   npm run typings install jquery -- --save --ambient
@@ -883,8 +868,8 @@ code-example(format="").
 +makeExample('upgrade-phonecat/ts/typescript-conversion/app/systemjs.config.js', ull, 'app/systemjs.config.js')
 
 :marked
-  This tells SystemJS that we have a module called `app.module` that
-  resides in the `js` subdirectory (relative to the `index.html` page). We then load that
+  This configuration tells SystemJS that we have a module called `app.module` that
+  resides in the same directory as the `index.html` page. We then load that
   module using `System.import`. This will load and execute the `app/app.module.js` file.
 
   We should also configure the TypeScript compiler so that it can understand our
@@ -920,74 +905,81 @@ code-example(format="").
   our existing code. Instead we'll introduce type annotations and other new
   features gradually over time.
   
-  Let's begin by renaming `app.module.js` to `app.module.ts`. The TypeScript
-  compiler should be able to compile it successfully right away. This means we can
-  move right along and go through the rest of our source files and convert them.
-  We'll rename each one to a `.ts` file, and add the imports and exports it needs.
-  
-  Beginning from the checkmark filter, here are the converted contents:
+  So, we'll go through each of our source files and convert them as we go, by
+  renaming each one to a `.ts` file and adding the imports and exports it needs.
+  Beginning from the `Phone` service, here are the converted contents:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/core/checkmark.filter.ts', null, 'app/js/core/checkmark.filter.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.ts', null, 'app/core/phone/phone.service.ts')
 
 :marked
-  This file now has the filter factory function as the default export. Apart from 
+  This file now has the factory function as the default export. Apart from 
   the export, there's one other major change we've applied to the file, which
-  is that it does *not* contain the registration of the filter into an Angular
-  module. We will do that later in the `core` module's main file. 
+  is that it does *not* contain the registration of the factory into an Angular
+  module. We do that in the `core.phone` module's main file, where we also then
+  export the module itself as the default export: 
+  
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.module.ts', null, 'app/core/phone/phone.module.ts')
+
+:marked
+  This'll be a pattern we follow for all our files: Rather than registering things
+  into the Angular 1 module system in every file, we use the ES2015 module system.
+  Angular 1 module management is centralized into the `.module.ts` files, where it is
+  easier to manage. It will also be easy to eventually remove when we complete the
+  upgrade.
   
-  Moving to the `Phone` factory file, it now has the factory function as the default
+  Moving on to the `checkmark` filter, it now has the filter factory function as the default
   export:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/core/phone.factory.ts', null, 'app/js/core/phone.factory.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/core/checkmark/checkmark.filter.ts', null, 'app/core/checkmark/checkmark.filter.ts')
 
 :marked
   The `core` module's main module file will now import both the checkmark filter
-  and the Phone factory. This is where we actually register them into the Angular module.
-  We then export the module itself as this file's default export:
+  and the `core.phone` module:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/core/core.module.ts', null, 'app/js/core/core.module.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/core/core.module.ts', null, 'app/core/core.module.ts')
 
 :marked
-  Notice that with this organization pattern, the files that hold the application
-  components themselves - filters and factories - aren't concerned with the makeup
-  of Angular modules. That's just something we previously *had* to do because there
-  were no other good solutions. Now we use a separate file just for the purpose
-  of forming the Angular module.
+  Note that we don't have to repeat the name string of the `core.phone` Angular 1 module
+  here. Since the module exports itself, we can just refer to its `name` attribute.
+  Rather than defining module dependencies using strings, we can just use the
+  ES2015 module system.
   
   Now switching to the phone detail module, we'll make similar changes here. In the
-  controller file we export the controller function as the default export:
+  component file we export the component object as the default export:
 
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.controller.ts', null, 'app/js/phone_detail/phone_detail.controller.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
 
 :marked
-  In the main module file we import the controller and register it into the Angular
+  In the main module file we import the component and register it into the Angular
   module, which itself is then exported:
 
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/phone_detail/phone_detail.module.ts', null, 'app/js/phone_detail/phone_detail.module.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.module.ts', null, 'app/phone-detail/phone-detail.module.ts')
 
 :marked
   Then we'll repeat the same steps once more for the phone list module.
-  The controller file exports the controller function:
+  The component file exports the component object:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.controller.ts', null, 'app/js/phone_list/phone_list.controller.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.ts', null, 'app/phone-list/phone-list.component.ts')
 
 :marked
-  And the main module file imports the controller and registers it:
+  The main module file then imports the component and registers it:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.module.ts', null, 'app/js/phone_list/phone_list.module.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.module.ts', null, 'app/phone-list/phone-list.module.ts')
 
 :marked
-  Finally, we can now pull everything together in `app.module.ts`. We'll
-  import each of the three submodule files and register them as dependencies
-  of the main application module:
+  We'll also convert our application route config block so that it doesn't
+  register itself into a module. It is just exported:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/app.module.ts', 'pre-bootstrap', 'app/js/app.module.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/app.config.ts', null, 'app/app.config.ts')
 
 :marked
-  Note that we don't have to repeat the submodule name strings here. Since the
-  modules export themselves, we can just refer to the `name` attribute of each 
-  of them.
+  Finally, we can now pull everything together in `app.module.ts`. It here we'll
+  import each of the three submodule files as well as the config block. We then register
+  them into the main application module:
   
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/app.module.ts', 'pre-bootstrap', 'app/app.module.ts')
+
+:marked
   Before this converted version of the application will run, we need to change the
   way we're bootstrapping it. It is currently bootstrapped using the `ng-app` directive
   attached to the `<html>` element of the host page. This will no longer work because
@@ -996,10 +988,10 @@ code-example(format="").
   
   We should switch to a JavaScript-driven bootstrap instead. As it happens, this is
   also how Angular 2 apps are bootstrapped, so the switch brings us one step closer
-  to Angular as well. So, remove the `ng-app` attribute from `index.html`, and add
+  to Angular 2 as well. So, remove the `ng-app` attribute from `index.html`, and add
   this at the end of `app.module.ts`:
 
-+makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/app.module.ts', 'bootstrap', 'app/js/app.module.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/app.module.ts', 'bootstrap', 'app/app.module.ts')
 
 :marked
   We now have a fully functional version of the application, all converted
@@ -1029,7 +1021,7 @@ code-example(format="").
   the application files. For this we'll use a shim file that will tweak the way
   files get loaded:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/test/karma_test_shim.js', null, 'test/karma_test_shim.js')
++makeExample('upgrade-phonecat/ts/typescript-conversion/karma_test_shim.js', null, 'karma_test_shim.js')
 
 .alert.is-important The shim is likely to be replaced by improved tooling, but is currently needed.
 
@@ -1039,48 +1031,33 @@ code-example(format="").
   We will *watch* them so that the test suite is triggered when changes occur, but we
   won't have Karma *include* them because that is now done by SystemJS and the shim.
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/test/karma.conf.1.js', 'files', 'test/karma.conf.js')
++makeExample('upgrade-phonecat/ts/typescript-conversion/karma.conf.1.js', 'files', 'karma.conf.js')
 
 :marked
   Now we have the infrastructure in place and can convert the test files themselves.
-  This mainly just consists for changing the file extensions of those files, and adding
+  This mainly just consists of changing the file extensions of those files, and adding
   the necessary imports to them.
   
   In the checkmark filter spec, we'll import the core module file, so that it is
   available when we load the corresponding Angular module:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/test/unit/checkmark.filter.spec.ts', 'top', 'test/unit/checkmark.filter.spec.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/core/checkmark/checkmark.filter.spec.ts', 'top', 'app/core/checkmark/checkmark.filter.spec.ts')
 
 :marked
-  We'll do the exact same thing for the phone factory spec:
+  For the phone service spec, on the other hand, we load the `core.phone` module file:
 
-+makeExample('upgrade-phonecat/ts/typescript-conversion/test/unit/phone.factory.spec.ts', 'top', 'test/unit/phone.factory.spec.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/core/phone/phone.service.spec.ts', 'top', 'app/core/phone/phone.service.spec.ts')
 
 :marked
-  In the phone detail controller spec, on the other hand, we should import
-  the phone detail module:
+  In the phone detail component spec we should import the phone detail module:
 
-+makeExample('upgrade-phonecat/ts/typescript-conversion/test/unit/phone_detail.controller.spec.ts', 'top', 'test/unit/phone_detail.controller.spec.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/phone-detail/phone-detail.component.spec.ts', 'top', 'app/phone-detail/phone-detail.component.spec.ts')
 
 :marked
-  Finally, the phone list controller spec should import the phone list
+  Finally, the phone list component spec should import the phone list
   module:
   
-+makeExample('upgrade-phonecat/ts/typescript-conversion/test/unit/phone_list.controller.spec.ts', 'top', 'test/unit/phone_list.controller.spec.ts')
-
-:marked
-  There's one more issue we have in our controller tests, which is that TypeScript
-  isn't happy about compiling them at the moment. This is because we're using
-  the custom Jasmine matcher `toEqualData` in both of them. Because this is something
-  we define ourselves, it isn't included in the Jasmine type definitions that we
-  installed using Typings.
-  
-  We can add our own little type definition file for that extension, which extends
-  the `jasmine.Matchers` interface and adds our custom matcher to it. This will
-  satisfy the compiler and let us use our custom matcher while retaining the nice
-  type safety features of TypeScript:
-  
-+makeExample('upgrade-phonecat/ts/typescript-conversion/test/jasmine_matchers.d.ts', null, 'test/jasmine_matchers.d.ts')
++makeExample('upgrade-phonecat/ts/typescript-conversion/app/phone-list/phone-list.component.spec.ts', 'top', 'app/phone-list/phone-list.component.spec.ts')
 
 :marked
   And now we have a fully functional test suite for our TypeScript-enabled
@@ -1091,13 +1068,13 @@ code-example(format="").
   
   Now that we have TypeScript, we can start benefiting from some of its
   other features in addition to the imports and exports that we're already using.
-  There's a lot of value the language can provide in Angular 1 applications.
+  There's a lot of value the language can provide to Angular 1 applications.
   
   For one thing, TypeScript is a superset of ES2015. Any app that has previously
   been written in ES5 - like the PhoneCat example has - can with TypeScript
   start incorporating all of the JavaScript features that are new to ES2015.
-  These include things like `let`s and `const`s, default function parameters,
-  and destructuring assignments.
+  These include things like `let`s and `const`s, arrow functions, default function
+  parameters, and destructuring assignments.
   
   Another thing we can do is start adding *type safety* to our code, by
   adding type annotations. For instance, we can annotate the checkmark
@@ -1106,7 +1083,7 @@ code-example(format="").
   possible for the TypeScript compiler to notify us when we're trying to
   use it with incompatible types.
   
-+makeExample('upgrade-phonecat/ts/classes/app/js/core/checkmark.filter.ts', null, 'app/js/core/checkmark.filter.ts', {otl: /(:\w+)/g})
++makeExample('upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.ts', null, 'app/core/checkmark/checkmark.filter.ts', {otl: /(:\w+)/g})
   
 .l-sub-section
   :marked
@@ -1124,37 +1101,41 @@ code-example(format="").
   
 :marked
   Another TypeScript feature we can make use of is *classes*. In particular, we
-  can turn our controllers into classes. That way they'll be a step
+  can turn our component controllers into classes. That way they'll be a step
   closer to becoming Angular 2 component classes, which will make our life
   easier once we do the upgrade.
   
   Angular 1 expects controllers to be constructor functions. That's what
-  ES2015/TypeScript classes really are, so that means we can just register a
-  class as a controller and Angular 1 will happily use it. We also won't 
+  ES2015/TypeScript classes really are, so that means we can just plug in a
+  class as a component controller and Angular 1 will happily use it. We also won't 
   need to make any changes to our test suite as the external behavior of the
-  controllers will not change.
+  components will not change.
   
-  Here's what our new class for the phone list controller looks like.
+  Here's what our new class for the phone list component controller looks like:
   
-+makeExample('upgrade-phonecat/ts/classes/app/js/phone_list/phone_list.controller.ts', null, 'app/js/phone_list/phone_list.controller.ts')
++makeExample('upgrade-phonecat/ts/classes/app/phone-list/phone-list.component.ts', null, 'app/phone-list/phone-list.component.ts')
 
 :marked
   What was previously done in the controller function is now done in the class
-  constructor function. The class additionally declares three members: The 
-  array of phones, the name of the current sort key, and the search query. These
-  are all things we have already been attaching to the controller,
-  but that weren't explicitly declared anywhere. The last one of these isn't actually
-  used in the TypeScript code since it's only referred to in the template, but for
-  the sake of clarity we want to define all the members our controller will have.
+  constructor function. The dependency injection annotations are attached
+  to the class using a static TypeScript property `$inject`. At runtime this
+  becomes the `PhoneListController.$inject` property.
+  
+  The class additionally declares three members: The array of phones, the name of
+  the current sort key, and the search query. These are all things we have already
+  been attaching to the controller but that weren't explicitly declared anywhere.
+  The last one of these isn't actually used in the TypeScript code since it's only
+  referred to in the template, but for the sake of clarity we want to define all the
+  members our controller will have.
 
   In the Phone detail controller we'll have two members: One for the phone
   that the user is looking at and another for the URL of the currently displayed image.
   We can additionally introduce a TypeScript interface that explicitly defines
   what we expect the `$routeParams` object to contain when it is
-  passed to the controller. This interface is not exported and is just used internally
+  passed to the controller. This interface is not exported so it's just used internally
   inside this module:
   
-+makeExample('upgrade-phonecat/ts/classes/app/js/phone_detail/phone_detail.controller.ts', null, 'app/js/phone_detail/phone_detail.controller.ts')
++makeExample('upgrade-phonecat/ts/classes/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
   
 :marked
   This makes our controller code look a lot more like Angular 2 already. We're
@@ -1196,9 +1177,9 @@ code-example(format="").
   npm run typings install
   
 :marked
-  We should then load some Angular 2 dependencies into the application by adding
-  some `<script>` tags to `index.html`. They should go before the `<script>` tag
-  that loads `systemjs.config.js`:
+  We can then load Angular 2 dependencies into the application by adding some
+  `<script>` tags to `index.html`. They should go before the `<script>` tag that
+  loads `systemjs.config.js`. 
   
 +makeExample('upgrade-phonecat/ts/ng2_initial/app/index.html', 'ng2')
 
@@ -1210,9 +1191,10 @@ code-example(format="").
 
 :marked
   While we're at it, let's also make these files available to unit tests by
-  updating the Karma config:
+  updating the Karma config. Note that we also change Karma's base directory
+  at this point so that we can load files from `node_modules` more easily.
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js', 'ng2', 'test/karma.conf.js')
++makeExample('upgrade-phonecat/ts/ng2_initial/karma.conf.1.js', null, 'karma.conf.js')
 
 :marked
   ## Bootstrapping A Hybrid 1+2 PhoneCat
@@ -1221,7 +1203,7 @@ code-example(format="").
   that supports both Angular 1 and Angular 2 components. Once we've done that
   we can start converting the individual pieces to Angular 2.
   
-  At this point we need to do add the Angular 2 type definitions
+  At this point we need to add the Angular 2 type definitions
   into `app.ts`, so that the TypeScript compiler knows what we're talking about
   when we use Angular 2 APIs. Unlike with Angular 1, we don't need to install
   these type definitions with Typings because Angular 2 comes with them included.
@@ -1232,17 +1214,17 @@ code-example(format="").
 +makeJson('upgrade-phonecat/ts/ng2_initial/tsconfig.1.json', null, 'tsconfig.json', {otl: /(\"moduleResolution.*)/})
 
 :marked
-  To boostrap a hybrid application, we first need to initialize an `UpgradeAdapter`,
+  To bootstrap a hybrid application, we first need to initialize an `UpgradeAdapter`,
   which [provides the glue](#upgrading-with-the-upgrade-adapter) that joins the two
   versions of the framework together. Let's import the `UpgradeAdapter` class into
   `app.module.ts`:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts', 'adapter-import', 'app/js/app.module.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/app.module.ts', 'adapter-import', 'app/app.module.ts')
 
 :marked
   We can then make an adapter by instantiating the class:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts', 'adapter-init')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/upgrade-adapter.ts', 'adapter-init')
   
 :marked
   Now we can use that adapter to bootstrap our application as a hybrid.
@@ -1251,7 +1233,7 @@ code-example(format="").
   They are still the element that will become the root of the application,
   and the names of the root Angular 1.x modules that we want to include:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts', 'bootstrap')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/app.module.ts', 'bootstrap')
   
 :marked
   We are now running both Angular 1 and 2 at the same time. That's pretty
@@ -1260,15 +1242,15 @@ code-example(format="").
   
     
 :marked
-  ## Upgrading the Phone factory
+  ## Upgrading the Phone service
 
-  The first piece we'll port over to Angular 2 is the `Phone` factory, which
-  resides in `app/js/core/phones.factory.ts` and makes it possible for controllers
+  The first piece we'll port over to Angular 2 is the `Phone` service, which
+  resides in `app/core/phone/phone.service.ts` and makes it possible for components
   to load phone information from the server. Right now it's implemented with
   ngResource and we're using it for two things:
   
-  * For loading the list of all phones into the phone list controller
-  * For loading the details of a single phone into the phone detail controller.
+  * For loading the list of all phones into the phone list component
+  * For loading the details of a single phone into the phone detail component.
   
   We can replace this implementation with an Angular 2 service class, while 
   keeping our controllers in Angular 1 land. In the new version we'll just use
@@ -1278,7 +1260,7 @@ code-example(format="").
   it into our application's dependency injector. We should import the `HTTP_PROVIDERS`
   constant in `app.module.ts`:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts', 'http-import')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/app.module.ts', 'http-import')
 
 :marked
   In a regular Angular 2 application we would now pass `HTTP_PROVIDERS` into
@@ -1290,14 +1272,13 @@ code-example(format="").
   What we must do instead is register `HTTP_PROVIDERS` into the `UpgradeAdapter`
   separately. It has a method called `addProvider` for that purpose:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts', 'add-http-providers')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/app.module.ts', 'add-http-providers')
 
 :marked
-  Now we're ready to upgrade the Phones factory itself. We'll put the Angular 2
-  implementation in a new file called `phones.service.ts` in the core module. It will be a TypeScript
-  class decorated as `@Injectable`:
+  Now we're ready to upgrade the Phones service itself. We replace the ngResource-based
+  service in `phone.service.ts` with a TypeScript class decorated as `@Injectable`:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts', 'class', 'app/js/core/phones.service.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.ts', 'class', 'app/core/phone/phone.service.ts')
 
 :marked
   The `@Injectable` decorator will attach some dependency injection metadata
@@ -1311,32 +1292,31 @@ code-example(format="").
   used in the two instance methods, one of which loads the list of all phones,
   and the other the details of a particular phone:
 
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts', 'fullclass')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.ts', 'fullclass')
 
 :marked
-  The methods now return Observables of type `Phone` and `Phone[]`. This is
+  The methods now return Observables of type `PhoneData` and `PhoneData[]`. This is
   a type we don't have yet, so let's add a simple interface for it:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts', 'phone-interface', 'app/js/core/phones.service.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.ts', 'phonedata-interface', 'app/core/phone/phone.service.ts')
 
 :marked
   Here's the full, final code for the service:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/core/phones.service.ts', 'full', 'app/js/core/phones.service.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.ts', null, 'app/core/phone/phone.service.ts')
 
 :marked
   Notice that we're importing the `map` operator of the RxJS `Observable` separately.
   We need to do this for all RxJS operators that we want to use, since Angular 2
   does not load all of them by default.
 
-  The new `Phones` service now has the same features that the original, ngResource based
-  service did. You can remove the old `phones.factory.ts` file. Now we just
-  need to register the new service into the application, so that our Angular 1
-  controllers will be able to use it.
+  The new `Phone` service now has the same features that the original, ngResource based
+  service did. Now we just need to register the new service into the application, so that
+  our Angular 1 components will be able to use it.
   
   `UpgradeAdapter` has a `downgradeNg2Provider` method for the purpose of making
   Angular 2 services available to Angular 1 code. The problem is that we don't have
-  our `UpgradeAdapter` available in `core.module.ts` where the `Phones` service should
+  our `upgradeAdapter` available in `phone.module.ts` where the `Phones` service should
   be registered. We only have it in `app.module.ts`. There should only be one
   `UpgradeAdapter` in an application, so we need to find a way to share our
   instance between the two code modules.
@@ -1346,176 +1326,141 @@ code-example(format="").
   so that we're using the same object everywhere. Let's put this new file
   under `core`:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/core/upgrade_adapter.ts', 'full', 'app/js/core/upgrade_adapter.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/upgrade-adapter.ts', null, 'app/core/upgrade-adapter.ts')
 
 :marked
   In `app.module.ts` we should now just import this adapter instead of making a separate one:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/app.module.ts', 'adapter-state-import')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/app.module.ts', 'adapter-state-import')
 
 :marked
   Also remove the line from `app.module.ts` that is instantiating `UpgradeAdapter`. It's no
   longer needed since we import the instance from elsewhere.
   
-  We'll then do the same in `core.module.ts` as well. Then we can register the `Phones` service into it.
+  We'll then do the same in `phone.module.ts` as well. Then we can register the `Phone` service into it.
   While doing that, we can remove the module's dependency to `ngResource`, which
   we're no longer using.
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/core/core.module.ts', null, 'app/js/core/core.module.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.module.ts', null, 'app/core/phone/phone.module.ts')
 
 :marked
   Note that we actually needed to do two registrations here:
   
-  1. Register `Phones` as an **Angular 2 provider** with the `addProvider`
+  1. Register `Phone` as an **Angular 2 provider** with the `addProvider`
      method. That's the same method that we used earlier for `HTTP_PROVIDERS`.
-  2. Register an **Angular 1 factory** called `phones`, which will be a *downgraded*
-     version of the `Phones` service.
+  2. Register an **Angular 1 factory** called `phone`, which will be a *downgraded*
+     version of the `Phone` Angular 2 service.
      
-  At this point we can switch our two controllers to use the new service
-  instead of the old one. We `$inject` it as the downgraded `phones` factory,
-  but it's really an instance of the `Phones` class and we can annotate its type
+  At this point we can switch our two components to use the new service
+  instead of the old one. We `$inject` it as the downgraded `phone` factory,
+  but it's really an instance of the `Phone` class and we can annotate its type
   accordingly:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts', null, 'app/js/phone_detail/phone_detail.controller.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
 
-+makeExample('upgrade-phonecat/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts', null, 'app/js/phone_list/phone_list.controller.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.ts', null, 'app/phone-list/phone-list.component.ts')
 
 :marked
-  What we have here are two Angular 1 controllers using an Angular 2 service!
-  The controllers don't need to be aware of this, though the fact that the
+  What we have here are two Angular 1 components using an Angular 2 service!
+  The components don't need to be aware of this, though the fact that the
   service returns Observables and not Promises is a bit of a giveaway.
   In any case, what we've achieved is a migration of a service to Angular 2
-  without having to yet migrate the controllers that use it.
+  without having to yet migrate the components that use it.
   
 .alert.is-helpful
   :marked
     You could use the `toPromise` method of `Observable` to turn those Observables
     into Promises in the service to further reduce the amount of changes
-    needed in controller code.
+    needed in the component controllers.
   
 :marked
   To bring our test suite up to speed with the changes, we should update the Karma
   test shim. It'll make some of Angular 2 providers available before starting
   to load any of the spec files:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/karma_test_shim.js', null, 'test/karma_test_shim.js')
++makeExample('upgrade-phonecat/ts/ng2_initial/karma_test_shim.js', null, 'karma_test_shim.js')
 
 .alert.is-important The shim is likely to be replaced by improved tooling, but is needed right now.
 
 :marked
   Now, let's look at the tests for the service itself. What we used to have in 
-  `phones_factory_spec.js` was a fairly simple test that simply checks if
-  the factory exists and is available for injection. We can now do that same
-  test in Angular 2. Rename `phones.factory.spec.ts` to `phones.service.spec.ts` and
-  set the contents as follows:
+  `phone.service.spec.js` was a test that checks if the service is making a
+  call to `$http` and returning the correct value. We can now do that same
+  test in Angular 2. Set the contents of `phone.service.spec.ts` as follows:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/unit/phones.service.spec.ts', null, 'test/unit/phones.service.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/core/phone/phone.service.spec.ts', null, 'app/core/phone/phone.service.spec.ts')
 
 :marked
-  Here we first load the `Phones` provider and then test that an instance of
-  `Phones` can in fact be injected. We also need to load `HTTP_PROVIDERS` since
-  it is a dependency of `Phones`.
-  
-  For the controller tests, we can first of all at this point get rid of the
-  custom `toEqualData` custom matcher. It was added because `ngResource` attaches
-  attributes to the data that we don't want to compare in tests. We're no longer
-  using `ngResource`, so we can simply use the built-in `toEqual` for comparisons.
-  This means we can remove the `test/jasmine_matchers.d.ts` file at this point.
+  Here we use the Angular 2 Http module and its mock backend to verify that the
+  service is doing the right thing.
   
-  Now, in the phone detail controller we have been testing that the phone details
-  with the id given in the route params are fetched over HTTP and put on the
+  In the phone detail component we have been testing that the phone details
+  matching the id in the route params are fetched over HTTP and put on the
   scope. We can continue doing that, but we'll need to change the structure of the
   test a bit. Instead of using the Angular 1 mock HTTP backend, we'll just mock out
-  the `get` method of the `Phones` service, which is what the controller is now
+  the `get` method of the `Phone` service, which is what the controller is now
   using to load what it needs. As the mocked value, we're returning an Observable
   that will emit a single value - the mock phone data:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts', null, 'test/unit/phone_detail.controller.spec.ts')
-
-.alert.is-important
-  :marked
-    We're doing a manual `Phones` instantiation because hybrid apps can't be
-    bootstrapped for unit tests at the moment, which means that Angular 2
-    dependencies can't be made available. This is likely to change.
++makeExample('upgrade-phonecat/ts/ng2_initial/app/phone-detail/phone-detail.component.spec.ts', null, 'app/phone-detail/phone-detail.component.spec.ts')
 
 :marked
   In the phone list controller we'll do something very similar: We mock out the `query`
-  method of the `Phones` service, and check that the controller makes the resulting
+  method of the `Phone` service, and check that the controller makes the resulting
   value available:
   
-+makeExample('upgrade-phonecat/ts/ng2_initial/test/unit/phone_list.controller.spec.ts', null, 'test/unit/phone_list.controller.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_initial/app/phone-list/phone-list.component.spec.ts', null, 'app/phone-list/phone-list.component.spec.ts')
 
 :marked
-  ## Upgrading Controllers to Components
+  ## Upgrading Components
   
-  Next, let's upgrade our Angular 1 controllers to Angular 2 components. We'll
+  Next, let's upgrade our Angular 1 components to Angular 2 components. We'll
   do it one at a time, while still keeping the application in hybrid mode.
   As we make these conversions, we'll also be defining our first Angular 2 *pipes*.
   
-  Let's look at the phone list controller first. Right now it is a TypeScript class,
-  which is paired with an HTML template by the route configuration in `app.ts`.
-  We'll be turning it into an Angular 2 component.
+  Let's look at the phone list component first. Right now it contains a TypeScript
+  controller class and a component definition object. We can morph this into
+  an Angular 2 component by just renaming the controller class and turning the
+  Angular 1 component definition object into an Angular 2 `@Component` decorator.
+  We can then also remove the static `$inject` property from the class:
   
-  Rename `phone_list.controller.ts` to `phone_list.component.ts`. Then rename the controller class
-  inside to just `PhoneList` and decorate it as a `@Component`:
-  
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts', 'top', 'app/js/phone_list/phone_list.component.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.component.ts', null, 'app/phone-list/phone-list.component.ts')
 
 :marked
   The `selector` attribute is a CSS selector that defines where on the page the component
-  should go. It will match elements by the name of `pc-phone-list`. It is a good idea
-  to always use application-specific prefixes in selectors so that they never clash with
-  built-in ones, and here we're using `pc-`, which is short for "PhoneCat".
-  
-  The `templateUrl` defines the location of the component template. It points to our existing
-  template file
-  
-  Both of these attributes are things that were defined *externally* for the controller,
-  but for the component are things that it defines *itself*. This will affect how we use
-  the component in the router.
+  should go. In Angular 1 we do matching based on component names, but in Angular 2 we
+  have these explicit selectors. This one will match elements with the name `phone-list`,
+  just like the Angular 1 version did.
   
-:marked
   We now also need to convert the template of this component into Angular 2 syntax.
-  In the search controls we need to use Angular 2 syntax for the two `ngModel`s
+  In the search controls we need to use Angular 2 syntax for the two `ngModel`s.
+  We should also no longer use the `$ctrl` prefix in expressions:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.html', 'controls', 'app/js/phone_list/phone_list.html')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.template.html', 'controls', 'app/phone-list/phone-list.template.html')
 
 :marked
-  In the list we need to replace the `ng-repeat` with an `*ngFor` and its
+  In the list we need to replace the `ng-repeat` with an `*ngFor` and the
   `#var of iterable` syntax, which is [described in our
   Template Syntax guide](../guide/template-syntax.html#directives).
-  
-  For the images, we can replace `ng-src` with the standard `src`, but will use a
-  property binding. Note that we're also adding a `name` CSS class for the phone name.
+  For the images, we can replace `ng-src` with a binding to the standard `src` property.
+  Note that we're also adding a `name` CSS class for the phone name.
   This is something we'll need for our Protractor tests:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.html', 'list', 'app/js/phone_list/phone_list.html')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-pipes.template.html', 'list', 'app/phone-list/phone-list.template.html')
 
 :marked
   In the module file we're going to plug this component into our application. Instead
-  of registering a controller, we register a `pcPhoneList` directive.
-  The directive is a downgraded version of our component, and the `UpgradeAdapter`
+  of registering a component, we register a `phoneList` *directive*.
+  The directive is a downgraded version of our Angular 2 component, and the `UpgradeAdapter`
   handles the bridging between the two:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.module.ts', null, 'app/js/phone_list/phone_list.module.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.module.ts', null, 'app/phone-list/phone-list.module.ts')
 
 :marked
   The `<angular.IDirectiveFactory>` type annotation here is to let the TypeScript compiler
   know that the return value of the downgrade method call will be something that can be
   used as a directive factory.
   
-  To complete the switch, we should change our route configuration in `app.module.ts`.
-  Instead of using the controller and template, it can just instantiate our component.
-  We can do that by using a simple template that uses the directive
-  we just registered:
-
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/app.module.ts', 'list-route')
-
-:marked
-  When the application runs, the Angular 1.x directive compiler will match
-  the element in the template to the `pcPhoneList` directive, which is actually
-  an Angular 2 component!
-  
   The remaining issue with the phone list is the use of filters in its
   template: It is referring to the `filter` filter and the `orderBy` filter,
   and relying on them to filter and sort the phone list, respectively.
@@ -1533,16 +1478,16 @@ code-example(format="").
   For filtering, we'll have a pipe called `PhoneFilterPipe`. It works like 
   the `filter` filter in Angular 1 in that it filters a collection of objects,
   matching properties within the objects. But, as opposed to `filter`,
-  this pipe is specialized to filter `Phone` objects and we can use
+  this pipe is specialized to filter `PhoneData` objects and we can use
   type annotations to make this explicit:
-  
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts', null, 'app/js/phone_list/phone_filter.pipe.ts')
+
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.ts', null, 'app/phone-list/phone-filter.pipe.ts')
 
 :marked
   Since we're adding new code, it's a good idea to add some unit tests for
   it too. Here are a few tests for `PhoneFilterPipe`:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts', null, 'test/unit/phone_filter.pipe.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-filter.pipe.spec.ts', null, 'app/phone-list/phone-filter.pipe.spec.ts')
 
 :marked
   For sorting, we'll use a more generic pipe, just called `OrderBy`. It
@@ -1550,24 +1495,24 @@ code-example(format="").
   an array of the same type of thing it was given. In the implementation we
   copy the input array, sort the copy, and return it.
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/order_by.pipe.ts', null, 'app/js/phone_list/order_by.pipe.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.ts', null, 'app/phone-list/order-by.pipe.ts')
 
 :marked
   Here's a unit test for `OrderByPipe` as well:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/test/unit/order_by.pipe.spec.ts', null, 'test/unit/order_by.pipe.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/order-by.pipe.spec.ts', null, 'app/phone-list/order-by.pipe.spec.ts')
 
 :marked
   We can now integrate these new pipes with our component. Before the pipes
   are available there, we need to declare them in the `@Component` decorator.
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts', 'top', 'app/js/phone_list/phone_list.component.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.ts', 'top', 'app/phone-list/phone-list.component.ts')
 
 :marked
   In the template we need to use the `phoneFilter` pipe instead of `filter`.
   No changes are needed for the `orderBy`
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list_without_async.html', 'list', 'app/js/phone_list/phone_list.html')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list-without-async.template.html', 'list', 'app/phone-list/phone-list.template.html')
 
 :marked
   Now that the phone list is an Angular 2 component, there's one more neat trick
@@ -1577,34 +1522,32 @@ code-example(format="").
   With Angular 2, we can instead just put the Observable itself on the
   component, and can skip the subscription callback:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.component.ts', 'full', 'app/js/phone_list/phone_list.component.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.ts', null, 'app/phone-list/phone-list.component.ts')
 
 :marked
   This is made possible by the `async` pipe, which we can apply in the template.
-  It knows how to turn an Observable to the (latest) value it has emitted:
+  It knows how to subscribe to an Observable and always evaluates to the latest
+  value it has emitted:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_list/phone_list.html', 'list', 'app/js/phone_list/phone_list.html')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html')
 
 :marked
   That takes care of the phone list. Here's the updated unit test file for
   that component to complete the migration:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/test/unit/phone_list.component.spec.ts', null, 'test/unit/phone_list.component.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-list/phone-list.component.spec.ts', null, 'app/phone-list/phone-list.component.spec.ts')
 
 :marked
   Before this test will run, we'll need to augment our Karma configuration
-  so that component HTML templates are loaded properly. We didn't need them
-  before when we were testing the controller in isolation, but our new test
-  exercises the component as a whole, which includes the template.
+  so that component HTML templates are loaded properly:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js', 'html', 'test/karma.conf.js')
++makeExample('upgrade-phonecat/ts/ng2_components/karma.conf.1.js', 'html', 'karma.conf.js')
 
 :marked
-  Now we can start looking at our other controller, which is the one for
-  the phone details. Rename `phone_detail.controller.ts` to `phone_detail.component.ts`,
-  and set the contents as follows:
+  Now we can start looking at our other component, which is the one for
+  the phone details. Set the contents of `phone-detail.component.ts` as follows:
     
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts', null, 'app/js/phone_detail/phone_detail.component.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail-without-pipes.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
 
 :marked
   This is pretty similar to what we did with the phone list. The one new change
@@ -1618,7 +1561,7 @@ code-example(format="").
   We explicitly need to tell the `UpgradeAdapter` to upgrade `$routeParams` so that
   it is available for injection in Angular 2. We can do it in `app.module.ts`:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/app.module.ts', 'upgrade-route-params', 'app/js/app.module.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/app.module.ts', 'upgrade-route-params', 'app/app.module.ts')
 
   
     
@@ -1626,14 +1569,14 @@ code-example(format="").
   We now also need to convert the template of this component into Angular 2 syntax.
   Here is the new template in its entirety:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.html', null, 'app/js/phone_detail/phone_detail.html')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.template.html', null, 'app/phone-detail/phone-detail.template.html')
 
 :marked
   There are several notable changes here:
   
-  * We've removed the `vm.` prefix from all expressions.
+  * We've removed the `$ctrl.` prefix from all expressions.
   * Just like we did in the phone list, we've replaced `ng-src` with property
-    bindings for the standard `src`.
+    bindings for the standard `src` property.
   * We're using the property binding syntax around `ng-class`. Though Angular 2
     does have [a very similar `ngClass`](../guide/template-syntax.html#directives)
     as Angular 1 does, its value is not magically evaluated as an expression.
@@ -1649,16 +1592,11 @@ code-example(format="").
     about cases where this is expected.
     
 :marked
-  In the module file we'll now register a `pcPhoneDetail` directive instead of a
-  controller. The directive is a downgraded version of the `PhoneDetail` component.
+  In the module file we'll now register a `phoneDetail` directive instead of a
+  component. The directive is a downgraded version of the `PhoneDetail` Angular 2
+  component.
     
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts', null, 'app/js/phone_detail/phone_detail.module.ts')
-
-:marked
-  In the router configuration in `app.module.ts`, we'll switch the details route to
-  instantiate a component as well:
-
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/app.module.ts', 'detail-route')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.module.ts', null, 'app/phone-detail/phone-detail.module.ts')
 
 :marked
   There's one additional step we need to take, which is to upgrade the
@@ -1668,34 +1606,34 @@ code-example(format="").
   While there is no upgrade method in the upgrade adapter for filters, we
   can just turn the filter function into a class that fulfills
   the contract for Angular 2 Pipes. The implementation is the same as before.
-  It just comes in a different kind of package. While changing it, also
+  It just comes in a different kind of packaging. While changing it, also
   rename the file to `checkmark.pipe.ts`:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/core/checkmark.pipe.ts', null, 'app/js/core/checkmark.pipe.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.ts', null, 'app/core/checkmark/checkmark.pipe.ts')
 
 :marked
   As we apply this change, we should also remove the registration of the filter
-  from the core module file. The module's content becomes:
+  from the core Angular 1 module file. The module's content becomes:
 
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/core/core.module.ts', null, 'app/js/core/core.module.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/core/core.module.ts', null, 'app/core/core.module.ts')
 
 :marked
   The unit test file for the filter also now becomes the unit test filter
   for the pipe. While we're still testing the same thing, we need to change
   how we set things up:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/test/unit/checkmark.pipe.spec.ts', null, 'test/unit/checkmark.pipe.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/core/checkmark/checkmark.pipe.spec.ts', null, 'app/core/checkmark/checkmark.pipe.spec.ts')
 
 :marked
   In the component we should now import and declare our newly created pipe:
   
-+makeExample('upgrade-phonecat/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts', 'top', 'app/js/phone_detail/phone_detail.component.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.ts', 'top', 'app/phone-detail/phone-detail.component.ts')
 
 :marked
   With the phone detail component now migrated as well, we can go and migrate
   its unit tests too.
   
-+makeExample('upgrade-phonecat/ts/ng2_components/test/unit/phone_detail.component.spec.ts', null, 'test/unit/phone_detail.component.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_components/app/phone-detail/phone-detail.component.spec.ts', null, 'app/phone-detail/phone-detail.component.spec.ts')
 
 :marked
   As we discussed earlier, Protractor tests should largely remain functional
@@ -1712,7 +1650,7 @@ table
   tr
     td
       :marked
-        `by.repeater('phone in vm.phones').column('phone.name')`
+        `by.repeater('phone in $ctrl.phones').column('phone.name')`
     td
       :marked
         `by.css('.phones .name')`
@@ -1722,7 +1660,7 @@ table
   tr
     td
       :marked
-        `by.repeater('phone in vm.phones')`
+        `by.repeater('phone in $ctrl.phones')`
     td
       :marked
         `by.css('.phones li')`
@@ -1732,7 +1670,7 @@ table
   tr
     td  
       :marked
-        `by.model('vm.query')`
+        `by.model('$ctrl.query')`
     td
       :marked
         `by.css('input')`
@@ -1742,7 +1680,7 @@ table
   tr
     td
       :marked
-        `by.model('vm.orderProp')`
+        `by.model('$ctrl.orderProp')`
     td
       :marked
         `by.css('select')`
@@ -1752,7 +1690,7 @@ table
   tr 
     td
       :marked
-        `by.binding('vm.phone.name')`
+        `by.binding('$ctrl.phone.name')`
     td
       :marked
         `by.css('h1')`
@@ -1790,17 +1728,17 @@ table
   Let's change this now and add an `AppComponent` class into a new file
   `app.component.ts`:
 
-+makeExample('upgrade-phonecat/ts/ng2_final/app/js/app.component.ts', null, 'app/js/app.component.ts')
++makeExample('upgrade-phonecat/ts/ng2_final/app/app.component.ts', null, 'app/app.component.ts')
 
 :marked
-  This is a component that plugs in to an `<pc-app>` element on the page,
+  This is a component that plugs in to an `<phonecat-app>` element on the page,
   and has a simple template that only includes the router outlet component
   of the Angular router. This means that the component just renders the contents
   of the current route and nothing else. The `@RouteConfig` decorator defines
   the Angular 2 counterparts of our two routes. They refer directly to the
   two components.
   
-  We should put this `<pc-app>` element in the HTML so that the root component
+  We should put this `<phonecat-app>` element in the HTML so that the root component
   has something to attach to. It replaces the old Angular 1 `ng-view` directive:
   
 +makeExample('upgrade-phonecat/ts/ng2_final/app/index.html', 'body', 'app/index.html')
@@ -1812,20 +1750,20 @@ table
   object provided by the Angular 2 router. We use it to obtain the `phoneId` from
   the params:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts', null, 'app/js/phone_detail/phone_detail.component.ts')
++makeExample('upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
 
 :marked
   We should also make the corresponding change in the unit test. We provide
   an instance of the `RouteParams` class instead of the `$routeParams` object:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/test/unit/phone_detail.component.spec.ts', 'routeparams', 'test/unit/phone_detail.component.spec.ts')
++makeExample('upgrade-phonecat/ts/ng2_final/app/phone-detail/phone-detail.component.spec.ts', 'routeparams', 'app/phone-detail/phone-detail.component.spec.ts')
 
 :marked
   With that, we're ready to switch the bootstrap method of the application from that
   of the `UpgradeAdapter` to the main Angular 2 `bootstrap`. Let's import it together
-  with the router and the new app component in `app.module.ts`
+  with the router, the new app component, and everything else in `app.module.ts`
   
-+makeExample('upgrade-phonecat/ts/ng2_final/app/js/main.ts', 'importbootstrap')
++makeExample('upgrade-phonecat/ts/ng2_final/app/main.ts', 'importbootstrap')
 
 :marked
   We'll now use the regular Angular 2 `bootstrap` function to bootstrap the app 
@@ -1836,7 +1774,7 @@ table
   with  `upgradeAdapter.addProvider` until now, as well as the providers and
   directives of the router:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/app/js/main.ts', 'bootstrap')
++makeExample('upgrade-phonecat/ts/ng2_final/app/main.ts', 'bootstrap')
 
 :marked
   We are now running a pure Angular 2 application!
@@ -1847,18 +1785,18 @@ table
   its `routerLink` directive. We just need to refer to the route names we
   used in the `@RouteConfig`:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.html', 'list', 'app/js/phone_list/phone_list.html')
++makeExample('upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html')
 
 :marked
   For this to work the directive just needs to be declared in the component:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/app/js/phone_list/phone_list.component.ts', 'top')
++makeExample('upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.ts', 'top')
 
 :marked
   Also, the unit tests for `PhoneList` now need to set up some router providers
   so that the `RouterLink` directive can be injected in the tests:
 
-+makeExample('upgrade-phonecat/ts/ng2_final/test/unit/phone_list.component.spec.ts', null)
++makeExample('upgrade-phonecat/ts/ng2_final/app/phone-list/phone-list.component.spec.ts')
 
 :marked
   To bring our Protractor test suite up to speed with the latest changes,
@@ -1867,7 +1805,7 @@ table
   should not be looking for one but instead find *Angular 2 apps* from
   the page. Add the following configuration option to `protractor-conf.js`:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/test/protractor-conf.js', 'ng2')
++makeExample('upgrade-phonecat/ts/ng2_final/e2e-tests/protractor-conf.js', 'ng2', 'e2e-tests/protractor-conf.js')
 
 :marked
   Also, there are a couple of Protractor API calls in our test code that
@@ -1876,12 +1814,12 @@ table
   that use WebDriver's generic URL APIs instead. The first of these is
   the redirection spec:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/test/e2e/scenarios.js', 'redirect')
++makeExample('upgrade-phonecat/ts/ng2_final/e2e-tests/scenarios.js', 'redirect', 'e2e-tests/scenarios.js')
 
 :marked
   And the second is the phone links spec:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/test/e2e/scenarios.js', 'links')
++makeExample('upgrade-phonecat/ts/ng2_final/e2e-tests/scenarios.js', 'links', 'e2e-tests/scenarios.js')
 
 :marked
   Now our E2E test suite is passing too, and we're ready to remove
@@ -1898,22 +1836,22 @@ table
   an Angular 1 module, so it doesn't really make sense to call it a module.
   Then remove all references to the `UpgradeAdapter` from `main.ts`. Also remove
   the Angular 1 bootstrap code and the imports of the `core`, `phoneList`, and
-  `phoneDetail` modules. Instead import the `PhoneList` and `PhoneDetail`
-  components directly - they are needed in the route configuration.
+  `phoneDetail` modules. 
   
   When you're done, this is what `main.ts` should look like:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/app/js/main.ts', null, 'app/js/main.ts')
++makeExample('upgrade-phonecat/ts/ng2_final/app/main.ts', null, 'app/main.ts')
 
 :marked
   You may also completely remove the following files. They are Angular 1
-  module configuration files and type definition files, and not required
-  in Angular 2:
+  module configuration files and not needed in Angular 2:
   
-  * `app/js/core/core.module.ts`
-  * `app/js/core/upgrade_adapter.ts`
-  * `app/js/phone_detail/phone_detail.module.ts`
-  * `app/js/phone_list/phone_list.module.ts`
+  * `app/app.config.ts`
+  * `app/core/core.module.ts`
+  * `app/core/upgrade_adapter.ts`
+  * `app/core/phone/phone.module.ts`
+  * `app/phone-detail/phone-detail.module.ts`
+  * `app/phone-list/phone-list.module.ts`
 
   The external typings for Angular 1 may be uninstalled as well. The only ones
   we still need are for Jasmine.
@@ -1927,16 +1865,16 @@ code-example(format="").
 
 :marked
   Finally, from `index.html` and `karma.conf.js`, remove all references to
-  Angular 1 scripts as well as jQuery. Instead of importing `js/app.module`
-  with SystemJS, import `js/main`. When you're done, this is what `index.html`
-  should look like:
+  Angular 1 scripts, the Angular 2 upgrade module, and jQuery. Instead of
+  importing `./app.module` with SystemJS, import `./main`. When you're done,
+  this is what `index.html` should look like:
   
 +makeExample('upgrade-phonecat/ts/ng2_final/app/index.html', null, 'app/index.html')
 
 :marked
   And this is what `karma.conf.js` should look like:
   
-+makeExample('upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js', null, 'test/karma.conf.js')
++makeExample('upgrade-phonecat/ts/ng2_final/karma.conf.1.js', null, 'karma.conf.js')
 
 :marked
   That is the last we'll see of Angular 1! It has served us well but now