docs(ugprade): bring phonecat upgrade tutorial up to speed with modernized Angular 1.x PhoneCat

Relates to angular/angular-phonecat#326

Author: teropa

public/docs/_examples/upgrade-phonecat/ts/classes/app/css/animations.css renamed to public/docs/_examples/upgrade-phonecat/ts/classes/app/app.animations.css

@@ -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');
+}];

public/docs/_examples/upgrade-phonecat/ts/classes/app/app.config.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

public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/css/app.css renamed to public/docs/_examples/upgrade-phonecat/ts/classes/app/app.css

@@ -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) {

public/docs/_examples/upgrade-phonecat/ts/classes/app/app.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);

public/docs/_examples/upgrade-phonecat/ts/classes/test/unit/checkmark.filter.spec.ts renamed to public/docs/_examples/upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.spec.ts

@@ -0,0 +1,5 @@
+// #docregion
+import Phone from './phone.service';
+
+export default angular.module('core.phone', ['ngResource'])
+  .factory('Phone', Phone);

public/docs/_examples/upgrade-phonecat/ts/classes/app/js/core/checkmark.filter.ts renamed to public/docs/_examples/upgrade-phonecat/ts/classes/app/core/checkmark/checkmark.filter.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);
+  });
+
+});

public/docs/_examples/upgrade-phonecat/ts/classes/app/core/core.module.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
+      }
+    });
+  }
+];

public/docs/_examples/upgrade-phonecat/ts/classes/app/core/phone/phone.module.ts

@@ -4,20 +4,30 @@
   <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>
   <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="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.factory.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>
     System.config({
-      packages: {'js': {defaultExtension: 'js'}}
+      packages: {'.': {defaultExtension: 'js'}}
     });
-    System.import('js/app.module');
+    System.import('./app.module');
   </script>
   <!-- #enddocregion scripts -->
 </head>