5 lines
160 KiB
JSON
5 lines
160 KiB
JSON
{
|
|
"id": "api/upgrade/UpgradeAdapter",
|
|
"title": "UpgradeAdapter",
|
|
"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/UpgradeAdapter\", \"name\": \"UpgradeAdapter\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/upgrade\">@angular/upgrade</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L21-L637\" 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/dynamic/src/upgrade_adapter.ts#L21-L637\" 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=\"upgradeadapter\">UpgradeAdapter<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#upgradeadapter\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label class\">class</label>\n <label class=\"api-status-label deprecated\">deprecated</label>\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>Use <code><a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a></code> to allow AngularJS and Angular to coexist in a single application.</p>\n\n <p><a href=\"api/upgrade/UpgradeAdapter#description\">See more...</a></p>\n </section>\n \n \n<section class=\"deprecated\">\n <p><strong>Deprecated:</strong> Deprecated since v5. Use <code><a href=\"api/upgrade/static\" class=\"code-anchor\">upgrade/static</a></code> instead, which also supports\n<a href=\"guide/aot-compiler\">Ahead-of-Time compilation</a>.</p>\n\n</section>\n\n \n <section class=\"class-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\nclass <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a> {\n <a class=\"code-anchor\" href=\"api/upgrade/UpgradeAdapter#constructor()\"><span class=\"member-name\">constructor</span>(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions)</a>\n <a class=\"code-anchor\" href=\"api/upgrade/UpgradeAdapter#downgradeNg2Component\"><span class=\"member-name\">downgradeNg2Component</span>(component: Type<any>): Function</a>\n <a class=\"code-anchor\" href=\"api/upgrade/UpgradeAdapter#upgradeNg1Component\"><span class=\"member-name\">upgradeNg1Component</span>(name: string): Type<any></a>\n <a class=\"code-anchor\" href=\"api/upgrade/UpgradeAdapter#registerForNg1Tests\"><span class=\"member-name\">registerForNg1Tests</span>(modules?: string[]): UpgradeAdapterRef</a>\n <a class=\"code-anchor\" href=\"api/upgrade/UpgradeAdapter#bootstrap\"><span class=\"member-name\">bootstrap</span>(element: Element, modules?: any[], config?: IAngularBootstrapConfig): UpgradeAdapterRef</a>\n <a class=\"code-anchor\" href=\"api/upgrade/UpgradeAdapter#upgradeNg1Provider\"><span class=\"member-name\">upgradeNg1Provider</span>(name: string, options?: { asToken: any; })</a>\n <a class=\"code-anchor\" href=\"api/upgrade/UpgradeAdapter#downgradeNg2Provider\"><span class=\"member-name\">downgradeNg2Provider</span>(token: any): Function</a>\n}\n</code-example>\n\n \n \n\n</section>\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/UpgradeAdapter#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>The <code><a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a></code> allows:\n1. creation of Angular component from AngularJS component directive\n(See [UpgradeAdapter#upgradeNg1Component()])\n2. creation of AngularJS directive from Angular component.\n(See [UpgradeAdapter#downgradeNg2Component()])\n3. Bootstrapping of a hybrid Angular application which contains both of the frameworks\ncoexisting in a single application.</p>\n\n <p>Further information available in the <a href=\"api/upgrade/UpgradeAdapter#usage-notes\">Usage Notes</a>...</p>\n</section>\n\n \n\n\n\n\n\n\n<h2 id=\"constructor\">Constructor<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#constructor\"><i class=\"material-icons\">link</i></a></h2>\n<a id=\"constructor()\"></a>\n<table class=\"is-full-width method-table constructor\">\n \n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">constructor</span>(ng2AppModule: <a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any>, compilerOptions?: <a href=\"api/core/CompilerOptions\" class=\"code-anchor\">CompilerOptions</a>)</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table constructor-overload-parameters\">\n <tbody>\n \n <tr class=\"constructor-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>ng2AppModule</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any></any></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n <tr class=\"constructor-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>compilerOptions</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/core/CompilerOptions\" class=\"code-anchor\">CompilerOptions</a></code></td>\n <td class=\"param-description\">\n <p>Optional. Default is <code>undefined</code>.</p>\n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n\n\n\n\n\n\n\n<section class=\"instance-methods\">\n <h2 id=\"methods\">Methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"downgradeNg2Component\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"downgradeng2component\">\n downgradeNg2Component()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#downgradeng2component\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L131-L196\" 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/dynamic/src/upgrade_adapter.ts#L131-L196\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Allows Angular Component to be used from AngularJS.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">downgradeNg2Component</span>(component: <a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any>): Function</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-1\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>component</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any></any></code></td>\n <td class=\"param-description\">\n \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></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n <tr>\n <td class=\"description\">\n <p>Use <code>downgradeNg2Component</code> to create an AngularJS Directive Definition Factory from\nAngular Component. The adapter will bootstrap Angular component from within the\nAngularJS template.</p>\n\n </td>\n </tr>\n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"downgradeNg2Component-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#downgradeNg2Component-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"mental-model\">Mental Model<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#mental-model\"><i class=\"material-icons\">link</i></a></h5>\n<ol>\n<li>The component is instantiated by being listed in AngularJS template. This means that the\nhost element is controlled by AngularJS, but the component's view will be controlled by\nAngular.</li>\n<li>Even thought the component is instantiated in AngularJS, it will be using Angular\nsyntax. This has to be done, this way because we must follow Angular components do not\ndeclare how the attributes should be interpreted.</li>\n<li><code>ng-model</code> is controlled by AngularJS and communicates with the downgraded Angular component\nby way of the <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> interface from @angular/forms. Only components that\nimplement this interface are eligible.</li>\n</ol>\n<h5 id=\"supported-features\">Supported Features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#supported-features\"><i class=\"material-icons\">link</i></a></h5>\n<ul>\n<li>\n<p>Bindings:</p>\n<ul>\n<li>Attribute: <code><comp name=\"World\"></code></li>\n<li>Interpolation: <code><comp greeting=\"Hello {{name}}!\"></code></li>\n<li>Expression: <code><comp [name]=\"username\"></code></li>\n<li>Event: <code><comp (close)=\"doSomething()\"></code></li>\n<li>ng-model: <code><comp ng-model=\"name\"></code></li>\n</ul>\n</li>\n<li>Content projection: yes</li>\n</ul>\n<h5 id=\"example\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#example\"><i class=\"material-icons\">link</i></a></h5>\n<code-example>\nconst adapter = new <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a>(<a href=\"api/core/forwardRef\" class=\"code-anchor\">forwardRef</a>(() => MyNg2Module));\nconst module = angular.module('myExample', []);\nmodule.directive('greet', adapter.downgradeNg2Component(Greeter));\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'greet',\n template: '{{salutation}} {{name}}! - <ng-content></ng-content>'\n})\nclass Greeter {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() salutation: string;\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() name: string;\n}\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [Greeter],\n imports: [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>]\n})\nclass MyNg2Module {}\n\ndocument.body.innerHTML =\n 'ng1 template: <greet salutation=\"Hello\" [name]=\"world\">text</greet>';\n\nadapter.bootstrap(document.body, ['myExample']).ready(function() {\n expect(document.body.textContent).toEqual(\"ng1 template: Hello world! - text\");\n});\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"upgradeNg1Component\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"upgradeng1component\">\n upgradeNg1Component()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#upgradeng1component\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L197-L283\" 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/dynamic/src/upgrade_adapter.ts#L197-L283\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Allows AngularJS Component to be used from Angular.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">upgradeNg1Component</span>(name: string): <a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-2\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>name</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-1\">Returns</h6>\n <p><code><a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any></code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n <tr>\n <td class=\"description\">\n <p>Use <code>upgradeNg1Component</code> to create an Angular component from AngularJS Component\ndirective. The adapter will bootstrap AngularJS component from within the Angular\ntemplate.</p>\n\n </td>\n </tr>\n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"upgradeNg1Component-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#upgradeNg1Component-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"mental-model-1\">Mental Model<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#mental-model-1\"><i class=\"material-icons\">link</i></a></h5>\n<ol>\n<li>The component is instantiated by being listed in Angular template. This means that the\nhost element is controlled by Angular, but the component's view will be controlled by\nAngularJS.</li>\n</ol>\n<h5 id=\"supported-features-1\">Supported Features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#supported-features-1\"><i class=\"material-icons\">link</i></a></h5>\n<ul>\n<li>\n<p>Bindings:</p>\n<ul>\n<li>Attribute: <code><comp name=\"World\"></code></li>\n<li>Interpolation: <code><comp greeting=\"Hello {{name}}!\"></code></li>\n<li>Expression: <code><comp [name]=\"username\"></code></li>\n<li>Event: <code><comp (close)=\"doSomething()\"></code></li>\n</ul>\n</li>\n<li>Transclusion: yes</li>\n<li>\n<p>Only some of the features of\n<a href=\"https://docs.angularjs.org/api/ng/service/$compile\">Directive Definition Object</a> are\nsupported:</p>\n<ul>\n<li><code>compile</code>: not supported because the host element is owned by Angular, which does\nnot allow modifying DOM structure during compilation.</li>\n<li><code>controller</code>: supported. (NOTE: injection of <code>$attrs</code> and <code>$transclude</code> is not supported.)</li>\n<li><code>controllerAs</code>: supported.</li>\n<li><code>bindToController</code>: supported.</li>\n<li><code>link</code>: supported. (NOTE: only pre-link function is supported.)</li>\n<li><code>name</code>: supported.</li>\n<li><code>priority</code>: ignored.</li>\n<li><code>replace</code>: not supported.</li>\n<li><code>require</code>: supported.</li>\n<li><code>restrict</code>: must be set to 'E'.</li>\n<li><code>scope</code>: supported.</li>\n<li><code>template</code>: supported.</li>\n<li><code>templateUrl</code>: supported.</li>\n<li><code>terminal</code>: ignored.</li>\n<li><code>transclude</code>: supported.</li>\n</ul>\n</li>\n</ul>\n<h5 id=\"example-1\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#example-1\"><i class=\"material-icons\">link</i></a></h5>\n<code-example>\nconst adapter = new <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a>(<a href=\"api/core/forwardRef\" class=\"code-anchor\">forwardRef</a>(() => MyNg2Module));\nconst module = angular.module('myExample', []);\n\nmodule.directive('greet', function() {\n return {\n scope: {salutation: '=', name: '=' },\n template: '{{salutation}} {{name}}! - <span ng-transclude></span>'\n };\n});\n\nmodule.directive('ng2', adapter.downgradeNg2Component(Ng2Component));\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng2',\n template: 'ng2 template: <greet salutation=\"Hello\" [name]=\"world\">text</greet>'\n})\nclass Ng2Component {\n}\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [Ng2Component, adapter.upgradeNg1Component('greet')],\n imports: [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>]\n})\nclass MyNg2Module {}\n\ndocument.body.innerHTML = '<ng2></ng2>';\n\nadapter.bootstrap(document.body, ['myExample']).ready(function() {\n expect(document.body.textContent).toEqual(\"ng2 template: Hello world! - text\");\n});\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"registerForNg1Tests\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"registerforng1tests\">\n registerForNg1Tests()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#registerforng1tests\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L284-L339\" 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/dynamic/src/upgrade_adapter.ts#L284-L339\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Registers the adapter's AngularJS upgrade module for unit testing in AngularJS.\nUse this instead of <code>angular.mock.module()</code> to load the upgrade module into\nthe AngularJS testing injector.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">registerForNg1Tests</span>(modules?: string[]): <a href=\"api/upgrade/UpgradeAdapterRef\" class=\"code-anchor\">UpgradeAdapterRef</a></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-3\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>modules</code>\n </td>\n <td class=\"param-type\"><code>string[]</code></td>\n <td class=\"param-description\">\n <p>any AngularJS modules that the upgrade module should depend upon</p>\n<p> Optional. Default is <code>undefined</code>.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-2\">Returns</h6>\n <p><code><a href=\"api/upgrade/UpgradeAdapterRef\" class=\"code-anchor\">UpgradeAdapterRef</a></code>: an <code><a href=\"api/upgrade/UpgradeAdapterRef\" class=\"code-anchor\">UpgradeAdapterRef</a></code>, which lets you register a <code>ready()</code> callback to\nrun assertions once the Angular components are ready to test through AngularJS.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"registerForNg1Tests-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#registerForNg1Tests-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"example-2\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#example-2\"><i class=\"material-icons\">link</i></a></h5>\n<code-example>\nconst upgradeAdapter = new <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a>(MyNg2Module);\n\n// configure the adapter with upgrade/downgrade components and services\nupgradeAdapter.downgradeNg2Component(MyComponent);\n\nlet upgradeAdapterRef: <a href=\"api/upgrade/UpgradeAdapterRef\" class=\"code-anchor\">UpgradeAdapterRef</a>;\nlet $compile, $rootScope;\n\n// We must register the adapter before any calls to `inject()`\nbeforeEach(() => {\n upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(['heroApp']);\n});\n\nbeforeEach(inject((_$compile_, _$rootScope_) => {\n $compile = _$compile_;\n $rootScope = _$rootScope_;\n}));\n\nit(\"says hello\", (done) => {\n upgradeAdapterRef.ready(() => {\n const element = $compile(\"<my-component></my-component>\")($rootScope);\n $rootScope.$apply();\n expect(element.html()).toContain(\"Hello World\");\n done();\n })\n});\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"bootstrap\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"bootstrap\">\n bootstrap()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#bootstrap\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L340-L420\" 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/dynamic/src/upgrade_adapter.ts#L340-L420\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Bootstrap a hybrid AngularJS / Angular application.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">bootstrap</span>(element: Element, modules?: any[], config?: IAngularBootstrapConfig): <a href=\"api/upgrade/UpgradeAdapterRef\" class=\"code-anchor\">UpgradeAdapterRef</a></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-4\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>element</code>\n </td>\n <td class=\"param-type\"><code>Element</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>modules</code>\n </td>\n <td class=\"param-type\"><code>any[]</code></td>\n <td class=\"param-description\">\n <p>Optional. Default is <code>undefined</code>.</p>\n \n </td>\n </tr>\n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>config</code>\n </td>\n <td class=\"param-type\"><code>IAngularBootstrapConfig</code></td>\n <td class=\"param-description\">\n <p>Optional. Default is <code>undefined</code>.</p>\n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-3\">Returns</h6>\n <p><code><a href=\"api/upgrade/UpgradeAdapterRef\" class=\"code-anchor\">UpgradeAdapterRef</a></code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n <tr>\n <td class=\"description\">\n <p>This <code>bootstrap</code> method is a direct replacement (takes same arguments) for AngularJS\n<a href=\"https://docs.angularjs.org/api/ng/function/angular.bootstrap\"><code>bootstrap</code></a> method. Unlike\nAngularJS, this bootstrap is asynchronous.</p>\n\n </td>\n </tr>\n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"bootstrap-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#bootstrap-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"example-3\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#example-3\"><i class=\"material-icons\">link</i></a></h5>\n<code-example>\nconst adapter = new <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a>(MyNg2Module);\nconst module = angular.module('myExample', []);\nmodule.directive('ng2', adapter.downgradeNg2Component(Ng2));\n\nmodule.directive('ng1', function() {\n return {\n scope: { title: '=' },\n template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'\n };\n});\n\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng2',\n inputs: ['name'],\n template: 'ng2[<ng1 [title]=\"name\">transclude</ng1>](<ng-content></ng-content>)'\n})\nclass Ng2 {\n}\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [Ng2, adapter.upgradeNg1Component('ng1')],\n imports: [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>]\n})\nclass MyNg2Module {}\n\ndocument.body.innerHTML = '<ng2 name=\"World\">project</ng2>';\n\nadapter.bootstrap(document.body, ['myExample']).ready(function() {\n expect(document.body.textContent).toEqual(\n \"ng2[ng1[Hello World!](transclude)](project)\");\n});\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"upgradeNg1Provider\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"upgradeng1provider\">\n upgradeNg1Provider()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#upgradeng1provider\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L421-L460\" 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/dynamic/src/upgrade_adapter.ts#L421-L460\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Allows AngularJS service to be accessible from Angular.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">upgradeNg1Provider</span>(name: string, options?: { asToken: any; })</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-5\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>name</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>options</code>\n </td>\n <td class=\"param-type\"><code>{ asToken: any; }</code></td>\n <td class=\"param-description\">\n <p>Optional. Default is <code>undefined</code>.</p>\n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"upgradeNg1Provider-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#upgradeNg1Provider-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"example-4\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#example-4\"><i class=\"material-icons\">link</i></a></h5>\n<code-example>\nclass Login { ... }\nclass Server { ... }\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nclass Example {\n constructor(@<a href=\"api/core/Inject\" class=\"code-anchor\">Inject</a>('server') server, login: Login) {\n ...\n }\n}\n\nconst module = angular.module('myExample', []);\nmodule.service('server', Server);\nmodule.service('login', Login);\n\nconst adapter = new <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a>(MyNg2Module);\nadapter.upgradeNg1Provider('server');\nadapter.upgradeNg1Provider('login', {asToken: Login});\n\nadapter.bootstrap(document.body, ['myExample']).ready((ref) => {\n const example: Example = ref.ng2Injector.get(Example);\n});\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"downgradeNg2Provider\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"downgradeng2provider\">\n downgradeNg2Provider()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#downgradeng2provider\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L461-L485\" 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/dynamic/src/upgrade_adapter.ts#L461-L485\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Allows Angular service to be accessible from AngularJS.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">downgradeNg2Provider</span>(token: any): Function</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-6\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-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 \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-4\">Returns</h6>\n <p><code>Function</code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"downgradeNg2Provider-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#downgradeNg2Provider-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"example-5\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#example-5\"><i class=\"material-icons\">link</i></a></h5>\n<code-example>\nclass Example {\n}\n\nconst adapter = new <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a>(MyNg2Module);\n\nconst module = angular.module('myExample', []);\nmodule.factory('example', adapter.downgradeNg2Provider(Example));\n\nadapter.bootstrap(document.body, ['myExample']).ready((ref) => {\n const example: Example = ref.ng1Injector.get('example');\n});\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \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/UpgradeAdapter#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <h3 id=\"mental-model-2\">Mental Model<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#mental-model-2\"><i class=\"material-icons\">link</i></a></h3>\n<p>When reasoning about how a hybrid application works it is useful to have a mental model which\ndescribes what is happening and explains what is happening at the lowest level.</p>\n<ol>\n<li>There are two independent frameworks running in a single application, each framework treats\nthe other as a black box.</li>\n<li>Each DOM element on the page is owned exactly by one framework. Whichever framework\ninstantiated the element is the owner. Each framework only updates/interacts with its own\nDOM elements and ignores others.</li>\n<li>AngularJS directives always execute inside AngularJS framework codebase regardless of\nwhere they are instantiated.</li>\n<li>Angular components always execute inside Angular framework codebase regardless of\nwhere they are instantiated.</li>\n<li>An AngularJS component can be upgraded to an Angular component. This creates an\nAngular directive, which bootstraps the AngularJS component directive in that location.</li>\n<li>An Angular component can be downgraded to an AngularJS component directive. This creates\nan AngularJS directive, which bootstraps the Angular component in that location.</li>\n<li>Whenever an adapter component is instantiated the host element is owned by the framework\ndoing the instantiation. The other framework then instantiates and owns the view for that\ncomponent. This implies that component bindings will always follow the semantics of the\ninstantiation framework. The syntax is always that of Angular syntax.</li>\n<li>AngularJS is always bootstrapped first and owns the bottom most view.</li>\n<li>The new application is running in Angular zone, and therefore it no longer needs calls to\n<code>$apply()</code>.</li>\n</ol>\n<h3 id=\"example-6\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/upgrade/UpgradeAdapter#example-6\"><i class=\"material-icons\">link</i></a></h3>\n<code-example>\nconst adapter = new <a href=\"api/upgrade/UpgradeAdapter\" class=\"code-anchor\">UpgradeAdapter</a>(<a href=\"api/core/forwardRef\" class=\"code-anchor\">forwardRef</a>(() => MyNg2Module), myCompilerOptions);\nconst module = angular.module('myExample', []);\nmodule.directive('ng2Comp', adapter.downgradeNg2Component(Ng2Component));\n\nmodule.directive('ng1Hello', function() {\n return {\n scope: { title: '=' },\n template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'\n };\n});\n\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng2-comp',\n inputs: ['name'],\n template: 'ng2[<ng1-hello [title]=\"name\">transclude</ng1-hello>](<ng-content></ng-content>)',\n directives:\n})\nclass Ng2Component {\n}\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],\n imports: [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>]\n})\nclass MyNg2Module {}\n\n\ndocument.body.innerHTML = '<ng2-comp name=\"World\">project</ng2-comp>';\n\nadapter.bootstrap(document.body, ['myExample']).ready(function() {\n expect(document.body.textContent).toEqual(\n \"ng2[ng1[Hello World!](transclude)](project)\");\n});\n</code-example>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/upgrade\n-->\n<!-- links from this doc:\n - /api\n - api/core/CompilerOptions\n - api/core/Component\n - api/core/Inject\n - api/core/Injectable\n - api/core/Input\n - api/core/NgModule\n - api/core/Type\n - api/core/forwardRef\n - api/forms/ControlValueAccessor\n - api/platform-browser/BrowserModule\n - api/upgrade\n - api/upgrade/UpgradeAdapter#bootstrap\n - api/upgrade/UpgradeAdapter#bootstrap-usage-notes\n - api/upgrade/UpgradeAdapter#constructor\n - api/upgrade/UpgradeAdapter#constructor()\n - api/upgrade/UpgradeAdapter#description\n - api/upgrade/UpgradeAdapter#downgradeNg2Component\n - api/upgrade/UpgradeAdapter#downgradeNg2Component-usage-notes\n - api/upgrade/UpgradeAdapter#downgradeNg2Provider\n - api/upgrade/UpgradeAdapter#downgradeNg2Provider-usage-notes\n - api/upgrade/UpgradeAdapter#downgradeng2component\n - api/upgrade/UpgradeAdapter#downgradeng2provider\n - api/upgrade/UpgradeAdapter#example\n - api/upgrade/UpgradeAdapter#example-1\n - api/upgrade/UpgradeAdapter#example-2\n - api/upgrade/UpgradeAdapter#example-3\n - api/upgrade/UpgradeAdapter#example-4\n - api/upgrade/UpgradeAdapter#example-5\n - api/upgrade/UpgradeAdapter#example-6\n - api/upgrade/UpgradeAdapter#mental-model\n - api/upgrade/UpgradeAdapter#mental-model-1\n - api/upgrade/UpgradeAdapter#mental-model-2\n - api/upgrade/UpgradeAdapter#methods\n - api/upgrade/UpgradeAdapter#registerForNg1Tests\n - api/upgrade/UpgradeAdapter#registerForNg1Tests-usage-notes\n - api/upgrade/UpgradeAdapter#registerforng1tests\n - api/upgrade/UpgradeAdapter#supported-features\n - api/upgrade/UpgradeAdapter#supported-features-1\n - api/upgrade/UpgradeAdapter#upgradeNg1Component\n - api/upgrade/UpgradeAdapter#upgradeNg1Component-usage-notes\n - api/upgrade/UpgradeAdapter#upgradeNg1Provider\n - api/upgrade/UpgradeAdapter#upgradeNg1Provider-usage-notes\n - api/upgrade/UpgradeAdapter#upgradeadapter\n - api/upgrade/UpgradeAdapter#upgradeng1component\n - api/upgrade/UpgradeAdapter#upgradeng1provider\n - api/upgrade/UpgradeAdapter#usage-notes\n - api/upgrade/UpgradeAdapterRef\n - api/upgrade/static\n - guide/aot-compiler\n - https://docs.angularjs.org/api/ng/function/angular.bootstrap\n - https://docs.angularjs.org/api/ng/service/$compile\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L131-L196\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L197-L283\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L21-L637\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L284-L339\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L340-L420\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L421-L460\n - https://github.com/angular/angular/edit/master/packages/upgrade/src/dynamic/src/upgrade_adapter.ts?message=docs(upgrade)%3A%20describe%20your%20change...#L461-L485\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/dynamic/src/upgrade_adapter.ts#L131-L196\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/dynamic/src/upgrade_adapter.ts#L197-L283\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/dynamic/src/upgrade_adapter.ts#L21-L637\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/dynamic/src/upgrade_adapter.ts#L284-L339\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/dynamic/src/upgrade_adapter.ts#L340-L420\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/dynamic/src/upgrade_adapter.ts#L421-L460\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/upgrade/src/dynamic/src/upgrade_adapter.ts#L461-L485\n-->"
|
|
} |