iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(glossary): copyedits and dropped unused Dart blocks (#3455)

Browse Source 
* docs(glossary): copyedits and dropped unused Dart blocks
* post-review updates

cc @kapunahelewong @kwalrath
This commit is contained in:
Patrice Chalin 2017-03-29 16:05:39 -07:00 committed by Ward Bell
parent a5a55eabe1
commit 53d94a8723
1 changed files with 120 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
public/docs/ts/latest/glossary.jade
View File

@ -46,13 +46,11 @@ a#aot
For details and examples, see the [Angular Modules (NgModule)](!{docsLatest}/guide/ngmodule.html) page. For details and examples, see the [Angular Modules (NgModule)](!{docsLatest}/guide/ngmodule.html) page.
+ifDocsFor('ts|dart') :marked
## Annotation
.l-sub-section
:marked :marked
## Annotation In practice, a synonym for [Decoration](#decorator).
.l-sub-section
block annotation-defn
:marked
In practice, a synonym for [Decoration](#decorator).
a#attribute-directive a#attribute-directive
a#attribute-directives a#attribute-directives
@ -120,16 +118,16 @@ a#attribute-directives
Sometimes refers to a [dependency-injection](#dependency-injection) binding Sometimes refers to a [dependency-injection](#dependency-injection) binding
between a "token"—also referred to as a "key"—and a dependency [provider](#provider). between a "token"—also referred to as a "key"—and a dependency [provider](#provider).
When using this more rare usage, be clear in context.
:marked :marked
## Bootstrap ## Bootstrap
.l-sub-section .l-sub-section
block bootstrap-defn-top
:marked
You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application.
For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
:marked :marked
You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
Bootstrapping identifies an application's top level "root" [component](#component),
which is the first component that is loaded for the application.
For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root. You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root.
.l-main-section#C .l-main-section#C
@ -200,39 +198,36 @@ a#component
* [Style binding](!{docsLatest}/guide/template-syntax.html#style-binding). * [Style binding](!{docsLatest}/guide/template-syntax.html#style-binding).
* [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ngModel). * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ngModel).
a#decorator
+ifDocsFor('ts|dart') a#decoration
a#decorator :marked
a#decoration ## Decorator | decoration
.l-sub-section
:marked :marked
## Decorator | decoration A *function* that adds metadata to a class, its members (properties, methods) and function arguments.
.l-sub-section
block decorator-defn
:marked
A *function* that adds metadata to a class, its members (properties, methods) and function arguments.
Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (also known as ES7). Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (also known as ES7).
To apply a decorator, position it immediately above or to the left of the item it decorates. To apply a decorator, position it immediately above or to the left of the item it decorates.
Angular has its own set of decorators to help it interoperate with your application parts. Angular has its own set of decorators to help it interoperate with your application parts.
The following example is a `@Component` decorator that identifies a The following example is a `@Component` decorator that identifies a
class as an Angular [component](#component) and an `@Input` decorator applied to the `name` property class as an Angular [component](#component) and an `@Input` decorator applied to the `name` property
of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata. of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
``` ```
@Component({...}) @Component({...})
export class AppComponent { export class AppComponent {
constructor(@Inject('SpecialFoo') public foo:Foo) {} constructor(@Inject('SpecialFoo') public foo:Foo) {}
@Input() name:string; @Input() name:string;
} }
``` ```
The scope of a decorator is limited to the language feature The scope of a decorator is limited to the language feature
that it decorates. None of the decorations shown here will "leak" to other that it decorates. None of the decorations shown here will "leak" to other
classes that follow it in the file. classes that follow it in the file.
.alert.is-important .alert.is-important
:marked :marked
Always include parentheses `()` when applying a decorator. Always include parentheses `()` when applying a decorator.
:marked :marked
## Dependency injection ## Dependency injection
@ -296,7 +291,7 @@ a#directives
An Angular class responsible for creating, reshaping, and interacting with HTML elements An Angular class responsible for creating, reshaping, and interacting with HTML elements
in the browser DOM. The directive is Angular's most fundamental feature. in the browser DOM. The directive is Angular's most fundamental feature.
A directive is ususally associated with an HTML element or attribute. A directive is usually associated with an HTML element or attribute.
This element or attribute is often referred to as the directive itself. This element or attribute is often referred to as the directive itself.
When Angular finds a directive in an HTML template, When Angular finds a directive in an HTML template,
@ -308,22 +303,20 @@ a#directives
as if you were writing native HTML. In this way, directives become extensions of as if you were writing native HTML. In this way, directives become extensions of
HTML itself. HTML itself.
Directives fall into one of the following categories: Directives fall into one of the following categories:
* [Components](#component) combine application logic with an HTML template to * [Components](#component) combine application logic with an HTML template to
render application [views](#view). Components are usually represented as HTML elements. render application [views](#view). Components are usually represented as HTML elements.
They are the building blocks of an Angular application. They are the building blocks of an Angular application.
1. [Attribute directives](#attribute-directive) can listen to and modify the behavior of * [Attribute directives](#attribute-directive) can listen to and modify the behavior of
other HTML elements, attributes, properties, and components. They are usually represented other HTML elements, attributes, properties, and components. They are usually represented
as HTML attributes, hence the name. as HTML attributes, hence the name.
1. [Structural directives](#structural-directive) are responsible for * [Structural directives](#structural-directive) are responsible for
shaping or reshaping HTML layout, typically by adding, removing, or manipulating shaping or reshaping HTML layout, typically by adding, removing, or manipulating
elements and their children. elements and their children.
.l-main-section#E .l-main-section#E
:marked :marked
@ -449,38 +442,37 @@ a#jit
:marked :marked
## Module ## Module
.l-sub-section .l-sub-section
block module-defn .alert.is-important
.alert.is-important
:marked
Angular has the following types of modules:
- [Angular modules](#angular-module).
For details and examples, see the [Angular Modules](!{docsLatest}/guide/ngmodule.html) page.
- ES2015 modules, as described in this section.
:marked :marked
A cohesive block of code dedicated to a single purpose. Angular has the following types of modules:
- [Angular modules](#angular-module).
For details and examples, see the [Angular Modules](!{docsLatest}/guide/ngmodule.html) page.
- ES2015 modules, as described in this section.
Angular apps are modular. :marked
A cohesive block of code dedicated to a single purpose.
In general, you assemble an application from many modules, both the ones you write and the ones you acquire from others. Angular apps are modular.
A module *exports* something of value in that code, typically one thing such as a class; In general, you assemble an application from many modules, both the ones you write and the ones you acquire from others.
a module that needs that class *imports* it.
The structure of Angular modules and the import/export syntax A module *exports* something of value in that code, typically one thing such as a class;
is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html). a module that needs that class *imports* it.
An application that adheres to this standard requires a module loader to The structure of Angular modules and the import/export syntax
load modules on request and resolve inter-module dependencies. is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html).
Angular doesn't include a module loader and doesn't have a preference
for any particular third-party library (although most examples use SystemJS).
You can use any module library that conforms to the standard.
Modules are typically named after the file in which the exported thing is defined. An application that adheres to this standard requires a module loader to
The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts) load modules on request and resolve inter-module dependencies.
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. Angular doesn't include a module loader and doesn't have a preference
for any particular third-party library (although most examples use SystemJS).
You can use any module library that conforms to the standard.
You rarely access Angular feature modules directly. You usually import them from an Angular [scoped package](#scoped-package) such as `@angular/core`. Modules are typically named after the file in which the exported thing is defined.
The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts)
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
You rarely access Angular feature modules directly. You usually import them from an Angular [scoped package](#scoped-package) such as `@angular/core`.
a#N a#N
.l-main-section#O .l-main-section#O
@ -492,7 +484,7 @@ a#N
:marked :marked
An array whose items arrive asynchronously over time. An array whose items arrive asynchronously over time.
Observables help you manage asynchronous data, such as data coming from a backend service. Observables help you manage asynchronous data, such as data coming from a backend service.
Observables are used within Angular itself, including Angular's event system and its http client service. Observables are used within Angular itself, including Angular's event system and its HTTP client service.
To use observables, Angular uses a third-party library called Reactive Extensions (RxJS). To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
Observables are a proposed feature for ES2016, the next version of JavaScript. Observables are a proposed feature for ES2016, the next version of JavaScript.
@ -548,21 +540,20 @@ a#N
a#Q a#Q
.l-main-section#R .l-main-section#R
+ifDocsFor('ts|js') :marked
## Reactive forms
.l-sub-section
:marked :marked
## Reactive forms A technique for building Angular forms through code in a component.
.l-sub-section The alternative technique is [template-driven forms](#template-driven-forms).
:marked
A technique for building Angular forms through code in a component.
The alternative technique is [template-driven forms](#template-driven-forms).
When building reactive forms: When building reactive forms:
- The "source of truth" is the component. The validation is defined using code in the component. - The "source of truth" is the component. The validation is defined using code in the component.
- Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`. - Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
- The template input elements do *not* use `ngModel`. - The template input elements do *not* use `ngModel`.
- The associated Angular directives are all prefixed with `Form`, such as `FormGroup`, `FormControl`, and `FormControlName`. - The associated Angular directives are all prefixed with `Form`, such as `FormGroup`, `FormControl`, and `FormControlName`.
Reactive forms are powerful, flexible, and a good choice for more complex data-entry form scenarios, such as dynamic generation of form controls. Reactive forms are powerful, flexible, and a good choice for more complex data-entry form scenarios, such as dynamic generation of form controls.
:marked :marked
## Router ## Router
@ -588,14 +579,13 @@ a#Q
For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page. For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
+ifDocsFor('ts|js') :marked
## Router module
.l-sub-section
:marked :marked
## Router module A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
.l-sub-section
:marked
A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page. For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
:marked :marked
## Routing component ## Routing component
@ -607,22 +597,21 @@ a#Q
.l-main-section#S .l-main-section#S
+ifDocsFor('ts|js') :marked
## Scoped package
.l-sub-section
:marked :marked
## Scoped package A way to group related *npm* packages.
.l-sub-section Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page.
:marked
A way to group related *npm* packages.
Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page.
Angular modules are delivered within *scoped packages* such as `@angular/core`, Angular modules are delivered within *scoped packages* such as `@angular/core`,
`@angular/common`, `@angular/platform-browser-dynamic`, `@angular/http`, and `@angular/router`. `@angular/common`, `@angular/platform-browser-dynamic`, `@angular/http`, and `@angular/router`.
Import a scoped package the same way that you import a normal package. Import a scoped package the same way that you import a normal package.
The only difference, from a consumer perspective, The only difference, from a consumer perspective,
is that the scoped package name begins with the Angular *scope name*, `@angular`. is that the scoped package name begins with the Angular *scope name*, `@angular`.
+makeExcerpt('architecture/ts/src/app/app.component.ts', 'import', '') +makeExcerpt('architecture/ts/src/app/app.component.ts', 'import', '')
:marked :marked
## Service ## Service
@ -645,12 +634,10 @@ a#Q
a#snake-case a#snake-case
:marked :marked
## snake_case ## snake_case
.l-sub-section .l-sub-section
block snake-case-defn :marked
:marked The practice of writing compound words or phrases such that an
The practice of writing compound words or phrases such that an underscore (`_`) separates one word from the next. This form is also known as *underscore case*.
underscore (`_`) separates one word from the next. This form is also known as *underscore case*.
a#structural-directive a#structural-directive
a#structural-directives a#structural-directives
@ -663,7 +650,7 @@ a#structural-directives
shape or reshape HTML layout, typically by adding and removing elements in the DOM. shape or reshape HTML layout, typically by adding and removing elements in the DOM.
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples. The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples.
Read more in the [_Structural Directives_](!{docsLatest}/guide/structural-directives.html) guide. Read more in the [Structural Directives](!{docsLatest}/guide/structural-directives.html) page.
.l-main-section#T .l-main-section#T
:marked :marked
@ -674,25 +661,23 @@ a#structural-directives
the support and guidance of an Angular [directive](#directive), the support and guidance of an Angular [directive](#directive),
most notably a [component](#component). most notably a [component](#component).
:marked
+ifDocsFor('ts|js') ## Template-driven forms
.l-sub-section
:marked :marked
## Template-driven forms A technique for building Angular forms using HTML forms and input elements in the view.
.l-sub-section The alternate technique is [Reactive Forms](#reactive-forms).
:marked
A technique for building Angular forms using HTML forms and input elements in the view.
The alternate technique is [Reactive Forms](#reactive-forms).
When building template-driven forms: When building template-driven forms:
- The "source of truth" is the template. The validation is defined using attributes on the individual input elements. - The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
- [Two-way binding](#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements. - [Two-way binding](#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements.
- Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input. - Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input.
- The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`. - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data-entry form scenarios. Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data-entry form scenarios.
Read about how to build template-driven forms Read about how to build template-driven forms
in the [Forms](!{docsLatest}/guide/forms.html) page. in the [Forms](!{docsLatest}/guide/forms.html) page.
:marked :marked
## Template expression ## Template expression
@ -756,23 +741,22 @@ a#Y
:marked :marked
## Zone ## Zone
.l-sub-section .l-sub-section
block zone-defn :marked
:marked A mechanism for encapsulating and intercepting
A mechanism for encapsulating and intercepting a JavaScript application's asynchronous activity.
a JavaScript application's asynchronous activity.
The browser DOM and JavaScript have a limited number The browser DOM and JavaScript have a limited number
of asynchronous activities, such as DOM events (for example, clicks), of asynchronous activities, such as DOM events (for example, clicks),
[promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
calls to remote servers. calls to remote servers.
Zones intercept all of these activities and give a "zone client" the opportunity Zones intercept all of these activities and give a "zone client" the opportunity
to take action before and after the async activity finishes. to take action before and after the async activity finishes.
Angular runs your application in a zone where it can respond to Angular runs your application in a zone where it can respond to
asynchronous events by checking for data changes and updating asynchronous events by checking for data changes and updating
the information it displays via [data bindings](#data-binding). the information it displays via [data bindings](#data-binding).
Learn more about zones in this Learn more about zones in this
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U). [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).