5 lines
12 KiB
JSON
5 lines
12 KiB
JSON
{
|
|
"id": "api/upgrade/static/downgradeInjectable",
|
|
"title": "downgradeInjectable",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/upgrade\", \"name\": \"@angular/upgrade\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/upgrade/static\", \"name\": \"@angular/upgrade/static\" } },\n { \"@type\": \"ListItem\", \"position\": 4, \"item\": { \"@id\": \"https://angular.io/api/upgrade/static/downgradeInjectable\", \"name\": \"downgradeInjectable\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/upgrade\">@angular/upgrade</a> > <a href=\"api/upgrade/static\">@angular/upgrade/static</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/common/src/downgrade_injectable.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L13-L92\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/common/src/downgrade_injectable.ts#L13-L92\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"downgradeinjectable\">downgradeInjectable<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/downgradeInjectable#downgradeinjectable\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label function\">function</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>A helper function to allow an Angular service to be accessible from AngularJS.</p>\n\n <p><a href=\"api/upgrade/static/downgradeInjectable#description\">See more...</a></p>\n </section>\n \n \n \n\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"> <span class=\"member-name\"><a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a></span>(token: any, downgradedModule: string = ''): Function</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table function-overload-parameters\">\n <tbody>\n \n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>token</code>\n </td>\n <td class=\"param-type\"><code>any</code></td>\n <td class=\"param-description\">\n <p>an <code><a href=\"api/core/InjectionToken\" class=\"code-anchor\">InjectionToken</a></code> that identifies a service provided from Angular.</p>\n\n </td>\n </tr>\n <tr class=\"function-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>downgradedModule</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n <p>the name of the downgraded module (if any) that the injectable\n\"belongs to\", as returned by a call to <code><a href=\"api/upgrade/static/downgradeModule\" class=\"code-anchor\">downgradeModule</a>()</code>. It is the module, whose injector will\nbe used for instantiating the injectable.<br>\n(This option is only necessary when using <code><a href=\"api/upgrade/static/downgradeModule\" class=\"code-anchor\">downgradeModule</a>()</code> to downgrade more than one Angular\nmodule.)</p>\n<p> Optional. Default is <code>''</code>.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code>Function</code>: a <a href=\"https://docs.angularjs.org/guide/di\">factory function</a> that can be\nused to register the service on an AngularJS module.</p>\n\n \n\n\n \n\n \n</div>\n\n\n \n\n \n\n<section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/downgradeInjectable#description\"><i class=\"material-icons\">link</i></a></h2>\n <p><em>Part of the <a href=\"api?query=upgrade%2Fstatic\">upgrade/static</a>\nlibrary for hybrid upgrade apps that support AOT compilation</em></p>\n<p>This helper function returns a factory function that provides access to the Angular\nservice identified by the <code>token</code> parameter.</p>\n\n <p>Further information available in the <a href=\"api/upgrade/static/downgradeInjectable#usage-notes\">Usage Notes</a>...</p>\n</section>\n\n\n\n \n<section class=\"usage-notes\">\n <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/downgradeInjectable#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <h3 id=\"examples\">Examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/static/downgradeInjectable#examples\"><i class=\"material-icons\">link</i></a></h3>\n<p>First ensure that the service to be downgraded is provided in an <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>\nthat will be part of the upgrade application. For example, let's assume we have\ndefined <code>HeroesService</code></p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"ng2-heroes-service\">\n// This Angular service will be \"downgraded\" to be used in AngularJS\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class HeroesService {\n heroes: Hero[] = [\n {name: 'superman', description: 'The man of steel'},\n {name: 'wonder woman', description: 'Princess of the Amazons'},\n {name: 'thor', description: 'The hammer-wielding god'}\n ];\n\n constructor(textFormatter: TextFormatter) {\n // Change all the hero names to title case, using the \"upgraded\" AngularJS service\n this.heroes.forEach((hero: Hero) => hero.name = textFormatter.titleCase(hero.name));\n }\n\n addHero() {\n this.heroes =\n this.heroes.concat([{name: 'Kamala Khan', description: 'Epic shape-shifting healer'}]);\n }\n\n removeHero(hero: Hero) {\n this.heroes = this.heroes.filter((item: Hero) => item !== hero);\n }\n}\n\n</code-example>\n<p>and that we have included this in our upgrade app <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code></p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"ng2-module\">\n// This <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> represents the Angular pieces of the application\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],\n providers: [\n HeroesService,\n // Register an Angular provider whose value is the \"upgraded\" AngularJS service\n {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']}\n ],\n // All components that are to be \"downgraded\" must be declared as `entryComponents`\n entryComponents: [Ng2HeroesComponent],\n // We must import `<a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>` to get access to the AngularJS core services\n imports: [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>, <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>]\n})\nexport class Ng2AppModule {\n}\n\n</code-example>\n<p>Now we can register the <code><a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a></code> factory function for the service\non an AngularJS module.</p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"downgrade-ng2-heroes-service\">\n// Register an AngularJS service, whose value is the \"downgraded\" Angular injectable.\nng1AppModule.factory('heroesService', <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>(HeroesService) as any);\n\n</code-example>\n<p>Inside an AngularJS component's controller we can get hold of the\ndowngraded service via the name we gave when downgrading.</p>\n<code-example path=\"upgrade/static/ts/full/module.ts\" region=\"example-app\">\n// This is our top level application component\nng1AppModule.component('exampleApp', {\n // We inject the \"downgraded\" HeroesService into this AngularJS component\n // (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript\n // compilation)\n controller: [\n 'heroesService',\n function(heroesService: HeroesService) {\n this.heroesService = heroesService;\n }\n ],\n // This template makes use of the downgraded `ng2-heroes` component\n // Note that because its element is compiled by AngularJS we must use kebab-case attributes\n // for inputs and outputs\n template: `<link rel=\"stylesheet\" href=\"./styles.css\">\n <ng2-heroes [heroes]=\"$ctrl.heroesService.heroes\" (add-hero)=\"$ctrl.heroesService.addHero()\" (remove-hero)=\"$ctrl.heroesService.removeHero($event)\">\n <h1>Heroes</h1>\n <p class=\"extra\">There are {{ $ctrl.heroesService.heroes.length }} heroes.</p>\n </ng2-heroes>`\n});\n\n</code-example>\n<div class=\"alert is-important\">\n<p> When using <code><a href=\"api/upgrade/static/downgradeModule\" class=\"code-anchor\">downgradeModule</a>()</code>, downgraded injectables will not be available until the Angular\nmodule that provides them is instantiated. In order to be safe, you need to ensure that the\ndowngraded injectables are not used anywhere <em>outside</em> the part of the app where it is\nguaranteed that their module has been instantiated.</p>\n<p> For example, it is <em>OK</em> to use a downgraded service in an upgraded component that is only used\nfrom a downgraded Angular component provided by the same Angular module as the injectable, but\nit is <em>not OK</em> to use it in an AngularJS component that may be used independently of Angular or\nuse it in a downgraded Angular component from a different module.</p>\n</div>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/upgrade/static\n - api/upgrade/static/UpgradeModule\n - api/upgrade/static/downgradeModule\n - api/upgrade/static/testing/createAngularJSTestingModule\n - api/upgrade/static/testing/createAngularTestingModule\n - guide/upgrade\n - guide/upgrade-performance\n-->\n<!-- links from this doc:\n - /api\n - api/core/Injectable\n - api/core/InjectionToken\n - api/core/NgModule\n - api/platform-browser/BrowserModule\n - api/upgrade\n - api/upgrade/static\n - api/upgrade/static/UpgradeModule\n - api/upgrade/static/downgradeInjectable#description\n - api/upgrade/static/downgradeInjectable#downgradeinjectable\n - api/upgrade/static/downgradeInjectable#examples\n - api/upgrade/static/downgradeInjectable#usage-notes\n - api/upgrade/static/downgradeModule\n - api?query=upgrade%2Fstatic\n - https://docs.angularjs.org/guide/di\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/common/src/downgrade_injectable.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L13-L92\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/common/src/downgrade_injectable.ts#L13-L92\n-->"
|
|
} |