docs(aio): remove _blank target (#16205)

This commit is contained in:
Jesús Rodríguez 2017-04-24 20:23:45 +02:00 committed by Miško Hevery
parent d1fb066d07
commit 249cd8c2ec
23 changed files with 139 additions and 95 deletions

View File

@ -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>

View File

@ -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_.

View File

@ -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>.

View File

@ -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.

View File

@ -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)

View File

@ -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}

View File

@ -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.

View File

@ -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.

View File

@ -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.

View File

@ -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.

View File

@ -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>

View File

@ -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.

View File

@ -620,7 +620,7 @@ Begin with a simple version of the app that navigates between two empty views.
### Set the *&lt;base href>* ### Set the *&lt;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">&lt;base href&gt; element</a>** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href&gt; 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 *&lt;base href>* ### HTML5 URLs and the *&lt;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">&lt;base href&gt; element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href&gt; element</a>
tag in the `<head>` of the `index.html`. tag in the `<head>` of the `index.html`.

View File

@ -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.

View File

@ -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>

View File

@ -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`.

View File

@ -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>

View File

@ -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.

View File

@ -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>

View File

@ -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:

View File

@ -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.

View File

@ -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.

View File

@ -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.