docs(upgrade): switch file naming scheme, update dependencies, remove unnecessary providers.
Switch to the component.type.ts naming scheme in the PhoneCat tutorial. Update Angular 2 to beta.7 and Angular 1 to 1.5.0. Remove the unneeded ROUTER_DIRECTIVES entry from bootstrap providers. Closes #878
This commit is contained in:
Tero Parviainen
Ward Bell
parent
99e55458fc
commit
2f2d7b8841
|
|
@ -7,18 +7,20 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"typescript": "1.7.5"
|
||||
"typescript": "1.8.2",
|
||||
"typings": "^0.6.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"angular2": "2.0.0-beta.7",
|
||||
"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.11"
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"systemjs": "0.19.22",
|
||||
"zone.js": "0.5.15"
|
||||
},
|
||||
"scripts": {
|
||||
"tsc": "tsc -p . -w"
|
||||
"tsc": "tsc -p . -w",
|
||||
"typings": "typings"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
"experimentalDecorators": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
"node_modules",
|
||||
"typings/main.d.ts",
|
||||
"typings/main"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.2",
|
||||
"angular-mocks": "1.5.0-beta.2",
|
||||
"angular": "1.5.0",
|
||||
"angular-mocks": "1.5.0",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.2",
|
||||
"angular-resource": "1.5.0-beta.2",
|
||||
"angular-animate": "1.5.0-beta.2"
|
||||
"angular-route": "1.5.0",
|
||||
"angular-resource": "1.5.0",
|
||||
"angular-animate": "1.5.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.2"
|
||||
"angular": "1.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"systemjs": "0.19.6"
|
||||
"systemjs": "0.19.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"karma": "^0.12.16",
|
||||
"karma-chrome-launcher": "^0.1.4",
|
||||
"karma-firefox-launcher": "^0.1.3",
|
||||
"karma-jasmine": "~0.2.0",
|
||||
"karma-jasmine": "~0.3.7",
|
||||
"protractor": "^3.0.0",
|
||||
"http-server": "^0.6.1",
|
||||
"tmp": "0.0.23",
|
||||
"bower": "^1.3.1",
|
||||
"shelljs": "^0.2.6",
|
||||
"typescript": "1.7.3",
|
||||
"typescript": "1.8.2",
|
||||
"typings": "^0.6.8"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<script src="bower_components/angular-resource/angular-resource.js"></script>
|
||||
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Phones} from './Phones';
|
||||
import {Phones} from './phones.service';
|
||||
import upgradeAdapter from './upgrade_adapter';
|
||||
|
||||
upgradeAdapter.addProvider(Phones);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion full
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Http, Response} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
// #docregion phone-interface
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
// #docregion
|
||||
// #docregion top
|
||||
import {Component, Inject} from 'angular2/core';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {CheckmarkPipe} from '../core/CheckmarkPipe';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
import {CheckmarkPipe} from '../core/checkmark.pipe';
|
||||
|
||||
interface PhoneRouteParams {
|
||||
phoneId: string
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import PhoneDetail from './PhoneDetail';
|
||||
import PhoneDetail from './phone_detail.component';
|
||||
import upgradeAdapter from '../core/upgrade_adapter';
|
||||
|
||||
export default angular.module('phonecat.detail', [
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {Component, Inject} from 'angular2/core';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
|
||||
interface PhoneRouteParams {
|
||||
phoneId: string
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
import {Phone} from '../core/Phones';
|
||||
import {Phone} from '../core/phones.service';
|
||||
|
||||
@Pipe({name: 'phoneFilter'})
|
||||
export default class PhoneFilterPipe {
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
// #docregion top
|
||||
import {Component} from 'angular2/core';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import PhoneFilterPipe from './PhoneFilterPipe';
|
||||
import OrderByPipe from './OrderByPipe';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
import PhoneFilterPipe from './phone_filter.pipe';
|
||||
import OrderByPipe from './order_by.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-list',
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import PhoneList from './PhoneList';
|
||||
import PhoneList from './phone_list.component';
|
||||
import upgradeAdapter from '../core/upgrade_adapter';
|
||||
|
||||
export default angular.module('phonecat.list', [
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion top
|
||||
import {Component} from 'angular2/core';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-list',
|
||||
|
|
@ -6,15 +6,15 @@
|
|||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.2",
|
||||
"angular-mocks": "1.5.0-beta.2",
|
||||
"angular": "1.5.0",
|
||||
"angular-mocks": "1.5.0",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.2",
|
||||
"angular-resource": "1.5.0-beta.2",
|
||||
"angular-animate": "1.5.0-beta.2"
|
||||
"angular-route": "1.5.0",
|
||||
"angular-resource": "1.5.0",
|
||||
"angular-animate": "1.5.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.2"
|
||||
"angular": "1.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"angular2": "2.0.0-beta.7",
|
||||
"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.11",
|
||||
"systemjs": "0.19.6"
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"zone.js": "0.5.15",
|
||||
"systemjs": "0.19.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"karma": "^0.12.16",
|
||||
"karma-chrome-launcher": "^0.1.4",
|
||||
"karma-firefox-launcher": "^0.1.3",
|
||||
"karma-jasmine": "~0.2.0",
|
||||
"karma-jasmine": "~0.3.7",
|
||||
"protractor": "^3.0.0",
|
||||
"http-server": "^0.6.1",
|
||||
"tmp": "0.0.23",
|
||||
"bower": "^1.3.1",
|
||||
"shelljs": "^0.2.6",
|
||||
"typescript": "1.7.3",
|
||||
"typescript": "1.8.2",
|
||||
"typings": "^0.6.8"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
|
||||
import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
|
||||
import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe';
|
||||
|
||||
describe('CheckmarkPipe', function() {
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
|
||||
import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
|
||||
|
||||
describe('OrderByPipe', function() {
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
// #docregion
|
||||
import {provide} from 'angular2/core';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import 'rxjs/add/observable/fromArray';
|
||||
|
||||
import {
|
||||
describe,
|
||||
|
|
@ -12,8 +12,8 @@ import {
|
|||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneDetail from '../../app/js/phone_detail/PhoneDetail';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
|
||||
import {Phones, Phone} from '../../app/js/core/phones.service';
|
||||
|
||||
function xyzPhoneData():Phone {
|
||||
return {
|
||||
|
|
@ -25,7 +25,7 @@ function xyzPhoneData():Phone {
|
|||
|
||||
class MockPhones extends Phones {
|
||||
get(id):Observable<Phone> {
|
||||
return FromObservable.create([xyzPhoneData()]);
|
||||
return Observable.fromArray([xyzPhoneData()]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
|
||||
import {Phone} from '../../app/js/core/Phones';
|
||||
import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
|
||||
import {Phone} from '../../app/js/core/phones.service';
|
||||
|
||||
describe('PhoneFilterPipe', function() {
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
// #docregion
|
||||
import {provide} from 'angular2/core';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import 'rxjs/add/observable/fromArray';
|
||||
|
||||
import {
|
||||
describe,
|
||||
|
|
@ -12,12 +12,12 @@ import {
|
|||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneList from '../../app/js/phone_list/PhoneList';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
import PhoneList from '../../app/js/phone_list/phone_list.component';
|
||||
import {Phones, Phone} from '../../app/js/core/phones.service';
|
||||
|
||||
class MockPhones extends Phones {
|
||||
query():Observable<Phone[]> {
|
||||
return FromObservable.create([
|
||||
return Observable.fromArray([
|
||||
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]
|
||||
])
|
||||
}
|
||||
|
|
@ -39,8 +39,8 @@ describe('PhoneList', () => {
|
|||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(1)')).toHaveText('Nexus S');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(2)')).toHaveText('Motorola DROID');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(1)').textContent).toContain('Nexus S');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(2)').textContent).toContain('Motorola DROID');
|
||||
});
|
||||
}));
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
import {Phones} from '../../app/js/core/phones.service';
|
||||
|
||||
describe('Phones', function() {
|
||||
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
"angular-resource": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-resource.d.ts#c6609aff88f2c59e4df9adb93df5c7932adfd7b4",
|
||||
"angular-route": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-route.d.ts#cf172aab99c3139a718aa8e65398a22c53dd7ead",
|
||||
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",
|
||||
"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7"
|
||||
"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7",
|
||||
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,15 @@
|
|||
<!-- #docregion scripts -->
|
||||
<!-- IE required polyfill -->
|
||||
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
<!-- #enddocregion ie-polyfills -->
|
||||
|
||||
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="../node_modules/angular2/bundles/angular2.dev.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>
|
||||
<!-- #enddocregion ng2-router -->
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('js/app');
|
||||
System.import('js/main');
|
||||
</script>
|
||||
<!-- #enddocregion scripts -->
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
// #docregion
|
||||
import {Component} from 'angular2/core';
|
||||
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
|
||||
import PhoneList from './phone_list/phone_list.component';
|
||||
import PhoneDetail from './phone_detail/phone_detail.component';
|
||||
|
||||
@RouteConfig([
|
||||
{path:'/phones', name: 'Phones', component: PhoneList},
|
||||
{path:'/phones/:phoneId', name: 'Phone', component: PhoneDetail},
|
||||
{path:'/', redirectTo: ['Phones']}
|
||||
])
|
||||
@Component({
|
||||
selector: 'pc-app',
|
||||
template: '<router-outlet></router-outlet>',
|
||||
directives: [ROUTER_DIRECTIVES]
|
||||
})
|
||||
export default class AppComponent {
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
// #docregion
|
||||
// #docregion importbootstrap
|
||||
import {Component, provide} from 'angular2/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
import {Phones} from './core/Phones';
|
||||
import PhoneList from './phone_list/PhoneList';
|
||||
import PhoneDetail from './phone_detail/PhoneDetail';
|
||||
// #enddocregion importbootstrap
|
||||
|
||||
// #docregion http-import
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
// #enddocregion http-import
|
||||
|
||||
// #docregion router-import
|
||||
import {
|
||||
RouteConfig,
|
||||
LocationStrategy,
|
||||
HashLocationStrategy,
|
||||
ROUTER_DIRECTIVES,
|
||||
ROUTER_PROVIDERS
|
||||
} from 'angular2/router';
|
||||
// #enddocregion router-import
|
||||
|
||||
// #docregion appcomponent
|
||||
@RouteConfig([
|
||||
{path:'/phones', as: 'Phones', component: PhoneList},
|
||||
{path:'/phones/:phoneId', as: 'Phone', component: PhoneDetail},
|
||||
{path:'/', redirectTo: ['Phones']}
|
||||
])
|
||||
@Component({
|
||||
selector: 'pc-app',
|
||||
template: '<router-outlet></router-outlet>',
|
||||
directives: [ROUTER_DIRECTIVES]
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
// #enddocregion appcomponent
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent, [
|
||||
HTTP_PROVIDERS,
|
||||
ROUTER_PROVIDERS,
|
||||
ROUTER_DIRECTIVES,
|
||||
provide(LocationStrategy, {useClass: HashLocationStrategy}),
|
||||
Phones
|
||||
]);
|
||||
// #enddocregion bootstrap
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion full
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Http, Response} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
// #docregion phone-interface
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// #docregion
|
||||
// #docregion importbootstrap
|
||||
import {provide} from 'angular2/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {
|
||||
LocationStrategy,
|
||||
HashLocationStrategy,
|
||||
ROUTER_PROVIDERS
|
||||
} from 'angular2/router';
|
||||
|
||||
import {Phones} from './core/phones.service';
|
||||
import AppComponent from './app.component';
|
||||
// #enddocregion importbootstrap
|
||||
|
||||
// #docregion http-import
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
// #enddocregion http-import
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent, [
|
||||
HTTP_PROVIDERS,
|
||||
ROUTER_PROVIDERS,
|
||||
provide(LocationStrategy, {useClass: HashLocationStrategy}),
|
||||
Phones
|
||||
]);
|
||||
// #enddocregion bootstrap
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
// #docregion top
|
||||
import {Component, Inject} from 'angular2/core';
|
||||
import {RouteParams} from 'angular2/router';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {CheckmarkPipe} from '../core/CheckmarkPipe';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
import {CheckmarkPipe} from '../core/checkmark.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-detail',
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {Pipe} from 'angular2/core';
|
||||
import {Phone} from '../core/Phones';
|
||||
import {Phone} from '../core/phones.service';
|
||||
|
||||
@Pipe({name: 'phoneFilter'})
|
||||
export default class PhoneFilterPipe {
|
||||
|
|
@ -3,9 +3,9 @@
|
|||
import {Component} from 'angular2/core';
|
||||
import {RouterLink} from 'angular2/router';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import PhoneFilterPipe from './PhoneFilterPipe';
|
||||
import OrderByPipe from './OrderByPipe';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
import PhoneFilterPipe from './phone_filter.pipe';
|
||||
import OrderByPipe from './order_by.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'pc-phone-list',
|
||||
|
|
@ -6,15 +6,15 @@
|
|||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.2",
|
||||
"angular-mocks": "1.5.0-beta.2",
|
||||
"angular": "1.5.0",
|
||||
"angular-mocks": "1.5.0",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.2",
|
||||
"angular-resource": "1.5.0-beta.2",
|
||||
"angular-animate": "1.5.0-beta.2"
|
||||
"angular-route": "1.5.0",
|
||||
"angular-resource": "1.5.0",
|
||||
"angular-animate": "1.5.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.2"
|
||||
"angular": "1.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"angular2": "2.0.0-beta.7",
|
||||
"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.11",
|
||||
"systemjs": "0.19.6"
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"zone.js": "0.5.15",
|
||||
"systemjs": "0.19.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"karma": "^0.12.16",
|
||||
"karma-chrome-launcher": "^0.1.4",
|
||||
"karma-firefox-launcher": "^0.1.3",
|
||||
"karma-jasmine": "~0.2.0",
|
||||
"karma-jasmine": "~0.3.7",
|
||||
"protractor": "^3.0.0",
|
||||
"http-server": "^0.6.1",
|
||||
"tmp": "0.0.23",
|
||||
"bower": "^1.3.1",
|
||||
"shelljs": "^0.2.6",
|
||||
"typescript": "1.7.3",
|
||||
"typescript": "1.8.2",
|
||||
"typings": "^0.6.8"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject, expect} from 'angular2/testing';
|
||||
import {CheckmarkPipe} from '../../app/js/core/CheckmarkPipe';
|
||||
import {CheckmarkPipe} from '../../app/js/core/checkmark.pipe';
|
||||
|
||||
describe('CheckmarkPipe', () => {
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import OrderByPipe from '../../app/js/phone_list/OrderByPipe';
|
||||
import OrderByPipe from '../../app/js/phone_list/order_by.pipe';
|
||||
|
||||
describe('OrderByPipe', () => {
|
||||
|
||||
|
|
@ -3,8 +3,8 @@ import {provide} from 'angular2/core';
|
|||
import {RouteParams} from 'angular2/router';
|
||||
// #enddocregion routeparams
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import 'rxjs/add/observable/fromArray';
|
||||
|
||||
import {
|
||||
describe,
|
||||
|
|
@ -14,8 +14,8 @@ import {
|
|||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneDetail from '../../app/js/phone_detail/PhoneDetail';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
import PhoneDetail from '../../app/js/phone_detail/phone_detail.component';
|
||||
import {Phones, Phone} from '../../app/js/core/phones.service';
|
||||
|
||||
function xyzPhoneData():Phone {
|
||||
return {
|
||||
|
|
@ -27,7 +27,7 @@ function xyzPhoneData():Phone {
|
|||
|
||||
class MockPhones extends Phones {
|
||||
get(id):Observable<Phone> {
|
||||
return FromObservable.create([xyzPhoneData()]);
|
||||
return Observable.fromArray([xyzPhoneData()]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
|
||||
import PhoneFilterPipe from '../../app/js/phone_list/PhoneFilterPipe';
|
||||
import {Phone} from '../../app/js/core/Phones';
|
||||
import PhoneFilterPipe from '../../app/js/phone_list/phone_filter.pipe';
|
||||
import {Phone} from '../../app/js/core/phones.service';
|
||||
|
||||
describe('PhoneFilterPipe', () => {
|
||||
|
||||
|
|
@ -1,8 +1,15 @@
|
|||
// #docregion
|
||||
import {provide} from 'angular2/core';
|
||||
import {provide, ApplicationRef} from 'angular2/core';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
import {
|
||||
ROUTER_PROVIDERS
|
||||
ROUTER_PRIMARY_COMPONENT,
|
||||
LocationStrategy
|
||||
} from 'angular2/router';
|
||||
import {MockApplicationRef} from 'angular2/testing';
|
||||
import {MockLocationStrategy} from 'angular2/router/testing';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import 'rxjs/add/observable/fromArray';
|
||||
import {
|
||||
describe,
|
||||
beforeEachProviders,
|
||||
|
|
@ -11,12 +18,13 @@ import {
|
|||
expect,
|
||||
TestComponentBuilder
|
||||
} from 'angular2/testing';
|
||||
import PhoneList from '../../app/js/phone_list/PhoneList';
|
||||
import {Phones, Phone} from '../../app/js/core/Phones';
|
||||
import AppComponent from '../../app/js/app.component';
|
||||
import PhoneList from '../../app/js/phone_list/phone_list.component';
|
||||
import {Phones, Phone} from '../../app/js/core/phones.service';
|
||||
|
||||
class MockPhones extends Phones {
|
||||
query():Observable<Phone[]> {
|
||||
return FromObservable.create([
|
||||
return Observable.fromArray([
|
||||
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]
|
||||
])
|
||||
}
|
||||
|
|
@ -25,8 +33,12 @@ class MockPhones extends Phones {
|
|||
describe('PhoneList', () => {
|
||||
|
||||
beforeEachProviders(() => [
|
||||
provide(Phones, {useClass: MockPhones}),
|
||||
HTTP_PROVIDERS
|
||||
HTTP_PROVIDERS,
|
||||
ROUTER_PROVIDERS,
|
||||
provide(ApplicationRef, {useClass: MockApplicationRef}),
|
||||
provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}),
|
||||
provide(LocationStrategy, {useClass: MockLocationStrategy}),
|
||||
provide(Phones, {useClass: MockPhones})
|
||||
]);
|
||||
|
||||
|
||||
|
|
@ -38,8 +50,8 @@ describe('PhoneList', () => {
|
|||
let compiled = fixture.debugElement.nativeElement;
|
||||
|
||||
expect(compiled.querySelectorAll('.phone-listing').length).toBe(2);
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(1)')).toHaveText('Nexus S');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(2)')).toHaveText('Motorola DROID');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(1)').textContent).toContain('Nexus S');
|
||||
expect(compiled.querySelector('.phone-listing:nth-child(2)').textContent).toContain('Motorola DROID');
|
||||
});
|
||||
}));
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
import {Phones} from '../../app/js/core/phones.service';
|
||||
|
||||
describe('Phones', () => {
|
||||
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"ambientDependencies": {
|
||||
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee"
|
||||
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",
|
||||
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<!-- #docregion ng2 -->
|
||||
<script src="../node_modules/es6-shim/es6-shim.js"></script>
|
||||
<script src="../node_modules/es6-promise/dist/es6-promise.js"></script>
|
||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Phones} from './Phones';
|
||||
import {Phones} from './phones.service';
|
||||
import checkmarkFilter from './checkmark.filter';
|
||||
import upgradeAdapter from './upgrade_adapter';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion full
|
||||
import {Injectable} from 'angular2/core';
|
||||
import {Http, Response} from 'angular2/http';
|
||||
import {Observable} from 'rxjs';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
|
||||
interface PhoneRouteParams {
|
||||
phoneId: string
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Phones, Phone} from '../core/Phones';
|
||||
import {Phones, Phone} from '../core/phones.service';
|
||||
|
||||
class PhoneListCtrl {
|
||||
phones:Phone[];
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.0",
|
||||
"angular-mocks": "1.5.0-beta.0",
|
||||
"angular": "1.5.0",
|
||||
"angular-mocks": "1.5.0",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.0",
|
||||
"angular-resource": "1.5.0-beta.0",
|
||||
"angular-animate": "1.5.0-beta.0"
|
||||
"angular-route": "1.5.0",
|
||||
"angular-resource": "1.5.0",
|
||||
"angular-animate": "1.5.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.0"
|
||||
"angular": "1.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.3",
|
||||
"angular2": "2.0.0-beta.7",
|
||||
"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.11",
|
||||
"systemjs": "0.19.6"
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"zone.js": "0.5.15",
|
||||
"systemjs": "0.19.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"karma": "^0.12.16",
|
||||
"karma-chrome-launcher": "^0.1.4",
|
||||
"karma-firefox-launcher": "^0.1.3",
|
||||
"karma-jasmine": "~0.2.0",
|
||||
"karma-jasmine": "~0.3.7",
|
||||
"protractor": "^3.0.0",
|
||||
"http-server": "^0.6.1",
|
||||
"tmp": "0.0.23",
|
||||
"bower": "^1.3.1",
|
||||
"shelljs": "^0.2.6",
|
||||
"typescript": "1.7.3",
|
||||
"typescript": "1.8.2",
|
||||
"typings": "^0.6.8"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// #docregion
|
||||
import {Observable} from 'rxjs';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import '../../app/js/phone_detail/phone_detail.module';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
import {Phones} from '../../app/js/core/phones.service';
|
||||
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
import 'rxjs/add/observable/fromArray';
|
||||
|
||||
describe('PhoneDetailCtrl', () => {
|
||||
var scope, phones, $controller,
|
||||
|
|
@ -33,7 +33,7 @@ describe('PhoneDetailCtrl', () => {
|
|||
|
||||
|
||||
it('should fetch phone detail', function() {
|
||||
spyOn(phones, 'get').and.returnValue(FromObservable.create([xyzPhoneData()]));
|
||||
spyOn(phones, 'get').and.returnValue(Observable.fromArray([xyzPhoneData()]));
|
||||
|
||||
let ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// #docregion
|
||||
import {Observable} from 'rxjs';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import '../../app/js/phone_list/phone_list.module';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
import {Phones} from '../../app/js/core/phones.service';
|
||||
|
||||
import {FromObservable} from 'rxjs/observable/from';
|
||||
import 'rxjs/add/observable/fromArray';
|
||||
|
||||
describe('PhoneListCtrl', () => {
|
||||
var scope, ctrl, $httpBackend;
|
||||
|
|
@ -18,7 +18,7 @@ describe('PhoneListCtrl', () => {
|
|||
}));
|
||||
|
||||
beforeEach(inject(function(phones, $rootScope, $controller) {
|
||||
spyOn(phones, 'query').and.returnValue(FromObservable.create([
|
||||
spyOn(phones, 'query').and.returnValue(Observable.fromArray([
|
||||
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]
|
||||
]));
|
||||
scope = $rootScope.$new();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion
|
||||
import {describe, beforeEachProviders, it, inject} from 'angular2/testing';
|
||||
import {HTTP_PROVIDERS} from 'angular2/http';
|
||||
import {Phones} from '../../app/js/core/Phones';
|
||||
import {Phones} from '../../app/js/core/phones.service';
|
||||
|
||||
describe('Phones', () => {
|
||||
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
"angular-resource": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-resource.d.ts#c6609aff88f2c59e4df9adb93df5c7932adfd7b4",
|
||||
"angular-route": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular-route.d.ts#cf172aab99c3139a718aa8e65398a22c53dd7ead",
|
||||
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",
|
||||
"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7"
|
||||
"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#cf2a968f0edd7d30773f7d23fe3708fa029d5ab7",
|
||||
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"angular": "1.5.0-beta.2",
|
||||
"angular-mocks": "1.5.0-beta.2",
|
||||
"angular": "1.5.0",
|
||||
"angular-mocks": "1.5.0",
|
||||
"jquery": "~2.1.1",
|
||||
"bootstrap": "~3.1.1",
|
||||
"angular-route": "1.5.0-beta.2",
|
||||
"angular-resource": "1.5.0-beta.2",
|
||||
"angular-animate": "1.5.0-beta.2"
|
||||
"angular-route": "1.5.0",
|
||||
"angular-resource": "1.5.0",
|
||||
"angular-animate": "1.5.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"angular": "1.5.0-beta.2"
|
||||
"angular": "1.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
"repository": "https://github.com/angular/angular-phonecat",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"systemjs": "0.19.6"
|
||||
"systemjs": "0.19.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bower": "^1.3.1",
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
"karma": "^0.12.16",
|
||||
"karma-chrome-launcher": "^0.1.4",
|
||||
"karma-firefox-launcher": "^0.1.3",
|
||||
"karma-jasmine": "~0.2.0",
|
||||
"karma-jasmine": "~0.3.7",
|
||||
"protractor": "^3.0.0",
|
||||
"shelljs": "^0.2.6",
|
||||
"tmp": "0.0.23",
|
||||
"typescript": "^1.7.5",
|
||||
"typescript": "^1.8.2",
|
||||
"typings": "^0.6.8"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ include ../../../../_includes/_util-fns
|
|||
|
||||
:marked
|
||||
Having an existing Angular 1 application doesn't mean that we can't
|
||||
begin enjoying everything Angular 2 has to offer. That's beause Angular 2
|
||||
begin enjoying everything Angular 2 has to offer. That's because Angular 2
|
||||
comes with built-in tools for migrating Angular 1 projects over to the
|
||||
Angular 2 platform.
|
||||
|
||||
|
|
@ -1302,15 +1302,12 @@ code-example(format="").
|
|||
|
||||
:marked
|
||||
Now we're ready to upgrade the Phones factory itself. We'll put the Angular 2
|
||||
implementation in a new file called `Phones.ts` in the core module. It will be a TypeScript
|
||||
implementation in a new file called `phones.service.ts` in the core module. It will be a TypeScript
|
||||
class decorated as `@Injectable`:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'class', 'app/js/core/Phones.ts')
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'class', 'app/js/core/phones.service.ts')
|
||||
|
||||
:marked
|
||||
Note that with Angular 2 we're switching to a new file naming scheme, and
|
||||
won't be using the `feature.type.ts` naming convention anymore.
|
||||
|
||||
The `@Injectable` decorator will attach some dependency injection metadata
|
||||
to the class, letting Angular 2 know about its dependencies. As described
|
||||
by our [Dependency Injection Guide](../guide/dependency-injection.html),
|
||||
|
|
@ -1322,18 +1319,18 @@ code-example(format="").
|
|||
used in the two instance methods, one of which loads the list of all phones,
|
||||
and the other the details of a particular phone:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'fullclass')
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'fullclass')
|
||||
|
||||
:marked
|
||||
The methods now return Observables of type `Phone` and `Phone[]`. This is
|
||||
a type we don't have yet, so let's add a simple interface for it:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'phone-interface', 'app/js/core/Phones.ts')
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'phone-interface', 'app/js/core/phones.service.ts')
|
||||
|
||||
:marked
|
||||
Here's the full, final code for the service:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/Phones.ts', 'full', 'app/js/core/Phones.ts')
|
||||
+makeExample('upgrade/ts/ng2_initial/app/js/core/phones.service.ts', 'full', 'app/js/core/phones.service.ts')
|
||||
|
||||
:marked
|
||||
Notice that we're importing the `map` operator of the RxJS `Observable` separately.
|
||||
|
|
@ -1423,10 +1420,10 @@ code-example(format="").
|
|||
Now, let's look at the tests for the service itself. What we used to have in
|
||||
`phones_factory_spec.js` was a fairly simple test that simply checks if
|
||||
the factory exists and is available for injection. We can now do that same
|
||||
test in Angular 2. Rename `phones.factory.spec.ts` to `Phones.spec.ts` and
|
||||
test in Angular 2. Rename `phones.factory.spec.ts` to `phones.service.spec.ts` and
|
||||
set the contents as follows:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_initial/test/unit/Phones.spec.ts', null, 'test/unit/Phones.spec.ts')
|
||||
+makeExample('upgrade/ts/ng2_initial/test/unit/phones.service.spec.ts', null, 'test/unit/phones.service.spec.ts')
|
||||
|
||||
:marked
|
||||
Here we first load the `Phones` provider and then test that an instance of
|
||||
|
|
@ -1473,10 +1470,10 @@ code-example(format="").
|
|||
which is paired with an HTML template by the route configuration in `app.ts`.
|
||||
We'll be turning it into an Angular 2 component.
|
||||
|
||||
Rename `phone_list.controller.ts` to `PhoneList.ts`. Then rename the controller class
|
||||
Rename `phone_list.controller.ts` to `phone_list.component.ts`. Then rename the controller class
|
||||
inside to just `PhoneList` and decorate it as a `@Component`:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneList_without_pipes.ts', 'top', 'app/js/phone_list/PhoneList.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts', 'top', 'app/js/phone_list/phone_list.component.ts')
|
||||
|
||||
:marked
|
||||
The `selector` attribute is a CSS selector that defines where on the page the component
|
||||
|
|
@ -1553,13 +1550,13 @@ code-example(format="").
|
|||
this pipe is specialized to filter `Phone` objects and we can use
|
||||
type annotations to make this explicit:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneFilterPipe.ts', null, 'app/js/phone_list/PhoneFilterPipe.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts', null, 'app/js/phone_list/phone_filter.pipe.ts')
|
||||
|
||||
:marked
|
||||
Since we're adding new code, it's a good idea to add some unit tests for
|
||||
it too. Here are a few tests for `PhoneFilterPipe`:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/PhoneFilterPipe.spec.ts', null, 'test/unit/PhoneFilterPipe.spec.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts', null, 'test/unit/phone_filter.pipe.spec.ts')
|
||||
|
||||
:marked
|
||||
For sorting, we'll use a more generic pipe, just called `OrderBy`. It
|
||||
|
|
@ -1567,18 +1564,18 @@ code-example(format="").
|
|||
an array of the same type of thing it was given. In the implementation we
|
||||
copy the input array, sort the copy, and return it.
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/OrderByPipe.ts', null, 'app/js/phone_list/OrderByPipe.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/order_by.pipe.ts', null, 'app/js/phone_list/order_by.pipe.ts')
|
||||
|
||||
:marked
|
||||
Here's a unit test for `OrderByPipe` as well:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/OrderByPipe.spec.ts', null, 'test/unit/OrderByPipe.spec.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/order_by.pipe.spec.ts', null, 'test/unit/order_by.pipe.spec.ts')
|
||||
|
||||
:marked
|
||||
We can now integrate these new pipes with our component. Before the pipes
|
||||
are available there, we need to declare them in the `@Component` decorator.
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneList.ts', 'top', 'app/js/phone_list/PhoneList.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts', 'top', 'app/js/phone_list/phone_list.component.ts')
|
||||
|
||||
:marked
|
||||
In the template we need to use the `phoneFilter` pipe instead of `filter`.
|
||||
|
|
@ -1594,7 +1591,7 @@ code-example(format="").
|
|||
With Angular 2, we can instead just put the Observable itself on the
|
||||
component, and can skip the subscription callback:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/PhoneList.ts', 'full', 'app/js/phone_list/PhoneList.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts', 'full', 'app/js/phone_list/phone_list.component.ts')
|
||||
|
||||
:marked
|
||||
This is made possible by the `async` pipe, which we can apply in the template.
|
||||
|
|
@ -1606,7 +1603,7 @@ code-example(format="").
|
|||
That takes care of the phone list. Here's the updated unit test file for
|
||||
that component to complete the migration:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/PhoneList.spec.ts', null, 'test/unit/PhoneList.spec.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/phone_list.component.spec.ts', null, 'test/unit/phone_list.component.spec.ts')
|
||||
|
||||
:marked
|
||||
Before this test will run, we'll need to augment our Karma configuration
|
||||
|
|
@ -1616,17 +1613,12 @@ code-example(format="").
|
|||
|
||||
+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
|
||||
contents as follows:
|
||||
the phone details. Rename `phone_detail.controller.ts` to `phone_detail.component.ts`,
|
||||
and set the contents as follows:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail_without_pipes.ts', null, 'app/js/phone_detail/PhoneDetail.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts', null, 'app/js/phone_detail/phone_detail.component.ts')
|
||||
|
||||
:marked
|
||||
This is pretty similar to what we did with the phone list. The one new change
|
||||
|
|
@ -1691,9 +1683,9 @@ code-example(format="").
|
|||
can just turn the filter function into a class that fulfills
|
||||
the contract for Angular 2 Pipes. The implementation is the same as before.
|
||||
It just comes in a different kind of package. While changing it, also
|
||||
rename the file to `CheckmarkPipe.ts`:
|
||||
rename the file to `checkmark.pipe.ts`:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/core/CheckmarkPipe.ts', null, 'app/js/core/CheckmarkPipe.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/core/checkmark.pipe.ts', null, 'app/js/core/checkmark.pipe.ts')
|
||||
|
||||
:marked
|
||||
As we apply this change, we should also remove the registration of the filter
|
||||
|
|
@ -1706,18 +1698,18 @@ code-example(format="").
|
|||
for the pipe. While we're still testing the same thing, we need to change
|
||||
how we set things up:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/CheckmarkPipe.spec.ts', null, 'test/unit/CheckmarkPipe.spec.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/checkmark.pipe.spec.ts', null, 'test/unit/checkmark.pipe.spec.ts')
|
||||
|
||||
:marked
|
||||
In the component we should now import and declare our newly created pipe:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail.ts', 'top', 'app/js/phone_detail/PhoneDetail.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts', 'top', 'app/js/phone_detail/phone_detail.component.ts')
|
||||
|
||||
:marked
|
||||
With the phone detail component now migrated as well, we can go and migrate
|
||||
its unit tests too.
|
||||
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/PhoneDetail.spec.ts', null, 'test/unit/PhoneDetail.spec.ts')
|
||||
+makeExample('upgrade/ts/ng2_components/test/unit/phone_detail.component.spec.ts', null, 'test/unit/phone_detail.component.spec.ts')
|
||||
|
||||
:marked
|
||||
As we discussed earlier, Protractor tests should largely remain functional
|
||||
|
|
@ -1809,19 +1801,14 @@ table
|
|||
|
||||
+makeExample('upgrade/ts/ng2_final/app/index.html', 'ng2-router', 'app/index.html')
|
||||
|
||||
:marked
|
||||
In the main app module we need to import a few things from the router module:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'router-import', 'app/js/app.module.ts')
|
||||
|
||||
:marked
|
||||
Angular 2 applications all come with a *root component*, which, among other
|
||||
things, is where we should plug in the router. We don't yet have such a root
|
||||
component, because our app is still managed as an Angular 1 app.
|
||||
Let's change this now and add an `AppComponent` class, which replaces the
|
||||
`configure` function in `app.module.ts`:
|
||||
Let's change this now and add an `AppComponent` class into a new file
|
||||
`app.component.ts`:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'appcomponent', 'app/js/app.module.ts')
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/app.component.ts', null, 'app/js/app.component.ts')
|
||||
|
||||
:marked
|
||||
This is a component that plugs in to an `<pc-app>` element on the page,
|
||||
|
|
@ -1843,20 +1830,20 @@ table
|
|||
object provided by the Angular 2 router. We use it to obtain the `phoneId` from
|
||||
the params:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/phone_detail/PhoneDetail.ts', null, 'app/js/phone_detail/PhoneDetail.ts')
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts', null, 'app/js/phone_detail/phone_detail.component.ts')
|
||||
|
||||
:marked
|
||||
We should also make the corresponding change in the unit test. We provide
|
||||
an instance of the `RouteParams` class instead of the `$routeParams` object:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/test/unit/PhoneDetail.spec.ts', 'routeparams', 'test/unit/PhoneDetail.spec.ts')
|
||||
+makeExample('upgrade/ts/ng2_final/test/unit/phone_detail.component.spec.ts', 'routeparams', 'test/unit/phone_detail.component.spec.ts')
|
||||
|
||||
:marked
|
||||
With that, we're ready to switch the bootstrap method of the application from that
|
||||
of the `UpgradeAdapter` to the main Angular 2 `bootstrap`. Let's import it together
|
||||
with a couple of other things in `app.module.ts`
|
||||
with the router and the new app component in `app.module.ts`
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'importbootstrap')
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/main.ts', 'importbootstrap')
|
||||
|
||||
:marked
|
||||
We'll now use the regular Angular 2 `bootstrap` function to bootstrap the app
|
||||
|
|
@ -1867,7 +1854,7 @@ table
|
|||
with `upgradeAdapter.addProvider` until now, as well as the providers and
|
||||
directives of the router:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/app.ts', 'bootstrap')
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/main.ts', 'bootstrap')
|
||||
|
||||
:marked
|
||||
We are now running a pure Angular 2 application!
|
||||
|
|
@ -1883,7 +1870,13 @@ table
|
|||
:marked
|
||||
For this to work the directive just needs to be declared in the component:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/phone_list/PhoneList.ts', 'top')
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/phone_list/phone_list.component.ts', 'top')
|
||||
|
||||
:marked
|
||||
Also, the unit tests for `PhoneList` now need to set up some router providers
|
||||
so that the `RouterLink` directive can be injected in the tests:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/test/unit/phone_list.component.spec.ts', null)
|
||||
|
||||
:marked
|
||||
To bring our Protractor test suite up to speed with the latest changes,
|
||||
|
|
@ -1919,16 +1912,16 @@ table
|
|||
its new life as a pure, shiny Angular 2 app. The remaining tasks all have to
|
||||
do with removing code - which of course is every programmer's favorite task!
|
||||
|
||||
First, rename `app.module.ts` to `app.ts`. It will no longer be setting up
|
||||
First, rename `app.module.ts` to `main.ts`. It will no longer be setting up
|
||||
an Angular 1 module, so it doesn't really make sense to call it a module.
|
||||
Then remove all references to the `UpgradeAdapter` from `app.ts`. Also remove
|
||||
Then remove all references to the `UpgradeAdapter` from `main.ts`. Also remove
|
||||
the Angular 1 bootstrap code and the imports of the `core`, `phoneList`, and
|
||||
`phoneDetail` modules. Instead import the `PhoneList` and `PhoneDetail`
|
||||
components directly - they are needed in the route configuration.
|
||||
|
||||
When you're done, this is what `app.ts` should look like:
|
||||
When you're done, this is what `main.ts` should look like:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/app.ts', null, 'app/js/app.ts')
|
||||
+makeExample('upgrade/ts/ng2_final/app/js/main.ts', null, 'app/js/main.ts')
|
||||
|
||||
:marked
|
||||
You may also completely remove the following files. They are Angular 1
|
||||
|
|
@ -1952,7 +1945,8 @@ code-example(format="").
|
|||
|
||||
:marked
|
||||
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`
|
||||
Angular 1 scripts as well as jQuery. Instead of importing `js/app.module`
|
||||
with SystemJS, import `js/main`. When you're done, this is what `index.html`
|
||||
should look like:
|
||||
|
||||
+makeExample('upgrade/ts/ng2_final/app/index.html', null, 'app/index.html')
|
||||
|
|
|
|||
Loading…
Reference in New Issue