From 2f2d7b8841ad230327f9360c643aa64557f4bb2c Mon Sep 17 00:00:00 2001 From: Tero Parviainen Date: Fri, 26 Feb 2016 18:21:31 +0200 Subject: [PATCH] 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 --- .../_examples/upgrade/ts/adapter/package.json | 14 +-- .../upgrade/ts/adapter/tsconfig.json | 4 +- .../_examples/upgrade/ts/classes/bower.json | 12 +-- .../upgrade/ts/classes/package.1.json | 6 +- .../upgrade/ts/ng2_components/app/index.html | 2 +- .../{CheckmarkPipe.ts => checkmark.pipe.ts} | 0 .../ng2_components/app/js/core/core.module.ts | 2 +- .../js/core/{Phones.ts => phones.service.ts} | 2 +- ...oneDetail.ts => phone_detail.component.ts} | 4 +- .../js/phone_detail/phone_detail.module.ts | 2 +- ...> phone_detail_without_pipes.component.ts} | 2 +- .../{OrderByPipe.ts => order_by.pipe.ts} | 0 .../app/js/phone_list/phone_filter.pipe.ts} | 2 +- .../{PhoneList.ts => phone_list.component.ts} | 6 +- .../app/js/phone_list/phone_list.module.ts | 2 +- ... => phone_list_without_pipes.component.ts} | 2 +- .../upgrade/ts/ng2_components/bower.json | 12 +-- .../upgrade/ts/ng2_components/package.1.json | 12 +-- ...arkPipe.spec.ts => checkmark.pipe.spec.ts} | 2 +- ...erByPipe.spec.ts => order_by.pipe.spec.ts} | 2 +- ...spec.ts => phone_detail.component.spec.ts} | 10 +- ...Pipe.spec.ts => phone_filter.pipe.spec.ts} | 4 +- ...t.spec.ts => phone_list.component.spec.ts} | 14 +-- ...{Phones.spec.ts => phones.service.spec.ts} | 2 +- .../upgrade/ts/ng2_components/typings.json | 3 +- .../upgrade/ts/ng2_final/app/index.html | 7 +- .../ts/ng2_final/app/js/app.component.ts | 18 ++++ .../upgrade/ts/ng2_final/app/js/app.ts | 48 --------- .../{CheckmarkPipe.ts => checkmark.pipe.ts} | 0 .../js/core/{Phones.ts => phones.service.ts} | 2 +- .../upgrade/ts/ng2_final/app/js/main.ts | 26 +++++ ...oneDetail.ts => phone_detail.component.ts} | 4 +- .../{OrderByPipe.ts => order_by.pipe.ts} | 0 .../app/js/phone_list/phone_filter.pipe.ts} | 2 +- .../{PhoneList.ts => phone_list.component.ts} | 6 +- .../_examples/upgrade/ts/ng2_final/bower.json | 12 +-- .../upgrade/ts/ng2_final/package.1.json | 12 +-- ...arkPipe.spec.ts => checkmark.pipe.spec.ts} | 2 +- ...erByPipe.spec.ts => order_by.pipe.spec.ts} | 2 +- ...spec.ts => phone_detail.component.spec.ts} | 10 +- ...Pipe.spec.ts => phone_filter.pipe.spec.ts} | 4 +- ...t.spec.ts => phone_list.component.spec.ts} | 32 ++++-- .../test/unit/phones.service.spec.ts} | 2 +- .../upgrade/ts/ng2_final/typings.json | 3 +- .../upgrade/ts/ng2_initial/app/index.html | 2 +- .../ts/ng2_initial/app/js/core/core.module.ts | 2 +- .../js/core/{Phones.ts => phones.service.ts} | 2 +- .../phone_detail/phone_detail.controller.ts | 2 +- .../js/phone_list/phone_list.controller.ts | 2 +- .../upgrade/ts/ng2_initial/bower.json | 12 +-- .../upgrade/ts/ng2_initial/package.1.json | 12 +-- .../test/unit/phone_detail.controller.spec.ts | 8 +- .../test/unit/phone_list.controller.spec.ts | 8 +- .../test/unit/phones.service.spec.ts} | 2 +- .../upgrade/ts/ng2_initial/typings.json | 3 +- .../ts/typescript-conversion/bower.json | 12 +-- .../ts/typescript-conversion/package.1.json | 6 +- public/docs/ts/latest/guide/upgrade.jade | 98 +++++++++---------- 58 files changed, 248 insertions(+), 238 deletions(-) rename public/docs/_examples/upgrade/ts/ng2_components/app/js/core/{CheckmarkPipe.ts => checkmark.pipe.ts} (100%) rename public/docs/_examples/upgrade/ts/ng2_components/app/js/core/{Phones.ts => phones.service.ts} (95%) rename public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/{PhoneDetail.ts => phone_detail.component.ts} (86%) rename public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/{PhoneDetail_without_pipes.ts => phone_detail_without_pipes.component.ts} (92%) rename public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/{OrderByPipe.ts => order_by.pipe.ts} (100%) rename public/docs/_examples/upgrade/ts/{ng2_final/app/js/phone_list/PhoneFilterPipe.ts => ng2_components/app/js/phone_list/phone_filter.pipe.ts} (91%) rename public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/{PhoneList.ts => phone_list.component.ts} (76%) rename public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/{PhoneList_without_pipes.ts => phone_list_without_pipes.component.ts} (88%) rename public/docs/_examples/upgrade/ts/ng2_components/test/unit/{CheckmarkPipe.spec.ts => checkmark.pipe.spec.ts} (87%) rename public/docs/_examples/upgrade/ts/ng2_components/test/unit/{OrderByPipe.spec.ts => order_by.pipe.spec.ts} (89%) rename public/docs/_examples/upgrade/ts/ng2_components/test/unit/{PhoneDetail.spec.ts => phone_detail.component.spec.ts} (78%) rename public/docs/_examples/upgrade/ts/ng2_components/test/unit/{PhoneFilterPipe.spec.ts => phone_filter.pipe.spec.ts} (87%) rename public/docs/_examples/upgrade/ts/ng2_components/test/unit/{PhoneList.spec.ts => phone_list.component.spec.ts} (80%) rename public/docs/_examples/upgrade/ts/ng2_components/test/unit/{Phones.spec.ts => phones.service.spec.ts} (87%) create mode 100644 public/docs/_examples/upgrade/ts/ng2_final/app/js/app.component.ts delete mode 100644 public/docs/_examples/upgrade/ts/ng2_final/app/js/app.ts rename public/docs/_examples/upgrade/ts/ng2_final/app/js/core/{CheckmarkPipe.ts => checkmark.pipe.ts} (100%) rename public/docs/_examples/upgrade/ts/ng2_final/app/js/core/{Phones.ts => phones.service.ts} (95%) create mode 100644 public/docs/_examples/upgrade/ts/ng2_final/app/js/main.ts rename public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/{PhoneDetail.ts => phone_detail.component.ts} (85%) rename public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/{OrderByPipe.ts => order_by.pipe.ts} (100%) rename public/docs/_examples/upgrade/ts/{ng2_components/app/js/phone_list/PhoneFilterPipe.ts => ng2_final/app/js/phone_list/phone_filter.pipe.ts} (91%) rename public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/{PhoneList.ts => phone_list.component.ts} (78%) rename public/docs/_examples/upgrade/ts/ng2_final/test/unit/{CheckmarkPipe.spec.ts => checkmark.pipe.spec.ts} (87%) rename public/docs/_examples/upgrade/ts/ng2_final/test/unit/{OrderByPipe.spec.ts => order_by.pipe.spec.ts} (89%) rename public/docs/_examples/upgrade/ts/ng2_final/test/unit/{PhoneDetail.spec.ts => phone_detail.component.spec.ts} (80%) rename public/docs/_examples/upgrade/ts/ng2_final/test/unit/{PhoneFilterPipe.spec.ts => phone_filter.pipe.spec.ts} (87%) rename public/docs/_examples/upgrade/ts/ng2_final/test/unit/{PhoneList.spec.ts => phone_list.component.spec.ts} (57%) rename public/docs/_examples/upgrade/ts/{ng2_initial/test/unit/Phones.spec.ts => ng2_final/test/unit/phones.service.spec.ts} (87%) rename public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/{Phones.ts => phones.service.ts} (95%) rename public/docs/_examples/upgrade/ts/{ng2_final/test/unit/Phones.spec.ts => ng2_initial/test/unit/phones.service.spec.ts} (87%) diff --git a/public/docs/_examples/upgrade/ts/adapter/package.json b/public/docs/_examples/upgrade/ts/adapter/package.json index 2cfcd1c213..5e84bdf221 100644 --- a/public/docs/_examples/upgrade/ts/adapter/package.json +++ b/public/docs/_examples/upgrade/ts/adapter/package.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/adapter/tsconfig.json b/public/docs/_examples/upgrade/ts/adapter/tsconfig.json index 0ff15b9d2a..c1216959ee 100644 --- a/public/docs/_examples/upgrade/ts/adapter/tsconfig.json +++ b/public/docs/_examples/upgrade/ts/adapter/tsconfig.json @@ -7,6 +7,8 @@ "experimentalDecorators": true }, "exclude": [ - "node_modules" + "node_modules", + "typings/main.d.ts", + "typings/main" ] } diff --git a/public/docs/_examples/upgrade/ts/classes/bower.json b/public/docs/_examples/upgrade/ts/classes/bower.json index 03c0d72ea4..3f8ec94656 100644 --- a/public/docs/_examples/upgrade/ts/classes/bower.json +++ b/public/docs/_examples/upgrade/ts/classes/bower.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/classes/package.1.json b/public/docs/_examples/upgrade/ts/classes/package.1.json index c940543174..10fb943821 100644 --- a/public/docs/_examples/upgrade/ts/classes/package.1.json +++ b/public/docs/_examples/upgrade/ts/classes/package.1.json @@ -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": { diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/index.html b/public/docs/_examples/upgrade/ts/ng2_components/app/index.html index 989eef0ca3..785df36cd6 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/index.html +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/index.html @@ -14,7 +14,7 @@ - + diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/CheckmarkPipe.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/checkmark.pipe.ts similarity index 100% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/core/CheckmarkPipe.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/core/checkmark.pipe.ts diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/core.module.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/core.module.ts index 8faf35f705..5d80850593 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/core.module.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/core.module.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones} from './Phones'; +import {Phones} from './phones.service'; import upgradeAdapter from './upgrade_adapter'; upgradeAdapter.addProvider(Phones); diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/Phones.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/phones.service.ts similarity index 95% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/core/Phones.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/core/phones.service.ts index 4751164617..b01b83da90 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/Phones.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/core/phones.service.ts @@ -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 diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts similarity index 86% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts index ea2876ba10..3d05494a46 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.component.ts @@ -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 diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts index 3ae85d8d51..2a31fb503d 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail.module.ts @@ -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', [ diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail_without_pipes.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts similarity index 92% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail_without_pipes.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts index ca7bc1c0d2..a4c7ed3250 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/PhoneDetail_without_pipes.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_detail/phone_detail_without_pipes.component.ts @@ -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 diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/OrderByPipe.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/order_by.pipe.ts similarity index 100% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/OrderByPipe.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/order_by.pipe.ts diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/PhoneFilterPipe.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts similarity index 91% rename from public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/PhoneFilterPipe.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts index cca575ece2..0b70c47773 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/PhoneFilterPipe.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_filter.pipe.ts @@ -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 { diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneList.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts similarity index 76% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneList.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts index cc83468d4d..2c13ae12f4 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneList.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.component.ts @@ -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', diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.module.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.module.ts index f3a0de081d..4632cc90f5 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.module.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list.module.ts @@ -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', [ diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneList_without_pipes.ts b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts similarity index 88% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneList_without_pipes.ts rename to public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts index ec9dc0d9db..2820966099 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneList_without_pipes.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/phone_list_without_pipes.component.ts @@ -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', diff --git a/public/docs/_examples/upgrade/ts/ng2_components/bower.json b/public/docs/_examples/upgrade/ts/ng2_components/bower.json index 03c0d72ea4..3f8ec94656 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/bower.json +++ b/public/docs/_examples/upgrade/ts/ng2_components/bower.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/ng2_components/package.1.json b/public/docs/_examples/upgrade/ts/ng2_components/package.1.json index fcd1dde766..15e2d4cc87 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/package.1.json +++ b/public/docs/_examples/upgrade/ts/ng2_components/package.1.json @@ -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": { diff --git a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/CheckmarkPipe.spec.ts b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/checkmark.pipe.spec.ts similarity index 87% rename from public/docs/_examples/upgrade/ts/ng2_components/test/unit/CheckmarkPipe.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_components/test/unit/checkmark.pipe.spec.ts index 9d5b92f6e0..76dfe5fad9 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/CheckmarkPipe.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/checkmark.pipe.spec.ts @@ -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() { diff --git a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/OrderByPipe.spec.ts b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/order_by.pipe.spec.ts similarity index 89% rename from public/docs/_examples/upgrade/ts/ng2_components/test/unit/OrderByPipe.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_components/test/unit/order_by.pipe.spec.ts index 737ad10b82..87780a9535 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/OrderByPipe.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/order_by.pipe.spec.ts @@ -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() { diff --git a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneDetail.spec.ts b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_detail.component.spec.ts similarity index 78% rename from public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneDetail.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_detail.component.spec.ts index 6d161d4a9a..9365fe9e5f 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneDetail.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_detail.component.spec.ts @@ -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 { - return FromObservable.create([xyzPhoneData()]); + return Observable.fromArray([xyzPhoneData()]); } } diff --git a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneFilterPipe.spec.ts b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts similarity index 87% rename from public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneFilterPipe.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts index 73e1772201..c730b8c1fe 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneFilterPipe.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_filter.pipe.spec.ts @@ -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() { diff --git a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneList.spec.ts b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_list.component.spec.ts similarity index 80% rename from public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneList.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_list.component.spec.ts index c0a1388b7d..56327c0e9a 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/PhoneList.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phone_list.component.spec.ts @@ -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 { - 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'); }); })); diff --git a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/Phones.spec.ts b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phones.service.spec.ts similarity index 87% rename from public/docs/_examples/upgrade/ts/ng2_components/test/unit/Phones.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_components/test/unit/phones.service.spec.ts index 61f3fc1117..f389722c46 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/test/unit/Phones.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_components/test/unit/phones.service.spec.ts @@ -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() { diff --git a/public/docs/_examples/upgrade/ts/ng2_components/typings.json b/public/docs/_examples/upgrade/ts/ng2_components/typings.json index 3925b59066..8351ca2854 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/typings.json +++ b/public/docs/_examples/upgrade/ts/ng2_components/typings.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/index.html b/public/docs/_examples/upgrade/ts/ng2_final/app/index.html index adf1a54677..8893e668b2 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/app/index.html +++ b/public/docs/_examples/upgrade/ts/ng2_final/app/index.html @@ -10,14 +10,15 @@ - - + + + @@ -29,7 +30,7 @@ } } }); - System.import('js/app'); + System.import('js/main'); diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/app.component.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/app.component.ts new file mode 100644 index 0000000000..00c46592bb --- /dev/null +++ b/public/docs/_examples/upgrade/ts/ng2_final/app/js/app.component.ts @@ -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: '', + directives: [ROUTER_DIRECTIVES] +}) +export default class AppComponent { +} diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/app.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/app.ts deleted file mode 100644 index 522684cddf..0000000000 --- a/public/docs/_examples/upgrade/ts/ng2_final/app/js/app.ts +++ /dev/null @@ -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: '', - directives: [ROUTER_DIRECTIVES] -}) -class AppComponent { -} -// #enddocregion appcomponent - -// #docregion bootstrap -bootstrap(AppComponent, [ - HTTP_PROVIDERS, - ROUTER_PROVIDERS, - ROUTER_DIRECTIVES, - provide(LocationStrategy, {useClass: HashLocationStrategy}), - Phones -]); -// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/core/CheckmarkPipe.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/core/checkmark.pipe.ts similarity index 100% rename from public/docs/_examples/upgrade/ts/ng2_final/app/js/core/CheckmarkPipe.ts rename to public/docs/_examples/upgrade/ts/ng2_final/app/js/core/checkmark.pipe.ts diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/core/Phones.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/core/phones.service.ts similarity index 95% rename from public/docs/_examples/upgrade/ts/ng2_final/app/js/core/Phones.ts rename to public/docs/_examples/upgrade/ts/ng2_final/app/js/core/phones.service.ts index 4751164617..b01b83da90 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/app/js/core/Phones.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/app/js/core/phones.service.ts @@ -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 diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/main.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/main.ts new file mode 100644 index 0000000000..3d999cf8b5 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/ng2_final/app/js/main.ts @@ -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 diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/PhoneDetail.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts similarity index 85% rename from public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/PhoneDetail.ts rename to public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts index 3b3de30fee..68952a6e5d 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/PhoneDetail.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_detail/phone_detail.component.ts @@ -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', diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/OrderByPipe.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/order_by.pipe.ts similarity index 100% rename from public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/OrderByPipe.ts rename to public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/order_by.pipe.ts diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneFilterPipe.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts similarity index 91% rename from public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneFilterPipe.ts rename to public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts index cca575ece2..0b70c47773 100644 --- a/public/docs/_examples/upgrade/ts/ng2_components/app/js/phone_list/PhoneFilterPipe.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_filter.pipe.ts @@ -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 { diff --git a/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/PhoneList.ts b/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_list.component.ts similarity index 78% rename from public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/PhoneList.ts rename to public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_list.component.ts index e7aa1dead1..3d729ead62 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/PhoneList.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/app/js/phone_list/phone_list.component.ts @@ -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', diff --git a/public/docs/_examples/upgrade/ts/ng2_final/bower.json b/public/docs/_examples/upgrade/ts/ng2_final/bower.json index 03c0d72ea4..3f8ec94656 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/bower.json +++ b/public/docs/_examples/upgrade/ts/ng2_final/bower.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/ng2_final/package.1.json b/public/docs/_examples/upgrade/ts/ng2_final/package.1.json index fcd1dde766..15e2d4cc87 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/package.1.json +++ b/public/docs/_examples/upgrade/ts/ng2_final/package.1.json @@ -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": { diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/CheckmarkPipe.spec.ts b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/checkmark.pipe.spec.ts similarity index 87% rename from public/docs/_examples/upgrade/ts/ng2_final/test/unit/CheckmarkPipe.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_final/test/unit/checkmark.pipe.spec.ts index f3c9c0258a..d4f7ea1558 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/CheckmarkPipe.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/checkmark.pipe.spec.ts @@ -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', () => { diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/OrderByPipe.spec.ts b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/order_by.pipe.spec.ts similarity index 89% rename from public/docs/_examples/upgrade/ts/ng2_final/test/unit/OrderByPipe.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_final/test/unit/order_by.pipe.spec.ts index f1bc65fe2a..5f1cc31303 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/OrderByPipe.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/order_by.pipe.spec.ts @@ -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', () => { diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneDetail.spec.ts b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_detail.component.spec.ts similarity index 80% rename from public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneDetail.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_detail.component.spec.ts index 8dfb6e5668..e0ff036453 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneDetail.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_detail.component.spec.ts @@ -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 { - return FromObservable.create([xyzPhoneData()]); + return Observable.fromArray([xyzPhoneData()]); } } diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneFilterPipe.spec.ts b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts similarity index 87% rename from public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneFilterPipe.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts index d743d23e8a..8e2308f8a0 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneFilterPipe.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_filter.pipe.spec.ts @@ -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', () => { diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneList.spec.ts b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_list.component.spec.ts similarity index 57% rename from public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneList.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_list.component.spec.ts index d07dfeca8d..a051e75baf 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/PhoneList.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phone_list.component.spec.ts @@ -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 { - 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'); }); })); diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/Phones.spec.ts b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phones.service.spec.ts similarity index 87% rename from public/docs/_examples/upgrade/ts/ng2_initial/test/unit/Phones.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_final/test/unit/phones.service.spec.ts index d80266fddf..2540f687c6 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/Phones.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_final/test/unit/phones.service.spec.ts @@ -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', () => { diff --git a/public/docs/_examples/upgrade/ts/ng2_final/typings.json b/public/docs/_examples/upgrade/ts/ng2_final/typings.json index ea251e37cd..3b324843f7 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/typings.json +++ b/public/docs/_examples/upgrade/ts/ng2_final/typings.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html b/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html index 0a0f9dd678..725ad82344 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html +++ b/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html @@ -16,7 +16,7 @@ - + diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/core.module.ts b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/core.module.ts index cfc2fcf20a..d30604a807 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/core.module.ts +++ b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/core.module.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones} from './Phones'; +import {Phones} from './phones.service'; import checkmarkFilter from './checkmark.filter'; import upgradeAdapter from './upgrade_adapter'; diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/Phones.ts b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/phones.service.ts similarity index 95% rename from public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/Phones.ts rename to public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/phones.service.ts index 14625c5c9e..70cb8c328c 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/Phones.ts +++ b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/core/phones.service.ts @@ -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'; diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts index 554eef41a0..2dd8b25c9e 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts +++ b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_detail/phone_detail.controller.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones, Phone} from '../core/Phones'; +import {Phones, Phone} from '../core/phones.service'; interface PhoneRouteParams { phoneId: string diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts index d8ddf9a507..05ea2907ad 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts +++ b/public/docs/_examples/upgrade/ts/ng2_initial/app/js/phone_list/phone_list.controller.ts @@ -1,5 +1,5 @@ // #docregion -import {Phones, Phone} from '../core/Phones'; +import {Phones, Phone} from '../core/phones.service'; class PhoneListCtrl { phones:Phone[]; diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/bower.json b/public/docs/_examples/upgrade/ts/ng2_initial/bower.json index 9ee83a5022..3f8ec94656 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/bower.json +++ b/public/docs/_examples/upgrade/ts/ng2_initial/bower.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/package.1.json b/public/docs/_examples/upgrade/ts/ng2_initial/package.1.json index fcd1dde766..15e2d4cc87 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/package.1.json +++ b/public/docs/_examples/upgrade/ts/ng2_initial/package.1.json @@ -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": { diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts b/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts index f9a80c62f9..a140463720 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_detail.controller.spec.ts @@ -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}); diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_list.controller.spec.ts b/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_list.controller.spec.ts index 1d5d7afa2d..f9f467306c 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_list.controller.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phone_list.controller.spec.ts @@ -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(); diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/Phones.spec.ts b/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phones.service.spec.ts similarity index 87% rename from public/docs/_examples/upgrade/ts/ng2_final/test/unit/Phones.spec.ts rename to public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phones.service.spec.ts index d80266fddf..2540f687c6 100644 --- a/public/docs/_examples/upgrade/ts/ng2_final/test/unit/Phones.spec.ts +++ b/public/docs/_examples/upgrade/ts/ng2_initial/test/unit/phones.service.spec.ts @@ -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', () => { diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/typings.json b/public/docs/_examples/upgrade/ts/ng2_initial/typings.json index 3925b59066..8351ca2854 100644 --- a/public/docs/_examples/upgrade/ts/ng2_initial/typings.json +++ b/public/docs/_examples/upgrade/ts/ng2_initial/typings.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/typescript-conversion/bower.json b/public/docs/_examples/upgrade/ts/typescript-conversion/bower.json index 03c0d72ea4..3f8ec94656 100644 --- a/public/docs/_examples/upgrade/ts/typescript-conversion/bower.json +++ b/public/docs/_examples/upgrade/ts/typescript-conversion/bower.json @@ -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" } } diff --git a/public/docs/_examples/upgrade/ts/typescript-conversion/package.1.json b/public/docs/_examples/upgrade/ts/typescript-conversion/package.1.json index 3afe0209be..cbbef829f1 100644 --- a/public/docs/_examples/upgrade/ts/typescript-conversion/package.1.json +++ b/public/docs/_examples/upgrade/ts/typescript-conversion/package.1.json @@ -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": { diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 89f092aca7..0066e19626 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -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 `` 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')