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
This commit is contained in:
Tero Parviainen 2015-12-15 14:36:37 +02:00
parent 766700dd15
commit ad4c521130
13 changed files with 93 additions and 115 deletions

View File

@ -12,20 +12,17 @@
<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="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/upgrade.dev.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {
'js': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
},
map: {
'rxjs' : '/node_modules/rxjs'
}
});
System.import('js/app.module');

View File

@ -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": {

View File

@ -13,26 +13,28 @@ module.exports = function(config){
'app/bower_components/angular-mocks/angular-mocks.js',
// #docregion ng2
'node_modules/systemjs/dist/system.src.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 html
{pattern: 'js/**/*.html', included: false, watched: true}
{pattern: 'app/js/**/*.html', included: false, watched: true}
],
proxies: {
// required for component assests fetched by Angular's compiler
"/js/": "/base/app/js"
"/js": "/base/app/js"
},
// #enddocregion html
@ -51,9 +53,7 @@ module.exports = function(config){
junitReporter : {
outputFile: 'test_out/unit.xml',
suite: 'unit'
},
logLevel: 'LOG_DEBUG'
}
});
};

View File

@ -17,13 +17,7 @@ System.config({
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
return pathsMapping;
}, {})
},
'rxjs': {
defaultExtension: 'js'
}
},
map: {
'rxjs' : '/base/node_modules/rxjs'
}
});

View File

@ -9,7 +9,9 @@
<link rel="stylesheet" href="css/animations.css">
<!-- #docregion scripts -->
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<!-- #docregion ng2-router -->
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
@ -19,13 +21,7 @@
packages: {
'js': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
},
map: {
'rxjs' : '/node_modules/rxjs'
}
});
System.import('js/app');

View File

@ -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": {

View File

@ -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/"
}
});
};

View File

@ -17,13 +17,7 @@ System.config({
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
return pathsMapping;
}, {})
},
'rxjs': {
defaultExtension: 'js'
}
},
map: {
'rxjs' : '/base/node_modules/rxjs'
}
});

View File

@ -18,8 +18,10 @@
<script src="../node_modules/es6-promise/dist/es6-promise.js"></script>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/upgrade.dev.js"></script>
<!-- #enddocregion ng2 -->
<!-- #docregion ng2-http -->
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<!-- #enddocregion ng2-http -->
<!-- #docregion systemconfig -->
@ -28,13 +30,7 @@
packages: {
'js': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
},
map: {
'rxjs' : '/node_modules/rxjs'
}
});
System.import('js/app.module');

View File

@ -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": {

View File

@ -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
],

View File

@ -17,13 +17,7 @@ System.config({
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
return pathsMapping;
}, {})
},
'rxjs': {
defaultExtension: 'js'
}
},
map: {
'rxjs' : '/base/node_modules/rxjs'
}
});

View File

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