docs(upgrade): update to new router

Foxandxss · Foxandxss · commit 42116289afaf · 2016-07-29T19:44:52.000+02:00
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
@@ -1,16 +1,15 @@
 // #docregion
 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-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
@@ -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,19 +30,21 @@ 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) => {
     return tcb.createAsync(PhoneDetailComponent)
         .then((fixture: ComponentFixture<PhoneDetailComponent>) => {
       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
@@ -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<PhoneData[]> {
-    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
@@ -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: '<router-outlet></router-outlet>',
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
@@ -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
@@ -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
@@ -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
@@ -7,15 +7,16 @@ import {
 } from '@angular/common';
 import { bootstrap } from '@angular/platform-browser-dynamic';
 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
 bootstrap(AppComponent, [
   HTTP_PROVIDERS,
-  ROUTER_PROVIDERS,
+  appRouterProviders,
   { provide: APP_BASE_HREF, useValue: '!' },
   { provide: LocationStrategy, useClass: HashLocationStrategy },
   Phone
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
@@ -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,24 +32,34 @@ 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) => {
     return tcb.createAsync(PhoneDetailComponent)
         .then((fixture: ComponentFixture<PhoneDetailComponent>) => {
       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
@@ -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
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
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
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
