fix: 修正自动翻译结果
This commit is contained in:
Zhicheng Wang
parent
d7d3589052
commit
51bd598826
|
|
@ -62,7 +62,9 @@ The following table lists some of the key AngularJS template features with their
|
|||
### 绑定/插值表达式
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
Your favorite hero is: {{vm.favoriteHero}}
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, an expression in curly braces denotes one-way binding.
|
||||
|
|
@ -116,7 +118,9 @@ The following table lists some of the key AngularJS template features with their
|
|||
### 过滤器
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.title | uppercase}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
|
||||
|
|
@ -161,9 +165,11 @@ The following table lists some of the key AngularJS template features with their
|
|||
### 局部变量
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<tr ng-repeat="movie in vm.movies">
|
||||
<td>{{movie.title}}</td>
|
||||
</tr>
|
||||
|
||||
</code-example>
|
||||
|
||||
Here, `movie` is a user-defined local variable.
|
||||
|
|
@ -240,7 +246,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-app
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<body ng-app="movieHunter">
|
||||
|
||||
</code-example>
|
||||
|
||||
The application startup process is called **bootstrapping**.
|
||||
|
|
@ -263,6 +271,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### 引导
|
||||
|
||||
<code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false"></code-example>
|
||||
|
||||
<br>
|
||||
|
||||
<code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false"></code-example>
|
||||
|
|
@ -286,9 +295,11 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-class
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-class="{active: isActive}">
|
||||
<div ng-class="{active: isActive,
|
||||
shazam: isImportant}">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-class` directive includes/excludes CSS classes
|
||||
|
|
@ -350,8 +361,10 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-click
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<button ng-click="vm.toggleImage()">
|
||||
<button ng-click="vm.toggleImage($event)">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
|
||||
|
|
@ -420,7 +433,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-controller
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-controller="MovieListCtrl as vm">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-controller` directive attaches a controller to the view.
|
||||
|
|
@ -491,7 +506,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-href
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<a ng-href="{{ angularDocsUrl }}">Angular Docs</a>
|
||||
|
||||
</code-example>
|
||||
|
||||
The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
|
||||
|
|
@ -505,7 +522,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
在AngularJS 中，`ng-href`通常用来作为导航的一部分，激活一个路由。
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<a ng-href="#{{ moviesHash }}">Movies</a>
|
||||
|
||||
</code-example>
|
||||
|
||||
Routing is handled differently in Angular.
|
||||
|
|
@ -555,7 +574,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-if
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<table ng-if="movies.length">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
|
||||
|
|
@ -602,7 +623,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-model
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<input ng-model="vm.favoriteHero"/>
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
|
||||
|
|
@ -642,7 +665,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-repeat
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<tr ng-repeat="movie in vm.movies">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-repeat` directive repeats the associated DOM element
|
||||
|
|
@ -694,9 +719,11 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-show
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<h3 ng-show="vm.favoriteHero">
|
||||
Your favorite hero is: {{vm.favoriteHero}}
|
||||
</h3>
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
|
||||
|
|
@ -749,7 +776,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-src
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<img ng-src="{{movie.imageurl}}">
|
||||
|
||||
</code-example>
|
||||
|
||||
The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
|
||||
|
|
@ -790,7 +819,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-style
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-style="{color: colorPreference}">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
|
||||
|
|
@ -846,6 +877,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-switch
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-switch="vm.favoriteHero &&
|
||||
vm.checkMovieHero(vm.favoriteHero)">
|
||||
<div ng-switch-when="true">
|
||||
|
|
@ -858,6 +890,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
Please enter your favorite hero.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-switch` directive swaps the contents of
|
||||
|
|
@ -963,7 +996,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### currency
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.price | currency}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
Formats a number as currency.
|
||||
|
|
@ -993,7 +1028,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### date
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.releaseDate | date}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
Formats a date to a string based on the requested format.
|
||||
|
|
@ -1023,7 +1060,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### filter
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
|
||||
|
||||
</code-example>
|
||||
|
||||
Selects a subset of items from the defined collection, based on the filter criteria.
|
||||
|
|
@ -1055,7 +1094,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### json
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<pre>{{movie | json}}</pre>
|
||||
|
||||
</code-example>
|
||||
|
||||
Converts a JavaScript object into a JSON string. This is useful for debugging.
|
||||
|
|
@ -1085,7 +1126,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### limitTo
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<tr ng-repeat="movie in movieList | limitTo:2:0">
|
||||
|
||||
</code-example>
|
||||
|
||||
Selects up to the first parameter (2) number of items from the collection
|
||||
|
|
@ -1121,7 +1164,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### lowercase
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<div>{{movie.title | lowercase}}</div>
|
||||
|
||||
</code-example>
|
||||
|
||||
Converts the string to lowercase.
|
||||
|
|
@ -1151,7 +1196,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### number
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.starRating | number}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
Formats a number as text.
|
||||
|
|
@ -1189,7 +1236,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### orderBy
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<tr ng-repeat="movie in movieList | orderBy : 'title'">
|
||||
|
||||
</code-example>
|
||||
|
||||
Displays the collection in the order specified by the expression.
|
||||
|
|
@ -1273,9 +1322,11 @@ The Angular code is shown using TypeScript.
|
|||
### IIFE
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
(function () {
|
||||
...
|
||||
}());
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, an immediately invoked function expression (or IIFE) around controller code
|
||||
|
|
@ -1314,7 +1365,9 @@ The Angular code is shown using TypeScript.
|
|||
### Angular模块
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
angular.module("movieHunter", ["ngRoute"]);
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, an Angular module keeps track of controllers, services, and other code.
|
||||
|
|
@ -1359,11 +1412,13 @@ The Angular code is shown using TypeScript.
|
|||
### 控制器注册
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
angular
|
||||
.module("movieHunter")
|
||||
.controller("MovieListCtrl",
|
||||
["movieService",
|
||||
MovieListCtrl]);
|
||||
|
||||
</code-example>
|
||||
|
||||
AngularJS has code in each controller that looks up an appropriate Angular module
|
||||
|
|
@ -1415,8 +1470,10 @@ The Angular code is shown using TypeScript.
|
|||
### 控制器函数
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
function MovieListCtrl(movieService) {
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, you write the code for the model and methods in a controller function.
|
||||
|
|
@ -1459,9 +1516,11 @@ The Angular code is shown using TypeScript.
|
|||
### 依赖注入
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
MovieListCtrl.$inject = ['MovieService'];
|
||||
function MovieListCtrl(movieService) {
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, you pass in any dependencies as controller function arguments.
|
||||
|
|
@ -1557,7 +1616,9 @@ also encapsulate a style sheet within a specific component.
|
|||
### Link 标签
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
|
||||
</code-example>
|
||||
|
||||
AngularJS, uses a `link` tag in the head section of the `index.html` file
|
||||
|
|
|
|||
|
|
@ -277,8 +277,10 @@ These two common animations have their own aliases:
|
|||
这两个常见的动画有自己的别名：
|
||||
|
||||
<code-example language="typescript">
|
||||
|
||||
transition(':enter', [ ... ]); // void => *
|
||||
transition(':leave', [ ... ]); // * => void
|
||||
|
||||
</code-example>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,10 @@ Angular offers two ways to compile your application:
|
|||
JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
|
||||
ng build
|
||||
ng serve
|
||||
|
||||
</code-example>
|
||||
|
||||
{@a compile}
|
||||
|
|
@ -44,8 +46,10 @@ JIT compilation is the default when you run the _build-only_ or the _build-and-s
|
|||
For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
|
||||
ng build --aot
|
||||
ng serve --aot
|
||||
|
||||
</code-example>
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -1085,6 +1089,7 @@ import { calculateValue } from './utilities';
|
|||
To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// CORRECTED
|
||||
import { calculateValue } from './utilities';
|
||||
|
||||
|
|
@ -1100,6 +1105,7 @@ export function someValueFactory() {
|
|||
{ provide: SomeValue, useFactory: someValueFactory }
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
<hr>
|
||||
|
|
@ -1119,6 +1125,7 @@ The compiler does not support references to variables assigned by [destructuring
|
|||
For example, you cannot write something like this:
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// ERROR
|
||||
import { configuration } from './configuration';
|
||||
|
||||
|
|
@ -1130,11 +1137,13 @@ const {foo, bar} = configuration;
|
|||
{provide: Bar, useValue: bar},
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
To correct this error, refer to non-destructured values.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// CORRECTED
|
||||
import { configuration } from './configuration';
|
||||
...
|
||||
|
|
@ -1143,6 +1152,7 @@ import { configuration } from './configuration';
|
|||
{provide: Bar, useValue: configuration.bar},
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
<hr>
|
||||
|
|
@ -1188,6 +1198,7 @@ you can finesse the problem in four steps:
|
|||
Here's an illustrative example.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// CORRECTED
|
||||
import { Inject } from '@angular/core';
|
||||
|
||||
|
|
@ -1203,6 +1214,7 @@ export function _window() { return window; }
|
|||
export class MyComponent {
|
||||
constructor (@Inject(WINDOW) private win: Window) { ... }
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
The `Window` type in the constructor is no longer a problem for the compiler because it
|
||||
|
|
@ -1211,6 +1223,7 @@ uses the `@Inject(WINDOW)` to generate the injection code.
|
|||
Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
import { Inject } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/platform-browser';
|
||||
|
||||
|
|
@ -1218,6 +1231,7 @@ import { DOCUMENT } from '@angular/platform-browser';
|
|||
export class MyComponent {
|
||||
constructor (@Inject(DOCUMENT) private doc: Document) { ... }
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
<hr>
|
||||
|
|
@ -1253,6 +1267,7 @@ that you referenced in metadata.
|
|||
The compiler can understand simple enum values but not complex values such as those derived from computed properties.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// ERROR
|
||||
enum Colors {
|
||||
Red = 1,
|
||||
|
|
@ -1267,6 +1282,7 @@ enum Colors {
|
|||
{ provide: StrongColor, useValue: Colors.Blue } // bad
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
Avoid referring to enums with complicated initializers or computed properties.
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@
|
|||
<h2>Constructor</h2>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
@ -291,9 +292,11 @@
|
|||
<h5>Declaration</h5>
|
||||
|
||||
<code-example language="ts" hidecopy="true" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-ts">
|
||||
<code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/animations/AnimationBuilder" class="code-anchor"><span class="typ">AnimationBuilder</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><a class="code-anchor" href="api/animations/AnimationBuilder#build"><span class="pln">build</span><span class="pun">(</span><span class="pln">animation</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pun">[]):</span><span class="pln"> </span><span class="typ">AnimationFactory</span></a><span class="pln"></span><span class="pun">}</span></code></pre>
|
||||
</aio-code>
|
||||
|
||||
</code-example>
|
||||
|
||||
<h6>Parameters</h6>
|
||||
|
|
@ -327,6 +330,7 @@
|
|||
<td>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
@ -347,6 +351,7 @@
|
|||
<td>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
@ -392,6 +397,7 @@
|
|||
</p>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
|
|||
|
|
@ -280,9 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
|
|||
运行本应用并确认：当把鼠标移到`p`上的时候，背景色就出现了，而移开的时候，它消失了。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a bindings}
|
||||
|
|
@ -437,9 +435,7 @@ Here are the harness and directive in action.
|
|||
下面是测试程序和指令的动图。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a second-property}
|
||||
|
|
@ -494,9 +490,7 @@ Here's how the harness should work when you're done coding.
|
|||
当这些代码完成时，测试程序工作时的动图如下：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
|
||||
|
||||
</figure>
|
||||
|
||||
## Summary
|
||||
|
|
@ -528,19 +522,12 @@ The final source code follows:
|
|||
最终的源码如下：
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="app/app.component.ts" path="attribute-directives/src/app/app.component.ts"></code-pane>
|
||||
|
||||
<code-pane title="app/app.component.html" path="attribute-directives/src/app/app.component.html"></code-pane>
|
||||
|
||||
<code-pane title="app/highlight.directive.ts" path="attribute-directives/src/app/highlight.directive.ts"></code-pane>
|
||||
|
||||
<code-pane title="app/app.module.ts" path="attribute-directives/src/app/app.module.ts"></code-pane>
|
||||
|
||||
<code-pane title="main.ts" path="attribute-directives/src/main.ts"></code-pane>
|
||||
|
||||
<code-pane title="index.html" path="attribute-directives/src/index.html"></code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
You can also experience and download the <live-example title="Attribute Directive example"></live-example>.
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ By convention, it is usually called `AppModule`.
|
|||
If you use the CLI to generate an app, the default `AppModule` is as follows:
|
||||
|
||||
```typescript
|
||||
|
||||
/* JavaScript imports */
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
|
@ -83,11 +84,13 @@ this module and the other module imports this one.
|
|||
An example of what goes into a declarations array follows:
|
||||
|
||||
```typescript
|
||||
|
||||
declarations: [
|
||||
YourComponent,
|
||||
YourPipe,
|
||||
YourDirective
|
||||
],
|
||||
|
||||
```
|
||||
|
||||
A declarable can only belong to one module, so only declare it in
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -97,9 +96,7 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -115,7 +112,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -133,7 +129,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -151,7 +146,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -235,7 +229,9 @@ For example, [if you need the web animations polyfill](http://caniuse.com/#feat=
|
|||
<code-example language="sh" class="code-shell">
|
||||
|
||||
# note that the web-animations-js polyfill is only here as an example
|
||||
|
||||
# it isn't a strict requirement of Angular anymore (more below)
|
||||
|
||||
npm install --save web-animations-js
|
||||
|
||||
</code-example>
|
||||
|
|
@ -247,7 +243,9 @@ Then open the `polyfills.ts` file and un-comment the corresponding `import` stat
|
|||
<code-example title="src/polyfills.ts">
|
||||
|
||||
/**
|
||||
|
||||
* Required to support Web Animations `@angular/platform-browser/animations`.
|
||||
|
||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||
**/
|
||||
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
|
@ -438,12 +436,10 @@ Here are the features which may require additional polyfills:
|
|||
<td>
|
||||
|
||||
[Animations](guide/animations)
|
||||
|
||||
[动画](guide/animations)
|
||||
|
||||
<br>Only if `Animation Builder` is used within the application--standard
|
||||
animation support in Angular doesn't require any polyfills (as of NG6).
|
||||
|
||||
[动画](guide/animations)
|
||||
<br>只有在应用中用到了 `Animation Builder` 时才需要；Angular 标准的动画支持是不需要任何腻子脚本的（截至 NG6）。
|
||||
|
||||
</td>
|
||||
|
|
@ -541,13 +537,9 @@ Here are the features which may require additional polyfills:
|
|||
|
||||
<td>
|
||||
|
||||
[Typed Array](guide/browser-support#typedarray)
|
||||
[Typed Array](guide/browser-support#typedarray)<br>
|
||||
|
||||
<br>
|
||||
|
||||
[Blob](guide/browser-support#blob)
|
||||
|
||||
<br>
|
||||
[Blob](guide/browser-support#blob)<br>
|
||||
|
||||
[FormData](guide/browser-support#formdata)
|
||||
|
||||
|
|
@ -828,4 +820,3 @@ If you are not using the CLI, you should add your polyfill scripts directly to t
|
|||
<!-- application polyfills -->
|
||||
|
||||
</code-example>
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -97,25 +97,39 @@ The following code snippets illustrate how the same kind of operation is defined
|
|||
|
||||
<th>
|
||||
|
||||
<td>Operation</td>
|
||||
<td>
|
||||
|
||||
<td>Observable</td>
|
||||
Operation
|
||||
|
||||
<td>Promise</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Observable
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Promise
|
||||
|
||||
</td>
|
||||
|
||||
</th>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Creation</td>
|
||||
<td>
|
||||
|
||||
Creation
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>new Observable((observer) => {
|
||||
observer.next(123);
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -123,35 +137,45 @@ The following code snippets illustrate how the same kind of operation is defined
|
|||
|
||||
<pre>new Promise((resolve, reject) => {
|
||||
resolve(123);
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Transform</td>
|
||||
<td>
|
||||
|
||||
<td><pre>obs.map((value) => value * 2 );</pre></td>
|
||||
Transform
|
||||
|
||||
<td><pre>promise.then((value) => value * 2);</pre></td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.map((value) => value * 2 );</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>promise.then((value) => value * 2);</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Subscribe</td>
|
||||
<td>
|
||||
|
||||
Subscribe
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>sub = obs.subscribe((value) => {
|
||||
console.log(value)
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -159,24 +183,32 @@ The following code snippets illustrate how the same kind of operation is defined
|
|||
|
||||
<pre>promise.then((value) => {
|
||||
console.log(value);
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Unsubscribe</td>
|
||||
<td>
|
||||
|
||||
<td><pre>sub.unsubscribe();</pre></td>
|
||||
Unsubscribe
|
||||
|
||||
<td>Implied by promise resolution.</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>sub.unsubscribe();</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Implied by promise resolution.
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
## Observables compared to events API
|
||||
|
|
@ -191,15 +223,27 @@ Here are some code samples that illustrate how the same kind of operation is def
|
|||
|
||||
<th>
|
||||
|
||||
<td>Observable</td>
|
||||
<td>
|
||||
|
||||
<td>Events API</td>
|
||||
Observable
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Events API
|
||||
|
||||
</td>
|
||||
|
||||
</th>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Creation & cancellation</td>
|
||||
<td>
|
||||
|
||||
Creation & cancellation
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -209,9 +253,7 @@ let clicks$ = fromEvent(buttonEl, ‘click’);
|
|||
let subscription = clicks$
|
||||
.subscribe(e => console.log(‘Clicked’, e))
|
||||
// Stop listening
|
||||
subscription.unsubscribe();
|
||||
|
||||
</pre>
|
||||
subscription.unsubscribe();</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -225,24 +267,24 @@ subscription.unsubscribe();
|
|||
button.addEventListener(‘click’, handler);
|
||||
// Stop listening
|
||||
button.removeEventListener(‘click’, handler);
|
||||
|
||||
</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Subscription</td>
|
||||
<td>
|
||||
|
||||
Subscription
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>observable.subscribe(() => {
|
||||
// notification handlers here
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -250,24 +292,23 @@ button.removeEventListener(‘click’, handler);
|
|||
|
||||
<pre>element.addEventListener(eventName, (event) => {
|
||||
// notification handler here
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Configuration</td>
|
||||
<td>
|
||||
|
||||
Configuration
|
||||
|
||||
</td>
|
||||
|
||||
<td>Listen for keystrokes, but provide a stream representing the value in the input.
|
||||
<pre>fromEvent(inputEl, 'keydown').pipe(
|
||||
map(e => e.target.value)
|
||||
);
|
||||
|
||||
</pre>
|
||||
);</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -275,14 +316,11 @@ button.removeEventListener(‘click’, handler);
|
|||
<pre>element.addEventListener(eventName, (event) => {
|
||||
// Cannot change the passed Event into another
|
||||
// value before it gets to the handler
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
## Observables compared to arrays
|
||||
|
|
@ -293,20 +331,31 @@ An observable produces values over time. An array is created as a static set of
|
|||
|
||||
<th>
|
||||
|
||||
<td>Observable</td>
|
||||
<td>
|
||||
|
||||
<td>Array</td>
|
||||
Observable
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Array
|
||||
|
||||
</td>
|
||||
|
||||
</th>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Given</td>
|
||||
<td>
|
||||
|
||||
Given
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs: ➞1➞2➞3➞5➞7</pre>
|
||||
|
||||
<pre>obsB: ➞'a'➞'b'➞'c'</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -314,21 +363,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr: [1, 2, 3, 5, 7]</pre>
|
||||
|
||||
<pre>arrB: ['a', 'b', 'c']</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>concat()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>concat()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.concat(obsB)</pre>
|
||||
|
||||
<pre>➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -336,21 +386,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.concat(arrB)</pre>
|
||||
|
||||
<pre>[1,2,3,5,7,'a','b','c']</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>filter()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>filter()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.filter((v) => v>3)</pre>
|
||||
|
||||
<pre>➞5➞7</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -358,21 +409,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.filter((v) => v>3)</pre>
|
||||
|
||||
<pre>[5, 7]</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>find()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>find()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.find((v) => v>3)</pre>
|
||||
|
||||
<pre>➞5</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -380,21 +432,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.find((v) => v>10)</pre>
|
||||
|
||||
<pre>5</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>findIndex()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>findIndex()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.findIndex((v) => v>3)</pre>
|
||||
|
||||
<pre>➞3</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -402,16 +455,18 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.findIndex((v) => v>3)</pre>
|
||||
|
||||
<pre>3</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>forEach()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>forEach()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -422,9 +477,7 @@ An observable produces values over time. An array is created as a static set of
|
|||
2
|
||||
3
|
||||
4
|
||||
5
|
||||
|
||||
</pre>
|
||||
5</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -437,22 +490,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
2
|
||||
3
|
||||
4
|
||||
5
|
||||
|
||||
</pre>
|
||||
5</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>map()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>map()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.map((v) => -v)</pre>
|
||||
|
||||
<pre>➞-1➞-2➞-3➞-5➞-7</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -460,21 +513,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.map((v) => -v)</pre>
|
||||
|
||||
<pre>[-1, -2, -3, -5, -7]</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>reduce()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>reduce()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.scan((s,v)=> s+v, 0)</pre>
|
||||
|
||||
<pre>➞1➞3➞6➞11➞18</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -482,12 +536,9 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.reduce((s,v) => s+v, 0)</pre>
|
||||
|
||||
<pre>18</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -77,13 +77,13 @@ The running application displays three heroes:
|
|||
运行应用程序会显示三个英雄：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
||||
<h3 class="no-toc">测试一下</h3>
|
||||
|
||||
E2E test that all children were instantiated and displayed as expected:
|
||||
|
||||
端到端测试，用于确保所有的子组件都像所期待的那样被初始化并显示出来。
|
||||
|
|
@ -124,13 +124,13 @@ Here's the `NameParentComponent` demonstrating name variations including a name
|
|||
</code-example>
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
||||
<h3 class="no-toc">测试一下</h3>
|
||||
|
||||
E2E tests of input property setter with empty and non-empty names:
|
||||
|
||||
端到端测试：输入属性的setter，分别使用空名字和非空名字。
|
||||
|
|
@ -186,9 +186,7 @@ Here's the output of a button-pushing sequence:
|
|||
下面是点击按钮的结果。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
|
@ -248,9 +246,7 @@ and the method processes it:
|
|||
框架(Angular)把事件参数(用`$event`表示)传给事件处理方法，这个方法会处理：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
|
@ -282,6 +278,7 @@ as seen in the following example.
|
|||
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，如下例所示。
|
||||
|
||||
{@a countdown-timer-example}
|
||||
|
||||
The following is a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket.
|
||||
It has `start` and `stop` methods that control the clock and it displays a
|
||||
countdown status message in its own template.
|
||||
|
|
@ -321,9 +318,7 @@ Here we see the parent and child working together.
|
|||
下面是父组件和子组件一起工作时的效果。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a countdown-tests}
|
||||
|
|
@ -512,9 +507,7 @@ facilitated by the service:
|
|||
*History*日志证明了：在父组件`MissionControlComponent`和子组件`AstronautComponent`之间，信息通过该服务实现了双向传递。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ This page describes how to load and apply these component styles.
|
|||
|
||||
You can run the <live-example></live-example> in Stackblitz and download the code from there.
|
||||
|
||||
你可以在 Stackblitz 上运行本章这些代码的<live-example></live-example>并下载这些代码。
|
||||
运行<live-example></live-example>来试用本页的代码。
|
||||
|
||||
## Using component styles
|
||||
|
||||
|
|
@ -290,11 +290,8 @@ to a component's `@Component` decorator:
|
|||
我们可以通过把外部 CSS 文件添加到 `@Component` 的 `styleUrls` 属性中来加载外部样式。
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane>
|
||||
|
||||
<code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.css"></code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
<div class="alert is-critical">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ This cookbook explores many of the features of Dependency Injection (DI) in Angu
|
|||
|
||||
{@a toc}
|
||||
|
||||
See the <live-example name="dependency-injection-in-action"></live-example> of the code in this cookbook.
|
||||
See the <live-example name="dependency-injection-in-action"></live-example>
|
||||
of the code in this cookbook.
|
||||
|
||||
到<live-example name="dependency-injection-in-action"></live-example>查看本烹饪书的源码。
|
||||
|
||||
|
|
@ -150,9 +151,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
|
|||
一旦所有依赖都准备好了，`AppComponent`就会显示用户信息：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a injectable-1}
|
||||
|
|
@ -307,6 +306,7 @@ This is called *sandboxing* because each service and component instance has its
|
|||
每个服务有自己的工作状态，与其它组件的服务和状态隔离。我们称作*沙盒化*，因为每个服务和组件实例都在自己的沙盒里运行。
|
||||
|
||||
{@a hero-bios-component}
|
||||
|
||||
Imagine a `HeroBiosComponent` that presents three instances of the `HeroBioComponent`.
|
||||
|
||||
想象一下，一个`HeroBiosComponent`组件显示三个`HeroBioComponent`的实例。
|
||||
|
|
@ -345,14 +345,13 @@ And the template displays this data-bound property.
|
|||
|
||||
父组件`HeroBiosComponent`把一个值绑定到`heroId`。`ngOnInit`把该`id`传递到服务，然后服务获取和缓存英雄。`hero`属性的getter从服务里面获取缓存的英雄，并在模板里显示它绑定到属性值。
|
||||
|
||||
Find this example in <live-example name="dependency-injection-in-action">live code</live-example> and confirm that the three `HeroBioComponent` instances have their own cached hero data.
|
||||
Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
|
||||
and confirm that the three `HeroBioComponent` instances have their own cached hero data.
|
||||
|
||||
到<live-example name="dependency-injection-in-action">在线例子</live-example>中找到这个例子，确认三个`HeroBioComponent`实例拥有自己独立的英雄数据缓存。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a optional}
|
||||
|
|
@ -435,9 +434,7 @@ It looks like this, with the hero's telephone number from `HeroContactComponent`
|
|||
从`HeroContactComponent`获得的英雄电话号码，被投影到上面的英雄描述里，就像这样：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
|
||||
|
||||
</figure>
|
||||
|
||||
Here's the `HeroContactComponent` which demonstrates the qualifying decorators:
|
||||
|
|
@ -480,9 +477,7 @@ Here's the `HeroBiosAndContactsComponent` in action.
|
|||
下面是`HeroBiosAndContactsComponent`的执行结果：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
|
||||
|
||||
</figure>
|
||||
|
||||
If you comment out the `@Host()` decorator, Angular now walks up the injector ancestor tree
|
||||
|
|
@ -492,9 +487,7 @@ with the gratuitous "!!!", indicating that the logger was found.
|
|||
如果注释掉`@Host()`装饰器，Angular就会沿着注入器树往上走，直到在`AppComponent`中找到该日志服务。日志服务的逻辑加入进来，更新了英雄的显示信息，这表明确实找到了日志服务。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
|
||||
|
||||
</figure>
|
||||
|
||||
On the other hand, if you restore the `@Host()` decorator and comment out `@Optional`,
|
||||
|
|
@ -552,9 +545,7 @@ The following image shows the effect of mousing over the `<hero-bios-and-contact
|
|||
下图显示了鼠标移到`<hero-bios-and-contacts>`标签的效果：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a providers}
|
||||
|
|
@ -650,9 +641,7 @@ It's visually simple: a few properties and the logs produced by a logger.
|
|||
它看起来很简单：一些属性和一个日志输出。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
|
||||
|
||||
</figure>
|
||||
|
||||
The code behind it gives you plenty to think about.
|
||||
|
|
@ -831,9 +820,7 @@ The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `Mini
|
|||
`HeroOfTheMonthComponent`构造函数的`logger`参数是一个`MinimalLogger`类型，支持TypeScript的编辑器里，只能看到它的两个成员`logs`和`logInfo`：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
|
||||
|
||||
</figure>
|
||||
|
||||
Behind the scenes, Angular actually sets the `logger` parameter to the full service registered under the `LoggingService` token which happens to be the `DateLoggerService` that was [provided above](guide/dependency-injection-in-action#useclass).
|
||||
|
|
@ -848,9 +835,7 @@ The following image, which displays the logging date, confirms the point:
|
|||
在下面的图片中，显示了日志日期，可以确认这一点：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
|
||||
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
|
@ -1087,9 +1072,7 @@ to display a *sorted* list of heroes.
|
|||
在这个刻意生成的例子里，`SortedHeroesComponent`继承自`HeroesBaseComponent`，显示一个*被排序*的英雄列表。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
|
||||
|
||||
</figure>
|
||||
|
||||
The `HeroesBaseComponent` could stand on its own.
|
||||
|
|
@ -1266,7 +1249,6 @@ you see that the `Alex` component *extends* (*inherits*) from a class named `Bas
|
|||
|
||||
`CraigComponent`例子探究了这个问题。[往回看Alex]{guide/dependency-injection-in-action#alex}，我们看到`Alex`组件*扩展*(*派生*)自一个叫`Base`的类。
|
||||
|
||||
|
||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-class-signature" title="parent-finder.component.ts (Alex class signature)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
|
@ -1338,9 +1320,7 @@ Here's *Alex* and family in action:
|
|||
下面是*Alex*和其家庭的运行结果：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a parent-tree}
|
||||
|
|
@ -1416,9 +1396,7 @@ Here's *Alice*, *Barry* and family in action:
|
|||
这里是*Alice*，*Barry*和该家庭的操作演示：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a parent-token}
|
||||
|
|
@ -1567,4 +1545,3 @@ Break the circularity with `forwardRef`:
|
|||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="parent-finder.component.ts (AlexComponent providers)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
|
|
|||
|
|
@ -65,16 +65,15 @@ When you can't control the dependencies, a class becomes difficult to test.
|
|||
How can you make `Car` more robust, flexible, and testable?
|
||||
|
||||
{@a ctor-injection}
|
||||
|
||||
That's super easy. Change the `Car` constructor to a version with DI:
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/car/car.ts (excerpt with DI)" path="dependency-injection/src/app/car/car.ts" region="car-ctor">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/car/car.ts (excerpt without DI)" path="dependency-injection/src/app/car/car-no-di.ts" region="car-ctor">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
|
|||
|
|
@ -16,22 +16,17 @@ Start by reviewing this simplified version of the _heroes_ feature
|
|||
from the [The Tour of Heroes](tutorial/).
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/heroes/heroes.component.ts" path="dependency-injection/src/app/heroes/heroes.component.1.ts"
|
||||
region="v1">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/hero-list.component.ts" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/hero.ts" path="dependency-injection/src/app/heroes/hero.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/mock-heroes.ts" path="dependency-injection/src/app/heroes/mock-heroes.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
@ -88,6 +83,7 @@ That's a defect we can safely ignore in this guide where our focus is on
|
|||
_injecting the service_ into the `HeroList` component.
|
||||
|
||||
{@a injector-config}
|
||||
|
||||
{@a bootstrap}
|
||||
|
||||
## Register a service provider
|
||||
|
|
@ -222,15 +218,11 @@ Of course, the `HeroListComponent` should do something with the injected `HeroSe
|
|||
Here's the revised component, making use of the injected service, side-by-side with the previous version for comparison.
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="hero-list.component (with DI)" path="dependency-injection/src/app/heroes/hero-list.component.2.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="hero-list.component (without DI)" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
Notice that the `HeroListComponent` doesn't know where the `HeroService` comes from.
|
||||
|
|
@ -329,11 +321,9 @@ Here is the revised `HeroService` that injects the `Logger`, side-by-side with t
|
|||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/heroes/hero.service (v2)" path="dependency-injection/src/app/heroes/hero.service.2.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/hero.service (v1)" path="dependency-injection/src/app/heroes/hero.service.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
@ -734,11 +724,9 @@ Here you see the new and the old implementation side-by-side:
|
|||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/heroes/heroes.component (v3)" path="dependency-injection/src/app/heroes/heroes.component.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/heroes.component (v2)" path="dependency-injection/src/app/heroes/heroes.component.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
@ -1063,4 +1051,3 @@ But it's best to avoid the problem altogether by defining components and service
|
|||
还是通过在独立的文件中定义组件和服务，完全避免此问题吧。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ This page describes techniques for deploying your Angular application to a remot
|
|||
本章会描述在远程服务器上部署Angular应用的工具与技术。
|
||||
|
||||
{@a dev-deploy}
|
||||
|
||||
{@a copy-files}
|
||||
|
||||
## Simplest deployment possible
|
||||
|
|
@ -256,9 +257,7 @@ showing exactly which classes are included in the bundle.
|
|||
Here's the output for the _main_ bundle of the QuickStart.
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a base-tag}
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@ The final UI looks like this:
|
|||
最终的用户界面是这样的：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
|
||||
|
||||
</figure>
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -135,9 +133,7 @@ Now run the app. It should display the title and hero name:
|
|||
运行应用。它应该显示出标题和英雄名：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
|
||||
|
||||
</figure>
|
||||
|
||||
The next few sections review some of the coding choices in the app.
|
||||
|
|
@ -275,9 +271,7 @@ Now the heroes appear in an unordered list.
|
|||
现在，英雄们出现在了一个无序列表中。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor">
|
||||
|
||||
</figure>
|
||||
|
||||
## Creating a class for the data
|
||||
|
|
@ -487,4 +481,3 @@ Here's the final code:
|
|||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ For clarity and precision, every guideline on _this_ page is illustrated with a
|
|||
followed by the page markup for that example ... as shown here.
|
||||
|
||||
```html
|
||||
|
||||
followed by the page markup for that example ... as shown here.
|
||||
|
||||
```
|
||||
|
||||
## Doc generation and tooling
|
||||
|
|
@ -123,11 +125,8 @@ All section heading text should be in "Sentence case", which means the first wor
|
|||
**Always follow the section heading with at least one blank line.**
|
||||
|
||||
<h2 class="no-toc">
|
||||
|
||||
Main section heading
|
||||
|
||||
</h2>
|
||||
|
||||
There are usually one or more main sections that may be further divided into secondary sections.
|
||||
|
||||
Begin a main section heading with the markdown `##` characters. Alternatively, you can write the equivalent `<h2>` HTML tag.
|
||||
|
|
@ -139,12 +138,11 @@ The main section heading should be followed by a blank line and then the content
|
|||
## Sections
|
||||
|
||||
A typical document is divided into sections.
|
||||
|
||||
```
|
||||
|
||||
<h3 class="no-toc">
|
||||
|
||||
Secondary section heading
|
||||
|
||||
</h3>
|
||||
|
||||
A secondary section heading is related to a main heading and _falls textually within_ the bounds of that main heading.
|
||||
|
|
@ -158,6 +156,7 @@ The secondary heading should be followed by a blank line and then the content fo
|
|||
### Secondary section heading
|
||||
|
||||
A secondary section ...
|
||||
|
||||
```
|
||||
|
||||
#### Additional section headings
|
||||
|
|
@ -171,6 +170,7 @@ Try to minimize the heading depth, preferably only two. But more headings, such
|
|||
#### Additional section headings
|
||||
|
||||
Try to minimize ...
|
||||
|
||||
```
|
||||
|
||||
## Subsections
|
||||
|
|
@ -214,9 +214,7 @@ To exclude a heading from the TOC, create the heading as an `<h2>` or `<h3>` ele
|
|||
```html
|
||||
|
||||
<h3 class="no-toc">
|
||||
|
||||
This heading is not displayed in the TOC
|
||||
|
||||
</h3>
|
||||
|
||||
```
|
||||
|
|
@ -226,9 +224,7 @@ You can turn off TOC generation for the _entire_ page by writing the title with
|
|||
```html
|
||||
|
||||
<h1 class="no-toc">
|
||||
|
||||
A guide without a TOC
|
||||
|
||||
</h1>
|
||||
|
||||
```
|
||||
|
|
@ -247,11 +243,13 @@ Look for the `SideNav` node in `navigation.json`. The `SideNav` node is an array
|
|||
Find the header for your page. For example, a guide page that describes an Angular feature is probably a child of the `Fundamentals` header.
|
||||
|
||||
```html
|
||||
|
||||
{
|
||||
"title": "Fundamentals",
|
||||
"tooltip": "The fundamentals of Angular",
|
||||
"children": [ ... ]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
A _header_ node child can be an _item_ node or another _header_ node. If your guide page belongs under a sub-header, find that sub-header in the JSON.
|
||||
|
|
@ -259,11 +257,13 @@ A _header_ node child can be an _item_ node or another _header_ node. If your gu
|
|||
Add an _item_ node for your guide page as a child of the appropriate _header_ node. It probably looks something like this one.
|
||||
|
||||
```html
|
||||
|
||||
{
|
||||
"url": "guide/architecture",
|
||||
"title": "Architecture",
|
||||
"tooltip": "The basic building blocks of Angular applications."
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
A navigation node has the following properties:
|
||||
|
|
@ -368,6 +368,7 @@ The following _code-example_ displays the sample's `app.module.ts`.
|
|||
Here's the brief markup that produced that lengthy snippet:
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/src/app/app.module.ts"
|
||||
title="src/app/app.module.ts">
|
||||
|
|
@ -443,6 +444,7 @@ First you surround that fragment in the source file with a named _docregion_ as
|
|||
Then you reference that _docregion_ in the `region` attribute of the `<code-example>` like this
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/src/app/app.module.ts"
|
||||
region="class">
|
||||
|
|
@ -472,6 +474,7 @@ Here's the markup for an "avoid" example in the
|
|||
[_Angular Style Guide_](guide/styleguide#style-05-03 "Style 05-03: components as elements").
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts"
|
||||
region="example"
|
||||
|
|
@ -507,33 +510,24 @@ The next example displays multiple code tabs, each with its own title.
|
|||
It demonstrates control over display of line numbers at both the `<code-tabs>` and `<code-pane>` levels.
|
||||
|
||||
<code-tabs linenums="false">
|
||||
|
||||
<code-pane
|
||||
title="app.component.html"
|
||||
path="docs-style-guide/src/app/app.component.html">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
linenums="true">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.css (heroes)"
|
||||
path="docs-style-guide/src/app/app.component.css"
|
||||
region="heroes">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="package.json (scripts)"
|
||||
path="docs-style-guide/package.1.json">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
Here's the markup for that example.
|
||||
|
|
@ -544,33 +538,24 @@ The `linenums` attribute in the second pane restores line numbering for _itself
|
|||
```html
|
||||
|
||||
<code-tabs linenums="false">
|
||||
|
||||
<code-pane
|
||||
title="app.component.html"
|
||||
path="docs-style-guide/src/app/app.component.html">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
linenums="true">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.css (heroes)"
|
||||
path="docs-style-guide/src/app/app.component.css"
|
||||
region="heroes">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="package.json (scripts)"
|
||||
path="docs-style-guide/package.1.json">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
```
|
||||
|
|
@ -590,22 +575,31 @@ The sample source code for this page, located in `context/examples/docs-style-gu
|
|||
Code snippet markup is always in the form of a comment. Here's the default _docregion_ markup for a TypeScript or JavaScript file:
|
||||
|
||||
```
|
||||
|
||||
// #docregion
|
||||
... some code ...
|
||||
// #enddocregion
|
||||
|
||||
```
|
||||
|
||||
Different file types have different comment syntax so adjust accordingly.
|
||||
|
||||
```html
|
||||
|
||||
<!-- #docregion -->
|
||||
|
||||
... some HTML ...
|
||||
|
||||
<!-- #enddocregion -->
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
/* #docregion */
|
||||
... some CSS ...
|
||||
/* #enddocregion */
|
||||
|
||||
```
|
||||
|
||||
The doc generation process erases these comments before displaying them in the doc viewer.
|
||||
|
|
@ -633,9 +627,7 @@ The `src/main.ts` is a simple example of a file with a single _#docregion_ at th
|
|||
|
||||
<code-example
|
||||
path="docs-style-guide/src/main.ts"
|
||||
title="src/main.ts">
|
||||
|
||||
</code-example>
|
||||
title="src/main.ts"></code-example>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -645,19 +637,20 @@ You'll often display multiple snippets from different fragments within the same
|
|||
You distinguish among them by giving each fragment its own _#docregion name_ as follows.
|
||||
|
||||
```
|
||||
|
||||
// #docregion region-name
|
||||
... some code ...
|
||||
// #enddocregion region-name
|
||||
|
||||
```
|
||||
|
||||
Remember to refer to this region by name in the `region` attribute of the `<code-example>` or `<code-pane>` as you did in an example above like this:
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/src/app/app.module.ts"
|
||||
region="class">
|
||||
|
||||
</code-example>
|
||||
region="class"></code-example>
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -666,7 +659,9 @@ The _#docregion_ with no name is the _default region_. Do _not_ set the `region`
|
|||
#### Nested _#docregions_
|
||||
|
||||
You can nest _#docregions_ within _#docregions_
|
||||
|
||||
```
|
||||
|
||||
// #docregion
|
||||
... some code ...
|
||||
// #docregion inner-region
|
||||
|
|
@ -674,6 +669,7 @@ You can nest _#docregions_ within _#docregions_
|
|||
// #enddocregion inner-region
|
||||
... yet more code ...
|
||||
/// #enddocregion
|
||||
|
||||
```
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -714,21 +710,16 @@ export class AppComponent {
|
|||
Here's are the two corresponding code snippets displayed side-by-side.
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts (class)"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
region="class">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts (class-skeleton)"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
region="class-skeleton">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
Some observations:
|
||||
|
|
@ -758,16 +749,13 @@ Here's an example that excerpts certain scripts from `package.json` into a parti
|
|||
|
||||
<code-example
|
||||
path="docs-style-guide/package.1.json"
|
||||
title="package.json (selected scripts)">
|
||||
|
||||
</code-example>
|
||||
title="package.json (selected scripts)"></code-example>
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/package.1.json"
|
||||
title="package.json (selected scripts)">
|
||||
|
||||
</code-example>
|
||||
title="package.json (selected scripts)"></code-example>
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -781,9 +769,11 @@ Such partial and intermediate files need their own names.
|
|||
Follow the doc sample naming convention. Add a number before the file extension as illustrated here:
|
||||
|
||||
```html
|
||||
|
||||
package.1.json
|
||||
app.component.1.ts
|
||||
app.component.2.ts
|
||||
|
||||
```
|
||||
|
||||
You'll find many such files among the samples in the Angular documentation.
|
||||
|
|
@ -792,9 +782,7 @@ Remember to exclude these files from stackblitz by listing them in the `stackbli
|
|||
|
||||
<code-example
|
||||
path="docs-style-guide/stackblitz.json"
|
||||
title="stackblitz.json">
|
||||
|
||||
</code-example>
|
||||
title="stackblitz.json"></code-example>
|
||||
|
||||
{@a live-examples}
|
||||
|
||||
|
|
@ -939,7 +927,9 @@ See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") sect
|
|||
When navigating within the page, you can omit the page URL when specifying the link that [scrolls up](#anchors "Anchors") to the beginning of this section.
|
||||
|
||||
```html
|
||||
|
||||
... the link that [scrolls up](#anchors "Anchors") to ...
|
||||
|
||||
```
|
||||
|
||||
{@a ugly-anchors}
|
||||
|
|
@ -951,7 +941,9 @@ It is often a good idea to *lock-in* a good anchor name.
|
|||
Sometimes the section header text makes for an unattractive anchor. [This one](#ugly-long-section-header-anchors) is pretty bad.
|
||||
|
||||
```html
|
||||
|
||||
[This one](#ugly-long-section-header-anchors) is pretty bad.
|
||||
|
||||
```
|
||||
|
||||
The greater danger is that **a future rewording of the header text would break** a link to this section.
|
||||
|
|
@ -970,7 +962,9 @@ text to which it applies, using the special `{@a name}` syntax like this.
|
|||
Now [link to that custom anchor name](#ugly-anchors) as you did before.
|
||||
|
||||
```html
|
||||
|
||||
Now [link to that custom anchor name](#ugly-anchors) as you did before.
|
||||
|
||||
```
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -980,6 +974,7 @@ Alternatively, you can use the HTML `<a>` tag.
|
|||
If you do, be sure to set the `id` attribute - not the `name` attribute! The docs generator will not convert the `name` to the proper link URL.
|
||||
|
||||
```html
|
||||
|
||||
<a id="anchors"></a>
|
||||
|
||||
## Anchors
|
||||
|
|
@ -1011,6 +1006,7 @@ A helpful, informational alert.
|
|||
</div>
|
||||
|
||||
Here is the markup for these alerts.
|
||||
|
||||
```html
|
||||
|
||||
<div class="alert is-critical">
|
||||
|
|
@ -1042,7 +1038,11 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
|
|||
|
||||
<div class="callout is-critical">
|
||||
|
||||
<header>A critical point</header>
|
||||
<header>
|
||||
|
||||
A critical point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
|
|
@ -1050,7 +1050,11 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
|
|||
|
||||
<div class="callout is-important">
|
||||
|
||||
<header>An important point</header>
|
||||
<header>
|
||||
|
||||
An important point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
|
|
@ -1058,18 +1062,27 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
|
|||
|
||||
<div class="callout is-helpful">
|
||||
|
||||
<header>A helpful point</header>
|
||||
<header>
|
||||
|
||||
A helpful point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
</div>
|
||||
|
||||
Here is the markup for the first of these callouts.
|
||||
|
||||
```html
|
||||
|
||||
<div class="callout is-critical">
|
||||
|
||||
<header>A critical point</header>
|
||||
<header>
|
||||
|
||||
A critical point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
|
|
@ -1242,38 +1255,65 @@ Here is the markup for this file tree.
|
|||
Use HTML tables to present tabular data.
|
||||
|
||||
<style>
|
||||
|
||||
td, th {vertical-align: top}
|
||||
|
||||
</style>
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Framework</th>
|
||||
<th>
|
||||
|
||||
<th>Task</th>
|
||||
Framework
|
||||
|
||||
<th>Speed</th>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Task
|
||||
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Speed
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>AngularJS</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>AngularJS</code>
|
||||
|
||||
<td>Fast</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Fast
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v2</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v2</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<!-- can use markdown too; remember blank lines -->
|
||||
|
||||
|
|
@ -1284,12 +1324,19 @@ Use HTML tables to present tabular data.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v4</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v4</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -1298,7 +1345,6 @@ Use HTML tables to present tabular data.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
Here is the markup for this table.
|
||||
|
|
@ -1306,38 +1352,65 @@ Here is the markup for this table.
|
|||
```html
|
||||
|
||||
<style>
|
||||
|
||||
td, th {vertical-align: top}
|
||||
|
||||
</style>
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Framework</th>
|
||||
<th>
|
||||
|
||||
<th>Task</th>
|
||||
Framework
|
||||
|
||||
<th>Speed</th>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Task
|
||||
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Speed
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>AngularJS</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>AngularJS</code>
|
||||
|
||||
<td>Fast</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Fast
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v2</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v2</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<!-- can use markdown too; remember blank lines -->
|
||||
|
||||
|
|
@ -1348,12 +1421,19 @@ Here is the markup for this table.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v4</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v4</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -1362,7 +1442,6 @@ Here is the markup for this table.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
```
|
||||
|
|
@ -1378,8 +1457,11 @@ Angular doc generation copies these image folders to the _runtime_ location, `ge
|
|||
Set the image `src` attribute to begin in _that_ directory.
|
||||
|
||||
Here's the `src` attribute for the "flying hero" image belonging to this page.
|
||||
|
||||
```
|
||||
|
||||
src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
|
||||
```
|
||||
|
||||
<h3 class="no-toc">Use the HTML <i><img></i> tag</h3>
|
||||
|
|
@ -1395,18 +1477,14 @@ You should nest the `<img>` tag within a `<figure>` tag, which styles the image
|
|||
Here's a conforming example
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying hero">
|
||||
|
||||
</figure>
|
||||
|
||||
```html
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
alt="flying hero">
|
||||
|
||||
</figure>
|
||||
|
||||
```
|
||||
|
|
@ -1420,19 +1498,15 @@ The doc generator reads the image dimensions from the file and adds width and he
|
|||
Here's the "flying hero" at a more reasonable scale.
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200">
|
||||
|
||||
</figure>
|
||||
|
||||
```html
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
alt="flying Angular hero"
|
||||
width="200">
|
||||
|
||||
</figure>
|
||||
|
||||
```
|
||||
|
|
@ -1442,13 +1516,9 @@ Wide images can be a problem. Most browsers try to rescale the image but wide im
|
|||
**Do not set a width greater than 700px**. If you wish to display a larger image, provide a link to the actual image that the user can click on to see the full size image separately as in this example of `source-map-explorer` output from the "Ahead-of-time Compilation" guide:
|
||||
|
||||
<a href="generated/images/guide/docs-style-guide/toh-pt6-bundle.png" title="Click to view larger image">
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/toh-pt6-bundle-700w.png" alt="toh-pt6-bundle" width="300px">
|
||||
|
||||
</figure>
|
||||
|
||||
</a>
|
||||
|
||||
<h3 class="no-toc">Image compression</h3>
|
||||
|
|
@ -1474,6 +1544,7 @@ Headings and code-examples automatically clear a floating image. If you need to
|
|||
The markup for the above example is:
|
||||
|
||||
```html
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
alt="flying Angular hero"
|
||||
width="200"
|
||||
|
|
|
|||
Loading…
Reference in New Issue