From 8f23969bc589f32c8313b5280dd27c6ba359b429 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 12 Nov 2016 21:55:20 +0000 Subject: [PATCH] update phonecat-hybrid service and components --- .../ts/app/app.module.ts | 9 +-- .../ts/app/core/phone/phone.service.ts | 15 ++++- .../upgrade-phonecat-2-hybrid/ts/app/main.ts | 44 +------------ .../phone-detail/phone-detail.component.ts | 10 +++ .../ts/app/phone-list/phone-list.component.ts | 18 +++++- public/docs/ts/latest/guide/upgrade.jade | 61 ++++++++----------- 6 files changed, 70 insertions(+), 87 deletions(-) diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts index 1e3fc22dc3..3164aade54 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts @@ -53,18 +53,19 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; PhoneDetailComponent // #enddocregion phonedetail ], - // #docregion phone + // #docregion phone, routeparams providers: [ Phone, - // #docregion routeparams + // #enddocregion phone { provide: '$routeParams', useFactory: (i: any) => i.get('$routeParams'), deps: ['$injector'] } - // #enddocregion routeparams + // #docregion phone ] -// #docregion bare, upgrademodule, httpmodule, phonelist + // #enddocregion routeparams +// #docregion bare, upgrademodule, httpmodule, phone, phonelist }) export class AppModule { // #enddocregion bare diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts index b19eea598d..c4673475fb 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts @@ -3,6 +3,11 @@ import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Rx'; +// #docregion downgrade-injectable +declare var angular: angular.IAngularStatic; +import { downgradeInjectable } from '@angular/upgrade/static'; +// #enddocregion downgrade-injectable + import 'rxjs/add/operator/map'; // #docregion phonedata-interface @@ -14,10 +19,10 @@ export interface PhoneData { // #enddocregion phonedata-interface // #docregion fullclass -// #docregion classdef +// #docregion classdef, downgrade-injectable @Injectable() export class Phone { -// #enddocregion classdef +// #enddocregion classdef, downgrade-injectable constructor(private http: Http) { } query(): Observable { return this.http.get(`phones/phones.json`) @@ -27,7 +32,11 @@ export class Phone { return this.http.get(`phones/${id}.json`) .map((res: Response) => res.json()); } -// #docregion classdef +// #docregion classdef, downgrade-injectable } // #enddocregion classdef // #enddocregion fullclass + +angular.module('core.phone') + .factory('phone', downgradeInjectable(Phone)); +// #enddocregion downgrade-injectable diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts index 72688d1753..28259f093b 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts @@ -1,50 +1,10 @@ -// #docregion import-adapter +// #docregion bootstrap declare var angular: angular.IAngularStatic; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { UpgradeModule, downgradeComponent, downgradeInjectable } from '@angular/upgrade/static'; +import { UpgradeModule } from '@angular/upgrade/static'; import { AppModule } from './app.module'; -// #enddocregion import-adapter -// #docregion phone-service -import { Phone } from './core/phone/phone.service'; -// #enddocregion phone-service -// #docregion phone-list -import { PhoneListComponent } from './phone-list/phone-list.component'; - -// #enddocregion phone-list -// #docregion phone-detail -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; - -// #enddocregion phone-detail - -// #docregion routeparams -// upgradeAdapter.upgradeNg1Provider('$routeParams'); -// #enddocregion routeparams - -// #docregion phone-service - -angular.module('core.phone') - .factory('phone', downgradeInjectable(Phone)); -// #enddocregion phone-service -// #docregion phone-list - -angular.module('phoneList') - .directive( - 'phoneList', - downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory - ); -// #enddocregion phone-list -// #docregion phone-detail - -angular.module('phoneDetail') - .directive( - 'phoneDetail', - downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory - ); -// #enddocregion phone-detail - -// #docregion bootstrap platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.documentElement, ['phonecatApp']); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts index e44cd42997..18668d17b5 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts @@ -1,4 +1,8 @@ // #docplaster +// #docregion +declare var angular: angular.IAngularStatic; +import { downgradeComponent } from '@angular/upgrade/static'; + // #docregion initialclass import { Component, Inject } from '@angular/core'; @@ -33,3 +37,9 @@ export class PhoneDetailComponent { } } // #enddocregion initialclass + +angular.module('phoneDetail') + .directive( + 'phoneDetail', + downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory + ); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts index 4a957e0471..bdd5930b79 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts @@ -1,14 +1,21 @@ -// #docplaster +// #docregion downgrade-component +declare var angular: angular.IAngularStatic; +import { downgradeComponent } from '@angular/upgrade/static'; + +// #enddocregion downgrade-component + // #docregion initialclass import { Component } from '@angular/core'; import { Phone, PhoneData } from '../core/phone/phone.service'; +// #docregion downgrade-component @Component({ moduleId: module.id, selector: 'phone-list', templateUrl: 'phone-list.template.html' }) export class PhoneListComponent { + // #enddocregion downgrade-component phones: PhoneData[]; query: string; orderProp: string; @@ -54,6 +61,13 @@ export class PhoneListComponent { return phones; } // #enddocregion getphones - // #docregion initialclass + // #docregion initialclass, downgrade-component } // #enddocregion initialclass + +angular.module('phoneList') + .directive( + 'phoneList', + downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory + ); +// #enddocregion downgrade-component diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 09a2659f28..d2fc989e14 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -1178,6 +1178,12 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts', 'phonedata-interface', 'app/core/phone/phone.service.ts (interface)')(format='.') +:marked + `@angular/upgrade/static` has a `downgradeInjectable` method for the purpose of making + Angular 2 services available to Angular 1 code. Use it to plug in the `Phone` service: + ++makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts', 'downgrade-injectable', 'app/core/phone/phone.service.ts (downgrade)')(format='.') + :marked Here's the full, final code for the service: @@ -1192,11 +1198,6 @@ code-example(format=""). Because it's an Angular 2 service, we register it with the `NgModule` providers: +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'phone', 'app.module.ts') -:marked - `UpgradeAdapter` has a `downgradeNg2Provider` method for the purpose of making - Angular 2 services available to Angular 1 code. Use it to plug in the `Phone` service: - -+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-service', 'app/main.ts (excerpt)')(format='.') :marked Now that we are loading `phone.service.ts` through an import that is resolved @@ -1270,29 +1271,29 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts', 'getphones', 'app/phone-list/phone-list.component.ts') +:marked + Now we need to downgrade our Angular 2 component so we can use it in Angular 1. + Instead of registering a component, we register a `phoneList` *directive*, + a downgraded version of the Angular 2 component. + + The `as angular.IDirectiveFactory` cast tells the TypeScript compiler + that the return value of the `downgradeComponent` method is a directive factory. + ++makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts', 'downgrade-component', 'app/phone-list/phone-list.component.ts') + :marked The new `PhoneListComponent` uses the Angular 2 `ngModel` directive, located in the `FormsModule`. - Add the `FormsModule` to `NgModule` imports and declare the new `PhoneListComponent` : + Add the `FormsModule` to `NgModule` imports, declare the new `PhoneListComponent` and + finally add it to `entryComponents` since we downgraded it: +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'phonelist', 'app.module.ts') :marked - In the entrypoint file `main.ts` we'll plug this component into the Angular 1 module. - - Instead of registering a component, we register a `phoneList` *directive*, a downgraded version of the Angular 2 component. - The `UpgradeAdapter` creates the bridge between the two: - -+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-list', 'app/main.ts (excerpt)')(format='.') - -:marked - The `as angular.IDirectiveFactory` cast tells the TypeScript compiler - that the return value of the downgrade method is a directive factory. - Remove the <script> tag for the phone list component from `index.html`. Now set the remaining `phone-detail.component.ts` as follows: -+makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts', 'initialclass', 'app/phone-detail/phone-detail.component.ts') ++makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts') :marked This is similar to the phone list component. @@ -1303,14 +1304,11 @@ code-example(format=""). We intend to inject it into the new `PhoneDetailsComponent`. Unfortunately, Angular 1 dependencies are not automatically available to Angular 2 components. - We must use the `UpgradeAdapter` to make the `$routeParams` an Angular 2 provider. - Do that in `main.ts`: + We must use a [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2) + to make `$routeParams` an Angular 2 provider. + Do that in `app.module.ts`: -+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'routeparams', 'app/main.ts ($routeParms)')(format='.') - -.l-sub-section - :marked - Do not register an upgraded Angular 1 provider in the `NgModule`. ++makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'routeparams', 'app/app.module.ts ($routeParms)')(format='.') :marked Convert the phone detail component template into Angular 2 syntax as follows: @@ -1337,24 +1335,17 @@ code-example(format=""). when we try to refer to properties on undefined objects. We need to be explicit about cases where this is expected. - Add this component to the `NgModule` _declarations_: + Add `PhoneDetailComponent` component to the `NgModule` _declarations_ and _entryComponents_: +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'phonedetail', 'app.module.ts') -:marked - In `main.ts` we'll now register a `phoneDetail` directive instead of a - component. The directive is a downgraded version of the `PhoneDetail` Angular 2 - component. - -+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-detail', 'app/main.ts (excerpt)')(format='.') - :marked We should now also remove the phone detail component <script> tag from `index.html`. ### Add the _CheckmarkPipe_ The Angular 1 directive had a `checkmark` _filter_. - Turn that into an Angular 2 **pipe**. + Let's turn that into an Angular 2 **pipe**. There is no upgrade adapter method to convert filters into pipes. You won't miss it. @@ -1457,8 +1448,6 @@ code-example(format=""). Now switch the bootstrap method of the application from the `UpgradeAdapter` to the Angular 2 way. - Because this is a browser application, compiled with the Just-in-Time (JiT) compiler, - use the `platformBrowserDynamic` function to bootstrap the `AppModule`: +makeExample('upgrade-phonecat-3-final/ts/app/main.ts', null, 'main.ts')