diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 07f8c9f328..25fc4b0004 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -34,47 +34,33 @@ The following table lists some of the key AngularJS template features with their - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AngularJS Angular
### 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. @@ -84,16 +70,11 @@ The following table lists some of the key AngularJS template features with their have to be specific about the source of the binding. - ### Bindings/interpolation - - + ### 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 @@ -103,36 +84,25 @@ The following table lists some of the key AngularJS template features with their section of the [Template Syntax](guide/template-syntax) page.
### 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. - ### Pipes - - + ### 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. @@ -140,46 +110,33 @@ The following table lists some of the key AngularJS template features with their For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below.
### Local variables - <tr ng-repeat="movie in vm.movies"> <td>{{movie.title}}</td> </tr> - Here, `movie` is a user-defined local variable. - ### Input variables - - + ### 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.
[Back to top](guide/ajs-quick-reference#top) @@ -192,47 +149,33 @@ The following are some of the key AngularJS built-in directives and their equiva - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AngularJS Angular
### ng-app - <body ng-app="movieHunter"> - The application startup process is called **bootstrapping**. Although you can bootstrap an AngularJS app in code, @@ -240,23 +183,15 @@ The following are some of the key AngularJS built-in directives and their equiva giving it the name of the application's module (`movieHunter`). - ### Bootstrapping - - + ### 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` @@ -265,23 +200,17 @@ The following are some of the key AngularJS built-in directives and their equiva For more information see the [Setup](guide/setup) page.
### ng-class - <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 @@ -292,16 +221,11 @@ The following are some of the key AngularJS built-in directives and their equiva You can specify multiple classes, as shown in the second example. - ### ngClass - - + ### ngClass - In Angular, the `ngClass` directive works similarly. It includes/excludes CSS classes based on an expression. @@ -317,22 +241,16 @@ 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)"> - 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. @@ -341,16 +259,11 @@ The following are some of the key AngularJS built-in directives and their equiva to the controller. - ### Bind to the `click` event - - + ### 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**. @@ -371,36 +284,25 @@ 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. - ### Component decorator - - + ### 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. @@ -408,115 +310,82 @@ 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). ### 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).
### 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. - <a ng-href="#movies">Movies</a> - Routing is handled differently in Angular. - ### Bind to the `href` property - - + ### 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. - - + 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.
### 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. - - - - - - - - - - - - `) element repeats for each movie object in the collection of movies. - - ` in this example) and its contents into a template and @@ -607,39 +454,28 @@ The following are some of the key AngularJS built-in directives and their equiva For more information, see [Structural Directives](guide/structural-directives). - - - - - - - - - - - - - - - - - - - - - - - - - -
- ### *ngIf - - + ### *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. @@ -526,35 +395,24 @@ The following are some of the key AngularJS built-in directives and their equiva For more information, see [Structural Directives](guide/structural-directives).
### 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. - ### ngModel - - + ### 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. @@ -563,37 +421,26 @@ The following are some of the key AngularJS built-in directives and their equiva section of the [Template Syntax](guide/template-syntax) page.
### 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 (`
- ### *ngFor - - + ### *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 (`
### ng-show - <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.
- ### Bind to the `hidden` property - - + ### 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. @@ -652,36 +488,25 @@ The following are some of the key AngularJS built-in directives and their equiva section of the [Template Syntax](guide/template-syntax) page.
### 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. - ### Bind to the `src` property - - + ### 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. @@ -689,21 +514,15 @@ The following are some of the key AngularJS built-in directives and their equiva section of the [Template Syntax](guide/template-syntax) page.
### 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 @@ -712,16 +531,11 @@ The following are some of the key AngularJS built-in directives and their equiva In the example, the `color` style is set to the current value of the `colorPreference` variable. - ### ngStyle - - + ### 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. @@ -735,17 +549,12 @@ The following are some of the key AngularJS built-in directives and their equiva section of the [Template Syntax](guide/template-syntax) page.
### ng-switch - <div ng-switch="vm.favoriteHero && vm.checkMovieHero(vm.favoriteHero)"> @@ -760,7 +569,6 @@ The following are some of the key AngularJS built-in directives and their equiva </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. @@ -770,16 +578,11 @@ The following are some of the key AngularJS built-in directives and their equiva If that methods returns `false`, the template displays "No movie, sorry!". - ### ngSwitch - - + ### ngSwitch - In Angular, the `ngSwitch` directive works similarly. It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value. @@ -795,10 +598,8 @@ The following are some of the key AngularJS built-in directives and their equiva section of the [Template Syntax](guide/template-syntax) page.
[Back to top](guide/ajs-quick-reference#top) @@ -814,246 +615,164 @@ For more information on pipes, see [Pipes](guide/pipes). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AngularJS Angular
### currency - <td>{{movie.price | currency}}</td> - Formats a number as currency. - ### currency - - + ### currency - The Angular `currency` pipe is similar although some of the parameters have changed.
### date - <td>{{movie.releaseDate | date}}</td> - Formats a date to a string based on the requested format. - ### date - - + ### date - The Angular `date` pipe is similar.
### 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.
### json - <pre>{{movie | json}}</pre> - Converts a JavaScript object into a JSON string. This is useful for debugging. - ### json - - + ### json - The Angular `json` pipe does the same thing.
### 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). - ### slice - - + ### 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.
### lowercase - <div>{{movie.title | lowercase}}</div> - Converts the string to lowercase. - ### lowercase - - + ### lowercase - The Angular `lowercase` pipe does the same thing.
### number - <td>{{movie.starRating | number}}</td> - Formats a number as text. - ### number - - + ### number - The Angular `number` pipe is similar. It provides more functionality when defining the decimal places, as shown in the second example above. @@ -1062,27 +781,19 @@ For more information on pipes, see [Pipes](guide/pipes). as shown in the third example.
### 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`. ### none For performance reasons, no comparable pipe exists in Angular. @@ -1090,10 +801,8 @@ For more information on pipes, see [Pipes](guide/pipes).
[Back to top](guide/ajs-quick-reference#top) @@ -1113,56 +822,40 @@ The Angular code is shown using TypeScript. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AngularJS Angular
### IIFE - (function () { ... }()); - 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 @@ -1172,35 +865,24 @@ The Angular code is shown using TypeScript. [Architecture Overview](guide/architecture).
### 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. - ### Angular modules - - + ### 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. @@ -1208,17 +890,12 @@ The Angular code is shown using TypeScript. For more information on modules, see [Angular Modules (NgModule)](guide/ngmodule).
### Controller registration - angular .module("movieHunter") @@ -1226,7 +903,6 @@ The Angular code is shown using TypeScript. ["movieService", MovieListCtrl]); - AngularJS has code in each controller that looks up an appropriate Angular module and registers the controller with that module. @@ -1234,16 +910,11 @@ The Angular code is shown using TypeScript. all dependencies injected into this controller, and a reference to the controller function. - ### Component decorator - - + ### 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. @@ -1254,35 +925,24 @@ The Angular code is shown using TypeScript. section of the [Architecture Overview](guide/architecture) page.
### Controller function - function MovieListCtrl(movieService) { } - In AngularJS, you write the code for the model and methods in a controller function. - ### Component class - - + ### 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. @@ -1291,23 +951,17 @@ The Angular code is shown using TypeScript. section of the [Architecture Overview](guide/architecture) page.
### Dependency injection - MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { } - In AngularJS, you pass in any dependencies as controller function arguments. This example injects a `MovieService`. @@ -1315,16 +969,11 @@ The Angular code is shown using TypeScript. that it should inject an instance of the `MovieService` in the first parameter. - ### Dependency injection - - + ### 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. @@ -1333,10 +982,8 @@ The Angular code is shown using TypeScript. section of the [Architecture Overview](guide/architecture).
[Back to top](guide/ajs-quick-reference#top) @@ -1354,79 +1001,55 @@ also encapsulate a style sheet within a specific component. - - - - - - - - - - - - - - - -
AngularJS Angular
### 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. - ### Link tag - - + ### 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. - - + 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.
[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 068a456f3f..a4f96ec663 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -66,14 +66,12 @@ Animations are defined inside `@Component` metadata. Before you can add animatio to import a few animation-specific imports and functions: - - @@ -83,7 +81,6 @@ metadata. It uses animations to transition between two states: `active` and `ina hero is active, the element appears in a slightly larger size and lighter color. - @@ -102,7 +99,6 @@ Now, using the `[@triggerName]` syntax, attach the animation that you just defin one or more elements in the component's template. - @@ -115,7 +111,6 @@ With this setup, an animated transition appears whenever a hero object changes s Here's the full component implementation: - @@ -134,7 +129,6 @@ component's template. You can define *styles* for each animation state: - @@ -147,7 +141,6 @@ 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: - @@ -162,7 +155,6 @@ If several transitions have the same timing configuration, you can combine them into the same `transition` definition: - @@ -171,7 +163,6 @@ When both directions of a transition have the same timing, as in the previous example, you can use the shorthand syntax `<=>`: - @@ -183,7 +174,6 @@ When the transition finishes, none of these styles are kept because they're not defined in a `state`. - @@ -230,10 +220,9 @@ entering and leaving of elements: * Enter: `void => *` * Leave: `* => void` -For example, in the `animations` !{_array} below there are two transitions that use +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. - @@ -283,7 +272,6 @@ This gives you fine-grained control over each transition: - @@ -325,7 +313,6 @@ In this example, the leave animation takes whatever height the element has befor leaves and animates from that height to zero: - @@ -377,7 +364,6 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: - @@ -399,7 +385,6 @@ This example adds some "bounce" to the enter and leave animations with keyframes: - @@ -429,7 +414,6 @@ enter and leave allows for two different timing configurations. Both are applied to the same element in parallel, but run independently of each other: - @@ -443,7 +427,6 @@ In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook those callbacks like this: - diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index fbbbcd9c34..416fa50c55 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -11,6 +11,7 @@ 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) @@ -114,21 +115,16 @@ Take the Setup as a starting point. A few minor changes to the lone `app.component` lead to these two class and HTML files: - - - - - Install a few new npm dependencies with the following command: @@ -147,7 +143,6 @@ Copy the original `src/tsconfig.json` to a file called `tsconfig-aot.json` on th then modify it as follows. - @@ -241,21 +236,16 @@ Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to Here is AOT bootstrap in `main.ts` next to the original JIT version: - - - - - Be sure to [recompile](guide/aot-compiler#compiling-aot) with `ngc`! @@ -310,7 +300,6 @@ in the project root directory to tell Rollup how to process the application. The cookbook configuration file looks like this. - @@ -339,8 +328,7 @@ Luckily, there is a Rollup plugin that modifies _RxJs_ to use the ES `import` and `export` statements that Rollup requires. Rollup then preserves the parts of `RxJS` referenced by the application in the final bundle. Using it is straigthforward. Add the following to -the `plugins` !{_array} in `rollup-config.js`: - +the `plugins` array in `rollup-config.js`: @@ -351,8 +339,7 @@ the `plugins` !{_array} in `rollup-config.js`: Rollup tree shaking reduces code size considerably. Minification makes it smaller still. This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code. -Add the following to the `plugins` !{_array}: - +Add the following to the `plugins` array: @@ -404,7 +391,6 @@ Remove the scripts that concern SystemJS. Instead, load the bundle file using a single `