
committed by
Miško Hevery

parent
991e665fba
commit
7fb66eca25
@ -169,7 +169,7 @@ Angular supports the following class decorators:
|
||||
|
||||
There are also a list of helper decorators that make the `@Component` and `@Directive` easier to use such as `@Input`, `@Output`, etc.; as well as a set of decorators that help `@Injectable` classes customize the injector such as `@Inject` and `@SkipSelf`.
|
||||
|
||||
Each of the class decorators can be thought of as class transformers that take the declared class and transform it, possibly using information from the helper decorators, to produce an Angular class. The JIT compiler performs this transformation at runtime. The AoT compiler performs this transformation at compile time.
|
||||
Each of the class decorators can be thought of as class transformers that take the declared class and transform it, possibly using information from the helper decorators, to produce an Angular class. The JIT compiler performs this transformation at runtime. The AOT compiler performs this transformation at compile time.
|
||||
|
||||
Each of the class decorators' class transformer creates a corresponding static member on the class that describes to the runtime how to use the class. For example, the `@Component` decorator creates a `ɵcmp` static member, `@Directive` create a `ɵdir`, etc. Internally, these class transformers are called a "Compiler". Most of the compilers are straight forward translations of the metadata specified in the decorator to the information provided in the corresponding definition and, therefore, do not require anything outside the source file to perform the conversion. However, the component, during production builds and for type checking a template require the module scope of the component which requires information from other files in the program.
|
||||
|
||||
|
@ -52,7 +52,7 @@ A tool which "upgrades" `node_module` compiled with non-ivy `ngc` into ivy compl
|
||||
|
||||
## `@angular/core` changes
|
||||
|
||||
The goal is for the `@Component` (and friends) to be the compiler of template. Since decorators are functions which execute during parsing of the `.js` file, the decorator can compile the template into Ivy. The AoT compiler's job is to remove the `@Component` and replace it with call to `ɵɵdefineComponent`.
|
||||
The goal is for the `@Component` (and friends) to be the compiler of template. Since decorators are functions which execute during parsing of the `.js` file, the decorator can compile the template into Ivy. The AOT compiler's job is to remove the `@Component` and replace it with call to `ɵɵdefineComponent`.
|
||||
|
||||
- ✅ `@angular/compiler` can patch itself onto:
|
||||
- ✅ `@Injectable`
|
||||
|
@ -6,7 +6,7 @@
|
||||
* 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 {Component, Directive, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, Output} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||
import {UpgradeComponent, UpgradeModule, downgradeComponent, downgradeInjectable} from '@angular/upgrade/static';
|
||||
@ -176,6 +176,6 @@ ng1AppModule.component('exampleApp', {
|
||||
|
||||
// #docregion bootstrap-ng2
|
||||
// We bootstrap the Angular module as we would do in a normal Angular app.
|
||||
// (We are using the dynamic browser platform as this example has not been compiled AoT.)
|
||||
// (We are using the dynamic browser platform as this example has not been compiled AOT.)
|
||||
platformBrowserDynamic().bootstrapModule(Ng2AppModule);
|
||||
// #enddocregion
|
||||
|
@ -141,7 +141,7 @@ class MyLazyAngularModule {
|
||||
const ng2BootstrapFn = (extraProviders: StaticProvider[]) =>
|
||||
platformBrowserDynamic(extraProviders).bootstrapModule(MyLazyAngularModule);
|
||||
// #enddocregion
|
||||
// (We are using the dynamic browser platform, as this example has not been compiled AoT.)
|
||||
// (We are using the dynamic browser platform, as this example has not been compiled AOT.)
|
||||
|
||||
|
||||
// #docregion basic-how-to
|
||||
|
@ -21,7 +21,7 @@ import {LazyModuleRef, UpgradeAppType, controllerKey, getDowngradedModuleCount,
|
||||
* A helper function that allows an Angular component to be used from AngularJS.
|
||||
*
|
||||
* *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
|
||||
* library for hybrid upgrade apps that support AoT compilation*
|
||||
* library for hybrid upgrade apps that support AOT compilation*
|
||||
*
|
||||
* This helper function returns a factory function to be used for registering
|
||||
* an AngularJS wrapper directive for "downgrading" an Angular component.
|
||||
|
@ -17,7 +17,7 @@ import {getTypeName, isFunction, validateInjectionKey} from './util';
|
||||
* A helper function to allow an Angular service to be accessible from AngularJS.
|
||||
*
|
||||
* *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
|
||||
* library for hybrid upgrade apps that support AoT compilation*
|
||||
* library for hybrid upgrade apps that support AOT compilation*
|
||||
*
|
||||
* This helper function returns a factory function that provides access to the Angular
|
||||
* service identified by the `token` parameter.
|
||||
|
@ -27,7 +27,7 @@ let moduleUid = 0;
|
||||
* instantiated.
|
||||
*
|
||||
* *Part of the [upgrade/static](api?query=upgrade/static) library for hybrid upgrade apps that
|
||||
* support AoT compilation.*
|
||||
* support AOT compilation.*
|
||||
*
|
||||
* It allows loading/bootstrapping the Angular part of a hybrid application lazily and not having to
|
||||
* pay the cost up-front. For example, you can have an AngularJS application that uses Angular for
|
||||
|
@ -33,7 +33,7 @@ class Bindings {
|
||||
* A helper class that allows an AngularJS component to be used from Angular.
|
||||
*
|
||||
* *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
|
||||
* library for hybrid upgrade apps that support AoT compilation.*
|
||||
* library for hybrid upgrade apps that support AOT compilation.*
|
||||
*
|
||||
* This helper class should be used as a base class for creating Angular directives
|
||||
* that wrap AngularJS components that need to be "upgraded".
|
||||
@ -53,7 +53,7 @@ class Bindings {
|
||||
*
|
||||
* In this example you can see that we must derive from the `UpgradeComponent`
|
||||
* base class but also provide an {@link Directive `@Directive`} decorator. This is
|
||||
* because the AoT compiler requires that this information is statically available at
|
||||
* because the AOT compiler requires that this information is statically available at
|
||||
* compile time.
|
||||
*
|
||||
* Note that we must do the following:
|
||||
|
@ -24,10 +24,10 @@ import {NgAdapterInjector} from './util';
|
||||
* and has an instance method used to bootstrap the hybrid upgrade application.
|
||||
*
|
||||
* *Part of the [upgrade/static](api?query=upgrade/static)
|
||||
* library for hybrid upgrade apps that support AoT compilation*
|
||||
* library for hybrid upgrade apps that support AOT compilation*
|
||||
*
|
||||
* The `upgrade/static` package contains helpers that allow AngularJS and Angular components
|
||||
* to be used together inside a hybrid upgrade application, which supports AoT compilation.
|
||||
* to be used together inside a hybrid upgrade application, which supports AOT compilation.
|
||||
*
|
||||
* Specifically, the classes and functions in the `upgrade/static` module allow the following:
|
||||
*
|
||||
|
Reference in New Issue
Block a user