From ad4c52113022f74672a6dcaa3db61505343c648e Mon Sep 17 00:00:00 2001 From: Tero Parviainen Date: Tue, 15 Dec 2015 14:36:37 +0200 Subject: [PATCH] chore(upgrade) bring upgrade tutorial up to speed with alpha.54 - Use angular2-polyfills bundle - Use separate upgrade bundle - Use Rx bundle and remove superfluous SystemJS config for RxJS - Switch to CSS file tree from ASCII --- .../upgrade/ts/ng2_components/app/index.html | 9 +- .../upgrade/ts/ng2_components/package.json | 6 +- .../ts/ng2_components/test/karma.conf.js | 14 +-- .../ts/ng2_components/test/karma_test_shim.js | 6 - .../upgrade/ts/ng2_final/app/index.html | 8 +- .../upgrade/ts/ng2_final/package.json | 6 +- .../upgrade/ts/ng2_final/test/karma.conf.js | 11 +- .../ts/ng2_final/test/karma_test_shim.js | 6 - .../upgrade/ts/ng2_initial/app/index.html | 8 +- .../upgrade/ts/ng2_initial/package.json | 6 +- .../upgrade/ts/ng2_initial/test/karma.conf.js | 5 +- .../ts/ng2_initial/test/karma_test_shim.js | 6 - public/docs/ts/latest/guide/upgrade.jade | 117 +++++++++--------- 13 files changed, 93 insertions(+), 115 deletions(-) diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/index.html b/public/docs/_examples/upgrade/ts/ng2_components/app/index.html index be97a6cfe2..2bc6531b68 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/index.html +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/index.html @@ -12,20 +12,17 @@ + + + + + @@ -19,13 +21,7 @@ packages: { 'js': { defaultExtension: 'js' - }, - 'rxjs': { - defaultExtension: 'js' } - }, - map: { - 'rxjs' : '/node_modules/rxjs' } }); System.import('js/app'); diff --git a/public/docs/_examples/upgrade/ts/ng2_final/package.json b/public/docs/_examples/upgrade/ts/ng2_final/package.json index d9428d6935..7dc5e6226d 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/package.json +++ b/public/docs/_examples/upgrade/ts/ng2_final/package.json @@ -6,12 +6,12 @@ "repository": "https://github.com/angular/angular-phonecat", "license": "MIT", "dependencies": { - "angular2": "2.0.0-alpha.53", + "angular2": "2.0.0-alpha.54", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", - "rxjs": "5.0.0-alpha.14", - "zone.js": "0.5.8", + "rxjs": "5.0.0-beta.0", + "zone.js": "0.5.10", "systemjs": "0.19.6" }, "devDependencies": { diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js b/public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js index 78b81c4da1..5fad1839c4 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js @@ -4,15 +4,16 @@ module.exports = function(config){ basePath : '..', files : [ 'node_modules/systemjs/dist/system.src.js', + 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/angular2/bundles/angular2.dev.js', + 'node_modules/rxjs/bundles/Rx.js', 'node_modules/angular2/bundles/http.dev.js', - 'node_modules/angular2/bundles/testing.js', + 'node_modules/angular2/bundles/testing.dev.js', 'node_modules/angular2/bundles/router.dev.js', 'test/karma_test_shim.js', {pattern: 'app/js/**/*.js', included: false, watched: true}, - {pattern: 'app/**/*.html', included: false, watched: true}, - {pattern: 'test/unit/**/*.js', included: false, watched: true}, - {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false} + {pattern: 'app/js/**/*.html', included: false, watched: true}, + {pattern: 'test/unit/**/*.js', included: false, watched: true} ], autoWatch : true, frameworks: ['jasmine'], @@ -28,7 +29,7 @@ module.exports = function(config){ }, proxies: { // required for component assests fetched by Angular's compiler - "/app/js/": "/base/src/app/js/" + "/js/": "/base/app/js/" } }); }; diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js b/public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js index 43c3d123ee..07e5378108 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js @@ -17,13 +17,7 @@ System.config({ pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath] return pathsMapping; }, {}) - }, - 'rxjs': { - defaultExtension: 'js' } - }, - map: { - 'rxjs' : '/base/node_modules/rxjs' } }); diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html b/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html index a0739be79e..26caa8b4e9 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html +++ b/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html @@ -18,8 +18,10 @@ + + @@ -28,13 +30,7 @@ packages: { 'js': { defaultExtension: 'js' - }, - 'rxjs': { - defaultExtension: 'js' } - }, - map: { - 'rxjs' : '/node_modules/rxjs' } }); System.import('js/app.module'); diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/package.json b/public/docs/_examples/upgrade/ts/ng2_initial/package.json index d9428d6935..7dc5e6226d 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/package.json +++ b/public/docs/_examples/upgrade/ts/ng2_initial/package.json @@ -6,12 +6,12 @@ "repository": "https://github.com/angular/angular-phonecat", "license": "MIT", "dependencies": { - "angular2": "2.0.0-alpha.53", + "angular2": "2.0.0-alpha.54", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", - "rxjs": "5.0.0-alpha.14", - "zone.js": "0.5.8", + "rxjs": "5.0.0-beta.0", + "zone.js": "0.5.10", "systemjs": "0.19.6" }, "devDependencies": { diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js b/public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js index 5172938b23..6ad38dc6ba 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js +++ b/public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js @@ -17,16 +17,17 @@ module.exports = function(config){ 'node_modules/es6-promise/dist/es6-promise.js', 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/angular2/bundles/angular2.dev.js', + 'node_modules/angular2/bundles/upgrade.dev.js', // #enddocregion ng2 // #docregion ng2-http + 'node_modules/rxjs/bundles/Rx.js', 'node_modules/angular2/bundles/http.dev.js', // #enddocregion ng2-http 'test/karma_test_shim.js', {pattern: 'app/js/**/*.js', included: false, watched: true}, {pattern: 'test/unit/**/*.js', included: false, watched: true}, // #docregion ng2-testing - 'node_modules/angular2/bundles/testing.js', - {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false}, + 'node_modules/angular2/bundles/testing.dev.js' // #enddocregion ng2-testing // #docregion ng2 ], diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js b/public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js index 43c3d123ee..07e5378108 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js +++ b/public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js @@ -17,13 +17,7 @@ System.config({ pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath] return pathsMapping; }, {}) - }, - 'rxjs': { - defaultExtension: 'js' } - }, - map: { - 'rxjs' : '/base/node_modules/rxjs' } }); diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 713d4ea441..9b37be324d 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -47,45 +47,57 @@ include ../../../../_includes/_util-fns In terms of project structure, this is where our work begins - ``` - angular-phonecat - ├── bower.json - ├── package.json - ├── app - │ ├── js - │ │ ├── core - │ │ │ ├── checkmark.filter.js - │ │ │ ├── core.module.js - │ │ │ └── phone.factory.js - │ │ ├── phone_detail - │ │ │ ├── phone_detail.html - │ │ │ ├── phone_detail.module.js - │ │ │ └── phone_detail.controller.js - │ │ ├── phone_list - │ │ │ ├── phone_list.html - │ │ │ ├── phone_list.module.js - │ │ │ └── phone_list.controller.js - │ │ └── app.module.js - │ ├── css - │ │ ├── animations.css - │ │ └── app.css - │ ├── img - │ │ └── ... - │ ├── phones - │ │ └── ... - │ └── index.html - └── test - ├── e2e - │ └── scenarios.js - ├── unit - │ ├── checkmark.filter.spec.js - │ ├── phone_detail.controller.spec.js - │ ├── phone.factory.spec.js - │ └── phone_list.controller.spec.js - ├── karma.conf.js - └── protractor-conf.js - ``` +.filetree + .file angular-phonecat + .children + .file bower.json + .file package.json + .file app + .children + .file js + .children + .file core + .children + .file checkmark.filter.js + .file core.module.js + .file phone.factory.js + .file phone_detail + .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 + .children + .file animations.css + .file app.css + .file img + .children + .file ... + .file phones + .children + .file ... + .file index.html + .file test + .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 +:marked This is actually a pretty good starting point. In particular, this organization follows the [Angular Style Guide](https://github.com/johnpapa/angular-styleguide), which is an important [preparation step](preparation.html) before a successful upgrade. @@ -505,7 +517,7 @@ include ../../../../_includes/_util-fns :marked The first two scripts are for adding some ES6 features to older browsers - that don't natively support them. The last two bring in Angular 2 + that don't natively support them. The last three bring in Angular 2 itself. While we're at it, let's also load the same files into unit tests by @@ -607,15 +619,16 @@ include ../../../../_includes/_util-fns 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 - the the `HTTP` service from Angular 2 instead of ngResource. + the the `Http` service from Angular 2 instead of ngResource. - The `HTTP` service isn't included in the main Angular 2 bundle, so we need to - include it in `index.html` separately: + The `Http` service isn't included in the main Angular 2 bundle, so we need to + include it in `index.html` separately. As the service uses RxJS Observables, + we also need to bring in the RxJS bundle: +makeExample('upgrade/ts/ng2_initial/app/index.html', 'ng2-http') :marked - We'll also do the same in `karma.conf.js` so that HTTP will be available in + We'll also do the same in `karma.conf.js` so that `Http` will be available in unit tests: +makeExample('upgrade/ts/ng2_initial/test/karma.conf.js', 'ng2-http') @@ -677,14 +690,8 @@ include ../../../../_includes/_util-fns :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. This does mean that we need to tweak our - SystemJS configuration a bit, so that it knows where to find the additional RxJS - code from. We installed the RxJS node module along with Angular 2, and we just need - let SystemJS know where it is: - -+makeExample('upgrade/ts/ng2_initial/app/index.html', 'systemconfig', 'app/index.html') + does not load all of them by default. -:marked 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 @@ -743,17 +750,15 @@ include ../../../../_includes/_util-fns 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. - To bring our test suite up to speed with the changes, we should first enabled - the Angular 2 test support library to our unit test suite. We first need to - add a couple more things to the list of files that Karma is loading: + To bring our test suite up to speed with the changes, we should first enable + the Angular 2 test support library in our unit test suite. We first need to + add the angular `testing` bundle to list of files that Karma is loading: +makeExample('upgrade/ts/ng2_initial/test/karma.conf.js', 'ng2-testing') :marked Then we'll update the Karma test shim. It should load the Angular 2 - browser adapter before getting to the spec files. It should also have - similar mappings for RxJS as we now have in the SystemJS config - in `index.html`: + browser adapter before getting to the spec files: +makeExample('upgrade/ts/ng2_initial/test/karma_test_shim.js', null, 'test/karma_test_shim.js')