diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts index 3881a30e4d..e9c1ab40be 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts @@ -1,13 +1,15 @@ // #docregion import { - beforeEachProviders, + addProviders, inject } from '@angular/core/testing'; import { CheckmarkPipe } from './checkmark.pipe'; describe('CheckmarkPipe', function() { - beforeEachProviders(() => [CheckmarkPipe]); + beforeEach(() => { + addProviders([CheckmarkPipe]); + }); it('should convert boolean values to unicode checkmark or cross', inject([CheckmarkPipe], function(checkmarkPipe: CheckmarkPipe) { diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts index 2849dfa8b0..0cc16e329e 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts @@ -1,9 +1,7 @@ // #docregion import { - describe, + addProviders, beforeEach, - beforeEachProviders, - it, inject } from '@angular/core/testing'; import { @@ -24,29 +22,26 @@ describe('Phone', function() { ]; let mockBackend: MockBackend; - beforeEachProviders(() => [ - Phone, - MockBackend, - BaseRequestOptions, - { provide: Http, - useFactory: (backend: MockBackend, options: BaseRequestOptions) => - new Http(backend, options), - deps: [MockBackend, BaseRequestOptions] - } - ]); + beforeEach(() => { + addProviders([ + Phone, + MockBackend, + BaseRequestOptions, + { provide: Http, + useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), + deps: [MockBackend, BaseRequestOptions] + } + ]); + }); - beforeEach(inject([MockBackend, Phone], - (_mockBackend_: MockBackend, _phone_: Phone) => { + beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => { mockBackend = _mockBackend_; phone = _phone_; })); - it('should fetch the phones data from `/phones/phones.json`', - (done: () => void) => { + it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => { mockBackend.connections.subscribe((conn: MockConnection) => { - conn.mockRespond(new Response(new ResponseOptions({ - body: JSON.stringify(phonesData) - }))); + conn.mockRespond(new Response(new ResponseOptions({ body: JSON.stringify(phonesData) }))); }); phone.query().subscribe(result => { expect(result).toEqual(phonesData); @@ -55,3 +50,4 @@ describe('Phone', function() { }); }); + diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts index 6affef51de..b26de82e84 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts @@ -3,11 +3,8 @@ import { HTTP_PROVIDERS } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import { - describe, - beforeEachProviders, + addProviders, inject, - it, - expect } from '@angular/core/testing'; import { TestComponentBuilder, @@ -33,11 +30,13 @@ class MockPhone extends Phone { describe('PhoneDetailComponent', () => { - beforeEachProviders(() => [ - { provide: Phone, useClass: MockPhone }, - { provide: '$routeParams', useValue: {phoneId: 'xyz'}}, - HTTP_PROVIDERS - ]); + beforeEach(() => { + addProviders([ + { provide: Phone, useClass: MockPhone }, + { provide: '$routeParams', useValue: {phoneId: 'xyz'} }, + HTTP_PROVIDERS + ]); + }); it('should fetch phone detail', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { @@ -45,7 +44,7 @@ describe('PhoneDetailComponent', () => { .then((fixture: ComponentFixture) => { fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name); + expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name); }); })); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts index 80c1a39e9f..50582a0949 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts @@ -2,11 +2,8 @@ import { HTTP_PROVIDERS } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import { - describe, - beforeEachProviders, + addProviders, inject, - it, - expect } from '@angular/core/testing'; import { TestComponentBuilder, @@ -18,7 +15,6 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; class MockPhone extends Phone { query(): Observable { - console.log('mocking here'); return Observable.of( [ {name: 'Nexus S', snippet: '', images: []}, @@ -30,10 +26,12 @@ class MockPhone extends Phone { describe('PhoneList', () => { - beforeEachProviders(() => [ - { provide: Phone, useClass: MockPhone }, - HTTP_PROVIDERS - ]); + beforeEach(() => { + addProviders([ + { provide: Phone, useClass: MockPhone }, + HTTP_PROVIDERS + ]); + }); it('should create "phones" model with 2 phones fetched from xhr', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.component.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.component.ts index af4e91c80f..6ac8adac71 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.component.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.component.ts @@ -1,14 +1,7 @@ // #docregion import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; -import { PhoneListComponent } from './phone-list/phone-list.component'; -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; +import { ROUTER_DIRECTIVES } from '@angular/router'; -@RouteConfig([ - {path: '/phones', name: 'Phones', component: PhoneListComponent}, - {path: '/phones/:phoneId', name: 'Phone', component: PhoneDetailComponent}, - {path: '/', redirectTo: ['Phones']} -]) @Component({ selector: 'phonecat-app', template: '', diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.routes.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.routes.ts new file mode 100644 index 0000000000..6a1a810c59 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/app.routes.ts @@ -0,0 +1,15 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; + +import { PhoneListComponent } from './phone-list/phone-list.component'; +import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; + +const routes: RouterConfig = [ + { path: '', redirectTo: 'phones', pathMatch: 'full' }, + { path: 'phones', component: PhoneListComponent }, + { path: 'phones/:phoneId', component: PhoneDetailComponent } +]; + +export const appRouterProviders = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts index b3a1c59a8d..a8b8109586 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts @@ -1,15 +1,14 @@ import { - describe, - beforeEachProviders, - it, + addProviders, inject, - expect } from '@angular/core/testing'; import { CheckmarkPipe } from './checkmark.pipe'; describe('CheckmarkPipe', function() { - beforeEachProviders(() => [CheckmarkPipe]); + beforeEach(() => { + addProviders([CheckmarkPipe]); + }); it('should convert boolean values to unicode checkmark or cross', inject([CheckmarkPipe], function(checkmarkPipe: CheckmarkPipe) { diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts index c9f511913b..da08692971 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts @@ -1,8 +1,6 @@ import { - describe, + addProviders, beforeEach, - beforeEachProviders, - it, inject } from '@angular/core/testing'; import { @@ -23,15 +21,17 @@ describe('Phone', function() { ]; let mockBackend: MockBackend; - beforeEachProviders(() => [ - Phone, - MockBackend, - BaseRequestOptions, - { provide: Http, - useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), - deps: [MockBackend, BaseRequestOptions] - } - ]); + beforeEach(() => { + addProviders([ + Phone, + MockBackend, + BaseRequestOptions, + { provide: Http, + useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), + deps: [MockBackend, BaseRequestOptions] + } + ]); + }); beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => { mockBackend = _mockBackend_; diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts index 4db648092b..bd8a124ac2 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts @@ -8,9 +8,10 @@ import { import { bootstrap } from '@angular/platform-browser-dynamic'; import { FormsModule } from '@angular/forms'; import { HTTP_PROVIDERS } from '@angular/http'; -import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { Phone } from './core/phone/phone.service'; import { AppComponent } from './app.component'; + +import { appRouterProviders } from './app.routes'; // #enddocregion imports // #docregion bootstrap diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts index 79b3cddcfb..85c6b92a76 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts @@ -1,17 +1,14 @@ // #docregion import { HTTP_PROVIDERS } from '@angular/http'; -// #docregion routeparams -import { RouteParams } from '@angular/router-deprecated'; +// #docregion activatedroute +import { ActivatedRoute } from '@angular/router'; -// #enddocregion routeparams +// #enddocregion activatedroute import { Observable } from 'rxjs/Rx'; import { - describe, - beforeEachProviders, + addProviders, inject, - it, - expect } from '@angular/core/testing'; import { TestComponentBuilder, @@ -35,16 +32,26 @@ class MockPhone extends Phone { } } +// #docregion activatedroute + +class ActivatedRouteMock { + constructor(public snapshot: any) {} +} + +// #enddocregion activatedroute + describe('PhoneDetailComponent', () => { - // #docregion routeparams + // #docregion activatedroute - beforeEachProviders(() => [ - { provide: Phone, useClass: MockPhone }, - { provide: RouteParams, useValue: new RouteParams({phoneId: 'xyz'})}, - HTTP_PROVIDERS - ]); - // #enddocregion routeparams + beforeEach(() => { + addProviders([ + { provide: Phone, useClass: MockPhone }, + { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }, + HTTP_PROVIDERS + ]); + }); + // #enddocregion activatedroute it('should fetch phone detail', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { @@ -52,7 +59,7 @@ describe('PhoneDetailComponent', () => { .then((fixture: ComponentFixture) => { fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1')).toHaveText(xyzPhoneData().name); + expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name); }); })); diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts index 36db78632c..fd1309f224 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts @@ -1,7 +1,8 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { RouteParams } from '@angular/router-deprecated'; +import { ActivatedRoute } from '@angular/router'; + import { Phone, PhoneData } from '../core/phone/phone.service'; import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; @@ -14,8 +15,8 @@ export class PhoneDetailComponent { phone: PhoneData; mainImageUrl: string; - constructor(routeParams: RouteParams, phone: Phone) { - phone.get(routeParams.get('phoneId')).subscribe(phone => { + constructor(activatedRoute: ActivatedRoute, phone: Phone) { + phone.get(activatedRoute.snapshot.params['phoneId']).subscribe(phone => { this.phone = phone; this.setImage(phone.images[0]); }); diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts index 3d6cd93b15..1068043bb0 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts @@ -2,21 +2,10 @@ // #docregion routestuff import { Directive } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; -import { - Router, - RouterLink, - RootRouter, - RouteRegistry, - ROUTER_PRIMARY_COMPONENT -} from '@angular/router-deprecated'; import { Observable } from 'rxjs/Rx'; import { - describe, addProviders, inject, - it, - expect, - // MockApplicationRef } from '@angular/core/testing'; import { SpyLocation } from '@angular/common/testing'; import { @@ -30,12 +19,6 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; // #enddocregion routestuff -@Directive({ - selector: '[routerLink]', - inputs: ['routeParams: routerLink', 'target: target'] -}) -class RouterLinkMock {} - class MockPhone extends Phone { query(): Observable { return Observable.of([ @@ -49,21 +32,18 @@ describe('PhoneList', () => { // #docregion routestuff - addProviders([ - RouteRegistry, - { provide: Router, useClass: RootRouter }, - { provide: ROUTER_PRIMARY_COMPONENT, useValue: AppComponent }, - { provide: Location, useClass: SpyLocation}, - { provide: Phone, useClass: MockPhone}, - HTTP_PROVIDERS - ]); + beforeEach(() => { + addProviders([ + { provide: Location, useClass: SpyLocation }, + { provide: Phone, useClass: MockPhone }, + HTTP_PROVIDERS + ]); + }); // #enddocregion routestuff it('should create "phones" model with 2 phones fetched from xhr', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb - .overrideDirective(AppComponent, RouterLink, RouterLinkMock) - .overrideDirective(PhoneListComponent, RouterLink, RouterLinkMock) .createAsync(PhoneListComponent) .then((fixture: ComponentFixture) => { fixture.detectChanges(); @@ -81,8 +61,6 @@ describe('PhoneList', () => { it('should set the default value of orderProp model', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb - .overrideDirective(AppComponent, RouterLink, RouterLinkMock) - .overrideDirective(PhoneListComponent, RouterLink, RouterLinkMock) .createAsync(PhoneListComponent) .then((fixture: ComponentFixture) => { fixture.detectChanges(); diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts index 352c433838..d537206096 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts @@ -1,13 +1,13 @@ // #docplaster // #docregion top import { Component } from '@angular/core'; -import { RouterLink } from '@angular/router-deprecated'; +import { RouterLinkWithHref } from '@angular/router'; import { Phone, PhoneData } from '../core/phone/phone.service'; @Component({ selector: 'phone-list', templateUrl: 'phone-list/phone-list.template.html', - directives: [ RouterLink ] + directives: [ RouterLinkWithHref ] }) // #enddocregion top export class PhoneListComponent { diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html index 9846664768..b4a994b297 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html @@ -26,10 +26,10 @@ diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 438ede147e..c5c3092a9d 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -1362,8 +1362,7 @@ code-example(format=""). Let's do the routing part first. Angular 2 comes with an [all-new router](router.html) that we can use for this. - Angular 2 applications all have a *root component*, which, among other - things, is where we should plug in the router. We don't yet have such a root + Before that, Angular 2 applications all have a *root component*. 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 into a new file `app.component.ts`: @@ -1374,9 +1373,7 @@ code-example(format=""). This is a component that plugs in to an `` element on the page, and has a simple template that only includes the router outlet component of the Angular router. This means that the component just renders the contents - of the current route and nothing else. The `@RouteConfig` decorator defines - the Angular 2 counterparts of our two routes. They refer directly to the - two components. + of the current route and nothing else. We should put this `` element in the HTML so that the root component has something to attach to. It replaces the old Angular 1 `ng-view` directive: @@ -1384,9 +1381,19 @@ code-example(format=""). +makeExample('upgrade-phonecat-3-final/ts/index.html', 'appcomponent', 'index.html') :marked - In the `PhoneDetail` component we now need to change how the phone id parameter + Speaking of routes, with the Angular 2 router we create a file, commonly named `app.routes.ts` + where we specify which routes we need: + ++makeExample('upgrade-phonecat-3-final/ts/app/app.routes.ts', null, 'app/app.routes.ts') + +:marked + We create an array of `RouterConfig` objects which defines the Angular 2 counterparts of + our two routes. They refer directly to the two components. + Then we pass this array to `provideRouter` which returns (among other things) a configured router. + + On the other hand, In the `PhoneDetail` component we now need to change how the phone id parameter is received. There will be no more `$routeParams` injection available, because - that comes from the Angular 1 router. Instead, what we have is a `RouteParams` + that comes from the Angular 1 router. Instead, what we have is an `ActivatedRoute` object provided by the Angular 2 router. We use it to obtain the `phoneId` from the params: @@ -1395,7 +1402,7 @@ code-example(format=""). :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 the router, the new app component, and everything else in `main.ts` + with the configured router, the new app component, and everything else in `main.ts` +makeExample('upgrade-phonecat-3-final/ts/app/main.ts', 'imports') @@ -1405,8 +1412,7 @@ code-example(format=""). application's root component `AppComponent`, and the second is an array of the Angular 2 providers that we want to make available for injection. In that array we include all the things we have been registering - with `upgradeAdapter.addProvider` until now, as well as the providers and - directives of the router: + with `upgradeAdapter.addProvider` until now, as well as the configured router we exported earlier: +makeExample('upgrade-phonecat-3-final/ts/app/main.ts', 'bootstrap') @@ -1420,8 +1426,8 @@ code-example(format=""). But there's actually one more cool thing we can do with the new router. We no longer have to hardcode the links to phone details from the phone list, because the Angular 2 router is able to generate them for us with - its `routerLink` directive. We just need to refer to the route names we - used in the `@RouteConfig`: + its `routerLink` directive. We just need to refer to the route paths we + defined earlier: +makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html') @@ -1666,10 +1672,10 @@ code-example(format=""). :marked Finally, we need to revisit both of the component tests when we switch to the Angular 2 - router. For the details component we need to provide an Angular 2 `RouteParams` object + router. For the details component we need to provide a mock of Angular 2 `ActivatedRoute` object instead of using the Angular 1 `$routeParams`. -+makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'routeparams', 'app/phone-detail/phone-detail.component.spec.ts') ++makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'activatedroute', 'app/phone-detail/phone-detail.component.spec.ts') :marked And for the phone list component we need to set up a few things for the router itself so that