docs(upgrade): update examples to beta.3 and make necessary edits to guide.
closes #808 Also fixes some minor issues in code style and unit tests.
This commit is contained in:
Tero Parviainen
Ward Bell
parent
16704e9063
commit
e221d8b418
|
|
@ -10,13 +10,13 @@
|
|||
"typescript": "1.7.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.0",
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"es6-promise": "3.0.2",
|
||||
"es6-shim": "0.33.13",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.0",
|
||||
"systemjs": "0.19.9",
|
||||
"zone.js": "0.5.10"
|
||||
"zone.js": "0.5.11"
|
||||
},
|
||||
"scripts": {
|
||||
"tsc": "tsc -p . -w"
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import 'rxjs/add/operator/map';
|
|||
// #docregion phone-interface
|
||||
export interface Phone {
|
||||
name: string;
|
||||
snippet: string;
|
||||
images: string[];
|
||||
snippet?: string;
|
||||
images?: string[];
|
||||
}
|
||||
// #enddocregion phone-interface
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.54",
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.33.3",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.0",
|
||||
"zone.js": "0.5.10",
|
||||
"zone.js": "0.5.11",
|
||||
"systemjs": "0.19.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -21,13 +21,12 @@ module.exports = function(config){
|
|||
'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.dev.js',
|
||||
// #enddocregion ng2-testing
|
||||
|
||||
'test/karma_test_shim.js',
|
||||
{pattern: 'app/js/**/*.js', included: false, watched: true},
|
||||
{pattern: 'test/unit/**/*.js', included: false, watched: true},
|
||||
// #docregion html
|
||||
{pattern: 'app/js/**/*.html', included: false, watched: true}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -22,8 +22,11 @@ System.config({
|
|||
});
|
||||
|
||||
// #docregion ng2
|
||||
System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
|
||||
browser_adapter.BrowserDomAdapter.makeCurrent();
|
||||
System.import('angular2/testing').then(function(testing) {
|
||||
return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
|
||||
testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
|
||||
testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
|
||||
});
|
||||
}).then(function() {
|
||||
return Promise.all(
|
||||
Object.keys(window.__karma__.files) // All files served by Karma.
|
||||
|
|
|
|||
|
|
@ -1,2 +1,4 @@
|
|||
// #docregion
|
||||
/// <reference path="../node_modules/angular2/typings/jasmine/jasmine.d.ts" />
|
||||
/// <reference path="../typings/angularjs/angular-mocks.d.ts" />
|
||||
/// <reference path="../node_modules/angular2/typings/angular-protractor/angular-protractor.d.ts" />
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ class MockPhones extends Phones {
|
|||
}
|
||||
}
|
||||
|
||||
describe('PhoneDetail', function(){
|
||||
describe('PhoneDetail', () => {
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
|
|
@ -42,7 +42,7 @@ describe('PhoneDetail', function(){
|
|||
fixture.detectChanges();
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelector('.h1')).toHaveText(xyzPhoneData().name);
|
||||
expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name);
|
||||
});
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ class MockPhones extends Phones {
|
|||
}
|
||||
}
|
||||
|
||||
describe('PhoneList', function(){
|
||||
describe('PhoneList', () => {
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
|
|
@ -35,7 +35,6 @@ describe('PhoneList', function(){
|
|||
injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneList).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import {
|
|||
@RouteConfig([
|
||||
{path:'/phones', as: 'Phones', component: PhoneList},
|
||||
{path:'/phones/:phoneId', as: 'Phone', component: PhoneDetail},
|
||||
{path:'/', redirectTo: ['/phones']}
|
||||
{path:'/', redirectTo: ['Phones']}
|
||||
])
|
||||
@Component({
|
||||
selector: 'pc-app',
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import 'rxjs/add/operator/map';
|
|||
// #docregion phone-interface
|
||||
export interface Phone {
|
||||
name: string;
|
||||
snippet: string;
|
||||
images: string[];
|
||||
snippet?: string;
|
||||
images?: string[];
|
||||
}
|
||||
// #enddocregion phone-interface
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.54",
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.33.3",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.0",
|
||||
"zone.js": "0.5.10",
|
||||
"zone.js": "0.5.11",
|
||||
"systemjs": "0.19.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -22,8 +22,11 @@ System.config({
|
|||
});
|
||||
|
||||
// #docregion ng2
|
||||
System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
|
||||
browser_adapter.BrowserDomAdapter.makeCurrent();
|
||||
System.import('angular2/testing').then(function(testing) {
|
||||
return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
|
||||
testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
|
||||
testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
|
||||
});
|
||||
}).then(function() {
|
||||
return Promise.all(
|
||||
Object.keys(window.__karma__.files) // All files served by Karma.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference path="../node_modules/angular2/typings/jasmine/jasmine.d.ts" />
|
||||
/// <reference path="../node_modules/angular2/typings/angular-protractor/angular-protractor.d.ts" />
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
|
||||
import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
|
||||
|
||||
describe('CheckmarkPipe', function() {
|
||||
describe('CheckmarkPipe', () => {
|
||||
|
||||
beforeEachProviders(() => [CheckmarkPipe]);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
|||
|
||||
import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
|
||||
|
||||
describe('OrderByPipe', function() {
|
||||
describe('OrderByPipe', () => {
|
||||
|
||||
let input:any[] = [
|
||||
{name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ class MockPhones extends Phones {
|
|||
}
|
||||
|
||||
// #docregion routeparams
|
||||
describe('PhoneDetail', function(){
|
||||
describe('PhoneDetail', () => {
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
|
|
@ -46,7 +46,7 @@ describe('PhoneDetail', function(){
|
|||
fixture.detectChanges();
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelector('.h1')).toHaveText(xyzPhoneData().name);
|
||||
expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name);
|
||||
});
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
|||
import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
|
||||
import {Phone} from '../../app/js/core/Phones';
|
||||
|
||||
describe('PhoneFilterPipe', function() {
|
||||
describe('PhoneFilterPipe', () => {
|
||||
|
||||
let phones:Phone[] = [
|
||||
{name: 'Nexus S', snippet: 'The Nexus S Phone', images: []},
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ class MockPhones extends Phones {
|
|||
}
|
||||
}
|
||||
|
||||
describe('PhoneList', function(){
|
||||
describe('PhoneList', () => {
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
|
|
@ -34,7 +34,6 @@ describe('PhoneList', function(){
|
|||
injectAsync([TestComponentBuilder], (tcb) => {
|
||||
return tcb.createAsync(PhoneList).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
|||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
|
||||
describe('Phones', function() {
|
||||
describe('Phones', () => {
|
||||
|
||||
// load providers
|
||||
beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.54",
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.33.3",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.0",
|
||||
"zone.js": "0.5.10",
|
||||
"zone.js": "0.5.11",
|
||||
"systemjs": "0.19.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ module.exports = function(config){
|
|||
'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.dev.js'
|
||||
'node_modules/angular2/bundles/testing.dev.js',
|
||||
// #enddocregion ng2-testing
|
||||
{pattern: 'app/js/**/*.js', included: false, watched: true},
|
||||
{pattern: 'test/unit/**/*.js', included: false, watched: true}
|
||||
// #docregion ng2
|
||||
],
|
||||
// #enddocregion ng2
|
||||
|
|
|
|||
|
|
@ -22,8 +22,11 @@ System.config({
|
|||
});
|
||||
|
||||
// #docregion ng2
|
||||
System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
|
||||
browser_adapter.BrowserDomAdapter.makeCurrent();
|
||||
System.import('angular2/testing').then(function(testing) {
|
||||
return System.import('angular2/platform/testing/browser').then(function(testing_platform_browser) {
|
||||
testing.setBaseTestProviders(testing_platform_browser.TEST_BROWSER_PLATFORM_PROVIDERS,
|
||||
testing_platform_browser.TEST_BROWSER_APPLICATION_PROVIDERS);
|
||||
});
|
||||
}).then(function() {
|
||||
return Promise.all(
|
||||
Object.keys(window.__karma__.files) // All files served by Karma.
|
||||
|
|
|
|||
|
|
@ -1,2 +1,4 @@
|
|||
// #docregion
|
||||
/// <reference path="../node_modules/angular2/typings/jasmine/jasmine.d.ts" />
|
||||
/// <reference path="../typings/angularjs/angular-mocks.d.ts" />
|
||||
/// <reference path="../node_modules/angular2/typings/angular-protractor/angular-protractor.d.ts" />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
|||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
|
||||
describe('Phones', function() {
|
||||
describe('Phones', () => {
|
||||
|
||||
// load providers
|
||||
beforeEachProviders(() => [Phones, HTTP_PROVIDERS]);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
// #docregion
|
||||
import {Observable} from 'rxjs';
|
||||
import {describe, beforeEach, it} from 'angular2/testing';
|
||||
import '../../app/js/phone_detail/phone_detail.module';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
|
||||
describe('PhoneDetailCtrl', function(){
|
||||
describe('PhoneDetailCtrl', () => {
|
||||
var scope, phones, $controller,
|
||||
xyzPhoneData = function() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
// #docregion
|
||||
import {Observable} from 'rxjs';
|
||||
import {describe, beforeEach, it} from 'angular2/testing';
|
||||
import '../../app/js/phone_list/phone_list.module';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
|
||||
describe('PhoneListCtrl', function(){
|
||||
describe('PhoneListCtrl', () => {
|
||||
var scope, ctrl, $httpBackend;
|
||||
|
||||
beforeEach(angular.mock.module('phonecat.list'));
|
||||
|
|
|
|||
|
|
@ -1237,15 +1237,6 @@ figure
|
|||
|
||||
+makeExample('upgrade/ts/ng2_initial/test/karma.conf.1.js', 'ng2', 'test/karma.conf.js', {otl: /(.*\.\.\/node\_modules\/angular2.*)/})
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
After installing Angular 2, the TypeScript compiler will complain
|
||||
about a clash in the global `$` variable: The jQuery typings used
|
||||
by the Angular 1 typings introduce one, and the Protractor typings
|
||||
used by Angular 2 introduce another. This will be resolved in a
|
||||
later release. See [issue #5459](https://github.com/angular/angular/issues/5459)
|
||||
for some workarounds.
|
||||
|
||||
:marked
|
||||
## Bootstrapping A Hybrid 1+2 PhoneCat
|
||||
|
||||
|
|
@ -1271,14 +1262,17 @@ figure
|
|||
```
|
||||
rm -r typings/jasmine
|
||||
```
|
||||
Also remove the reference to those type definitions from
|
||||
`test/test_helper.ts`.
|
||||
|
||||
The same also goes for Protractor: Angular 2 comes with the types of the
|
||||
Protractor APIs, so it's safe to remove the `declare var` line from
|
||||
`scenarios.ts`.
|
||||
We can replace the reference to those type definitions in
|
||||
`test/test_helper.ts` with the ones that come with Angular 2. Let's also
|
||||
add a reference to the Protractor typings while we're at it:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/test/test_helper.ts', null, 'test/test_helper.ts')
|
||||
|
||||
:marked
|
||||
It is now safe to remove the `declare var` line from `scenarios.ts` - the
|
||||
Protractor APIs are now fully typed!
|
||||
|
||||
To boostrap 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
|
||||
|
|
@ -1464,8 +1458,8 @@ figure
|
|||
+makeExample('upgrade/ts/ng2_initial/test/karma.conf.1.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:
|
||||
Then we'll update the Karma test shim. It'll make some of Angular 2 core
|
||||
providers available before starting to load any of the spec files:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/test/karma_test_shim.js', null, 'test/karma_test_shim.js')
|
||||
|
||||
|
|
@ -1668,6 +1662,11 @@ figure
|
|||
|
||||
+makeExample('upgrade/ts/ng2_components/test/karma.conf.1.js', 'html', 'test/karma.conf.js')
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
There is [a fixed but as of yet not released issue](https://github.com/angular/angular/pull/5996)
|
||||
with the async pipe that may currently cause some problems with these tests.
|
||||
|
||||
:marked
|
||||
Now we can start looking at our other controller, which is the one for
|
||||
the phone details. Rename `phone_detail.controller.ts` to `PhoneDetail.ts`, and set the
|
||||
|
|
@ -1986,7 +1985,9 @@ table
|
|||
* `app/js/core/upgrade_adapter.ts`
|
||||
* `app/js/phone_detail/phone_detail.module.ts`
|
||||
* `app/js/phone_list/phone_list.module.ts`
|
||||
* `test/test_helper.ts`
|
||||
|
||||
From `test/test_helper.ts` you can remove the reference to Angular 1 typings. The
|
||||
only ones still needed are the ones for Jasmine and Protractor.
|
||||
|
||||
Finally, from `index.html` and `karma.conf.js`, remove all references to
|
||||
Angular 1 scripts as well as jQuery. When you're done, this is what `index.html`
|
||||
|
|
|
|||
Loading…
Reference in New Issue