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
parent
766700dd15
commit
ad4c521130
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,13 +17,7 @@ System.config({
|
|||
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
|
||||
return pathsMapping;
|
||||
}, {})
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
'rxjs' : '/base/node_modules/rxjs'
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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/"
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,13 +17,7 @@ System.config({
|
|||
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
|
||||
return pathsMapping;
|
||||
}, {})
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
'rxjs' : '/base/node_modules/rxjs'
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
],
|
||||
|
|
|
|||
|
|
@ -17,13 +17,7 @@ System.config({
|
|||
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
|
||||
return pathsMapping;
|
||||
}, {})
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
},
|
||||
map: {
|
||||
'rxjs' : '/base/node_modules/rxjs'
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
does not load all of them by default.
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/app/index.html', 'systemconfig', 'app/index.html')
|
||||
|
||||
: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')
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue