docs(glossary): update Dart to match TS, with minor tweaks to TS (#2868)
* sync cache before changes to Dart * docs(glossary): Dart updates and TS tweaks E.g., add AoT and JiT to Dart. * final refresh of cache file
This commit is contained in:
parent
692d751375
commit
f2c815f6d0
@ -19,11 +19,13 @@ block annotation-defn
|
|||||||
|
|
||||||
block bootstrap-defn-top
|
block bootstrap-defn-top
|
||||||
:marked
|
:marked
|
||||||
We launch an Angular application by "bootstrapping" it with the
|
You launch an Angular application by "bootstrapping" it with the
|
||||||
[bootstrap][bootstrap] method. The `bootstrap` method identifies an
|
[bootstrap][bootstrap] method. Bootstraping identifies an
|
||||||
application's top level "root" [Component](#component) and optionally
|
application's top level "root" [component](#component), which is
|
||||||
|
the first component that is loaded for the application, and optionally
|
||||||
registers service [providers](#provider) with the [dependency injection
|
registers service [providers](#provider) with the [dependency injection
|
||||||
system](#dependency-injection).
|
system](#dependency-injection).
|
||||||
|
For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
|
||||||
|
|
||||||
[bootstrap]: !{docsLatest}/api/angular2.platform.browser/bootstrap.html
|
[bootstrap]: !{docsLatest}/api/angular2.platform.browser/bootstrap.html
|
||||||
|
|
||||||
@ -42,17 +44,6 @@ block module-defn
|
|||||||
the chapter on "Libraries and Scripts" in the
|
the chapter on "Libraries and Scripts" in the
|
||||||
[Dart Language Specification](https://www.dartlang.org/docs/spec/).
|
[Dart Language Specification](https://www.dartlang.org/docs/spec/).
|
||||||
|
|
||||||
block routing-component-defn
|
|
||||||
:marked
|
|
||||||
A [Component](#component) with an attached router.
|
|
||||||
|
|
||||||
In most cases, the component became attached to a [router](#router) by means
|
|
||||||
of a `@RouterConfig` #{decorator} that defined routes to views controlled by this component.
|
|
||||||
|
|
||||||
The component's template has a `RouterOutlet` element where it can display views produced by the router.
|
|
||||||
|
|
||||||
It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
|
|
||||||
|
|
||||||
block append snake-case-defn
|
block append snake-case-defn
|
||||||
:marked
|
:marked
|
||||||
Library and file names are often spelled in snake_case. Examples include:
|
Library and file names are often spelled in snake_case. Examples include:
|
||||||
@ -63,6 +54,6 @@ block zone-defn
|
|||||||
Zones are a mechanism for encapsulating and intercepting
|
Zones are a mechanism for encapsulating and intercepting
|
||||||
a Dart application's asynchronous activity.
|
a Dart application's asynchronous activity.
|
||||||
|
|
||||||
To learn more, consult the [zones article][zones].
|
Learn more about zones in this [article][zones].
|
||||||
|
|
||||||
[zones]: https://www.dartlang.org/articles/libraries/zones
|
[zones]: https://www.dartlang.org/articles/libraries/zones
|
||||||
|
@ -13,7 +13,7 @@ block includes
|
|||||||
Most Angular terms are everyday English words
|
Most Angular terms are everyday English words
|
||||||
with a specific meaning within the Angular system.
|
with a specific meaning within the Angular system.
|
||||||
|
|
||||||
We have gathered here the most prominent terms
|
This glossary lists the most prominent terms
|
||||||
and a few less familiar ones that have unusual or
|
and a few less familiar ones that have unusual or
|
||||||
unexpected definitions.
|
unexpected definitions.
|
||||||
|
|
||||||
@ -23,30 +23,28 @@ block includes
|
|||||||
|
|
||||||
.l-main-section#A
|
.l-main-section#A
|
||||||
|
|
||||||
|
a#aot
|
||||||
|
:marked
|
||||||
|
## Ahead-of-Time (AoT) compilation
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
You can compile Angular applications at build-time.
|
||||||
|
By compiling your application<span if-docs="ts"> using the compiler-cli, `ngc`</span>, you can bootstrap directly
|
||||||
|
to a<span if-docs="ts"> module</span> factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
|
||||||
|
Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
|
||||||
|
|
||||||
+ifDocsFor('ts')
|
+ifDocsFor('ts')
|
||||||
a#aot
|
|
||||||
:marked
|
:marked
|
||||||
## Ahead-of-Time (AoT) Compilation
|
## Angular module
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Angular applications can be compiled by developers at build-time.
|
Helps you organize an application into cohesive blocks of functionality.
|
||||||
By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
|
An Angular module identifies the components, directives, and pipes that the application uses along with the list of external Angular modules that the application needs, such as `FormsModule`.
|
||||||
to a Module Factory, meaning you don't need to include the Angular compiler in your javascript bundle.
|
|
||||||
Ahead-of-time compiled applications also benefit from decreased load time and increased
|
|
||||||
performance.
|
|
||||||
|
|
||||||
:marked
|
Every Angular application has an application root module class. By convention, the class is
|
||||||
## Angular Module
|
called `AppModule` and resides in a file named `app.module.ts`.
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Helps us organize an application into cohesive blocks of functionality.
|
|
||||||
An Angular module identifies the components, directives, and pipes that are used by the application
|
|
||||||
along with the list of external Angular modules that the application needs, such as `FormsModule`.
|
|
||||||
|
|
||||||
Every Angular application has an application root module class. By convention the class is
|
For details and examples, see the [Angular Module](!{docsLatest}/guide/ngmodule.html) page.
|
||||||
called `AppModule` and resides in a file named `app.component.ts`.
|
|
||||||
|
|
||||||
See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples.
|
|
||||||
|
|
||||||
+ifDocsFor('ts|dart')
|
+ifDocsFor('ts|dart')
|
||||||
:marked
|
:marked
|
||||||
@ -57,15 +55,14 @@ block includes
|
|||||||
In practice, a synonym for [Decoration](#decorator).
|
In practice, a synonym for [Decoration](#decorator).
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Attribute Directive
|
## Attribute directive
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A category of [Directive](#directive) that can listen to and modify the behavior of
|
A category of [directive](#directive) that 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.
|
||||||
|
|
||||||
The `ngClass` directive for adding and removing CSS class names is a good example of
|
A good example of an attribute directive is the `ngClass` directive for adding and removing CSS class names.
|
||||||
an Attribute Directive.
|
|
||||||
|
|
||||||
.l-main-section#B
|
.l-main-section#B
|
||||||
|
|
||||||
@ -74,7 +71,7 @@ block includes
|
|||||||
## Barrel
|
## Barrel
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module.
|
A barrel is a way to *rollup exports* from several ES2015 modules into a single convenient ES2015 module.
|
||||||
The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
|
The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
|
||||||
|
|
||||||
Imagine three ES2015 modules in a `heroes` folder:
|
Imagine three ES2015 modules in a `heroes` folder:
|
||||||
@ -94,7 +91,7 @@ block includes
|
|||||||
import { Hero } from '../heroes/hero.model.ts';
|
import { Hero } from '../heroes/hero.model.ts';
|
||||||
import { HeroService } from '../heroes/hero.service.ts';
|
import { HeroService } from '../heroes/hero.service.ts';
|
||||||
:marked
|
:marked
|
||||||
We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
|
You can add a barrel to the `heroes` folder (called `index`, by convention) that exports all of these items:
|
||||||
code-example.
|
code-example.
|
||||||
export * from './hero.model.ts'; // re-export all of its exports
|
export * from './hero.model.ts'; // re-export all of its exports
|
||||||
export * from './hero.service.ts'; // re-export all of its exports
|
export * from './hero.service.ts'; // re-export all of its exports
|
||||||
@ -106,13 +103,9 @@ block includes
|
|||||||
:marked
|
:marked
|
||||||
The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
|
The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
|
||||||
|
|
||||||
That's why we can write this:
|
|
||||||
|
|
||||||
+makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
|
|
||||||
|
|
||||||
.alert.is-important
|
.alert.is-important
|
||||||
:marked
|
:marked
|
||||||
Note that you can often achieve this same goal using [Angular modules](#angular-module) instead.
|
Note that you can often achieve this using [Angular modules](#angular-module) instead.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Binding
|
## Binding
|
||||||
@ -121,8 +114,8 @@ block includes
|
|||||||
Almost always refers to [Data Binding](#data-binding) and the act of
|
Almost always refers to [Data Binding](#data-binding) and the act of
|
||||||
binding an HTML object property to a data object property.
|
binding an HTML object property to a data object property.
|
||||||
|
|
||||||
May refer to a [Dependency Injection](#dependency-injection) binding
|
May refer to a [dependency injection](#dependency-injection) binding
|
||||||
between a "token" or "key" and a dependency [provider](#provider).
|
between a "token", also referred to as a "key", and a dependency [provider](#provider).
|
||||||
This more rare usage should be clear in context.
|
This more rare usage should be clear in context.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
@ -130,11 +123,10 @@ block includes
|
|||||||
.l-sub-section
|
.l-sub-section
|
||||||
block bootstrap-defn-top
|
block bootstrap-defn-top
|
||||||
:marked
|
:marked
|
||||||
We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
|
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.
|
||||||
The bootstraping identifies an application's top level "root" [Component](#component), which is the first
|
For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
|
||||||
component that is loaded for the application. For more information see the [QuickStart](!{docsLatest}/quickstart.html).
|
|
||||||
:marked
|
:marked
|
||||||
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
||||||
|
|
||||||
.l-main-section#C
|
.l-main-section#C
|
||||||
:marked
|
:marked
|
||||||
@ -142,31 +134,29 @@ block includes
|
|||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
|
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
|
||||||
_except the first letter which is a lowercase letter_.
|
_except the first letter, which is lowercase_.
|
||||||
|
|
||||||
Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`.
|
Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`. Notice that `square` is an example of how you write a single word in camelCase.
|
||||||
|
|
||||||
This form is also known as **lower camel case**, to distinguish it from **upper camel case** which we call [PascalCase](#pascalcase).
|
This form is also known as **lower camel case**, to distinguish it from **upper camel case**, which is [PascalCase](#pascalcase).
|
||||||
When we write "camelCase" in this documentation we always mean *lower camel case*.
|
When you see "camelCase" in this documentation it always means *lower camel case*.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Component
|
## Component
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An Angular class responsible for exposing data
|
An Angular class responsible for exposing data to a [view](#view) and handling most of the view’s display and user-interaction logic.
|
||||||
to a [View](#view) and handling most of the view’s display
|
|
||||||
and user-interaction logic.
|
|
||||||
|
|
||||||
The Component is one of the most important building blocks in the Angular system.
|
The *component* is one of the most important building blocks in the Angular system.
|
||||||
It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template).
|
It is, in fact, an Angular [directive](#directive) with a companion [template](#template).
|
||||||
|
|
||||||
The developer applies the `!{_at}Component` !{_decoratorLink} to
|
You apply the `!{_at}Component` !{_decoratorLink} to
|
||||||
the component class, thereby attaching to the class the essential component metadata
|
the component class, thereby attaching to the class the essential component metadata
|
||||||
that Angular needs to create a component instance and render it with its template
|
that Angular needs to create a component instance and render it with its template
|
||||||
as a view.
|
as a view.
|
||||||
|
|
||||||
Those familiar with "MVC" and "MVVM" patterns will recognize
|
Those familiar with "MVC" and "MVVM" patterns will recognize
|
||||||
the Component in the role of "Controller" or "View Model".
|
the component in the role of "controller" or "view model".
|
||||||
|
|
||||||
.l-main-section#D
|
.l-main-section#D
|
||||||
:marked
|
:marked
|
||||||
@ -181,56 +171,48 @@ block includes
|
|||||||
spelled in dash-case.
|
spelled in dash-case.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Data Binding
|
## Data binding
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Applications display data values to a user and respond to user
|
Applications display data values to a user and respond to user
|
||||||
actions (clicks, touches, keystrokes).
|
actions (clicks, touches, keystrokes).
|
||||||
|
|
||||||
We could push application data values into HTML, attach
|
Instead of manually pushing application data values into HTML, attaching
|
||||||
event listeners, pull changed values from the screen, and
|
event listeners, pulling changed values from the screen, and
|
||||||
update application data values ... all by hand.
|
updating application data values, you can use data binding by declaring the relationship between an HTML widget and data source and let the
|
||||||
|
|
||||||
Or we could declare the relationship between an HTML widget
|
|
||||||
and an application data source ... and let a data binding
|
|
||||||
framework handle the details.
|
framework handle the details.
|
||||||
|
|
||||||
Data Binding is that second approach. Angular has a rich
|
Angular has a rich data binding framework with a variety of data binding
|
||||||
data binding framework with a variety of data binding
|
|
||||||
operations and supporting declaration syntax.
|
operations and supporting declaration syntax.
|
||||||
|
|
||||||
The many forms of binding include:
|
Read about the forms of binding in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) page:
|
||||||
* [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation)
|
* [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation).
|
||||||
* [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding)
|
* [Property binding](!{docsLatest}/guide/template-syntax.html#property-binding).
|
||||||
* [Event Binding](!{docsLatest}/guide/template-syntax.html#event-binding)
|
* [Event binding](!{docsLatest}/guide/template-syntax.html#event-binding).
|
||||||
* [Attribute Binding](!{docsLatest}/guide/template-syntax.html#attribute-binding)
|
* [Attribute binding](!{docsLatest}/guide/template-syntax.html#attribute-binding).
|
||||||
* [Class Binding](!{docsLatest}/guide/template-syntax.html#class-binding)
|
* [Class binding](!{docsLatest}/guide/template-syntax.html#class-binding).
|
||||||
* [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#ng-model)
|
* [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ngModel).
|
||||||
|
|
||||||
Learn more about data binding in the
|
|
||||||
[Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) chapter.
|
|
||||||
|
|
||||||
+ifDocsFor('ts|dart')
|
+ifDocsFor('ts|dart')
|
||||||
a#decorator
|
a#decorator
|
||||||
a#decoration
|
a#decoration
|
||||||
:marked
|
:marked
|
||||||
## Decorator | Decoration
|
## Decorator | decoration
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
block decorator-defn
|
block decorator-defn
|
||||||
:marked
|
:marked
|
||||||
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
|
A decorator is 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 (AKA ES7).
|
Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
|
||||||
|
|
||||||
We apply a decorator by positioning it
|
To apply a decorator, position it immediately above or to the left of the thing it decorates.
|
||||||
immediately above or to the left of the thing it decorates.
|
|
||||||
|
|
||||||
Angular has its own set of decorators to help it interoperate with our application parts.
|
Angular has its own set of decorators to help it interoperate with your application parts.
|
||||||
Here is an example of a `@Component` decorator that identifies a
|
Here is an example of a `@Component` decorator that identifies a
|
||||||
class as an Angular [Component](#component) and an `@Input` decorator applied to a property
|
class as an Angular [component](#component) and an `@Input` decorator applied to the `name` property
|
||||||
of that component.
|
of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
|
||||||
The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
|
|
||||||
```
|
```
|
||||||
@Component({...})
|
@Component({...})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
@ -244,77 +226,75 @@ block includes
|
|||||||
|
|
||||||
.alert.is-important
|
.alert.is-important
|
||||||
:marked
|
:marked
|
||||||
Always include the parentheses `()` when applying a decorator.
|
Always include parentheses `()` when applying a decorator.
|
||||||
A decorator is a **function** that must be called when applied.
|
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Dependency Injection
|
## Dependency injection
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Dependency Injection is both a design pattern and a mechanism
|
Dependency injection is both a design pattern and a mechanism
|
||||||
for creating and delivering parts of an application to other
|
for creating and delivering parts of an application to other
|
||||||
parts of an application that request them.
|
parts of an application that request them.
|
||||||
|
|
||||||
Angular developers prefer to build applications by defining many simple parts
|
Angular developers prefer to build applications by defining many simple parts
|
||||||
that each do one thing well and then wire them together at runtime.
|
that each do one thing well and then wiring them together at runtime.
|
||||||
|
|
||||||
These parts often rely on other parts. An Angular [Component](#component)
|
These parts often rely on other parts. An Angular [component](#component)
|
||||||
part might rely on a service part to get data or perform a calculation. When a
|
part might rely on a service part to get data or perform a calculation. When
|
||||||
part "A" relies on another part "B", we say that "A" depends on "B" and
|
part "A" relies on another part "B", you say that "A" depends on "B" and
|
||||||
that "B" is a dependency of "A".
|
that "B" is a dependency of "A".
|
||||||
|
|
||||||
We can ask a "Dependency Injection System" to create "A"
|
You can ask a "dependency injection system" to create "A"
|
||||||
for us and handle all the dependencies.
|
for us and handle all the dependencies.
|
||||||
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
|
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
|
||||||
and returns a fully prepared instance of "A".
|
and returns a fully prepared instance of "A".
|
||||||
|
|
||||||
Angular provides and relies upon its own sophisticated
|
Angular provides and relies upon its own sophisticated
|
||||||
[Dependency Injection](dependency-injection.html) system
|
[dependency injection](dependency-injection.html) system
|
||||||
to assemble and run applications by "injecting" application parts
|
to assemble and run applications by "injecting" application parts
|
||||||
into other application parts where and when needed.
|
into other application parts where and when needed.
|
||||||
|
|
||||||
At the core there is an [`Injector`](#injector) that returns dependency values on request.
|
At the core there is an [`injector`](#injector) that returns dependency values on request.
|
||||||
The expression `injector.get(token)` returns the value associated with the given token.
|
The expression `injector.get(token)` returns the value associated with the given token.
|
||||||
|
|
||||||
A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most
|
A token is an Angular type (`OpaqueToken`). You rarely deal with tokens directly; most
|
||||||
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
|
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
|
||||||
to a token. When we write `injector.get(Foo)`, the injector returns
|
to a token. When you write `injector.get(Foo)`, the injector returns
|
||||||
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
|
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
|
||||||
|
|
||||||
Angular makes similar requests internally during many of its operations
|
During many of its operations, Angular makes similar requests internally, such as when it creates a [`component`](#component) for display.
|
||||||
as when it creates a [`Component`](#component) for display.
|
|
||||||
|
|
||||||
The `Injector` maintains an internal map of tokens to dependency values.
|
The `Injector` maintains an internal map of tokens to dependency values.
|
||||||
If the `Injector` can't find a value for a given token, it creates
|
If the `Injector` can't find a value for a given token, it creates
|
||||||
a new value using a `Provider` for that token.
|
a new value using a `Provider` for that token.
|
||||||
|
|
||||||
A [Provider](#provider) is a recipe for
|
A [provider](#provider) is a recipe for
|
||||||
creating new instances of a dependency value associated with a particular token.
|
creating new instances of a dependency value associated with a particular token.
|
||||||
|
|
||||||
An injector can only create a value for a given token if it has
|
An injector can only create a value for a given token if it has
|
||||||
a `Provider` for that token in its internal provider registry.
|
a `provider` for that token in its internal provider registry.
|
||||||
Registering providers is a critical preparatory step.
|
Registering providers is a critical preparatory step.
|
||||||
|
|
||||||
Angular registers some of its own providers with every injector.
|
Angular registers some of its own providers with every injector.
|
||||||
We can register our own providers.
|
We can register our own providers.
|
||||||
|
|
||||||
Learn more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) chapter.
|
Read more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) page.
|
||||||
:marked
|
:marked
|
||||||
## Directive
|
## Directive
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An Angular class responsible for creating, re-shaping, and interacting with HTML elements
|
An Angular class responsible for creating, reshaping, and interacting with HTML elements
|
||||||
in the browser DOM. Directives are Angular's most fundamental feature.
|
in the browser DOM. Directives are Angular's most fundamental feature.
|
||||||
|
|
||||||
A Directive is almost always associated with an HTML element or attribute.
|
A Directive is almost always associated with an HTML element or attribute.
|
||||||
We often refer to such an element or attribute as the directive itself.
|
We often refer to such an element or attribute as the directive itself.
|
||||||
When Angular finds a directive in an HTML template,
|
When Angular finds a directive in an HTML template,
|
||||||
it creates the matching directive class instance
|
it creates the matching directive class instance
|
||||||
and gives that instance control over that portion of the browser DOM.
|
and gives the instance control over that portion of the browser DOM.
|
||||||
|
|
||||||
Developers can invent custom HTML markup (e.g., `<my-directive>`) to
|
You can invent custom HTML markup (for example, `<my-directive>`) to
|
||||||
associate with their custom directives. They add this custom markup to HTML templates
|
associate with your custom directives. You add this custom markup to HTML templates
|
||||||
as if they 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 three categories:
|
Directives fall into one of three categories:
|
||||||
@ -324,12 +304,12 @@ block includes
|
|||||||
They are the building blocks of an Angular application and the
|
They are the building blocks of an Angular application and the
|
||||||
developer can expect to write a lot of them.
|
developer can expect to write a lot of them.
|
||||||
|
|
||||||
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
|
1. [Attribute directives](#attribute-directive) that 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), a directive responsible for
|
1. [Structural directives](#structural-directive), a directive responsible for
|
||||||
shaping or re-shaping 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
|
||||||
@ -342,9 +322,9 @@ block includes
|
|||||||
|
|
||||||
The latest approved version of JavaScript is
|
The latest approved version of JavaScript is
|
||||||
[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
|
[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
|
||||||
(AKA "ES2016" or "ES7") and many Angular developers will write their applications
|
(AKA "ES2016" or "ES7") and many Angular developers write their applications
|
||||||
either in this version of the language or a dialect that strives to be
|
either in this version of the language or a dialect that strives to be
|
||||||
compatible with it such as [TypeScript](#typesScript).
|
compatible with it, such as [TypeScript](#typescript).
|
||||||
|
|
||||||
Most modern browsers today only support the much older "ECMAScript 5" (AKA ES5) standard.
|
Most modern browsers today only support the much older "ECMAScript 5" (AKA ES5) standard.
|
||||||
Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
|
Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
|
||||||
@ -356,17 +336,17 @@ block includes
|
|||||||
## ES2015
|
## ES2015
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
Short hand for [ECMAScript](#ecmascript) 2015.
|
||||||
:marked
|
:marked
|
||||||
## ES6
|
## ES6
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
Short hand for [ECMAScript](#ecmascript) 2015.
|
||||||
:marked
|
:marked
|
||||||
## ES5
|
## ES5
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
|
Short hand for [ECMAScript](#ecmascript) 5, the version of JavaScript run by most modern browsers.
|
||||||
See [ECMAScript](#ecmascript).
|
See [ECMAScript](#ecmascript).
|
||||||
|
|
||||||
a#F
|
a#F
|
||||||
@ -386,41 +366,39 @@ a#H
|
|||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A directive property that can be the ***target*** of a
|
A directive property that can be the ***target*** of a
|
||||||
[Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
|
[property binding](!{docsLatest}/guide/template-syntax.html#property-binding) (explained in detail in the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page).
|
||||||
Data values flow *into* this property from the data source identified
|
Data values flow *into* this property from the data source identified
|
||||||
in the template expression to the right of the equal sign.
|
in the template expression to the right of the equal sign.
|
||||||
|
|
||||||
See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter.
|
See the [Input and output properties](!{docsLatest}/guide/template-syntax.html#inputs-outputs) section of the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Interpolation
|
## Interpolation
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A form of [Property Data Binding](#data-binding) in which a
|
A form of [property data binding](#data-binding) in which a
|
||||||
[template expression](#template-expression) between double-curly braces
|
[template expression](#template-expression) between double-curly braces
|
||||||
renders as text. That text may be concatenated with neighboring text
|
renders as text. That text may be concatenated with neighboring text
|
||||||
before it is assigned to an element property
|
before it is assigned to an element property
|
||||||
or displayed between element tags as in this example.
|
or displayed between element tags, as in this example.
|
||||||
|
|
||||||
code-example(language="html" escape="html").
|
code-example(language="html" escape="html").
|
||||||
<label>My current hero is {{hero.name}}</label>
|
<label>My current hero is {{hero.name}}</label>
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Learn more about interpolation in the
|
Read more about [interpolation](!{docsLatest}/guide/template-syntax.html#interpolation) in the
|
||||||
[Template Syntax](!{docsLatest}/guide/template-syntax.html#interpolation) chapter.
|
[Template Syntax](!{docsLatest}/guide/template-syntax.html) page.
|
||||||
|
|
||||||
.l-main-section#J
|
.l-main-section#J
|
||||||
|
|
||||||
+ifDocsFor('ts')
|
a#jit
|
||||||
a#jit
|
:marked
|
||||||
|
## Just-in-Time (JiT) compilation
|
||||||
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
## Just-in-Time (JiT) Compilation
|
With Angular _just-in-time_ bootstrapping you compile your components<span if-docs="ts"> and modules</span> in the browser
|
||||||
.l-sub-section
|
and launch the application dynamically. This is a good choice during development.
|
||||||
:marked
|
Consider using the [ahead-of-time](#aot) mode for production apps.
|
||||||
With Angular _Just-in-time_ bootstrapping you compile your components and modules in the
|
|
||||||
browser
|
|
||||||
and launch the application dynamically. This is a good choice during development.
|
|
||||||
Consider the [Ahead-of-time](#aot) mode for production apps.
|
|
||||||
|
|
||||||
.l-main-section#K
|
.l-main-section#K
|
||||||
:marked
|
:marked
|
||||||
@ -431,29 +409,29 @@ a#H
|
|||||||
|
|
||||||
.l-main-section#L
|
.l-main-section#L
|
||||||
:marked
|
:marked
|
||||||
## Lifecycle Hooks
|
## Lifecycle hooks
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
[Directives](#directive) and [Components](#component) have a lifecycle
|
[Directives](#directive) and [components](#component) have a lifecycle
|
||||||
managed by Angular as it creates, updates and destroys them.
|
managed by Angular as it creates, updates, and destroys them.
|
||||||
|
|
||||||
Developers can tap into key moments in that lifecycle by implementing
|
You can tap into key moments in that lifecycle by implementing
|
||||||
one or more of the "Lifecycle Hook" interfaces.
|
one or more of the lifecycle hook interfaces.
|
||||||
|
|
||||||
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
|
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
|
||||||
For example, the `OnInit` interface has a hook method names `ngOnInit`.
|
For example, the `OnInit` interface has a hook method named `ngOnInit`.
|
||||||
|
|
||||||
Angular calls these hook methods in the following order:
|
Angular calls these hook methods in the following order:
|
||||||
* `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change
|
* `ngOnChanges` - when an [input](#input)/[output](#output) binding value changes.
|
||||||
* `ngOnInit` - after the first `ngOnChanges`
|
* `ngOnInit` - after the first `ngOnChanges`.
|
||||||
* `ngDoCheck` - developer's custom change detection
|
* `ngDoCheck` - developer's custom change detection.
|
||||||
* `ngAfterContentInit` - after component content initialized
|
* `ngAfterContentInit` - after component content initialized.
|
||||||
* `ngAfterContentChecked` - after every check of component content
|
* `ngAfterContentChecked` - after every check of component content.
|
||||||
* `ngAfterViewInit` - after component's view(s) are initialized
|
* `ngAfterViewInit` - after component's view(s) are initialized.
|
||||||
* `ngAfterViewChecked` - after every check of a component's view(s)
|
* `ngAfterViewChecked` - after every check of a component's view(s).
|
||||||
* `ngOnDestroy` - just before the directive is destroyed.
|
* `ngOnDestroy` - just before the directive is destroyed.
|
||||||
|
|
||||||
Learn more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) chapter.
|
Read more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) page.
|
||||||
|
|
||||||
.l-main-section#M
|
.l-main-section#M
|
||||||
|
|
||||||
@ -465,14 +443,13 @@ a#H
|
|||||||
:marked
|
:marked
|
||||||
In Angular, there are two types of modules:
|
In Angular, there are two types of modules:
|
||||||
- [Angular modules](#angular-module).
|
- [Angular modules](#angular-module).
|
||||||
See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples.
|
For details and examples, see the [Angular Modules](!{docsLatest}/guide/ngmodule.html) page.
|
||||||
- ES2015 modules as described in this section.
|
- ES2015 modules, as described in this section.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular apps are modular.
|
Angular apps are modular.
|
||||||
|
|
||||||
In general, we assemble our application from many modules, both the ones we write ourselves
|
In general, you assemble your application from many modules, both the ones you write and the ones you acquire from others.
|
||||||
and the ones we acquire from others.
|
|
||||||
|
|
||||||
A typical module is a cohesive block of code dedicated to a single purpose.
|
A typical module is a cohesive block of code dedicated to a single purpose.
|
||||||
|
|
||||||
@ -480,21 +457,19 @@ a#H
|
|||||||
A module that needs that thing, **imports** it.
|
A module that needs that thing, **imports** it.
|
||||||
|
|
||||||
The structure of Angular modules and the import/export syntax
|
The structure of Angular modules and the import/export syntax
|
||||||
is based on the [ES2015](#es2015) module standard
|
is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html).
|
||||||
described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
|
|
||||||
|
|
||||||
An application that adheres to this standard requires a module loader to
|
An application that adheres to this standard requires a module loader to
|
||||||
load modules on request and resolve inter-module dependencies.
|
load modules on request, and resolve inter-module dependencies.
|
||||||
Angular does not ship with a module loader and does not have a preference
|
Angular does not ship with a module loader and does not have a preference
|
||||||
for any particular 3rd party library (although most samples use SystemJS).
|
for any particular 3rd party library (although most examples use SystemJS).
|
||||||
Application developers may pick any module library that conforms to the standard
|
You may pick any module library that conforms to the standard.
|
||||||
|
|
||||||
Modules are typically named after the file in which the exported thing is defined.
|
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)
|
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`.
|
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
|
||||||
|
|
||||||
Developers rarely access Angular feature modules directly.
|
You rarely access Angular feature modules directly. You usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
|
||||||
We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
|
|
||||||
|
|
||||||
a#N
|
a#N
|
||||||
.l-main-section#O
|
.l-main-section#O
|
||||||
@ -504,8 +479,8 @@ a#N
|
|||||||
## Observable
|
## Observable
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
We can think of an observable as an array whose items arrive asynchronously over time.
|
You can think of an observable as an array whose items arrive asynchronously over time.
|
||||||
Observables help us 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).
|
||||||
@ -515,12 +490,12 @@ a#N
|
|||||||
## Output
|
## Output
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A directive property that can be the ***target*** of an
|
A directive property that can be the ***target*** of
|
||||||
[Event Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
|
[event binding](!{docsLatest}/guide/template-syntax.html#event-binding).
|
||||||
Events stream *out* of this property to the receiver identified
|
Events stream *out* of this property to the receiver identified
|
||||||
in the template expression to the right of the equal sign.
|
in the template expression to the right of the equal sign.
|
||||||
|
|
||||||
See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter.
|
See the [Input and output properties](!{docsLatest}/guide/template-syntax.html#inputs-outputs) section of the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page.
|
||||||
|
|
||||||
.l-main-section#P
|
.l-main-section#P
|
||||||
|
|
||||||
@ -528,20 +503,18 @@ a#N
|
|||||||
## PascalCase
|
## PascalCase
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
|
The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter. Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
|
||||||
Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
|
|
||||||
|
|
||||||
This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase).
|
This form is also known as **upper camel case** to distinguish it from **lower camel case**, which is simply called [camelCase](#camelcase). In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
|
||||||
In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
|
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Pipe
|
## Pipe
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An Angular pipe is a function that transforms input values to output values for
|
An Angular pipe is a function that transforms input values to output values for
|
||||||
display in a [view](#view). We use the `!{_at}Pipe` !{_decoratorLink}
|
display in a [view](#view). Use the `!{_at}Pipe` !{_decoratorLink}
|
||||||
to associate the pipe function with a name. We can then use that
|
to associate the pipe function with a name. You then use that
|
||||||
name in our HTML to declaratively transform values on screen.
|
name in your HTML to declaratively transform values on screen.
|
||||||
|
|
||||||
Here's an example that uses the built-in `currency` pipe to display
|
Here's an example that uses the built-in `currency` pipe to display
|
||||||
a numeric value in the local currency.
|
a numeric value in the local currency.
|
||||||
@ -549,24 +522,22 @@ a#N
|
|||||||
code-example(language="html" escape="html").
|
code-example(language="html" escape="html").
|
||||||
<label>Price: </label>{{product.price | currency}}
|
<label>Price: </label>{{product.price | currency}}
|
||||||
:marked
|
:marked
|
||||||
Learn more in the chapter on [pipes](!{docsLatest}/guide/pipes.html) .
|
Read more in the page on [pipes](!{docsLatest}/guide/pipes.html).
|
||||||
|
|
||||||
- var _ProviderUrl = docsLatest+'/api/'+(lang == 'dart' ? 'angular2.core' : 'core/index')+'/Provider-class.html'
|
|
||||||
:marked
|
:marked
|
||||||
## Provider
|
## Provider
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A [Provider](!{_ProviderUrl}) creates a new instance of a dependency for the
|
A _provider_ creates a new instance of a dependency for the
|
||||||
[Dependency Injection](#dependency-injection) system.
|
[dependency injection](#dependency-injection) system.
|
||||||
It relates a lookup token to code — sometimes called a "recipe" —
|
It relates a lookup token to code—sometimes called a "recipe"—that can create a dependency value.
|
||||||
that can create a dependency value.
|
|
||||||
|
|
||||||
a#Q
|
a#Q
|
||||||
.l-main-section#R
|
.l-main-section#R
|
||||||
|
|
||||||
+ifDocsFor('ts|js')
|
+ifDocsFor('ts|js')
|
||||||
:marked
|
:marked
|
||||||
## Reactive Forms
|
## Reactive forms
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A technique for building Angular forms through code in a component.
|
A technique for building Angular forms through code in a component.
|
||||||
@ -578,24 +549,22 @@ a#Q
|
|||||||
- 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 great for more complex data entry form scenarios, such as dynamic generation
|
Reactive forms are powerful, flexible, and great for more complex data entry form scenarios such as dynamic generation of form controls.
|
||||||
of form controls.
|
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Router
|
## Router
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Most applications consist of many screens or [views](#view).
|
Most applications consist of many screens or [views](#view).
|
||||||
The user navigates among them by clicking links and buttons
|
The user navigates among them by clicking links and buttons,
|
||||||
and taking other similar actions that cause the application to
|
and performing other similar actions that cause the application to
|
||||||
replace one view with another.
|
replace one view with another.
|
||||||
|
|
||||||
The Angular [Component Router](!{docsLatest}/guide/router.html) is a richly featured mechanism for configuring
|
The Angular [component router](!{docsLatest}/guide/router.html) is a richly featured mechanism for configuring and managing the entire view navigation process including the creation and destruction
|
||||||
and managing the entire view navigation process including the creation and destruction
|
|
||||||
of views.
|
of views.
|
||||||
+ifDocsFor('ts|js')
|
+ifDocsFor('ts|js')
|
||||||
:marked
|
:marked
|
||||||
In most cases, components becomes attached to a [router](#router) by means
|
In most cases, components become attached to a [router](#router) by means
|
||||||
of a `RouterConfig` that defines routes to views.
|
of a `RouterConfig` that defines routes to views.
|
||||||
|
|
||||||
A [routing component's](#routing-component) template has a `RouterOutlet` element
|
A [routing component's](#routing-component) template has a `RouterOutlet` element
|
||||||
@ -604,31 +573,30 @@ a#Q
|
|||||||
Other views in the application likely have anchor tags or buttons with `RouterLink`
|
Other views in the application likely have anchor tags or buttons with `RouterLink`
|
||||||
directives that users can click to navigate.
|
directives that users can click to navigate.
|
||||||
|
|
||||||
See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
|
For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
|
||||||
|
|
||||||
+ifDocsFor('ts|js')
|
+ifDocsFor('ts|js')
|
||||||
:marked
|
:marked
|
||||||
## RouterModule
|
## Router module
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
|
A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
|
||||||
|
|
||||||
See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
|
For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Routing Component
|
## Routing component
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
block routing-component-defn
|
:marked
|
||||||
:marked
|
An Angular [component](#component) with a `RouterOutlet` that displays views based on router navigations.
|
||||||
An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations.
|
|
||||||
|
|
||||||
See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
|
For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
|
||||||
|
|
||||||
.l-main-section#S
|
.l-main-section#S
|
||||||
|
|
||||||
+ifDocsFor('ts|js')
|
+ifDocsFor('ts|js')
|
||||||
:marked
|
:marked
|
||||||
## Scoped Package
|
## Scoped package
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
|
Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
|
||||||
@ -636,9 +604,9 @@ a#Q
|
|||||||
|
|
||||||
A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
|
A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
|
||||||
|
|
||||||
We import a scoped package the same way we'd import a *normal* package.
|
You import a scoped package the same way that you'd import a *normal* package.
|
||||||
The only difference, from a consumer perspective,
|
The only difference, from a consumer perspective,
|
||||||
is that the 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/app/app.component.ts', 'import', '')
|
+makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
|
||||||
|
|
||||||
@ -649,38 +617,34 @@ a#snake-case
|
|||||||
.l-sub-section
|
.l-sub-section
|
||||||
block snake-case-defn
|
block snake-case-defn
|
||||||
:marked
|
:marked
|
||||||
The practice of writing compound words or phrases such that each word is separated by an
|
The practice of writing compound words or phrases such that an
|
||||||
underscore (`_`). This form is also known as **underscore case**.
|
underscore (`_`) separates one word from the next. This form is also known as **underscore case**.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Service
|
## Service
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Components are great and all, but what do we do with data or logic that are not associated
|
For data or logic that is not associated
|
||||||
with a specific view or that we want to share across components? We build services!
|
with a specific view or that you want to share across components, build services.
|
||||||
|
|
||||||
Applications often require services such as a hero data service or a logging service.
|
Applications often require services such as a hero data service or a logging service.
|
||||||
Our components depend on these services to do the heavy lifting.
|
|
||||||
|
|
||||||
A service is a class with a focused purpose.
|
A service is a class with a focused purpose.
|
||||||
We often create a service to implement features that are
|
We often create a service to implement features that are
|
||||||
independent from any specific view,
|
independent from any specific view,
|
||||||
provide share data or logic across components, or encapsulate external interactions.
|
provide shared data or logic across components, or encapsulate external interactions.
|
||||||
|
|
||||||
See the [Services](!{docsLatest}/tutorial/toh-pt4.html) chapter of the tutorial to learn more.
|
For more information, see the [Services](!{docsLatest}/tutorial/toh-pt4.html) page of the [Tour of Heroes](!{docsLatest}/tutorial/) tutorial.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Structural Directive
|
## Structural directive
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A category of [Directive](#directive) that can
|
A category of [directive](#directive) that can
|
||||||
shape or re-shape HTML layout, typically by adding, removing, or manipulating
|
shape or reshape HTML layout, typically by adding, removing, or manipulating
|
||||||
elements and their children.
|
elements and their children; for example, the `ngIf` "conditional element" directive and the `ngFor` "repeater" directive.
|
||||||
|
|
||||||
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
|
Read more in the [Structural Directives](!{docsLatest}/guide/structural-directives.html) page.
|
||||||
good examples in this category.
|
|
||||||
|
|
||||||
See the [Structural Directives](!{docsLatest}/guide/structural-directives.html) chapter to learn more.
|
|
||||||
|
|
||||||
.l-main-section#T
|
.l-main-section#T
|
||||||
:marked
|
:marked
|
||||||
@ -688,14 +652,13 @@ a#snake-case
|
|||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A template is a chunk of HTML that Angular uses to render a [view](#view) with
|
A template is a chunk of HTML that Angular uses to render a [view](#view) with
|
||||||
the support and continuing guidance of an Angular [Directive](#directive),
|
the support and continuing guidance of an Angular [directive](#directive),
|
||||||
most notably a [Component](#component).
|
most notably a [component](#component).
|
||||||
|
|
||||||
We write templates in a special [Template Syntax](!{docsLatest}/guide/template-syntax.html).
|
|
||||||
|
|
||||||
+ifDocsFor('ts|js')
|
+ifDocsFor('ts|js')
|
||||||
:marked
|
:marked
|
||||||
## Template-Driven Forms
|
## Template-driven forms
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A technique for building Angular forms using HTML forms and input elements in the view.
|
A technique for building Angular forms using HTML forms and input elements in the view.
|
||||||
@ -704,47 +667,47 @@ a#snake-case
|
|||||||
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 in synchronization with the user's entry into the input elements.
|
- [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements.
|
||||||
- Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and
|
- 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.
|
||||||
two-way binding set up.
|
|
||||||
- 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 and 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.
|
||||||
|
|
||||||
Learn how to build template-driven forms
|
Read about how to build template-driven forms
|
||||||
in the [Forms](!{docsLatest}/guide/forms.html) chapter.
|
in the [Forms](!{docsLatest}/guide/forms.html) page.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Template Expression
|
## Template expression
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An expression is a !{_Lang}-like syntax that Angular evaluates within
|
An expression is a !{_Lang}-like syntax that Angular evaluates within
|
||||||
a [data binding](#data-binding). Learn how to write template expressions
|
a [data binding](#data-binding).
|
||||||
in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) chapter.
|
|
||||||
|
Read about how to write template expressions
|
||||||
|
in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) page.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Transpile
|
## Transpile
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The process of transforming code written in one form of JavaScript
|
The process of transforming code written in one form of JavaScript
|
||||||
(e.g., TypeScript) into another form of JavaScript (e.g., [ES5](#es5)).
|
(for example, TypeScript) into another form of JavaScript (for example, [ES5](#es5)).
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## TypeScript
|
## TypeScript
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
|
A version of JavaScript that supports most [ECMAScript 2015](#es2015)
|
||||||
language features and many features that may arrive in future versions
|
language features such as [decorators](#decorator).
|
||||||
of JavaScript such as [Decorators](#decorator).
|
|
||||||
|
|
||||||
TypeScript is also noteable for its optional typing system which gives
|
TypeScript is also noteable for its optional typing system, which gives
|
||||||
us compile-time type-checking and strong tooling support (e.g. "intellisense",
|
us compile-time type checking and strong tooling support (for example, "intellisense",
|
||||||
code completion, refactoring, and intelligent search). Many code editors
|
code completion, refactoring, and intelligent search). Many code editors
|
||||||
and IDEs support TypeScript either natively or with plugins.
|
and IDEs support TypeScript either natively or with plugins.
|
||||||
|
|
||||||
TypeScript is the preferred language for Angular development although
|
TypeScript is the preferred language for Angular development although
|
||||||
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
|
you can use other JavaScript dialects such as [ES5](#es5).
|
||||||
|
|
||||||
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
|
Read more about TypeScript at [typescript.org](http://www.typescriptlang.org/).
|
||||||
|
|
||||||
a#U
|
a#U
|
||||||
.l-main-section#V
|
.l-main-section#V
|
||||||
@ -756,10 +719,10 @@ a#U
|
|||||||
A view is a portion of the screen that displays information and responds
|
A view is a portion of the screen that displays information and responds
|
||||||
to user actions such as clicks, mouse moves, and keystrokes.
|
to user actions such as clicks, mouse moves, and keystrokes.
|
||||||
|
|
||||||
Angular renders a view under the control of one or more [Directives](#directive),
|
Angular renders a view under the control of one or more [directives](#directive),
|
||||||
especially [Component](#component) directives and their companion [Templates](#template).
|
especially [component](#component) directives and their companion [templates](#template).
|
||||||
The Component plays such a prominent role that we often
|
The component plays such a prominent role that it's often
|
||||||
find it convenient to refer to a component as a view.
|
convenient to refer to a component as a view.
|
||||||
|
|
||||||
Views often contain other views and any view might be loaded and unloaded
|
Views often contain other views and any view might be loaded and unloaded
|
||||||
dynamically as the user navigates through the application, typically
|
dynamically as the user navigates through the application, typically
|
||||||
@ -779,16 +742,16 @@ a#Y
|
|||||||
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, activities such as DOM events (e.g., clicks),
|
of asynchronous activities, 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 completes.
|
to take action before and after the async activity finishes.
|
||||||
|
|
||||||
Angular runs our 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
|
||||||
|
@ -23,17 +23,17 @@ block includes
|
|||||||
|
|
||||||
.l-main-section#A
|
.l-main-section#A
|
||||||
|
|
||||||
+ifDocsFor('ts')
|
a#aot
|
||||||
a#aot
|
:marked
|
||||||
|
## Ahead-of-Time (AoT) compilation
|
||||||
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
## Ahead-of-time (AoT) compilation
|
You can compile Angular applications at build-time.
|
||||||
.l-sub-section
|
By compiling your application<span if-docs="ts"> using the compiler-cli, `ngc`</span>, you can bootstrap directly
|
||||||
:marked
|
to a<span if-docs="ts"> module</span> factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
|
||||||
You can compile Angular applications at build-time.
|
Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
|
||||||
By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
|
|
||||||
to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
|
|
||||||
Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
|
|
||||||
|
|
||||||
|
+ifDocsFor('ts')
|
||||||
:marked
|
:marked
|
||||||
## Angular module
|
## Angular module
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
@ -124,7 +124,7 @@ block includes
|
|||||||
block bootstrap-defn-top
|
block bootstrap-defn-top
|
||||||
: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.
|
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).
|
For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
|
||||||
:marked
|
:marked
|
||||||
You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
||||||
|
|
||||||
@ -391,15 +391,14 @@ a#H
|
|||||||
|
|
||||||
.l-main-section#J
|
.l-main-section#J
|
||||||
|
|
||||||
+ifDocsFor('ts')
|
a#jit
|
||||||
a#jit
|
:marked
|
||||||
|
## Just-in-Time (JiT) compilation
|
||||||
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
## Just-in-time (JiT) compilation
|
With Angular _just-in-time_ bootstrapping you compile your components<span if-docs="ts"> and modules</span> in the browser
|
||||||
.l-sub-section
|
and launch the application dynamically. This is a good choice during development.
|
||||||
:marked
|
Consider using the [ahead-of-time](#aot) mode for production apps.
|
||||||
With Angular _just-in-time_ bootstrapping you compile your components and modules in the browser
|
|
||||||
and launch the application dynamically. This is a good choice during development.
|
|
||||||
Consider using the [ahead-of-time](#aot) mode for production apps.
|
|
||||||
|
|
||||||
.l-main-section#K
|
.l-main-section#K
|
||||||
:marked
|
:marked
|
||||||
@ -588,11 +587,10 @@ a#Q
|
|||||||
:marked
|
:marked
|
||||||
## Routing component
|
## Routing component
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
block routing-component-defn
|
:marked
|
||||||
:marked
|
An Angular [component](#component) with a `RouterOutlet` that displays views based on router navigations.
|
||||||
An Angular [component](#component) with a RouterOutlet that displays views based on router navigations.
|
|
||||||
|
|
||||||
For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
|
For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
|
||||||
|
|
||||||
.l-main-section#S
|
.l-main-section#S
|
||||||
|
|
||||||
@ -698,7 +696,7 @@ a#snake-case
|
|||||||
## TypeScript
|
## TypeScript
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
|
A version of JavaScript that supports most [ECMAScript 2015](#es2015)
|
||||||
language features such as [decorators](#decorator).
|
language features such as [decorators](#decorator).
|
||||||
|
|
||||||
TypeScript is also noteable for its optional typing system, which gives
|
TypeScript is also noteable for its optional typing system, which gives
|
||||||
|
Loading…
x
Reference in New Issue
Block a user