diff --git a/aio/content/cli-quickstart.md b/aio/content/cli-quickstart.md index 7905501ced..a71c2c5003 100644 --- a/aio/content/cli-quickstart.md +++ b/aio/content/cli-quickstart.md @@ -24,6 +24,7 @@ You'll pursue these ends in the following high-level steps: And you can also download the example. +

Step 1. Set up the Development Environment

@@ -43,6 +44,7 @@ Older versions produce errors, but newer versions are fine. Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally. + npm install -g @angular/cli @@ -50,6 +52,7 @@ Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globa +

Step 2. Create a new project

@@ -57,6 +60,7 @@ Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globa Open a terminal window. Generate a new project and skeleton application by running the following commands: + ng new my-app @@ -74,12 +78,14 @@ It takes time to set up a new project, most of it spent installing npm packages. +

Step 3: Serve the application

Go to the project directory and launch the server. + cd my-app ng serve --open @@ -94,12 +100,14 @@ on `http://localhost:4200/`. Your app greets you with a message: +
The app works!
+

Step 4: Edit your first Angular component

@@ -110,6 +118,7 @@ You can find it in `./src/app/app.component.ts`. Open the component file and change the `title` property from _app works!_ to _My First Angular App_: + @@ -119,11 +128,13 @@ The browser reloads automatically with the revised title. That's nice, but it co Open `src/app/app.component.css` and give the component some style. + +
Output of QuickStart app
@@ -155,32 +166,40 @@ Your app lives in the `src` folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app. + + src + app + app.component.css + app.component.html + app.component.spec.ts + app.component.ts + app.module.ts @@ -189,8 +208,10 @@ Any files outside of this folder are meant to support building your app. + assets + .gitkeep @@ -199,13 +220,16 @@ Any files outside of this folder are meant to support building your app. + environments + environment.prod.ts + environment.ts @@ -214,41 +238,49 @@ Any files outside of this folder are meant to support building your app. + favicon.ico + index.html + main.ts + polyfills.ts + styles.css + test.ts + tsconfig.app.json + tsconfig.spec.json @@ -260,30 +292,37 @@ Any files outside of this folder are meant to support building your app. + + + + + + + @@ -292,13 +331,16 @@ Any files outside of this folder are meant to support building your app. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
File Purpose
app/app.component.{ts,html,css,spec.ts} Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test. It is the **root** component of what will become a tree of nested components @@ -309,13 +351,16 @@ Any files outside of this folder are meant to support building your app.
app/app.module.ts Defines `AppModule`, the [root module](guide/appmodule) that tells Angular how to assemble the application. Right now it declares only the `AppComponent`. @@ -326,13 +371,16 @@ Any files outside of this folder are meant to support building your app.
assets/* A folder where you can put images and anything else to be copied wholesale when you build your application. @@ -342,13 +390,16 @@ Any files outside of this folder are meant to support building your app.
environments/* This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. @@ -363,13 +414,16 @@ Any files outside of this folder are meant to support building your app.
favicon.ico Every site wants to look good on the bookmark bar. Get started with your very own Angular icon. @@ -379,13 +433,16 @@ Any files outside of this folder are meant to support building your app.
index.html The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. @@ -397,13 +454,16 @@ Any files outside of this folder are meant to support building your app.
main.ts The main entry point for your app. Compiles the application with the [JIT compiler](glossary) @@ -416,13 +476,16 @@ Any files outside of this folder are meant to support building your app.
polyfills.ts Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. @@ -434,13 +497,16 @@ Any files outside of this folder are meant to support building your app.
styles.css Your global styles go here. Most of the time you'll want to have local styles in your components for easier maintenance, @@ -451,13 +517,16 @@ Any files outside of this folder are meant to support building your app.
test.ts This is the main entry point for your unit tests. It has some custom configuration that might be unfamiliar, but it's not something you'll @@ -468,13 +537,16 @@ Any files outside of this folder are meant to support building your app.
tsconfig.{app|spec}.json TypeScript compiler configuration for the Angular app (`tsconfig.app.json`) and for the unit tests (`tsconfig.spec.json`). @@ -494,22 +566,28 @@ The `src/` folder is just one of the items inside the project's root folder. Other files help you build, test, maintain, document, and deploy the app. These files go in the root folder next to `src/`. + + my-app + e2e + app.e2e-spec.ts + app.po.ts + tsconfig.e2e.json @@ -518,56 +596,67 @@ These files go in the root folder next to `src/`. + node_modules/... + src/... + .angular-cli.json + .editorconfig + .gitignore + karma.conf.js + package.json + protractor.conf.js + README.md + tsconfig.json + tslint.json @@ -579,30 +668,37 @@ These files go in the root folder next to `src/`. + + + + + + + @@ -611,13 +707,16 @@ These files go in the root folder next to `src/`. + + + + + + + + + + + + + + + @@ -696,13 +807,16 @@ These files go in the root folder next to `src/`. + + + + + + + + + + + + + + + @@ -776,13 +902,16 @@ These files go in the root folder next to `src/`. + + +
File Purpose
e2e/ Inside `e2e/` live the End-to-End tests. They shouldn't be inside `src/` because e2e tests are really a separate app that @@ -629,13 +728,16 @@ These files go in the root folder next to `src/`.
node_modules/ `Node.js` creates this folder and puts all third party modules listed in `package.json` inside of it. @@ -645,13 +747,16 @@ These files go in the root folder next to `src/`.
.angular-cli.json Configuration for Angular CLI. In this file you can set several defaults and also configure what files are included @@ -663,13 +768,16 @@ These files go in the root folder next to `src/`.
.editorconfig Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. @@ -681,13 +789,16 @@ These files go in the root folder next to `src/`.
.gitignore Git configuration to make sure autogenerated files are not commited to source control.
karma.conf.js Unit test configuration for the [Karma test runner](https://karma-runner.github.io), used when running `ng test`. @@ -712,13 +826,16 @@ These files go in the root folder next to `src/`.
package.json `npm` configuration listing the third party packages your project uses. You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here. @@ -728,13 +845,16 @@ These files go in the root folder next to `src/`.
protractor.conf.js End-to-end test configuration for [Protractor](http://www.protractortest.org/), used when running `ng e2e`. @@ -744,13 +864,16 @@ These files go in the root folder next to `src/`.
README.md Basic documentation for your project, pre-filled with CLI command information. Make sure to enhance it with project documentation so that anyone @@ -761,13 +884,16 @@ These files go in the root folder next to `src/`.
tsconfig.json TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
tslint.json Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with [Codelyzer](http://codelyzer.com/), used when running `ng lint`. diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore index d3d7ccbe68..fed143444a 100644 --- a/aio/content/examples/.gitignore +++ b/aio/content/examples/.gitignore @@ -1,4 +1,4 @@ -# _boilerplate files +# boilerplate files **/src/styles.css **/src/systemjs-angular-loader.js **/src/systemjs.config.js @@ -23,12 +23,18 @@ protractor-helpers.js dist/ # special -!_boilerplate/ !/* -!systemjs.config.*.js !*.1.* !*.2.* !*.3.* +*.1.js +*.2.js +*.3.js +*.1.js.map +*.2.js.map +*.3.js.map +!systemjs.config.*.js +!karma-test-shim.*.js # AngularJS files !**/*.ajs.js diff --git a/aio/content/glossary.md b/aio/content/glossary.md index 32650fac40..c401fce547 100644 --- a/aio/content/glossary.md +++ b/aio/content/glossary.md @@ -25,6 +25,15 @@ to a module factory, meaning you don't need to include Ahead-of-time compiled applications also benefit from decreased load time and increased performance. +~~~ + +## Annotation + +~~~ {.l-sub-section} + +In practice, a synonym for [Decoration](glossary#decorator). + + ~~~ @@ -58,7 +67,6 @@ binding an HTML object property to a data object property. Sometimes refers to a [dependency-injection](glossary#dependency-injection) binding between a "token"—also referred to as a "key"—and a dependency [provider](glossary#provider). -When using this more rare usage, be clear in context. ~~~ @@ -67,9 +75,12 @@ When using this more rare usage, be clear in context. ~~~ {.l-sub-section} +You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). +Bootstrapping identifies an application's top level "root" [component](glossary#component), +which is the first component that is loaded for the application. +For more information, see the [Setup](!{docsLatest}/guide/setup) page. -You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](glossary#component), which is the first component that is loaded for the application. -For more information, see the [Setup](!{docsLatest}/guide/setup) page.You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root. +You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root. ~~~ @@ -154,6 +165,48 @@ operations and supporting declaration syntax. * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax). +~~~ + + + +{@a decorator} + + +{@a decoration} +## Decorator | decoration + +~~~ {.l-sub-section} + +A *function* that adds metadata to a class, its members (properties, methods) and function arguments. + +Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (also known as ES7). + +To apply a decorator, position it immediately above or to the left of the item it decorates. + +Angular has its own set of decorators to help it interoperate with your application parts. +The following example is a `@Component` decorator that identifies a +class as an Angular [component](glossary#component) and an `@Input` decorator applied to the `name` property +of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata. +``` +@Component({...}) +export class AppComponent { + constructor(@Inject('SpecialFoo') public foo:Foo) {} + @Input() name:string; +} +``` +The scope of a decorator is limited to the language feature +that it decorates. None of the decorations shown here will "leak" to other +classes that follow it in the file. + + +~~~ {.alert.is-important} + +Always include parentheses `()` when applying a decorator. + + +~~~ + + ~~~ @@ -226,7 +279,7 @@ Read more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection An Angular class responsible for creating, reshaping, and interacting with HTML elements in the browser DOM. The directive is Angular's most fundamental feature. -A directive is ususally associated with an HTML element or attribute. +A directive is usually associated with an HTML element or attribute. This element or attribute is often referred to as the directive itself. When Angular finds a directive in an HTML template, @@ -238,23 +291,21 @@ associate with your custom directives. You add this custom markup to HTML templa as if you were writing native HTML. In this way, directives become extensions of HTML itself. - Directives fall into one of the following categories: * [Components](glossary#component) combine application logic with an HTML template to render application [views](glossary#view). Components are usually represented as HTML elements. They are the building blocks of an Angular application. -1. [Attribute directives](glossary#attribute-directive) can listen to and modify the behavior of +* [Attribute directives](glossary#attribute-directive) can listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually represented as HTML attributes, hence the name. -1. [Structural directives](glossary#structural-directive) are responsible for +* [Structural directives](glossary#structural-directive) are responsible for shaping or reshaping HTML layout, typically by adding, removing, or manipulating elements and their children. - ~~~ @@ -349,6 +400,7 @@ renders as text. That text may be concatenated with neighboring text before it is assigned to an element property or displayed between element tags, as in this example. + @@ -421,7 +473,6 @@ Read more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks) page. - ~~~ {.alert.is-important} Angular has the following types of modules: @@ -501,6 +552,7 @@ display in a [view](glossary#view). Here's an example that uses the built-in `currency` pipe to display a numeric value in the local currency. + {{product.price | currency}} @@ -527,6 +579,24 @@ It relates a lookup token to code—sometimes called a "recipe"—that c {@a Q} +## Reactive forms + +~~~ {.l-sub-section} + +A technique for building Angular forms through code in a component. +The alternative technique is [template-driven forms](glossary#template-driven-forms). + +When building reactive forms: +- The "source of truth" is the component. The validation is defined using code in the component. +- Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`. +- The template input elements do *not* use `ngModel`. +- The associated Angular directives are all prefixed with `Form`, such as `FormGroup`, `FormControl`, and `FormControlName`. + +Reactive forms are powerful, flexible, and a good choice for more complex data-entry form scenarios, such as dynamic generation of form controls. + + +~~~ + ## Router ~~~ {.l-sub-section} @@ -539,6 +609,17 @@ replace one view with another. The Angular component router is a richly featured mechanism for configuring and managing the entire view navigation process, including the creation and destruction of views. +~~~ + +## Router module + +~~~ {.l-sub-section} + +A separate [Angular module](glossary#angular-module) that provides the necessary service providers and directives for navigating through application views. + +For more information, see the [Routing & Navigation](!{docsLatest}/guide/router) page. + + ~~~ ## Routing component @@ -553,6 +634,30 @@ For more information, see the [Routing & Navigation](!{docsLatest}/guide/router) ~~~ +## Scoped package + +~~~ {.l-sub-section} + +A way to group related *npm* packages. +Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page. + +Angular modules are delivered within *scoped packages* such as `@angular/core`, +`@angular/common`, `@angular/platform-browser-dynamic`, `@angular/http`, and `@angular/router`. + +Import a scoped package the same way that you import a normal package. +The only difference, from a consumer perspective, +is that the scoped package name begins with the Angular *scope name*, `@angular`. + + + + + + + + + +~~~ + ## Service ~~~ {.l-sub-section} @@ -579,10 +684,8 @@ For more information, see the [Services](!{docsLatest}/tutorial/toh-pt4) page of {@a snake-case} ## snake_case - ~~~ {.l-sub-section} - The practice of writing compound words or phrases such that an underscore (`_`) separates one word from the next. This form is also known as *underscore case*. @@ -603,7 +706,7 @@ A category of [directive](glossary#directive) that can shape or reshape HTML layout, typically by adding and removing elements in the DOM. The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples. -Read more in the [_Structural Directives_](!{docsLatest}/guide/structural-directives) guide. +Read more in the [Structural Directives](!{docsLatest}/guide/structural-directives) page. ~~~ @@ -618,6 +721,26 @@ the support and guidance of an Angular [directive](glossary#directive), most notably a [component](glossary#component). +~~~ + +## Template-driven forms + +~~~ {.l-sub-section} + +A technique for building Angular forms using HTML forms and input elements in the view. +The alternate technique is [Reactive Forms](glossary#reactive-forms). + +When building template-driven forms: +- The "source of truth" is the template. The validation is defined using attributes on the individual input elements. +- [Two-way binding](glossary#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements. +- Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input. +- The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`. + +Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data-entry form scenarios. + +Read about how to build template-driven forms +in the [Forms](!{docsLatest}/guide/forms) page. + ~~~ @@ -702,7 +825,6 @@ under the control of a [router](glossary#router). ~~~ {.l-sub-section} - A mechanism for encapsulating and intercepting a JavaScript application's asynchronous activity. diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 66392b18dc..07f8c9f328 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -31,25 +31,31 @@ by mapping AngularJS syntax to the equivalent Angular syntax. Templates are the user-facing part of an Angular application and are written in HTML. The following table lists some of the key AngularJS template features with their equivalent Angular template syntax. + + + + + + @@ -58,10 +64,13 @@ The following table lists some of the key AngularJS template features with their + + + + + + + + +
AngularJS Angular
### Bindings/interpolation + Your favorite hero is: {{vm.favoriteHero}} @@ -76,9 +85,11 @@ The following table lists some of the key AngularJS template features with their ### Bindings/interpolation + @@ -96,10 +107,13 @@ The following table lists some of the key AngularJS template features with their
### Filters + <td>{{movie.title | uppercase}}</td> @@ -110,9 +124,11 @@ The following table lists some of the key AngularJS template features with their ### Pipes + @@ -128,10 +144,13 @@ 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> @@ -142,9 +161,11 @@ The following table lists some of the key AngularJS template features with their ### Input variables + @@ -168,25 +189,31 @@ 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. The following are some of the key AngularJS built-in directives and their equivalents in Angular. + + + + + + @@ -195,10 +222,13 @@ The following are some of the key AngularJS built-in directives and their equiva + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AngularJS Angular
### ng-app + <body ng-app="movieHunter"> @@ -211,15 +241,18 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bootstrapping +
+ @@ -236,10 +269,13 @@ 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, @@ -257,9 +293,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngClass + @@ -283,10 +321,13 @@ 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)"> @@ -301,9 +342,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `click` event + @@ -332,10 +375,13 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-controller + <div ng-controller="MovieListCtrl as vm"> @@ -346,9 +392,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Component decorator + @@ -364,8 +412,10 @@ 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 @@ -373,6 +423,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `hidden` property In Angular, you use property binding; there is no built-in *hide* directive. @@ -383,10 +434,13 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-href + <a ng-href="angularDocsUrl">Angular Docs</a> @@ -396,6 +450,7 @@ The following are some of the key AngularJS built-in directives and their equiva 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> @@ -404,9 +459,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `href` property + @@ -419,6 +476,7 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. + @@ -432,10 +490,13 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-if + <table ng-if="movies.length"> @@ -447,9 +508,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### *ngIf + @@ -467,10 +530,13 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-model + <input ng-model="vm.favoriteHero"/> @@ -480,9 +546,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngModel + @@ -499,10 +567,13 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-repeat + <tr ng-repeat="movie in vm.movies"> @@ -514,9 +585,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### *ngFor + @@ -538,10 +611,13 @@ 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}} @@ -555,9 +631,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `hidden` property + @@ -578,10 +656,13 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-src + <img ng-src="{{movie.imageurl}}"> @@ -592,9 +673,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `src` property + @@ -610,10 +693,13 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-style + <div ng-style="{color: colorPreference}"> @@ -627,9 +713,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngStyle + @@ -651,10 +739,13 @@ 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)"> @@ -680,9 +771,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngSwitch + @@ -718,25 +811,31 @@ Angular **pipes** provide formatting and transformation for data in the template Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see [Pipes](guide/pipes). + + + + + + @@ -745,10 +844,13 @@ For more information on pipes, see [Pipes](guide/pipes). + + + + + + + + + + + + + + + + + + + + + + + +
AngularJS Angular
### currency + <td>{{movie.price | currency}}</td> @@ -757,9 +859,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### currency + @@ -771,10 +875,13 @@ For more information on pipes, see [Pipes](guide/pipes).
### date + <td>{{movie.releaseDate | date}}</td> @@ -783,9 +890,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### date + @@ -798,10 +907,13 @@ For more information on pipes, see [Pipes](guide/pipes).
### filter + <tr ng-repeat="movie in movieList | filter: {title:listFilter}"> @@ -810,6 +922,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### 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. @@ -820,10 +933,13 @@ For more information on pipes, see [Pipes](guide/pipes).
### json + <pre>{{movie | json}}</pre> @@ -832,9 +948,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### json + @@ -846,10 +964,13 @@ For more information on pipes, see [Pipes](guide/pipes).
### limitTo + <tr ng-repeat="movie in movieList | limitTo:2:0"> @@ -859,9 +980,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### slice + @@ -876,10 +999,13 @@ For more information on pipes, see [Pipes](guide/pipes).
### lowercase + <div>{{movie.title | lowercase}}</div> @@ -888,9 +1014,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### lowercase + @@ -902,10 +1030,13 @@ For more information on pipes, see [Pipes](guide/pipes).
### number + <td>{{movie.starRating | number}}</td> @@ -914,9 +1045,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### number + @@ -933,10 +1066,13 @@ For more information on pipes, see [Pipes](guide/pipes).
### orderBy + <tr ng-repeat="movie in movieList | orderBy : 'title'"> @@ -946,6 +1082,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### none For performance reasons, no comparable pipe exists in Angular. @@ -973,25 +1110,31 @@ In Angular, you build a **component**. Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript. + + + + + + @@ -1000,10 +1143,13 @@ The Angular code is shown using TypeScript. + + + + + + + + + + + + + + +
AngularJS Angular
### IIFE + (function () { ... @@ -1016,6 +1162,7 @@ The Angular code is shown using TypeScript. ### none This is a nonissue in Angular because ES 2015 modules @@ -1029,10 +1176,13 @@ The Angular code is shown using TypeScript.
### Angular modules + angular.module("movieHunter", ["ngRoute"]); @@ -1042,9 +1192,11 @@ The Angular code is shown using TypeScript. ### Angular modules + @@ -1060,10 +1212,13 @@ The Angular code is shown using TypeScript.
### Controller registration + angular .module("movieHunter") @@ -1080,9 +1235,11 @@ The Angular code is shown using TypeScript. ### Component decorator + @@ -1101,10 +1258,13 @@ The Angular code is shown using TypeScript.
### Controller function + function MovieListCtrl(movieService) { } @@ -1114,9 +1274,11 @@ The Angular code is shown using TypeScript. ### Component class + @@ -1133,10 +1295,13 @@ The Angular code is shown using TypeScript.
### Dependency injection + MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { @@ -1151,9 +1316,11 @@ The Angular code is shown using TypeScript. ### Dependency injection + @@ -1184,25 +1351,31 @@ As the application grows over time, the styles for the many parts of the applica merge, which can cause unexpected results. In Angular, you can still define style sheets for your entire application. But now you can also encapsulate a style sheet within a specific component. + + + + + + @@ -1211,10 +1384,13 @@ also encapsulate a style sheet within a specific component. + + +
AngularJS Angular
### Link tag + <link href="styles.css" rel="stylesheet" /> @@ -1224,9 +1400,11 @@ also encapsulate a style sheet within a specific component. ### Link tag + @@ -1236,6 +1414,7 @@ also encapsulate a style sheet within a specific component. In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define a style sheet for a particular component. + diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 1b6578b66e..068a456f3f 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -54,6 +54,7 @@ The examples in this page are available as a . {@a example-transitioning-between-states} ## Quickstart example: Transitioning between two states +
A simple transition animation
@@ -65,12 +66,14 @@ Animations are defined inside `@Component` metadata. Before you can add animatio to import a few animation-specific imports and functions: + + @@ -80,6 +83,7 @@ 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. + @@ -98,6 +102,7 @@ Now, using the `[@triggerName]` syntax, attach the animation that you just defin one or more elements in the component's template. + @@ -110,6 +115,7 @@ With this setup, an animated transition appears whenever a hero object changes s Here's the full component implementation: + @@ -128,6 +134,7 @@ component's template. You can define *styles* for each animation state: + @@ -140,11 +147,13 @@ 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: + +
In Angular animations you define states and transitions between states
@@ -153,6 +162,7 @@ If several transitions have the same timing configuration, you can combine them into the same `transition` definition: + @@ -161,6 +171,7 @@ When both directions of a transition have the same timing, as in the previous example, you can use the shorthand syntax `<=>`: + @@ -172,6 +183,7 @@ When the transition finishes, none of these styles are kept because they're not defined in a `state`. + @@ -184,6 +196,7 @@ transitions that apply regardless of which state the animation is in. For exampl * The `active => *` transition applies when the element's state changes from `active` to anything else. * The `* => *` transition applies when *any* change between two states takes place. +
The wildcard state can be used to match many different transitions at once
@@ -198,6 +211,7 @@ leave animations. For example the `* => void` transition applies when the element leaves the view, regardless of what state it was in before it left. +
The void state can be used for enter and leave transitions
@@ -205,6 +219,7 @@ regardless of what state it was in before it left. The wildcard state `*` also matches `void`. ## Example: Entering and leaving +
Enter and leave animations
@@ -218,6 +233,7 @@ 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. + @@ -231,6 +247,7 @@ and leaves to the right. ~~~ {.l-sub-section} These two common animations have their own aliases: + transition(':enter', [ ... ]); // void => * transition(':leave', [ ... ]); // * => void @@ -242,6 +259,7 @@ These two common animations have their own aliases: ~~~ ## Example: Entering and leaving from different states +
Enter and leave animations combined with state animations
@@ -258,12 +276,14 @@ is: This gives you fine-grained control over each transition: +
This example transitions between active, inactive, and void states
+ @@ -288,6 +308,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau * `50` is the same as saying `'50px'` ## Automatic property calculation +
Animation with automated height calculation
@@ -304,6 +325,7 @@ In this example, the leave animation takes whatever height the element has befor leaves and animates from that height to zero: + @@ -342,6 +364,7 @@ and the delay (or as the *second* value when there is no delay): * Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'` * Run for 200ms, with easing: `'0.2s ease-in-out'` +
Animations with specific timings
@@ -354,11 +377,13 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: + ## Multi-step animations with keyframes +
Animations with some bounce implemented with keyframes
@@ -374,6 +399,7 @@ This example adds some "bounce" to the enter and leave animations with keyframes: + @@ -386,6 +412,7 @@ 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 +
Parallel animations with different timings, implemented with groups
@@ -402,6 +429,7 @@ enter and leave allows for two different timing configurations. Both are applied to the same element in parallel, but run independently of each other: + @@ -415,6 +443,7 @@ 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 8065290b36..fbbbcd9c34 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -114,13 +114,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: + + + @@ -129,6 +132,7 @@ 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 @@ -143,6 +147,7 @@ Copy the original `src/tsconfig.json` to a file called `tsconfig-aot.json` on th then modify it as follows. + @@ -167,6 +172,7 @@ While JIT app URLs are more flexible, stick with _component-relative_ URLs for c ***Compiling the application*** Initiate AOT compilation from the command line using the previously installed `ngc` compiler by executing: + node_modules/.bin/ngc -p tsconfig-aot.json @@ -176,6 +182,7 @@ 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: + "node_modules/.bin/ngc" -p tsconfig-aot.json @@ -234,13 +241,16 @@ Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to Here is AOT bootstrap in `main.ts` next to the original JIT version: + + + @@ -290,6 +300,7 @@ What matters is that the code uses ES `import` and `export` statements rather th ~~~ 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 @@ -299,6 +310,7 @@ in the project root directory to tell Rollup how to process the application. The cookbook configuration file looks like this. + @@ -330,6 +342,7 @@ in the final bundle. Using it is straigthforward. Add the following to the `plugins` !{_array} in `rollup-config.js`: + @@ -341,6 +354,7 @@ This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code Add the following to the `plugins` !{_array}: + @@ -360,6 +374,7 @@ the code into an even smaller package going over the wire. {@a run-rollup} ### Run Rollup Execute the Rollup process with this command: + node_modules/.bin/rollup -c rollup-config.js @@ -369,6 +384,7 @@ Execute the Rollup process with this command: ~~~ {.l-sub-section} Windows users should surround the `rollup` command in double quotes: + "node_modules/.bin/rollup" -c rollup-config.js @@ -388,6 +404,7 @@ Remove the scripts that concern SystemJS. Instead, load the bundle file using a single `