honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(upgrade): use a class for upgraded service (#18487) (#18487) 

This makes the resulting use in Angular more ideomatic, since we can just
use the class type as the injection indicator.

PR Close #18487

PR Close #18487
This commit is contained in:
Peter Bacon Darwin 2017-08-17 13:56:04 +01:00 committed by Jason Aden
parent 4258c3d1df
commit bb6b59128f
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/examples/upgrade/static/ts/full/module.ts
View File

@ -5,7 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
// #docplaster
import {Component, Directive, ElementRef, EventEmitter, Inject, Injectable, Injector, Input, NgModule, Output} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@ -18,6 +18,12 @@ interface Hero {
description: string;
}
// #docregion ng1-text-formatter-service
class TextFormatter {
titleCase(value: string) { return value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase()); }
}
// #enddocregion
// #docregion Angular Stuff
// #docregion ng2-heroes
// This Angular component will be "downgraded" to be used in AngularJS
@ -51,9 +57,9 @@ class HeroesService {
];
// #docregion use-ng1-upgraded-service
constructor(@Inject('titleCase') titleCase: (v: string) => string) {
constructor(textFormatter: TextFormatter) {
// Change all the hero names to title case, using the "upgraded" AngularJS service
this.heroes.forEach((hero: Hero) => hero.name = titleCase(hero.name));
this.heroes.forEach((hero: Hero) => hero.name = textFormatter.titleCase(hero.name));
}
// #enddocregion
@ -92,7 +98,7 @@ class Ng1HeroComponentWrapper extends UpgradeComponent {
HeroesService,
// #docregion upgrade-ng1-service
// Register an Angular provider whose value is the "upgraded" AngularJS service
{provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}
{provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']}
// #enddocregion
],
// All components that are to be "downgraded" must be declared as `entryComponents`
@ -134,11 +140,9 @@ ng1AppModule.component('ng1Hero', {
});
// #enddocregion
// #docregion ng1-title-case-service
// #docregion ng1-text-formatter-service
// This AngularJS service will be "upgraded" to be used in Angular
ng1AppModule.factory(
'titleCase',
() => (value: string) => value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase()));
ng1AppModule.service('textFormatter', [TextFormatter]);
// #enddocregion
// #docregion downgrade-ng2-heroes-service

2
packages/upgrade/src/static/upgrade_module.ts
View File

@ -127,7 +127,7 @@ import {NgAdapterInjector} from './util';
*
* Let's say you have an AngularJS service:
*
* {@example upgrade/static/ts/full/module.ts region="ng1-title-case-service"}
* {@example upgrade/static/ts/full/module.ts region="ng1-text-formatter-service"}
*
* Then you should define an Angular provider to be included in your `NgModule` `providers`
* property.