docs(aio): remove _blank target (#16205)
This commit is contained in:
parent
d1fb066d07
commit
249cd8c2ec
|
@ -43,7 +43,7 @@ the components and templates must be converted to executable JavaScript by the _
|
||||||
|
|
||||||
<div class="l-sub-section">
|
<div class="l-sub-section">
|
||||||
|
|
||||||
<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo" target="_blank">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
|
<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -582,7 +582,7 @@ Now AOT-compile the app and launch it with the `lite-server`:
|
||||||
|
|
||||||
It's fascinating to see what the generated JavaScript bundle looks like after Rollup.
|
It's fascinating to see what the generated JavaScript bundle looks like after Rollup.
|
||||||
The code is minified, so you won't learn much from inspecting the bundle directly.
|
The code is minified, so you won't learn much from inspecting the bundle directly.
|
||||||
But the <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md" target="_blank">source-map-explorer</a>
|
But the <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a>
|
||||||
tool can be quite revealing.
|
tool can be quite revealing.
|
||||||
|
|
||||||
Install it:
|
Install it:
|
||||||
|
@ -601,7 +601,8 @@ The `source-map-explorer` analyzes the source map generated with the bundle and
|
||||||
showing exactly which application and Angular modules and classes are included in the bundle.
|
showing exactly which application and Angular modules and classes are included in the bundle.
|
||||||
|
|
||||||
Here's the map for _Tour of Heroes_.
|
Here's the map for _Tour of Heroes_.
|
||||||
<a href="assets/images/guide/aot-compiler/toh-pt6-bundle.png" target="_blank" title="View larger image">
|
|
||||||
|
<a href="assets/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
|
||||||
<figure class='image-display'>
|
<figure class='image-display'>
|
||||||
<img src="assets/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
|
<img src="assets/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
|
@ -91,7 +91,7 @@ An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule`
|
||||||
Decorators are functions that modify JavaScript classes.
|
Decorators are functions that modify JavaScript classes.
|
||||||
Angular has many decorators that attach metadata to classes so that it knows
|
Angular has many decorators that attach metadata to classes so that it knows
|
||||||
what those classes mean and how they should work.
|
what those classes mean and how they should work.
|
||||||
<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0" target="_blank">
|
<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0">
|
||||||
Learn more</a> about decorators on the web.
|
Learn more</a> about decorators on the web.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -169,7 +169,7 @@ Other JavaScript modules use *import statements* to access public objects from o
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a href="http://exploringjs.com/es6/ch_modules.html" target="_blank">Learn more about the JavaScript module system on the web.</a>
|
<a href="http://exploringjs.com/es6/ch_modules.html">Learn more about the JavaScript module system on the web.</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -759,4 +759,4 @@ by implementing the lifecycle hook interfaces.
|
||||||
|
|
||||||
|
|
||||||
> [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework
|
> [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework
|
||||||
using the _Angular Testing Platform_.
|
using the _Angular Testing Platform_.
|
||||||
|
|
|
@ -202,8 +202,8 @@ Angular supports most recent browsers. This includes the following specific vers
|
||||||
|
|
||||||
|
|
||||||
Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request,
|
Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request,
|
||||||
using <a href="https://saucelabs.com/" target="_blank">SauceLabs</a> and
|
using <a href="https://saucelabs.com/">SauceLabs</a> and
|
||||||
<a href="https://www.browserstack.com" target="_blank">Browserstack</a>.
|
<a href="https://www.browserstack.com">Browserstack</a>.
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -353,7 +353,7 @@ Here are the features which may require additional polyfills:
|
||||||
<tr style="vertical-align: top">
|
<tr style="vertical-align: top">
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a href="../api/common/index/DatePipe-pipe.html" target="_blank">Date</a> <span>, </span> <a href="../api/common/index/CurrencyPipe-pipe.html" target="_blank">currency</a> <span>, </span> <a href="../api/common/index/DecimalPipe-pipe.html" target="_blank">decimal</a> <span> and </span> <a href="../api/common/index/PercentPipe-pipe.html" target="_blank">percent</a> <span> pipes</span>
|
<a href="../api/common/index/DatePipe-pipe.html">Date</a> <span>, </span> <a href="../api/common/index/CurrencyPipe-pipe.html">currency</a> <span>, </span> <a href="../api/common/index/DecimalPipe-pipe.html">decimal</a> <span> and </span> <a href="../api/common/index/PercentPipe-pipe.html">percent</a> <span> pipes</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -371,7 +371,7 @@ Here are the features which may require additional polyfills:
|
||||||
<tr style="vertical-align: top">
|
<tr style="vertical-align: top">
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a href="../api/common/index/NgClass-directive.html" target="_blank">NgClass</a> <span> on SVG elements</span>
|
<a href="../api/common/index/NgClass-directive.html">NgClass</a> <span> on SVG elements</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -433,7 +433,7 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a id='core-es6' href="https://github.com/zloirock/core-js" target="_blank">ES6</a>
|
<a id='core-es6' href="https://github.com/zloirock/core-js">ES6</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -449,7 +449,7 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a id='classlist' href="https://github.com/eligrey/classList.js" target="_blank">classList</a>
|
<a id='classlist' href="https://github.com/eligrey/classList.js">classList</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -465,7 +465,7 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a id='intl' href="https://github.com/andyearnshaw/Intl.js" target="_blank">Intl</a>
|
<a id='intl' href="https://github.com/andyearnshaw/Intl.js">Intl</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -481,7 +481,7 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a id='web-animations' href="https://github.com/web-animations/web-animations-js" target="_blank">Web Animations</a>
|
<a id='web-animations' href="https://github.com/web-animations/web-animations-js">Web Animations</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -497,7 +497,7 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank">Typed Array</a>
|
<a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js">Typed Array</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -513,7 +513,7 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a id='blob' href="https://github.com/eligrey/Blob.js" target="_blank">Blob</a>
|
<a id='blob' href="https://github.com/eligrey/Blob.js">Blob</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -529,7 +529,7 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<a id='formdata' href="https://github.com/francois2metz/html5-formdata" target="_blank">FormData</a>
|
<a id='formdata' href="https://github.com/francois2metz/html5-formdata">FormData</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -547,4 +547,4 @@ Below are the polyfills which are used to test the framework itself. They are a
|
||||||
|
|
||||||
|
|
||||||
\* Figures are for minified and gzipped code,
|
\* Figures are for minified and gzipped code,
|
||||||
computed with the <a href="http://closure-compiler.appspot.com/home" target="_blank">closure compiler</a>.
|
computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>.
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
@title
|
||||||
|
Cookbook
|
||||||
|
|
||||||
|
@intro
|
||||||
|
A collection of recipes for common Angular application scenarios.
|
||||||
|
|
||||||
|
@description
|
||||||
|
|
||||||
|
|
||||||
|
The *Cookbook* offers answers to common implementation questions.
|
||||||
|
|
||||||
|
Each cookbook page is a collection of recipes focused on a particular Angular feature or application challenge
|
||||||
|
such as data binding, cross-component interaction, and communicating with a remote server via HTTP.
|
||||||
|
|
||||||
|
|
||||||
|
<div class="l-sub-section">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The cookbook is just getting started. Many more recipes are on the way.
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Each cookbook links to a live sample with every recipe included.
|
||||||
|
|
||||||
|
Recipes are deliberately brief and code-centric.
|
||||||
|
Each recipe links to a relevant page of the [Developer Guide](guide) or the
|
||||||
|
[API Reference](api) where you can learn more about
|
||||||
|
the purpose, context, and design choices behind the code snippets.
|
||||||
|
|
||||||
|
## Feedback
|
||||||
|
|
||||||
|
Post *documentation* requests and comments as
|
||||||
|
<a href="https://github.com/angular/angular.io/issues" title="Documentation issues on github">
|
||||||
|
<i>issues</i> on the angular.io</a> github repository.
|
||||||
|
Fixes (small ones) are greatly appreciated as
|
||||||
|
<a href="https://github.com/angular/angular.io/pulls" title="Documentation PRs on github">
|
||||||
|
<i>pull requests</i></a>.
|
||||||
|
|
||||||
|
Post issues with *Angular itself* to the [angular](https://github.com/angular/angular) github repository.
|
|
@ -39,7 +39,7 @@ It helps clearly separate app code from setup and configuration files.
|
||||||
All samples now have a `src/` folder at the project root.
|
All samples now have a `src/` folder at the project root.
|
||||||
The former `app/` folder moves under `src/`.
|
The former `app/` folder moves under `src/`.
|
||||||
Read about moving your existing project to this structure in
|
Read about moving your existing project to this structure in
|
||||||
<a href="https://github.com/angular/quickstart#updating-to-a-newer-version-of-the-quickstart-repo" target="_blank" target="Migrating samples/quickstart app to the src folder">
|
<a href="https://github.com/angular/quickstart#updating-to-a-newer-version-of-the-quickstart-repo" target="Migrating samples/quickstart app to the src folder">
|
||||||
the QuickStart repo update instructions</a>.
|
the QuickStart repo update instructions</a>.
|
||||||
|
|
||||||
Notably:
|
Notably:
|
||||||
|
@ -154,7 +154,7 @@ re-explains `[(ngModel)]` in terms of the basic `[()]` syntax.
|
||||||
|
|
||||||
This change supports ES6 developers and aligns better with typical Angular libraries.
|
This change supports ES6 developers and aligns better with typical Angular libraries.
|
||||||
It does not affect the module's API but it does affect how you load and import it.
|
It does not affect the module's API but it does affect how you load and import it.
|
||||||
See the <a href="https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20" target="_blank">change note</a>
|
See the <a href="https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20">change note</a>
|
||||||
in the `in-memory-web-api` repo.
|
in the `in-memory-web-api` repo.
|
||||||
|
|
||||||
## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19)
|
## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19)
|
||||||
|
@ -201,7 +201,7 @@ This library is also useful to you during early development before you have a se
|
||||||
|
|
||||||
The package name was changed from "angular2-in-memory-web-api" which is still frozen-in-time on npm.
|
The package name was changed from "angular2-in-memory-web-api" which is still frozen-in-time on npm.
|
||||||
The new "angular-in-memory-web-api" has new features.
|
The new "angular-in-memory-web-api" has new features.
|
||||||
<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md" target="_blank">Read about them on github</a>.
|
<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md">Read about them on github</a>.
|
||||||
|
|
||||||
## "Style Guide" with _NgModules_ (2016-09-27)
|
## "Style Guide" with _NgModules_ (2016-09-27)
|
||||||
|
|
||||||
|
|
|
@ -154,7 +154,7 @@ Notice the `paths` key:
|
||||||
|
|
||||||
In the standard SystemJS config, the `npm` path points to the `node_modules/`.
|
In the standard SystemJS config, the `npm` path points to the `node_modules/`.
|
||||||
In this server config, it points to
|
In this server config, it points to
|
||||||
<a href="https://unpkg.com/" target="_blank" title="unpkg.com">https://unpkg.com</a>,
|
<a href="https://unpkg.com/" title="unpkg.com">https://unpkg.com</a>,
|
||||||
a site that hosts _npm packages_,
|
a site that hosts _npm packages_,
|
||||||
and loads them from the web directly.
|
and loads them from the web directly.
|
||||||
There are other service providers that do the same thing.
|
There are other service providers that do the same thing.
|
||||||
|
@ -290,13 +290,13 @@ and using [_rollup_](guide/deployment#rollup) for bundling, minification, uglifi
|
||||||
|
|
||||||
### Webpack (and AOT)
|
### Webpack (and AOT)
|
||||||
|
|
||||||
<a href="https://webpack.js.org/" target="_blank" title="Webpack 2">Webpack 2</a> is another
|
<a href="https://webpack.js.org/" title="Webpack 2">Webpack 2</a> is another
|
||||||
great option for inlining templates and style-sheets, for bundling, minifying, and uglifying the application.
|
great option for inlining templates and style-sheets, for bundling, minifying, and uglifying the application.
|
||||||
The "[Webpack: an introduction](guide/webpack "Webpack: an introduction")" guide will get you started
|
The "[Webpack: an introduction](guide/webpack "Webpack: an introduction")" guide will get you started
|
||||||
using webpack with Angular.
|
using webpack with Angular.
|
||||||
|
|
||||||
Consider configuring _Webpack_ with the official
|
Consider configuring _Webpack_ with the official
|
||||||
<a href="https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack" target="_blank" title="Ahead-of-Time Webpack Plugin">
|
<a href="https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack" title="Ahead-of-Time Webpack Plugin">
|
||||||
Angular Ahead-of-Time Webpack Plugin</a>.
|
Angular Ahead-of-Time Webpack Plugin</a>.
|
||||||
This plugin transpiles the TypeScript application code,
|
This plugin transpiles the TypeScript application code,
|
||||||
bundles lazy loaded `NgModules` separately,
|
bundles lazy loaded `NgModules` separately,
|
||||||
|
@ -315,10 +315,10 @@ _Tree shaking_ is a _dead code elimination_ technique that removes entire export
|
||||||
If a library exports something that the application doesn't import, a tree shaking tool removes it from the code base.
|
If a library exports something that the application doesn't import, a tree shaking tool removes it from the code base.
|
||||||
|
|
||||||
Tree shaking was popularized by
|
Tree shaking was popularized by
|
||||||
<a href="http://rollupjs.org/" target="_blank" title="Rollup">Rollup</a>, a popular tool with an ecosystem of
|
<a href="http://rollupjs.org/" title="Rollup">Rollup</a>, a popular tool with an ecosystem of
|
||||||
plugins for bundling, minification, and uglification.
|
plugins for bundling, minification, and uglification.
|
||||||
Learn more about tree shaking and dead code elmination in
|
Learn more about tree shaking and dead code elmination in
|
||||||
<a href="https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.15ih9cyvl" target="_blank" title="Tree-shaking and Dead Code Elimination">
|
<a href="https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.15ih9cyvl" title="Tree-shaking and Dead Code Elimination">
|
||||||
this post</a> by rollup-creator, Rich Harris.
|
this post</a> by rollup-creator, Rich Harris.
|
||||||
|
|
||||||
|
|
||||||
|
@ -349,7 +349,7 @@ You can waste a lot of time and money optimizing something that has no tangible
|
||||||
You should measure the app's actual behavior when running in the environments that are important to you.
|
You should measure the app's actual behavior when running in the environments that are important to you.
|
||||||
|
|
||||||
The
|
The
|
||||||
<a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" target="_blank" title="Chrome DevTools Network Performance">
|
<a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" title="Chrome DevTools Network Performance">
|
||||||
Chrome DevTools Network Performance page</a> is a good place to start learning about measuring performance.
|
Chrome DevTools Network Performance page</a> is a good place to start learning about measuring performance.
|
||||||
|
|
||||||
The [WebPageTest](https://www.webpagetest.org/) tool is another good choice
|
The [WebPageTest](https://www.webpagetest.org/) tool is another good choice
|
||||||
|
@ -611,7 +611,7 @@ and to
|
||||||
### Requesting services from a different server (CORS)
|
### Requesting services from a different server (CORS)
|
||||||
|
|
||||||
Angular developers may encounter a
|
Angular developers may encounter a
|
||||||
<a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank" title="Cross-origin resource sharing">
|
<a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" title="Cross-origin resource sharing">
|
||||||
<i>cross-origin resource sharing</i></a> error when making a service request (typically a data service request).
|
<i>cross-origin resource sharing</i></a> error when making a service request (typically a data service request).
|
||||||
to a server other than the application's own host server.
|
to a server other than the application's own host server.
|
||||||
Browsers forbid such requests unless the server permits them explicitly.
|
Browsers forbid such requests unless the server permits them explicitly.
|
||||||
|
@ -619,7 +619,7 @@ Browsers forbid such requests unless the server permits them explicitly.
|
||||||
There isn't anything the client application can do about these errors.
|
There isn't anything the client application can do about these errors.
|
||||||
The server must be configured to accept the application's requests.
|
The server must be configured to accept the application's requests.
|
||||||
Read about how to enable CORS for specific servers at
|
Read about how to enable CORS for specific servers at
|
||||||
<a href="http://enable-cors.org/server.html" target="_blank" title="Enabling CORS server">enable-cors.org</a>.
|
<a href="http://enable-cors.org/server.html" title="Enabling CORS server">enable-cors.org</a>.
|
||||||
|
|
||||||
|
|
||||||
{@a next-steps}
|
{@a next-steps}
|
||||||
|
|
|
@ -318,7 +318,7 @@ Alternatively, you can temporarily target a JSON file by changing the endpoint U
|
||||||
|
|
||||||
{@a rxjs}
|
{@a rxjs}
|
||||||
If you are familiar with asynchronous methods in modern JavaScript, you might expect the `get` method to return a
|
If you are familiar with asynchronous methods in modern JavaScript, you might expect the `get` method to return a
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" title="Promise">promise</a>.
|
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="Promise">promise</a>.
|
||||||
You'd expect to chain a call to `then()` and extract the heroes.
|
You'd expect to chain a call to `then()` and extract the heroes.
|
||||||
Instead you're calling a `map()` method.
|
Instead you're calling a `map()` method.
|
||||||
Clearly this is not a promise.
|
Clearly this is not a promise.
|
||||||
|
@ -332,9 +332,9 @@ and `map()` is one of the RxJS *operators*.
|
||||||
|
|
||||||
|
|
||||||
## RxJS library
|
## RxJS library
|
||||||
<a href="http://reactivex.io/rxjs" target="_blank" title="RxJS Reactive Extensions">RxJS</a>
|
<a href="http://reactivex.io/rxjs" title="RxJS Reactive Extensions">RxJS</a>
|
||||||
is a third party library, endorsed by Angular, that implements the
|
is a third party library, endorsed by Angular, that implements the
|
||||||
<a href="https://www.youtube.com/watch?v=VLGCCpOWFFw" target="_blank" title="Video: Rob Wormald on Observables"><b>asynchronous Observable</b></a> pattern.
|
<a href="https://www.youtube.com/watch?v=VLGCCpOWFFw" title="Video: Rob Wormald on Observables"><b>asynchronous Observable</b></a> pattern.
|
||||||
|
|
||||||
All of the Developer Guide samples have installed the RxJS npm package
|
All of the Developer Guide samples have installed the RxJS npm package
|
||||||
because Observables are used widely in Angular applications.
|
because Observables are used widely in Angular applications.
|
||||||
|
@ -962,13 +962,13 @@ processes that stream _before_ calling the service.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md" target="_blank" title="debounce operator"><i>debounceTime</i></a>
|
* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md" title="debounce operator"><i>debounceTime</i></a>
|
||||||
waits for the user to stop typing for at least 300 milliseconds.
|
waits for the user to stop typing for at least 300 milliseconds.
|
||||||
|
|
||||||
* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinctuntilchanged.md" target="_blank" title="distinctUntilChanged operator"><i>distinctUntilChanged</i></a>
|
* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinctuntilchanged.md" title="distinctUntilChanged operator"><i>distinctUntilChanged</i></a>
|
||||||
ensures that the service is called only when the new search term is different from the previous search term.
|
ensures that the service is called only when the new search term is different from the previous search term.
|
||||||
|
|
||||||
* The <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md" target="_blank" title="switchMap operator"><i>switchMap</i></a>
|
* The <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md" title="switchMap operator"><i>switchMap</i></a>
|
||||||
calls the `WikipediaService` with a fresh, debounced search term and coordinates the stream(s) of service response.
|
calls the `WikipediaService` with a fresh, debounced search term and coordinates the stream(s) of service response.
|
||||||
|
|
||||||
The role of `switchMap` is particularly important.
|
The role of `switchMap` is particularly important.
|
||||||
|
@ -1104,11 +1104,11 @@ it substitutes the Angular _in-memory web api_ simulator for the actual XHR back
|
||||||
|
|
||||||
The in-memory web api is not part of Angular _proper_.
|
The in-memory web api is not part of Angular _proper_.
|
||||||
It's an optional service in its own
|
It's an optional service in its own
|
||||||
<a href="https://github.com/angular/in-memory-web-api" target="_blank" title="In-memory Web API"><i>angular-in-memory-web-api</i></a>
|
<a href="https://github.com/angular/in-memory-web-api" title="In-memory Web API"><i>angular-in-memory-web-api</i></a>
|
||||||
library installed with npm (see `package.json`).
|
library installed with npm (see `package.json`).
|
||||||
|
|
||||||
See the
|
See the
|
||||||
<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md" target="_blank" title='In-memory Web API "README.md"'><i>README file</i></a>
|
<a href="https://github.com/angular/in-memory-web-api/blob/master/README.md" title='In-memory Web API "README.md"'><i>README file</i></a>
|
||||||
for configuration options, default behaviors, and limitations.
|
for configuration options, default behaviors, and limitations.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -275,11 +275,11 @@ and write something like: `other {a wolf pack}`.
|
||||||
|
|
||||||
|
|
||||||
This syntax conforms to the
|
This syntax conforms to the
|
||||||
<a href="http://userguide.icu-project.org/formatparse/messages" target="_blank" title="ICU Message Format">ICU Message Format</a>
|
<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU Message Format</a>
|
||||||
that derives from the
|
that derives from the
|
||||||
<a href="http://cldr.unicode.org/" target="_blank" title="CLDR">Common Locale Data Repository (CLDR)</a>,
|
<a href="http://cldr.unicode.org/" title="CLDR">Common Locale Data Repository (CLDR)</a>,
|
||||||
which specifies the
|
which specifies the
|
||||||
<a href="http://unicode.org/reports/tr35/tr35-numbers.html#Language_Plural_Rules" target="_blank" title="Pluralization Rules">pluralization rules</a>.
|
<a href="http://unicode.org/reports/tr35/tr35-numbers.html#Language_Plural_Rules" title="Pluralization Rules">pluralization rules</a>.
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -295,7 +295,7 @@ These text alternatives require translation too.
|
||||||
|
|
||||||
You can handle this with a `select` translation.
|
You can handle this with a `select` translation.
|
||||||
A `select` also follows the
|
A `select` also follows the
|
||||||
<a href="http://userguide.icu-project.org/formatparse/messages" target="_blank" title="ICU Message Format">ICU message syntax</a>.
|
<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU message syntax</a>.
|
||||||
You choose among alternative translation based on a string value instead of a number.
|
You choose among alternative translation based on a string value instead of a number.
|
||||||
|
|
||||||
The following format message in the component template binds to the component's `gender`
|
The following format message in the component template binds to the component's `gender`
|
||||||
|
@ -351,7 +351,7 @@ Windows users may have to quote the command like this: `"./node_modules/.bin/ng-
|
||||||
|
|
||||||
|
|
||||||
By default, the tool generates a translation file named **`messages.xlf`** in the
|
By default, the tool generates a translation file named **`messages.xlf`** in the
|
||||||
<a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">XML Localisation Interchange File Format (XLIFF, version 1.2)</a>.
|
<a href="https://en.wikipedia.org/wiki/XLIFF">XML Localisation Interchange File Format (XLIFF, version 1.2)</a>.
|
||||||
|
|
||||||
|
|
||||||
{@a other-formats}
|
{@a other-formats}
|
||||||
|
@ -360,7 +360,7 @@ By default, the tool generates a translation file named **`messages.xlf`** in th
|
||||||
### Other translation formats
|
### Other translation formats
|
||||||
|
|
||||||
You can generate a file named **`messages.xmb`** in the
|
You can generate a file named **`messages.xmb`** in the
|
||||||
<a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" target="_blank">XML Message Bundle (XMB)</a> format
|
<a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" >XML Message Bundle (XMB)</a> format
|
||||||
by adding the `--i18nFormat=xmb` flag.
|
by adding the `--i18nFormat=xmb` flag.
|
||||||
|
|
||||||
|
|
||||||
|
@ -452,7 +452,7 @@ such as internationalization files, there.
|
||||||
|
|
||||||
|
|
||||||
Localization and internationalization are
|
Localization and internationalization are
|
||||||
<a href="https://en.wikipedia.org/wiki/Internationalization_and_localization" target="_blank">different but closely related terms</a>.
|
<a href="https://en.wikipedia.org/wiki/Internationalization_and_localization">different but closely related terms</a>.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -460,7 +460,7 @@ Localization and internationalization are
|
||||||
|
|
||||||
This cookbook follows that suggestion. It has a `locale` folder under the `src/`.
|
This cookbook follows that suggestion. It has a `locale` folder under the `src/`.
|
||||||
Assets within the folder carry a filename extension that matches a language-culture code from a
|
Assets within the folder carry a filename extension that matches a language-culture code from a
|
||||||
<a href="https://msdn.microsoft.com/en-us/library/ee825488(v=cs.20).aspx" target="_blank">well-known codeset</a>.
|
<a href="https://msdn.microsoft.com/en-us/library/ee825488(v=cs.20).aspx">well-known codeset</a>.
|
||||||
|
|
||||||
Make a copy of the `messages.xlf` file, put it in the `locale` folder and
|
Make a copy of the `messages.xlf` file, put it in the `locale` folder and
|
||||||
rename it `messages.es.xlf`for the Spanish language translation.
|
rename it `messages.es.xlf`for the Spanish language translation.
|
||||||
|
@ -472,7 +472,7 @@ Do the same for each target language.
|
||||||
### Translate text nodes
|
### Translate text nodes
|
||||||
In the real world, you send the `messages.es.xlf` file to a Spanish translator who fills in the translations
|
In the real world, you send the `messages.es.xlf` file to a Spanish translator who fills in the translations
|
||||||
using one of the
|
using one of the
|
||||||
<a href="https://en.wikipedia.org/wiki/XLIFF#Editors" target="_blank">many XLIFF file editors</a>.
|
<a href="https://en.wikipedia.org/wiki/XLIFF#Editors">many XLIFF file editors</a>.
|
||||||
|
|
||||||
This sample file is easy to translate without a special editor or knowledge of Spanish.
|
This sample file is easy to translate without a special editor or knowledge of Spanish.
|
||||||
Open `messages.es.xlf` and find the first `<trans-unit>` section:
|
Open `messages.es.xlf` and find the first `<trans-unit>` section:
|
||||||
|
@ -652,7 +652,7 @@ You provide the Angular compiler with three new pieces of information:
|
||||||
|
|
||||||
* The translation file.
|
* The translation file.
|
||||||
* The translation file format.
|
* The translation file format.
|
||||||
* The <a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">_Locale ID_</a>
|
* The <a href="https://en.wikipedia.org/wiki/XLIFF">_Locale ID_</a>
|
||||||
(`es` or `en-US` for instance).
|
(`es` or `en-US` for instance).
|
||||||
|
|
||||||
_How_ you provide this information depends upon whether you compile with
|
_How_ you provide this information depends upon whether you compile with
|
||||||
|
@ -852,4 +852,4 @@ they don't tell you what the new `id`s should be.
|
||||||
**Commit all translation message files to source control**,
|
**Commit all translation message files to source control**,
|
||||||
especially the English source `messages.xlf`.
|
especially the English source `messages.xlf`.
|
||||||
The difference between the old and the new `messages.xlf` file
|
The difference between the old and the new `messages.xlf` file
|
||||||
help you find and update `id` changes across your translation files.
|
help you find and update `id` changes across your translation files.
|
||||||
|
|
|
@ -87,9 +87,9 @@ Modules are a great way to organize an application and extend it with capabiliti
|
||||||
|
|
||||||
Many Angular libraries are modules (such as `FormsModule`, `HttpModule`, and `RouterModule`).
|
Many Angular libraries are modules (such as `FormsModule`, `HttpModule`, and `RouterModule`).
|
||||||
Many third-party libraries are available as NgModules (such as
|
Many third-party libraries are available as NgModules (such as
|
||||||
<a href="https://material.angular.io/" target="_blank">Material Design</a>,
|
<a href="https://material.angular.io/">Material Design</a>,
|
||||||
<a href="http://ionicframework.com/" target="_blank">Ionic</a>,
|
<a href="http://ionicframework.com/">Ionic</a>,
|
||||||
<a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>).
|
<a href="https://github.com/angular/angularfire2">AngularFire2</a>).
|
||||||
|
|
||||||
NgModules consolidate components, directives, and pipes into
|
NgModules consolidate components, directives, and pipes into
|
||||||
cohesive blocks of functionality, each focused on a
|
cohesive blocks of functionality, each focused on a
|
||||||
|
@ -1555,4 +1555,4 @@ You made it! You can examine and download the complete source for this final ver
|
||||||
|
|
||||||
Now that you understand NgModules, you may be interested
|
Now that you understand NgModules, you may be interested
|
||||||
in the companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") page
|
in the companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") page
|
||||||
with its ready answers to specific design and implementation questions.
|
with its ready answers to specific design and implementation questions.
|
||||||
|
|
|
@ -8,7 +8,7 @@ Recommended npm packages, and how to specify package dependencies.
|
||||||
|
|
||||||
|
|
||||||
Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages.
|
Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages.
|
||||||
These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>).
|
These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/">npm</a>).
|
||||||
|
|
||||||
<div class="l-sub-section">
|
<div class="l-sub-section">
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@ These packages are maintained and installed with the Node Package Manager (<a hr
|
||||||
|
|
||||||
Node.js and npm are essential to Angular development.
|
Node.js and npm are essential to Angular development.
|
||||||
|
|
||||||
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
|
<a href="https://docs.npmjs.com/getting-started/installing-node" title="Installing Node.js and updating npm">
|
||||||
Get them now</a> if they're not already installed on your machine.
|
Get them now</a> if they're not already installed on your machine.
|
||||||
|
|
||||||
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
|
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
|
||||||
|
@ -32,7 +32,7 @@ you already have projects running on your machine that use other versions of nod
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
During [Setup](guide/setup), a <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a>
|
During [Setup](guide/setup), a <a href="https://docs.npmjs.com/files/package.json">package.json</a>
|
||||||
file is installed with a comprehensive starter set of
|
file is installed with a comprehensive starter set of
|
||||||
packages as specified in the `dependencies` and `devDependencies` sections.
|
packages as specified in the `dependencies` and `devDependencies` sections.
|
||||||
|
|
||||||
|
|
|
@ -61,7 +61,7 @@ In the example, change the component class's `name` property from `'Angular'` to
|
||||||
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
This example is written in <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
|
This example is written in <a href="http://www.typescriptlang.org/" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
|
||||||
uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; <a href="cookbook/ts-to-js.html">this guide</a> explains how.
|
uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; <a href="cookbook/ts-to-js.html">this guide</a> explains how.
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -266,7 +266,7 @@ you need `[formControl]="name"` in the template on the `<input>`.
|
||||||
|
|
||||||
|
|
||||||
Disregard the `form-control` _CSS_ class. It belongs to the
|
Disregard the `form-control` _CSS_ class. It belongs to the
|
||||||
<a href="http://getbootstrap.com/" target="_blank" title="Bootstrap CSS">Bootstrap CSS library</a>,
|
<a href="http://getbootstrap.com/" title="Bootstrap CSS">Bootstrap CSS library</a>,
|
||||||
not Angular.
|
not Angular.
|
||||||
It _styles_ the form but in no way impacts the logic of the form.
|
It _styles_ the form but in no way impacts the logic of the form.
|
||||||
|
|
||||||
|
@ -421,7 +421,7 @@ to look for a `FormControl` called `name`.
|
||||||
|
|
||||||
|
|
||||||
Disregard the `form-group` _CSS_ class. It belongs to the
|
Disregard the `form-group` _CSS_ class. It belongs to the
|
||||||
<a href="http://getbootstrap.com/" target="_blank" title="Bootstrap CSS">Bootstrap CSS library</a>,
|
<a href="http://getbootstrap.com/" title="Bootstrap CSS">Bootstrap CSS library</a>,
|
||||||
not Angular.
|
not Angular.
|
||||||
Like the `form-control` class, it _styles_ the form
|
Like the `form-control` class, it _styles_ the form
|
||||||
but in no way impacts its logic.
|
but in no way impacts its logic.
|
||||||
|
@ -1479,4 +1479,4 @@ The key files of the final version are as follows:
|
||||||
|
|
||||||
|
|
||||||
You can download the complete source for all steps in this guide
|
You can download the complete source for all steps in this guide
|
||||||
from the <live-example title="Reactive Forms Demo in Plunker">Reactive Forms Demo</live-example> live example.
|
from the <live-example title="Reactive Forms Demo in Plunker">Reactive Forms Demo</live-example> live example.
|
||||||
|
|
|
@ -620,7 +620,7 @@ Begin with a simple version of the app that navigates between two empty views.
|
||||||
### Set the *<base href>*
|
### Set the *<base href>*
|
||||||
|
|
||||||
The router uses the browser's
|
The router uses the browser's
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="HTML5 browser history push-state">history.pushState</a>
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" title="HTML5 browser history push-state">history.pushState</a>
|
||||||
for navigation. Thanks to `pushState`, you can make in-app URL paths look the way you want them to
|
for navigation. Thanks to `pushState`, you can make in-app URL paths look the way you want them to
|
||||||
look, e.g. `localhost:3000/crisis-center`. The in-app URLs can be indistinguishable from server URLs.
|
look, e.g. `localhost:3000/crisis-center`. The in-app URLs can be indistinguishable from server URLs.
|
||||||
|
|
||||||
|
@ -643,7 +643,7 @@ older hash (#) style, if necessary.
|
||||||
|
|
||||||
|
|
||||||
You must **add a
|
You must **add a
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" target="_blank" title="base href"><base href> element</a>**
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href"><base href> element</a>**
|
||||||
to the app's `index.html` for `pushState` routing to work.
|
to the app's `index.html` for `pushState` routing to work.
|
||||||
The browser uses the `<base href>` value to prefix *relative* URLs when referencing
|
The browser uses the `<base href>` value to prefix *relative* URLs when referencing
|
||||||
CSS files, scripts, and images.
|
CSS files, scripts, and images.
|
||||||
|
@ -2370,7 +2370,7 @@ and decide later if the differences are worthwhile.
|
||||||
|
|
||||||
|
|
||||||
In keeping with the
|
In keeping with the
|
||||||
<a href="https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html" target="_blank" title="Separation of Concerns">*Separation of Concerns* principle</a>,
|
<a href="https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html" title="Separation of Concerns">*Separation of Concerns* principle</a>,
|
||||||
changes to the *Crisis Center* won't affect the `AppModule` or
|
changes to the *Crisis Center* won't affect the `AppModule` or
|
||||||
any other feature's component.
|
any other feature's component.
|
||||||
|
|
||||||
|
@ -4084,7 +4084,7 @@ This is a strictly local URL. The browser shouldn't send this URL to the server
|
||||||
and should not reload the page.
|
and should not reload the page.
|
||||||
|
|
||||||
Modern HTML5 browsers support
|
Modern HTML5 browsers support
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="HTML5 browser history push-state">history.pushState</a>,
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" title="HTML5 browser history push-state">history.pushState</a>,
|
||||||
a technique that changes a browser's location and history without triggering a server page request.
|
a technique that changes a browser's location and history without triggering a server page request.
|
||||||
The router can compose a "natural" URL that is indistinguishable from
|
The router can compose a "natural" URL that is indistinguishable from
|
||||||
one that would otherwise require a page load.
|
one that would otherwise require a page load.
|
||||||
|
@ -4159,11 +4159,11 @@ resort to hash routes.
|
||||||
### HTML5 URLs and the *<base href>*
|
### HTML5 URLs and the *<base href>*
|
||||||
|
|
||||||
While the router uses the
|
While the router uses the
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="Browser history push-state">HTML5 pushState</a>
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" title="Browser history push-state">HTML5 pushState</a>
|
||||||
style by default, you *must* configure that strategy with a **base href**.
|
style by default, you *must* configure that strategy with a **base href**.
|
||||||
|
|
||||||
The preferred way to configure the strategy is to add a
|
The preferred way to configure the strategy is to add a
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" target="_blank" title="base href"><base href> element</a>
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href"><base href> element</a>
|
||||||
tag in the `<head>` of the `index.html`.
|
tag in the `<head>` of the `index.html`.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -334,13 +334,13 @@ Or you can implement and provide an entirely custom `XSRFStrategy`:
|
||||||
|
|
||||||
|
|
||||||
For information about CSRF at the Open Web Application Security Project (OWASP), see
|
For information about CSRF at the Open Web Application Security Project (OWASP), see
|
||||||
<a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29" target="_blank">Cross-Site Request Forgery (CSRF)</a> and
|
<a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a> and
|
||||||
<a href="https://www.owasp.org/index.php/CSRF_Prevention_Cheat_Sheet" target="_blank">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a>.
|
<a href="https://www.owasp.org/index.php/CSRF_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a>.
|
||||||
The Stanford University paper
|
The Stanford University paper
|
||||||
<a href="https://seclab.stanford.edu/websec/csrf/csrf.pdf" target="_blank">Robust Defenses for Cross-Site Request Forgery</a> is a rich source of detail.
|
<a href="https://seclab.stanford.edu/websec/csrf/csrf.pdf">Robust Defenses for Cross-Site Request Forgery</a> is a rich source of detail.
|
||||||
|
|
||||||
See also Dave Smith's easy-to-understand
|
See also Dave Smith's easy-to-understand
|
||||||
<a href="https://www.youtube.com/watch?v=9inczw6qtpY" target="_blank" title="Cross Site Request Funkery Securing Your Angular Apps From Evil Doers">talk on XSRF at AngularConnect 2016</a>.
|
<a href="https://www.youtube.com/watch?v=9inczw6qtpY" title="Cross Site Request Funkery Securing Your Angular Apps From Evil Doers">talk on XSRF at AngularConnect 2016</a>.
|
||||||
|
|
||||||
|
|
||||||
<h3 id='xssi'>
|
<h3 id='xssi'>
|
||||||
|
@ -374,4 +374,4 @@ post](https://security.googleblog.com/2011/05/website-security-for-webmasters.ht
|
||||||
Angular applications must follow the same security principles as regular web applications, and
|
Angular applications must follow the same security principles as regular web applications, and
|
||||||
must be audited as such. Angular-specific APIs that should be audited in a security review,
|
must be audited as such. Angular-specific APIs that should be audited in a security review,
|
||||||
such as the [_bypassSecurityTrust_](guide/security#bypass-security-apis) methods, are marked in the documentation
|
such as the [_bypassSecurityTrust_](guide/security#bypass-security-apis) methods, are marked in the documentation
|
||||||
as security sensitive.
|
as security sensitive.
|
||||||
|
|
|
@ -79,7 +79,7 @@ If you do, this page can help you understand their purpose.
|
||||||
|
|
||||||
_End-to-end_ (e2e) tests of the application,
|
_End-to-end_ (e2e) tests of the application,
|
||||||
written in Jasmine and run by the
|
written in Jasmine and run by the
|
||||||
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
|
<a href="http://www.protractortest.org/" title="Protractor: end-to-end testing for Angular">protractor</a>
|
||||||
e2e test runner.
|
e2e test runner.
|
||||||
|
|
||||||
Initialized with an e2e test for the "Hello Angular" sample.
|
Initialized with an e2e test for the "Hello Angular" sample.
|
||||||
|
@ -176,7 +176,7 @@ If you do, this page can help you understand their purpose.
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
|
|
||||||
Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
|
Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" title="Karma unit test runner">karma</a>
|
||||||
test runner described in the [Testing](guide/testing) guide.
|
test runner described in the [Testing](guide/testing) guide.
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
@ -191,7 +191,7 @@ If you do, this page can help you understand their purpose.
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
|
|
||||||
Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
|
Script to run <a href="https://karma-runner.github.io/1.0/index.html" title="Karma unit test runner">karma</a>
|
||||||
with SystemJS as described in the [Testing](guide/testing) guide.
|
with SystemJS as described in the [Testing](guide/testing) guide.
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
@ -243,7 +243,7 @@ If you do, this page can help you understand their purpose.
|
||||||
Contains command scripts for running the application,
|
Contains command scripts for running the application,
|
||||||
running tests, and more. Enter `npm run` for a listing.
|
running tests, and more. Enter `npm run` for a listing.
|
||||||
<a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
|
<a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
|
||||||
target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.
|
title="npm scripts for Angular documentation samples">Read more</a> about them.
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -258,7 +258,7 @@ If you do, this page can help you understand their purpose.
|
||||||
|
|
||||||
|
|
||||||
Configuration for the
|
Configuration for the
|
||||||
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
|
<a href="http://www.protractortest.org/" title="Protractor: end-to-end testing for Angular">protractor</a>
|
||||||
_end-to-end_ (e2e) test runner.
|
_end-to-end_ (e2e) test runner.
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
|
@ -696,7 +696,7 @@ Here's how you might begin:
|
||||||
|
|
||||||
The directive's _selector_ is typically the directive's **attribute name** in square brackets, `[myUnless]`.
|
The directive's _selector_ is typically the directive's **attribute name** in square brackets, `[myUnless]`.
|
||||||
The brackets define a CSS
|
The brackets define a CSS
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" target="_blank" title="MDN: Attribute selectors">attribute selector</a>.
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" title="MDN: Attribute selectors">attribute selector</a>.
|
||||||
|
|
||||||
The directive _attribute name_ should be spelled in _lowerCamelCase_ and begin with a prefix.
|
The directive _attribute name_ should be spelled in _lowerCamelCase_ and begin with a prefix.
|
||||||
Don't use `ng`. That prefix belongs to Angular.
|
Don't use `ng`. That prefix belongs to Angular.
|
||||||
|
@ -845,4 +845,4 @@ You learned
|
||||||
* that the Angular desugars [asterisk (*) syntax](guide/structural-directives#asterisk) into a `<ng-template>`.
|
* that the Angular desugars [asterisk (*) syntax](guide/structural-directives#asterisk) into a `<ng-template>`.
|
||||||
* how that works for the `NgIf`, `NgFor` and `NgSwitch` built-in directives.
|
* how that works for the `NgIf`, `NgFor` and `NgSwitch` built-in directives.
|
||||||
* about the [_microsyntax_](guide/structural-directives#microsyntax) that expands into a [`<ng-template>`](guide/structural-directives#template).
|
* about the [_microsyntax_](guide/structural-directives#microsyntax) that expands into a [`<ng-template>`](guide/structural-directives#template).
|
||||||
* to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`.
|
* to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`.
|
||||||
|
|
|
@ -102,7 +102,7 @@ The guideline uses the shortcut `hero.component.ts|html|css|spec` to represent t
|
||||||
## Single responsibility
|
## Single responsibility
|
||||||
|
|
||||||
Apply the
|
Apply the
|
||||||
<a href="https://wikipedia.org/wiki/Single_responsibility_principle" target="_blank"><i>single responsibility principle</i> (SRP)</a>
|
<a href="https://wikipedia.org/wiki/Single_responsibility_principle"><i>single responsibility principle</i> (SRP)</a>
|
||||||
to all components, services, and other symbols.
|
to all components, services, and other symbols.
|
||||||
This helps make the app cleaner, easier to read and maintain, and more testable.
|
This helps make the app cleaner, easier to read and maintain, and more testable.
|
||||||
|
|
||||||
|
@ -1915,7 +1915,7 @@ It is rarely worth the effort to change them at the risk of breaking existing co
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Why?** <a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines" target="_blank">TypeScript guidelines</a>
|
**Why?** <a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines">TypeScript guidelines</a>
|
||||||
discourage the `I` prefix.
|
discourage the `I` prefix.
|
||||||
|
|
||||||
|
|
||||||
|
@ -2326,7 +2326,7 @@ in a single file than as multiple files. Be wary of this loophole.
|
||||||
A flat structure is easy to scan.
|
A flat structure is easy to scan.
|
||||||
|
|
||||||
On the other hand,
|
On the other hand,
|
||||||
<a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two" target="_blank">psychologists believe</a>
|
<a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two">psychologists believe</a>
|
||||||
that humans start to struggle when the number of adjacent interesting things exceeds nine.
|
that humans start to struggle when the number of adjacent interesting things exceeds nine.
|
||||||
So when a folder has ten or more files, it may be time to create subfolders.
|
So when a folder has ten or more files, it may be time to create subfolders.
|
||||||
|
|
||||||
|
@ -4932,4 +4932,4 @@ Useful tools and tips for Angular.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#toc">Back to top</a>
|
<a href="#toc">Back to top</a>
|
||||||
|
|
|
@ -2220,7 +2220,7 @@ For example, you could replace the `<confused-hero>` switch case with the follow
|
||||||
|
|
||||||
A **template reference variable** is often a reference to a DOM element within a template.
|
A **template reference variable** is often a reference to a DOM element within a template.
|
||||||
It can also be a reference to an Angular component or directive or a
|
It can also be a reference to an Angular component or directive or a
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" title="MDN: Web Components">web component</a>.
|
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" title="MDN: Web Components">web component</a>.
|
||||||
|
|
||||||
Use the hash symbol (#) to declare a reference variable.
|
Use the hash symbol (#) to declare a reference variable.
|
||||||
The `#phone` declares a `phone` variable on an `<input>` element.
|
The `#phone` declares a `phone` variable on an `<input>` element.
|
||||||
|
|
|
@ -284,7 +284,7 @@ There are two fast paths to getting started with unit testing.
|
||||||
1. Start a new project following the instructions in [Setup](guide/setup "Setup").
|
1. Start a new project following the instructions in [Setup](guide/setup "Setup").
|
||||||
|
|
||||||
1. Start a new project with the
|
1. Start a new project with the
|
||||||
<a href="https://github.com/angular/angular-cli/blob/master/README.md" target="_blank" title="Angular CLI">Angular CLI</a>.
|
<a href="https://github.com/angular/angular-cli/blob/master/README.md" title="Angular CLI">Angular CLI</a>.
|
||||||
|
|
||||||
Both approaches install npm packages, files, and scripts pre-configured for applications
|
Both approaches install npm packages, files, and scripts pre-configured for applications
|
||||||
built in their respective modalities.
|
built in their respective modalities.
|
||||||
|
@ -636,7 +636,7 @@ A query predicate receives a `DebugElement` and returns `true` if the element me
|
||||||
|
|
||||||
The **`By`** class is an Angular testing utility that produces useful predicates.
|
The **`By`** class is an Angular testing utility that produces useful predicates.
|
||||||
Its `By.css` static method produces a
|
Its `By.css` static method produces a
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" target="_blank">standard CSS selector</a>
|
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">standard CSS selector</a>
|
||||||
predicate that filters the same way as a jQuery selector.
|
predicate that filters the same way as a jQuery selector.
|
||||||
|
|
||||||
Finally, the setup assigns the DOM element from the `DebugElement` **`nativeElement`** property to `el`.
|
Finally, the setup assigns the DOM element from the `DebugElement` **`nativeElement`** property to `el`.
|
||||||
|
@ -1509,7 +1509,7 @@ Make that easy by encapsulating the _click-triggering_ process in a helper such
|
||||||
|
|
||||||
The first parameter is the _element-to-click_. If you wish, you can pass a
|
The first parameter is the _element-to-click_. If you wish, you can pass a
|
||||||
custom event object as the second parameter. The default is a (partial)
|
custom event object as the second parameter. The default is a (partial)
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button" target="_blank">left-button mouse event object</a>
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button">left-button mouse event object</a>
|
||||||
accepted by many handlers including the `RouterLink` directive.
|
accepted by many handlers including the `RouterLink` directive.
|
||||||
|
|
||||||
|
|
||||||
|
@ -1811,7 +1811,7 @@ Notable features of this stub are:
|
||||||
|
|
||||||
* The stub implements only two of the `ActivatedRoute` capabilities: `params` and `snapshot.params`.
|
* The stub implements only two of the `ActivatedRoute` capabilities: `params` and `snapshot.params`.
|
||||||
|
|
||||||
* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md" target="_blank">_BehaviorSubject_</a>
|
* <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md">_BehaviorSubject_</a>
|
||||||
drives the stub's `params` _Observable_ and returns the same value to every `params` subscriber until it's given a new value.
|
drives the stub's `params` _Observable_ and returns the same value to every `params` subscriber until it's given a new value.
|
||||||
|
|
||||||
* The `HeroDetailComponent` chains its expressions to this stub `params` _Observable_ which is now under the tester's control.
|
* The `HeroDetailComponent` chains its expressions to this stub `params` _Observable_ which is now under the tester's control.
|
||||||
|
@ -2533,7 +2533,7 @@ A few techniques are noteworthy:
|
||||||
|
|
||||||
* The `By.directive` predicate is a great way to get the elements that have this directive _when their element types are unknown_.
|
* The `By.directive` predicate is a great way to get the elements that have this directive _when their element types are unknown_.
|
||||||
|
|
||||||
* The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank">`:not` pseudo-class</a>
|
* The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">`:not` pseudo-class</a>
|
||||||
in `By.css('h2:not([highlight])')` helps find `<h2>` elements that _do not_ have the directive.
|
in `By.css('h2:not([highlight])')` helps find `<h2>` elements that _do not_ have the directive.
|
||||||
`By.css('*:not([highlight])')` finds _any_ element that does not have the directive.
|
`By.css('*:not([highlight])')` finds _any_ element that does not have the directive.
|
||||||
|
|
||||||
|
@ -2855,7 +2855,7 @@ Here's a summary of the stand-alone functions, in order of likely utility:
|
||||||
|
|
||||||
The curious, dedicated reader might enjoy this lengthy blog post,
|
The curious, dedicated reader might enjoy this lengthy blog post,
|
||||||
"<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/"
|
"<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/"
|
||||||
target="_blank">_Tasks, microtasks, queues and schedules_</a>".
|
>_Tasks, microtasks, queues and schedules_</a>".
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -45,7 +45,7 @@ code shown in this cookbook.**
|
||||||
## _TypeScript_ to _ES6_ to _ES5_
|
## _TypeScript_ to _ES6_ to _ES5_
|
||||||
|
|
||||||
_TypeScript_
|
_TypeScript_
|
||||||
<a href="https://www.typescriptlang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
|
<a href="https://www.typescriptlang.org" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
|
||||||
_ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
|
_ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
|
||||||
The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
|
The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
|
||||||
|
|
||||||
|
@ -409,7 +409,7 @@ that prepares a toggle-button label for the next clicked state:
|
||||||
|
|
||||||
This _TypeScript_ "getter" property is transpiled to an _ES5_
|
This _TypeScript_ "getter" property is transpiled to an _ES5_
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"
|
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"
|
||||||
target="_blank" title="Defined Properties">defined property</a>.
|
title="Defined Properties">defined property</a>.
|
||||||
The _ES5 DSL_ does not support _defined properties_ directly
|
The _ES5 DSL_ does not support _defined properties_ directly
|
||||||
but you can still create them by extracting the "class" prototype and
|
but you can still create them by extracting the "class" prototype and
|
||||||
adding the _defined property_ in raw JavaScript like this:
|
adding the _defined property_ in raw JavaScript like this:
|
||||||
|
|
|
@ -524,7 +524,7 @@ will result in the same thing:
|
||||||
|
|
||||||
Now introduce Angular to the project. Inspired by instructions in
|
Now introduce Angular to the project. Inspired by instructions in
|
||||||
[the Setup](guide/setup), you can selectively copy in material from the
|
[the Setup](guide/setup), you can selectively copy in material from the
|
||||||
<a href="https://github.com/angular/quickstart" target="_blank">QuickStart github repository</a>.
|
<a href="https://github.com/angular/quickstart">QuickStart github repository</a>.
|
||||||
|
|
||||||
Next, create an `app.module.ts` file and add the following `NgModule` class:
|
Next, create an `app.module.ts` file and add the following `NgModule` class:
|
||||||
|
|
||||||
|
@ -1803,7 +1803,7 @@ so let's do that next.
|
||||||
#### Why declare _angular_ as _angular.IAngularStatic_?
|
#### Why declare _angular_ as _angular.IAngularStatic_?
|
||||||
|
|
||||||
`@types/angular` is declared as a UMD module, and due to the way
|
`@types/angular` is declared as a UMD module, and due to the way
|
||||||
<a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD typings</a>
|
<a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions">UMD typings</a>
|
||||||
work, once you have an ES6 `import` statement in a file all UMD typed modules must also be
|
work, once you have an ES6 `import` statement in a file all UMD typed modules must also be
|
||||||
imported via `import` statements instead of being globally available.
|
imported via `import` statements instead of being globally available.
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,7 @@ Visual Studio 2015, follow these steps:
|
||||||
|
|
||||||
If you prefer a `File | New Project` experience and are using **ASP.NET Core**,
|
If you prefer a `File | New Project` experience and are using **ASP.NET Core**,
|
||||||
then consider the _experimental_
|
then consider the _experimental_
|
||||||
<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular template for Visual Studio 2015</a>.
|
<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/">ASP.NET Core + Angular template for Visual Studio 2015</a>.
|
||||||
Note that the resulting code does not map to the docs. Adjust accordingly.
|
Note that the resulting code does not map to the docs. Adjust accordingly.
|
||||||
|
|
||||||
|
|
||||||
|
@ -329,4 +329,4 @@ It's faster to run without the debugger by pressing `Ctrl-F5`.
|
||||||
The default browser opens and displays the QuickStart sample application.
|
The default browser opens and displays the QuickStart sample application.
|
||||||
|
|
||||||
Try editing any of the project files. Save and refresh the browser to
|
Try editing any of the project files. Save and refresh the browser to
|
||||||
see the changes.
|
see the changes.
|
||||||
|
|
|
@ -783,7 +783,7 @@ Webpack techniques covered in this guide.
|
||||||
|
|
||||||
|
|
||||||
The <code>app.component.html</code> displays this downloadable Angular logo
|
The <code>app.component.html</code> displays this downloadable Angular logo
|
||||||
<a href="assets/images/logos/angular/angular.png" target="_blank">
|
<a href="assets/images/logos/angular/angular.png">
|
||||||
<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
|
<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
|
||||||
Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
|
Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
|
||||||
on the image and download it to that folder.
|
on the image and download it to that folder.
|
||||||
|
|
Loading…
Reference in New Issue