+
+
### Bindings/interpolation
Your favorite hero is: {{vm.favoriteHero}}
- In AngularJS, an expression in curly braces denotes one-way binding.
- This binds the value of the element to a property in the controller
- associated with this template.
-
- When using the `controller as` syntax,
- the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you
- have to be specific about the source of the binding.
+
+
+ In AngularJS, an expression in curly braces denotes one-way binding.
+ This binds the value of the element to a property in the controller
+ associated with this template.
+
+ When using the `controller as` syntax,
+ the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you
+ have to be specific about the source of the binding.
+
+
### Bindings/interpolation
-
+
- In Angular, a template expression in curly braces still denotes one-way binding.
- This binds the value of the element to a property of the component.
- The context of the binding is implied and is always the
- associated component, so it needs no reference variable.
-
- For more information, see the [Interpolation](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
+
+
+ In Angular, a template expression in curly braces still denotes one-way binding.
+ This binds the value of the element to a property of the component.
+ The context of the binding is implied and is always the
+ associated component, so it needs no reference variable.
+
+ For more information, see the [Interpolation](guide/template-syntax#interpolation)
+ section of the [Template Syntax](guide/template-syntax) page.
@@ -89,25 +103,33 @@ The following table lists some of the key AngularJS template features with their
+
+
### Filters
<td>{{movie.title | uppercase}}</td>
- To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
-
- This example filters the `title` property to uppercase.
+
+
+ To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
+
+ This example filters the `title` property to uppercase.
+
+
### Pipes
-
+
- In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**.
- Many (but not all) of the built-in filters from AngularJS are
- built-in pipes in Angular.
-
- For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below.
+
+
+ In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**.
+ Many (but not all) of the built-in filters from AngularJS are
+ built-in pipes in Angular.
+
+ For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below.
@@ -115,32 +137,44 @@ The following table lists some of the key AngularJS template features with their
+
+
### Local variables
- <tr ng-repeat="movie in vm.movies">
- <td>{{movie.title}}</td>
- </tr>
+ <tr ng-repeat="movie in vm.movies">
+ <td>{{movie.title}}</td>
+ </tr>
+
+
Here, `movie` is a user-defined local variable.
+
+
### Input variables
-
+
- Angular has true template input variables that are explicitly defined using the `let` keyword.
-
- For more information, see the [ngFor micro-syntax](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
+
+
+ Angular has true template input variables that are explicitly defined using the `let` keyword.
+
+ For more information, see the [ngFor micro-syntax](guide/template-syntax#microsyntax)
+ section of the [Template Syntax](guide/template-syntax) page.
+
+
[Back to top](guide/ajs-quick-reference#top)
+
+
## Template directives
AngularJS provides more than seventy built-in directives for templates.
Many of them aren't needed in Angular because of its more capable and expressive binding system.
@@ -172,32 +206,40 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-app
<body ng-app="movieHunter">
- The application startup process is called **bootstrapping**.
-
- Although you can bootstrap an AngularJS app in code,
- many applications bootstrap declaratively with the `ng-app` directive,
- giving it the name of the application's module (`movieHunter`).
+
+
+ The application startup process is called **bootstrapping**.
+
+ Although you can bootstrap an AngularJS app in code,
+ many applications bootstrap declaratively with the `ng-app` directive,
+ giving it the name of the application's module (`movieHunter`).
+
+
### Bootstrapping
-
+
-
+
- Angular doesn't have a bootstrap directive.
- To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
- in `main.ts`
- and the application's root component (`AppComponent`) in `app.module.ts`.
-
- For more information see the [Setup](guide/setup) page.
+
+
+ Angular doesn't have a bootstrap directive.
+ To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
+ in `main.ts`
+ and the application's root component (`AppComponent`) in `app.module.ts`.
+
+ For more information see the [Setup](guide/setup) page.
@@ -205,40 +247,48 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-class
- <div ng-class="{active: isActive}">
- <div ng-class="{active: isActive,
- shazam: isImportant}">
+ <div ng-class="{active: isActive}">
+ <div ng-class="{active: isActive,
+ shazam: isImportant}">
- In AngularJS, the `ng-class` directive includes/excludes CSS classes
- based on an expression. That expression is often a key-value control object with each
- key of the object defined as a CSS class name, and each value defined as a template expression
- that evaluates to a Boolean value.
-
- In the first example, the `active` class is applied to the element if `isActive` is true.
-
- You can specify multiple classes, as shown in the second example.
+
+
+ In AngularJS, the `ng-class` directive includes/excludes CSS classes
+ based on an expression. That expression is often a key-value control object with each
+ key of the object defined as a CSS class name, and each value defined as a template expression
+ that evaluates to a Boolean value.
+
+ In the first example, the `active` class is applied to the element if `isActive` is true.
+
+ You can specify multiple classes, as shown in the second example.
+
+
### ngClass
-
+
- In Angular, the `ngClass` directive works similarly.
- It includes/excludes CSS classes based on an expression.
-
- In the first example, the `active` class is applied to the element if `isActive` is true.
-
- You can specify multiple classes, as shown in the second example.
-
- Angular also has **class binding**, which is a good way to add or remove a single class,
- as shown in the third example.
-
- For more information see the [Attribute, class, and style bindings](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
-
+
+
+ In Angular, the `ngClass` directive works similarly.
+ It includes/excludes CSS classes based on an expression.
+
+ In the first example, the `active` class is applied to the element if `isActive` is true.
+
+ You can specify multiple classes, as shown in the second example.
+
+ Angular also has **class binding**, which is a good way to add or remove a single class,
+ as shown in the third example.
+
+ For more information see the [Attribute, class, and style bindings](guide/template-syntax#other-bindings)
+ section of the [Template Syntax](guide/template-syntax) page.
+
@@ -246,42 +296,50 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-click
- <button ng-click="vm.toggleImage()">
- <button ng-click="vm.toggleImage($event)">
+ <button ng-click="vm.toggleImage()">
+ <button ng-click="vm.toggleImage($event)">
- In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
-
- In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
-
- The second example demonstrates passing in the `$event` object, which provides details about the event
- to the controller.
+
+
+ In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
+
+ In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
+
+ The second example demonstrates passing in the `$event` object, which provides details about the event
+ to the controller.
+
+
### Bind to the `click` event
-
+
- AngularJS event-based directives do not exist in Angular.
- Rather, define one-way binding from the template view to the component using **event binding**.
-
- For event binding, define the name of the target event within parenthesis and
- specify a template statement, in quotes, to the right of the equals. Angular then
- sets up an event handler for the target event. When the event is raised, the handler
- executes the template statement.
-
- In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed.
-
- The second example demonstrates passing in the `$event` object, which provides details about the event
- to the component.
-
- For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.
-
- For more information, see the [Event binding](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
-
+
+
+ AngularJS event-based directives do not exist in Angular.
+ Rather, define one-way binding from the template view to the component using **event binding**.
+
+ For event binding, define the name of the target event within parenthesis and
+ specify a template statement, in quotes, to the right of the equals. Angular then
+ sets up an event handler for the target event. When the event is raised, the handler
+ executes the template statement.
+
+ In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed.
+
+ The second example demonstrates passing in the `$event` object, which provides details about the event
+ to the component.
+
+ For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.
+
+ For more information, see the [Event binding](guide/template-syntax#event-binding)
+ section of the [Template Syntax](guide/template-syntax) page.
+
@@ -289,25 +347,33 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-controller
<div ng-controller="MovieListCtrl as vm">
- In AngularJS, the `ng-controller` directive attaches a controller to the view.
- Using the `ng-controller` (or defining the controller as part of the routing) ties the
- view to the controller code associated with that view.
+
+
+ In AngularJS, the `ng-controller` directive attaches a controller to the view.
+ Using the `ng-controller` (or defining the controller as part of the routing) ties the
+ view to the controller code associated with that view.
+
+
### Component decorator
-
+
- In Angular, the template no longer specifies its associated controller.
- Rather, the component specifies its associated template as part of the component class decorator.
-
- For more information, see [Architecture Overview](guide/architecture).
-
+
+
+ In Angular, the template no longer specifies its associated controller.
+ Rather, the component specifies its associated template as part of the component class decorator.
+
+ For more information, see [Architecture Overview](guide/architecture#component).
+
@@ -315,15 +381,19 @@ The following are some of the key AngularJS built-in directives and their equiva
- ### ng-hide
- In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on
- an expression. For more information, see [ng-show](guide/ajs-quick-reference#ng-show).
+
+
+ ### ng-hide
+ In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on
+ an expression. For more information, see [ng-show](guide/ajs-quick-reference#ng-show).
- ### Bind to the `hidden` property
- In Angular, you use property binding; there is no built-in *hide* directive.
- For more information, see [ng-show](guide/ajs-quick-reference#ng-show).
+
+
+ ### Bind to the `hidden` property
+ In Angular, you use property binding; there is no built-in *hide* directive.
+ For more information, see [ng-show](guide/ajs-quick-reference#ng-show).
@@ -331,39 +401,51 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-href
<a ng-href="angularDocsUrl">Angular Docs</a>
- The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
- can replace the binding expression with the appropriate URL before the browser
- fetches from that URL.
-
- In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
+
+
+ The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
+ can replace the binding expression with the appropriate URL before the browser
+ fetches from that URL.
+
+ In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
<a ng-href="#movies">Movies</a>
+
+
Routing is handled differently in Angular.
+
+
### Bind to the `href` property
-
+
- Angular uses property binding; there is no built-in *href* directive.
- Place the element's `href` property in square brackets and set it to a quoted template expression.
-
- For more information see the [Property binding](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
-
- In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example.
-
+
+
+ Angular uses property binding; there is no built-in *href* directive.
+ Place the element's `href` property in square brackets and set it to a quoted template expression.
+
+ For more information see the [Property binding](guide/template-syntax#property-binding)
+ section of the [Template Syntax](guide/template-syntax) page.
+
+ In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example.
+
- For more information on routing, see the [RouterLink binding](guide/router)
- section of the [Routing & Navigation](guide/router) page.
-
+
+
+ For more information on routing, see the [RouterLink binding](guide/router#router-link)
+ section of the [Routing & Navigation](guide/router) page.
+
@@ -371,28 +453,36 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-if
<table ng-if="movies.length">
- In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
- based on an expression. If the expression is false, the element is removed from the DOM.
-
- In this example, the `
` element is removed from the DOM unless the `movies` array has a length greater than zero.
+
+
+ In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
+ based on an expression. If the expression is false, the element is removed from the DOM.
+
+ In this example, the `
` element is removed from the DOM unless the `movies` array has a length greater than zero.
+
+
### *ngIf
-
+
- The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes
- or recreates a portion of the DOM based on an expression.
-
- In this example, the `
` element is removed from the DOM unless the `movies` array has a length.
-
- The (*) before `ngIf` is required in this example.
- For more information, see [Structural Directives](guide/structural-directives).
+
+
+ The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes
+ or recreates a portion of the DOM based on an expression.
+
+ In this example, the `
` element is removed from the DOM unless the `movies` array has a length.
+
+ The (*) before `ngIf` is required in this example.
+ For more information, see [Structural Directives](guide/structural-directives).
@@ -400,25 +490,33 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-model
<input ng-model="vm.favoriteHero"/>
- In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
- This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
+
+
+ In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
+ This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
+
+
### ngModel
-
+
- In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view)
- and event binding (from the view to the component), thereby providing two-way binding.
-
- For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to
- form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel)
- section of the [Template Syntax](guide/template-syntax) page.
+
+
+ In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view)
+ and event binding (from the view to the component), thereby providing two-way binding.
+
+ For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to
+ form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel)
+ section of the [Template Syntax](guide/template-syntax) page.
@@ -426,32 +524,40 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-repeat
<tr ng-repeat="movie in vm.movies">
- In AngularJS, the `ng-repeat` directive repeats the associated DOM element
- for each item in the specified collection.
-
- In this example, the table row (`
`) element repeats for each movie object in the collection of movies.
+
+
+ In AngularJS, the `ng-repeat` directive repeats the associated DOM element
+ for each item in the specified collection.
+
+ In this example, the table row (`
`) element repeats for each movie object in the collection of movies.
+
+
### *ngFor
-
+
- The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats
- the associated DOM element for each item in the specified collection.
- More accurately, it turns the defined element (`
` in this example) and its contents into a template and
- uses that template to instantiate a view for each item in the list.
-
- Notice the other syntax differences:
- The (*) before `ngFor` is required;
- the `let` keyword identifies `movie` as an input variable;
- the list preposition is `of`, not `in`.
-
- For more information, see [Structural Directives](guide/structural-directives).
+
+
+ The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats
+ the associated DOM element for each item in the specified collection.
+ More accurately, it turns the defined element (`
` in this example) and its contents into a template and
+ uses that template to instantiate a view for each item in the list.
+
+ Notice the other syntax differences:
+ The (*) before `ngFor` is required;
+ the `let` keyword identifies `movie` as an input variable;
+ the list preposition is `of`, not `in`.
+
+ For more information, see [Structural Directives](guide/structural-directives).
@@ -459,33 +565,41 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-show
- <h3 ng-show="vm.favoriteHero">
- Your favorite hero is: {{vm.favoriteHero}}
- </h3>
+ <h3 ng-show="vm.favoriteHero">
+ Your favorite hero is: {{vm.favoriteHero}}
+ </h3>
- In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
- an expression.
-
- In this example, the `
` element is shown if the `favoriteHero` variable is truthy.
+
+
+ In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
+ an expression.
+
+ In this example, the `
` element is shown if the `favoriteHero` variable is truthy.
+
+
### Bind to the `hidden` property
-
+
- Angular uses property binding; there is no built-in *show* directive.
- For hiding and showing elements, bind to the HTML `hidden` property.
-
- To conditionally display an element, place the element's `hidden` property in square brackets and
- set it to a quoted template expression that evaluates to the *opposite* of *show*.
-
- In this example, the `
` element is hidden if the `favoriteHero` variable is not truthy.
-
- For more information on property binding, see the [Property binding](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
+
+
+ Angular uses property binding; there is no built-in *show* directive.
+ For hiding and showing elements, bind to the HTML `hidden` property.
+
+ To conditionally display an element, place the element's `hidden` property in square brackets and
+ set it to a quoted template expression that evaluates to the *opposite* of *show*.
+
+ In this example, the `
` element is hidden if the `favoriteHero` variable is not truthy.
+
+ For more information on property binding, see the [Property binding](guide/template-syntax#property-binding)
+ section of the [Template Syntax](guide/template-syntax) page.
@@ -493,25 +607,33 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-src
<img ng-src="{{movie.imageurl}}">
- The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
- can replace the binding expression with the appropriate URL before the browser
- fetches from that URL.
+
+
+ The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
+ can replace the binding expression with the appropriate URL before the browser
+ fetches from that URL.
+
+
### Bind to the `src` property
-
+
- Angular uses property binding; there is no built-in *src* directive.
- Place the `src` property in square brackets and set it to a quoted template expression.
-
- For more information on property binding, see the [Property binding](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
+
+
+ Angular uses property binding; there is no built-in *src* directive.
+ Place the `src` property in square brackets and set it to a quoted template expression.
+
+ For more information on property binding, see the [Property binding](guide/template-syntax#property-binding)
+ section of the [Template Syntax](guide/template-syntax) page.
@@ -519,34 +641,42 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-style
<div ng-style="{color: colorPreference}">
- In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
- based on an expression. That expression is often a key-value control object with each
- key of the object defined as a CSS property, and each value defined as an expression
- that evaluates to a value appropriate for the style.
-
- In the example, the `color` style is set to the current value of the `colorPreference` variable.
+
+
+ In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
+ based on an expression. That expression is often a key-value control object with each
+ key of the object defined as a CSS property, and each value defined as an expression
+ that evaluates to a value appropriate for the style.
+
+ In the example, the `color` style is set to the current value of the `colorPreference` variable.
+
+
### ngStyle
-
+
- In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
-
- In the first example, the `color` style is set to the current value of the `colorPreference` variable.
-
- Angular also has **style binding**, which is good way to set a single style. This is shown in the second example.
-
- For more information on style binding, see the [Style binding](guide/template-syntax) section of the
- [Template Syntax](guide/template-syntax) page.
-
- For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
+
+
+ In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
+
+ In the first example, the `color` style is set to the current value of the `colorPreference` variable.
+
+ Angular also has **style binding**, which is good way to set a single style. This is shown in the second example.
+
+ For more information on style binding, see the [Style binding](guide/template-syntax#style-binding) section of the
+ [Template Syntax](guide/template-syntax) page.
+
+ For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle)
+ section of the [Template Syntax](guide/template-syntax) page.
@@ -554,59 +684,71 @@ The following are some of the key AngularJS built-in directives and their equiva
+
+
### ng-switch
- <div ng-switch="vm.favoriteHero &&
- vm.checkMovieHero(vm.favoriteHero)">
- <div ng-switch-when="true">
- Excellent choice!
- </div>
- <div ng-switch-when="false">
- No movie, sorry!
- </div>
- <div ng-switch-default>
- Please enter your favorite hero.
- </div>
- </div>
+ <div ng-switch="vm.favoriteHero &&
+ vm.checkMovieHero(vm.favoriteHero)">
+ <div ng-switch-when="true">
+ Excellent choice!
+ </div>
+ <div ng-switch-when="false">
+ No movie, sorry!
+ </div>
+ <div ng-switch-default>
+ Please enter your favorite hero.
+ </div>
+ </div>
- In AngularJS, the `ng-switch` directive swaps the contents of
- an element by selecting one of the templates based on the current value of an expression.
-
- In this example, if `favoriteHero` is not set, the template displays "Please enter ...".
- If `favoriteHero` is set, it checks the movie hero by calling a controller method.
- If that method returns `true`, the template displays "Excellent choice!".
- If that methods returns `false`, the template displays "No movie, sorry!".
+
+
+ In AngularJS, the `ng-switch` directive swaps the contents of
+ an element by selecting one of the templates based on the current value of an expression.
+
+ In this example, if `favoriteHero` is not set, the template displays "Please enter ...".
+ If `favoriteHero` is set, it checks the movie hero by calling a controller method.
+ If that method returns `true`, the template displays "Excellent choice!".
+ If that methods returns `false`, the template displays "No movie, sorry!".
+
+
### ngSwitch
-
+
- In Angular, the `ngSwitch` directive works similarly.
- It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
-
- In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
- and `*ngSwitchDefault` displays, "Please enter ...".
- If `favoriteHero` is set, the app checks the movie hero by calling a component method.
- If that method returns `true`, the app selects `*ngSwitchCase="true"` and displays: "Excellent choice!"
- If that methods returns `false`, the app selects `*ngSwitchCase="false"` and displays: "No movie, sorry!"
-
- The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example.
-
- For more information, see [The NgSwitch directives](guide/template-syntax)
- section of the [Template Syntax](guide/template-syntax) page.
+
+
+ In Angular, the `ngSwitch` directive works similarly.
+ It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
+
+ In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
+ and `*ngSwitchDefault` displays, "Please enter ...".
+ If `favoriteHero` is set, the app checks the movie hero by calling a component method.
+ If that method returns `true`, the app selects `*ngSwitchCase="true"` and displays: "Excellent choice!"
+ If that methods returns `false`, the app selects `*ngSwitchCase="false"` and displays: "No movie, sorry!"
+
+ The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example.
+
+ For more information, see [The NgSwitch directives](guide/template-syntax#ngSwitch)
+ section of the [Template Syntax](guide/template-syntax) page.
+
+
[Back to top](guide/ajs-quick-reference#top)
{@a filters-pipes}
+
+
## Filters/pipes
Angular **pipes** provide formatting and transformation for data in the template, similar to AngularJS **filters**.
Many of the built-in filters in AngularJS have corresponding pipes in Angular.
@@ -638,18 +780,26 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### currency
<td>{{movie.price | currency}}</td>
+
+
Formats a number as currency.
+
+
### currency
-
+
+
+
The Angular `currency` pipe is similar although some of the parameters have changed.
@@ -658,20 +808,28 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### date
<td>{{movie.releaseDate | date}}</td>
+
+
Formats a date to a string based on the requested format.
+
+
### date
-
+
- The Angular `date` pipe is similar.
-
+
+
+ The Angular `date` pipe is similar.
+
@@ -679,17 +837,23 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### filter
<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
+
+
Selects a subset of items from the defined collection, based on the filter criteria.
- ### none
- For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
-
+
+
+ ### none
+ For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
+
@@ -697,18 +861,26 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### json
<pre>{{movie | json}}</pre>
+
+
Converts a JavaScript object into a JSON string. This is useful for debugging.
+
+
### json
-
+
+
+
The Angular `json` pipe does the same thing.
@@ -717,23 +889,31 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### limitTo
<tr ng-repeat="movie in movieList | limitTo:2:0">
- Selects up to the first parameter (2) number of items from the collection
- starting (optionally) at the beginning index (0).
+
+
+ Selects up to the first parameter (2) number of items from the collection
+ starting (optionally) at the beginning index (0).
+
+
### slice
-
+
- The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping
- with the JavaScript `Slice` method.
- The first parameter is the starting index; the second is the limit.
- As in AngularJS, coding this operation within the component instead could improve performance.
+
+
+ The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping
+ with the JavaScript `Slice` method.
+ The first parameter is the starting index; the second is the limit.
+ As in AngularJS, coding this operation within the component instead could improve performance.
@@ -741,18 +921,26 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### lowercase
<div>{{movie.title | lowercase}}</div>
+
+
Converts the string to lowercase.
+
+
### lowercase
-
+
+
+
The Angular `lowercase` pipe does the same thing.
@@ -761,24 +949,32 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### number
<td>{{movie.starRating | number}}</td>
+
+
Formats a number as text.
+
+
### number
-
+
- The Angular `number` pipe is similar.
- It provides more functionality when defining
- the decimal places, as shown in the second example above.
-
- Angular also has a `percent` pipe, which formats a number as a local percentage
- as shown in the third example.
+
+
+ The Angular `number` pipe is similar.
+ It provides more functionality when defining
+ the decimal places, as shown in the second example above.
+
+ Angular also has a `percent` pipe, which formats a number as a local percentage
+ as shown in the third example.
@@ -786,30 +982,40 @@ For more information on pipes, see [Pipes](guide/pipes).
+
+
### orderBy
<tr ng-repeat="movie in movieList | orderBy : 'title'">
- Displays the collection in the order specified by the expression.
- In this example, the movie title orders the `movieList`.
+
+
+ Displays the collection in the order specified by the expression.
+ In this example, the movie title orders the `movieList`.
- ### none
- For performance reasons, no comparable pipe exists in Angular.
- Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
-
+
+
+ ### none
+ For performance reasons, no comparable pipe exists in Angular.
+ Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
+
+
+
[Back to top](guide/ajs-quick-reference#top)
{@a controllers-components}
+
+
## Modules/controllers/components
In both AngularJS and Angular, Angular modules help you organize your application into cohesive blocks of functionality.
@@ -845,24 +1051,30 @@ The Angular code is shown using TypeScript.
+
+
### IIFE
- (function () {
- ...
- }());
+ (function () {
+ ...
+ }());
- In AngularJS, an immediately invoked function expression (or IIFE) around controller code
- keeps it out of the global namespace.
-
+
+
+ In AngularJS, an immediately invoked function expression (or IIFE) around controller code
+ keeps it out of the global namespace.
+
- ### none
- This is a nonissue in Angular because ES 2015 modules
- handle the namespacing for you.
-
- For more information on modules, see the [Modules](guide/architecture) section of the
- [Architecture Overview](guide/architecture).
+
+
+ ### none
+ This is a nonissue in Angular because ES 2015 modules
+ handle the namespacing for you.
+
+ For more information on modules, see the [Modules](guide/architecture#modules) section of the
+ [Architecture Overview](guide/architecture).
@@ -870,24 +1082,33 @@ The Angular code is shown using TypeScript.
+
+
### Angular modules
angular.module("movieHunter", ["ngRoute"]);
- In AngularJS, an Angular module keeps track of controllers, services, and other code.
- The second argument defines the list of other modules that this module depends upon.
+
+
+ In AngularJS, an Angular module keeps track of controllers, services, and other code.
+ The second argument defines the list of other modules that this module depends upon.
+
+
### Angular modules
-
+
- Angular modules, defined with the `NgModule` decorator, serve the same purpose:
- - `imports`: specifies the list of other modules that this module depends upon
- - `declaration`: keeps track of your components, pipes, and directives.
-
- For more information on modules, see [Angular Modules (NgModule)](guide/ngmodule).
+
+
+ Angular modules, defined with the `NgModule` decorator, serve the same purpose:
+
+ * `imports`: specifies the list of other modules that this module depends upon
+ * `declaration`: keeps track of your components, pipes, and directives.
+
+ For more information on modules, see [Angular Modules (NgModule)](guide/ngmodule).
@@ -895,34 +1116,42 @@ The Angular code is shown using TypeScript.
+
+
### Controller registration
- angular
- .module("movieHunter")
- .controller("MovieListCtrl",
- ["movieService",
- MovieListCtrl]);
+ angular
+ .module("movieHunter")
+ .controller("MovieListCtrl",
+ ["movieService",
+ MovieListCtrl]);
- AngularJS has code in each controller that looks up an appropriate Angular module
- and registers the controller with that module.
-
- The first argument is the controller name. The second argument defines the string names of
- all dependencies injected into this controller, and a reference to the controller function.
+
+
+ AngularJS has code in each controller that looks up an appropriate Angular module
+ and registers the controller with that module.
+
+ The first argument is the controller name. The second argument defines the string names of
+ all dependencies injected into this controller, and a reference to the controller function.
+
+
### Component decorator
-
+
- Angular adds a decorator to the component class to provide any required metadata.
- The `@Component` decorator declares that the class is a component and provides metadata about
- that component such as its selector (or tag) and its template.
-
- This is how you associate a template with logic, which is defined in the component class.
-
- For more information, see the [Components](guide/architecture)
- section of the [Architecture Overview](guide/architecture) page.
+
+
+ Angular adds a decorator to the component class to provide any required metadata.
+ The `@Component` decorator declares that the class is a component and provides metadata about
+ that component such as its selector (or tag) and its template.
+
+ This is how you associate a template with logic, which is defined in the component class.
+
+ For more information, see the [Components](guide/architecture#components)
+ section of the [Architecture Overview](guide/architecture) page.
@@ -930,25 +1159,33 @@ The Angular code is shown using TypeScript.
+
+
### Controller function
- function MovieListCtrl(movieService) {
- }
+ function MovieListCtrl(movieService) {
+ }
+
+
In AngularJS, you write the code for the model and methods in a controller function.
+
+
### Component class
-
+
- In Angular, you create a component class.
-
- NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class.
-
- For more information, see the [Components](guide/architecture)
- section of the [Architecture Overview](guide/architecture) page.
+
+
+ In Angular, you create a component class.
+
+ NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class.
+
+ For more information, see the [Components](guide/architecture#components)
+ section of the [Architecture Overview](guide/architecture) page.
@@ -956,41 +1193,53 @@ The Angular code is shown using TypeScript.
+
+
### Dependency injection
- MovieListCtrl.$inject = ['MovieService'];
- function MovieListCtrl(movieService) {
- }
+ MovieListCtrl.$inject = ['MovieService'];
+ function MovieListCtrl(movieService) {
+ }
- In AngularJS, you pass in any dependencies as controller function arguments.
- This example injects a `MovieService`.
-
- To guard against minification problems, tell Angular explicitly
- that it should inject an instance of the `MovieService` in the first parameter.
+
+
+ In AngularJS, you pass in any dependencies as controller function arguments.
+ This example injects a `MovieService`.
+
+ To guard against minification problems, tell Angular explicitly
+ that it should inject an instance of the `MovieService` in the first parameter.
+
+
### Dependency injection
-
+
- In Angular, you pass in dependencies as arguments to the component class constructor.
- This example injects a `MovieService`.
- The first parameter's TypeScript type tells Angular what to inject, even after minification.
-
- For more information, see the [Dependency injection](guide/architecture)
- section of the [Architecture Overview](guide/architecture).
+
+
+ In Angular, you pass in dependencies as arguments to the component class constructor.
+ This example injects a `MovieService`.
+ The first parameter's TypeScript type tells Angular what to inject, even after minification.
+
+ For more information, see the [Dependency injection](guide/architecture#dependency-injection)
+ section of the [Architecture Overview](guide/architecture).
+
+
[Back to top](guide/ajs-quick-reference#top)
{@a style-sheets}
+
+
## Style sheets
Style sheets give your application a nice look.
In AngularJS, you specify the style sheets for your entire application.
@@ -1024,32 +1273,46 @@ also encapsulate a style sheet within a specific component.
+
+
### Link tag
<link href="styles.css" rel="stylesheet" />
- AngularJS, uses a `link` tag in the head section of the `index.html` file
- to define the styles for the application.
+
+
+ AngularJS, uses a `link` tag in the head section of the `index.html` file
+ to define the styles for the application.
+
+
### Link tag
-
+
- In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file.
- But now you can also encapsulate styles for your components. ### StyleUrls
- In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
- a style sheet for a particular component.
-
+
+
+ In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file.
+ But now you can also encapsulate styles for your components.
+
+ ### StyleUrls
+ In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
+ a style sheet for a particular component.
+
- This allows you to set appropriate styles for individual components that won’t leak into
- other parts of the application.
+
+
+ This allows you to set appropriate styles for individual components that won’t leak into
+ other parts of the application.
+
+
[Back to top](guide/ajs-quick-reference#top)
\ No newline at end of file
diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
index a4f96ec663..335135dd64 100644
--- a/aio/content/guide/animations.md
+++ b/aio/content/guide/animations.md
@@ -5,6 +5,8 @@ Animations
A guide to Angular's animation system.
@description
+
+
Motion is an important aspect in the design of modern web applications. Good
user interfaces transition smoothly between states with engaging animations
that call attention where it's needed. Well-designed animations can make a UI not only
@@ -17,6 +19,8 @@ animation logic with the rest of your application code, for ease of control.
~~~ {.alert.is-helpful}
+
+
Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/)
and run natively on [browsers that support it](http://caniuse.com/#feat=web-animation).
@@ -28,6 +32,8 @@ add it to your page.
~~~
+
+
# Contents
* [Example: Transitioning between two states](guide/animations#example-transitioning-between-states).
@@ -44,6 +50,8 @@ add it to your page.
~~~ {.l-sub-section}
+
+
The examples in this page are available as a .
@@ -53,12 +61,16 @@ The examples in this page are available as a .
{@a example-transitioning-between-states}
+
+
## Quickstart example: Transitioning between two states
-
+
+
+
You can build a simple animation that transitions an element between two states
driven by a model attribute.
@@ -66,22 +78,24 @@ Animations are defined inside `@Component` metadata. Before you can add animatio
to import a few animation-specific imports and functions:
-
+
-
+
+
+
With these, you can define an *animation trigger* called `heroState` in the component
metadata. It uses animations to transition between two states: `active` and `inactive`. When a
hero is active, the element appears in a slightly larger size and lighter color.
-
+
@@ -89,20 +103,26 @@ hero is active, the element appears in a slightly larger size and lighter color.
~~~ {.alert.is-helpful}
+
+
In this example, you are defining animation styles (color and transform) inline in the
animation metadata.
~~~
+
+
Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
one or more elements in the component's template.
-
+
+
+
Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
the repeated elements animates independently. The value of the
attribute is bound to the expression `hero.state` and is always either `active` or `inactive`.
@@ -111,10 +131,12 @@ With this setup, an animated transition appears whenever a hero object changes s
Here's the full component implementation:
-
+
+
+
## States and transitions
Angular animations are defined as logical **states** and **transitions**
@@ -129,10 +151,12 @@ component's template.
You can define *styles* for each animation state:
-
+
+
+
These `state` definitions specify the *end styles* of each state.
They are applied to the element once it has transitioned to that state, and stay
*as long as it remains in that state*. In effect, you're defining what styles the element has in different states.
@@ -141,32 +165,38 @@ After you define states, you can define *transitions* between the states. Each t
controls the timing of switching between one set of styles and the next:
-
+
-
+
+
+
If several transitions have the same timing configuration, you can combine
them into the same `transition` definition:
-
+
+
+
When both directions of a transition have the same timing, as in the previous
example, you can use the shorthand syntax `<=>`:
-
+
+
+
You can also apply a style during an animation but not keep it around
after the animation finishes. You can define such styles inline, in the `transition`. In this example,
the element receives one set of styles immediately and is then animated to the next.
@@ -174,10 +204,12 @@ When the transition finishes, none of these styles are kept because they're not
defined in a `state`.
-
+
+
+
### The wildcard state `*`
The `*` ("wildcard") state matches *any* animation state. This is useful for defining styles and
@@ -188,9 +220,11 @@ transitions that apply regardless of which state the animation is in. For exampl
-
+
+
+
### The `void` state
The special state called `void` can apply to any animation. It applies
@@ -203,17 +237,21 @@ regardless of what state it was in before it left.
-
+
+
+
The wildcard state `*` also matches `void`.
## Example: Entering and leaving
-
+
+
+
Using the `void` and `*` states you can define transitions that animate the
entering and leaving of elements:
@@ -223,10 +261,12 @@ entering and leaving of elements:
For example, in the `animations` array below there are two transitions that use
the `void => *` and `* => void` syntax to animate the element in and out of the view.
-
+
+
+
Note that in this case the styles are applied to the void state directly in the
transition definitions, and not in a separate `state(void)` definition. Thus, the transforms
are different on enter and leave: the element enters from the left
@@ -235,24 +275,30 @@ and leaves to the right.
~~~ {.l-sub-section}
+
+
These two common animations have their own aliases:
- transition(':enter', [ ... ]); // void => *
- transition(':leave', [ ... ]); // * => void
-
+ transition(':enter', [ ... ]); // void => *
+ transition(':leave', [ ... ]); // * => void
+
~~~
+
+
## Example: Entering and leaving from different states
-
+
+
+
You can also combine this animation with the earlier state transition animation by
using the hero state as the animation state. This lets you configure
different transitions for entering and leaving based on what the state of the hero
@@ -267,15 +313,17 @@ This gives you fine-grained control over each transition:
-
+
-
+
+
+
## Animatable properties and units
Since Angular's animation support builds on top of Web Animations, you can animate any property
@@ -298,9 +346,11 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
## Automatic property calculation
-
+
+
+
Sometimes you don't know the value of a dimensional style property until runtime.
For example, elements often have widths and heights that
depend on their content and the screen size. These properties are often tricky
@@ -313,10 +363,12 @@ In this example, the leave animation takes whatever height the element has befor
leaves and animates from that height to zero:
-
+
+
+
## Animation timing
There are three timing properties you can tune for every animated transition:
@@ -353,9 +405,11 @@ and the delay (or as the *second* value when there is no delay):
-
+
+
+
### Example
Here are a couple of custom timings in action. Both enter and leave last for
@@ -364,16 +418,20 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
-
+
+
+
## Multi-step animations with keyframes
-
+
+
+
Animation *keyframes* go beyond a simple transition to a more intricate animation
that goes through one or more intermediate styles when transitioning between two sets of styles.
@@ -385,10 +443,12 @@ This example adds some "bounce" to the enter and leave animations with
keyframes:
-
+
+
+
Note that the offsets are *not* defined in terms of absolute time. They are relative
measures from zero to one. The final timeline of the animation is based on the combination
of keyframe offsets, duration, delay, and easing.
@@ -396,12 +456,16 @@ of keyframe offsets, duration, delay, and easing.
Defining offsets for keyframes is optional. If you omit them, offsets with even
spacing are automatically assigned. For example, three keyframes without predefined
offsets receive offsets `0`, `0.5`, and `1`.
+
+
## Parallel animation groups
-
+
+
+
You've seen how to animate multiple style properties at the same time:
just put all of them into the same `style()` definition.
@@ -414,11 +478,15 @@ enter and leave allows for two different timing configurations. Both
are applied to the same element in parallel, but run independently of each other:
-
+
+
+
One group animates the element transform and width; the other group animates the opacity.
+
+
## Animation callbacks
A callback is fired when an animation is started and also when it is done.
@@ -427,10 +495,12 @@ In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook
those callbacks like this:
-
+
+
+
The callbacks receive an `AnimationEvent` that contains contains useful properties such as
`fromState`, `toState` and `totalTime`.
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 416fa50c55..29f475e0cb 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -5,37 +5,48 @@ Ahead-of-Time Compilation
Learn how to use ahead-of-time compilation.
@description
+
+
This cookbook describes how to radically improve performance by compiling _ahead-of-time_ (AOT)
during a build process.
{@a toc}
+
+
# Contents
-- [Overview](guide/overview)
-- [Ahead-of-time (AOT) vs just-in-time (JIT)](guide/aot-compiler#aot-jit)
-- [Why do AOT compilation?](guide/aot-compiler#why-aot)
-- [Compile with AOT](guide/aot-compiler#compile)
-- [Bootstrap](guide/aot-compiler#bootstrap)
-- [Tree shaking](guide/aot-compiler#tree-shaking)
- - [Rollup](guide/aot-compiler#rollup)
- - [Rollup Plugins](guide/aot-compiler#rollup-plugins)
- - [Run Rollup](guide/aot-compiler#run-rollup)
-- [Load the bundle](guide/aot-compiler#load)
-- [Serve the app](guide/aot-compiler#serve)
-- [AOT QuickStart source code](guide/aot-compiler#source-code)
-- [Workflow and convenience script](guide/aot-compiler#workflow)
- - [Develop JIT along with AOT](guide/aot-compiler#run-jit)
-- [Tour of Heroes](guide/aot-compiler#toh)
- - [JIT in development, AOT in production](guide/aot-compiler#jit-dev-aot-prod)
- - [Tree shaking](guide/aot-compiler#shaking)
- - [Running the application](guide/aot-compiler#running-app)
- - [Inspect the Bundle](guide/aot-compiler#inspect-bundle)
+* [Overview](guide/overview)
+* [Ahead-of-time (AOT) vs just-in-time (JIT)](guide/aot-compiler#aot-jit)
+* [Why do AOT compilation?](guide/aot-compiler#why-aot)
+* [Compile with AOT](guide/aot-compiler#compile)
+* [Bootstrap](guide/aot-compiler#bootstrap)
+* [Tree shaking](guide/aot-compiler#tree-shaking)
+
+ *[Rollup](guide/aot-compiler#rollup)
+ *[Rollup Plugins](guide/aot-compiler#rollup-plugins)
+ *[Run Rollup](guide/aot-compiler#run-rollup)
+
+* [Load the bundle](guide/aot-compiler#load)
+* [Serve the app](guide/aot-compiler#serve)
+* [AOT QuickStart source code](guide/aot-compiler#source-code)
+* [Workflow and convenience script](guide/aot-compiler#workflow)
+
+ *[Develop JIT along with AOT](guide/aot-compiler#run-jit)
+
+* [Tour of Heroes](guide/aot-compiler#toh)
+
+ *[JIT in development, AOT in production](guide/aot-compiler#jit-dev-aot-prod)
+ *[Tree shaking](guide/aot-compiler#shaking)
+ *[Running the application](guide/aot-compiler#running-app)
+ *[Inspect the Bundle](guide/aot-compiler#inspect-bundle)
{@a overview}
+
+
## Overview
An Angular application consists largely of components and their HTML templates.
@@ -44,10 +55,14 @@ the components and templates must be converted to executable JavaScript by the _
~~~ {.l-sub-section}
+
+
Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016.
~~~
+
+
You can compile the app in the browser, at runtime, as the application loads, using the **_just-in-time_ (JIT) compiler**.
This is the standard development approach shown throughout the documentation.
It's great but it has shortcomings.
@@ -68,6 +83,8 @@ by compiling at build time.
{@a aot-jit}
+
+
## _Ahead-of-time_ (AOT) vs _just-in-time_ (JIT)
There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling.
@@ -75,6 +92,8 @@ With AOT, the compiler runs once at build time using one set of libraries;
with JIT it runs every time for every user at runtime using a different set of libraries.
{@a why-aot}
+
+
## Why do AOT compilation?
*Faster rendering*
@@ -108,6 +127,8 @@ there are fewer opportunities for injection attacks.
{@a compile}
+
+
## Compile with AOT
Preparing for offline compilation takes a few simple steps.
@@ -127,12 +148,16 @@ A few minor changes to the lone `app.component` lead to these two class and HTML
+
+
Install a few new npm dependencies with the following command:
npm install @angular/compiler-cli @angular/platform-server --save
+
+
You will run the `ngc` compiler provided in the `@angular/compiler-cli` npm package
instead of the TypeScript compiler (`tsc`).
@@ -143,10 +168,12 @@ Copy the original `src/tsconfig.json` to a file called `tsconfig-aot.json` on th
then modify it as follows.
-
+
+
+
The `compilerOptions` section is unchanged except for one property.
**Set the `module` to `es2015`**.
This is important as explained later in the [Tree Shaking](guide/aot-compiler#tree-shaking) section.
@@ -157,6 +184,8 @@ to store the compiled output files in a new `aot` folder.
The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application.
Metadata files are not necessary when targeting TypeScript files, so there is no reason to include them.
+
+
***Component-relative template URLS***
The AOT compiler requires that `@Component` URLS for external templates and CSS files be _component-relative_.
@@ -164,6 +193,8 @@ That means that the value of `@Component.templateUrl` is a URL value _relative_
For example, an `'app.component.html'` URL means that the template file is a sibling of its companion `app.component.ts` file.
While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation.
+
+
***Compiling the application***
Initiate AOT compilation from the command line using the previously installed `ngc` compiler by executing:
@@ -176,6 +207,8 @@ Initiate AOT compilation from the command line using the previously installed `n
~~~ {.l-sub-section}
+
+
Windows users should surround the `ngc` command in double quotes:
@@ -186,6 +219,8 @@ Windows users should surround the `ngc` command in double quotes:
~~~
+
+
`ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file.
After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder.
@@ -198,6 +233,8 @@ Note that the original component class is still referenced internally by the gen
~~~ {.l-sub-section}
+
+
The curious can open `aot/app.component.ngfactory.ts` to see the original Angular template syntax
compiled to TypeScript, its intermediate form.
@@ -209,8 +246,12 @@ AOT compilation reveals them as separate, physical files.
+
+
~~~ {.alert.is-important}
+
+
Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost.
@@ -220,6 +261,8 @@ Do not edit the _NgFactories_! Re-compilation replaces these files and all edits
{@a bootstrap}
+
+
## Bootstrap
The AOT approach changes application bootstrapping.
@@ -248,10 +291,14 @@ Here is AOT bootstrap in `main.ts` next to the original JIT version:
+
+
Be sure to [recompile](guide/aot-compiler#compiling-aot) with `ngc`!
{@a tree-shaking}
+
+
## Tree shaking
AOT compilation sets the stage for further optimization through a process called _tree shaking_.
@@ -272,6 +319,8 @@ which in turn makes more of the application "tree shakable".
{@a rollup}
+
+
### Rollup
This cookbook illustrates a tree shaking utility called _Rollup_.
@@ -283,27 +332,35 @@ Rollup can only tree shake `ES2015` modules which have `import` and `export` sta
~~~ {.l-sub-section}
+
+
Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules.
It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`.
What matters is that the code uses ES `import` and `export` statements rather than `require` statements.
~~~
+
+
In the terminal window, install the Rollup dependencies with this command:
npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev
+
+
Next, create a configuration file (`rollup-config.js`)
in the project root directory to tell Rollup how to process the application.
The cookbook configuration file looks like this.
-
+
+
+
This config file tells Rollup that the app entry point is `src/app/main.js` .
The `dest` attribute tells Rollup to create a bundle called `build.js` in the `dist` folder.
It overrides the default `onwarn` method in order to skip annoying messages about the AOT compiler's use of the `this` keyword.
@@ -312,6 +369,8 @@ The next section covers the plugins in more depth.
{@a rollup-plugins}
+
+
### Rollup Plugins
Optional plugins filter and transform the Rollup inputs and output.
@@ -331,10 +390,12 @@ in the final bundle. Using it is straigthforward. Add the following to
the `plugins` array in `rollup-config.js`:
-
+
+
+
*Minification*
Rollup tree shaking reduces code size considerably. Minification makes it smaller still.
@@ -342,7 +403,7 @@ This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code
Add the following to the `plugins` array:
-
+
@@ -350,6 +411,8 @@ Add the following to the `plugins` array:
~~~ {.l-sub-section}
+
+
In a production setting, you would also enable gzip on the web server to compress
the code into an even smaller package going over the wire.
@@ -359,6 +422,8 @@ the code into an even smaller package going over the wire.
{@a run-rollup}
+
+
### Run Rollup
Execute the Rollup process with this command:
@@ -370,6 +435,8 @@ Execute the Rollup process with this command:
~~~ {.l-sub-section}
+
+
Windows users should surround the `rollup` command in double quotes:
@@ -382,8 +449,12 @@ Windows users should surround the `rollup` command in double quotes:
+
+
{@a load}
+
+
## Load the bundle
Loading the generated application bundle does not require a module loader like SystemJS.
@@ -391,7 +462,7 @@ Remove the scripts that concern SystemJS.
Instead, load the bundle file using a single `
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+