Judy Bogart
Andrew Kushnir
parent
029a93963a
commit
f015dbe1ba
|
|
@ -87,6 +87,8 @@ If that form will need additional customization by the user, it might work best
|
|||
However, if the forms will always be the same and not need much customization by developers, then you could create a dynamic component that takes the configuration and generates the form.
|
||||
In general, the more complex the customization, the more useful the schematic approach.
|
||||
|
||||
{@a integrating-with-the-cli}
|
||||
|
||||
## Integrating with the CLI
|
||||
|
||||
A library can include [schematics](guide/glossary#schematic) that allow it to integrate with the Angular CLI.
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ This glossary lists the most prominent terms
|
|||
and a few less familiar ones with unusual or
|
||||
unexpected definitions.
|
||||
|
||||
[A](guide/glossary#A) [B](guide/glossary#B) [C](guide/glossary#C) [D](guide/glossary#D) [E](guide/glossary#E) [F](guide/glossary#F) [G](guide/glossary#G) [H](guide/glossary#H) [I](guide/glossary#I)
|
||||
[J](guide/glossary#J) [K](guide/glossary#K) [L](guide/glossary#L) [M](guide/glossary#M) [N](guide/glossary#N) [O](guide/glossary#O) [P](guide/glossary#P) [Q](guide/glossary#Q) [R](guide/glossary#R)
|
||||
[S](guide/glossary#S) [T](guide/glossary#T) [U](guide/glossary#U) [V](guide/glossary#V) [W](guide/glossary#W) [X](guide/glossary#X) [Y](guide/glossary#Y) [Z](guide/glossary#Z)
|
||||
[A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I)
|
||||
[J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R)
|
||||
[S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
|
||||
|
||||
|
||||
{@a A}
|
||||
|
|
@ -22,7 +22,7 @@ unexpected definitions.
|
|||
The Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code
|
||||
into efficient JavaScript code during the build phase, before the browser downloads
|
||||
and runs that code.
|
||||
This is the best compilation mode for production environments, with decreased load time and increased performance compared to [just-in-time (JIT) compilation](guide/glossary#jit).
|
||||
This is the best compilation mode for production environments, with decreased load time and increased performance compared to [just-in-time (JIT) compilation](#jit).
|
||||
|
||||
By compiling your application using the `ngc` command-line tool, you can bootstrap directly to a module factory, so you don't need to include the Angular compiler in your JavaScript bundle.
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ By compiling your application using the `ngc` command-line tool, you can bootstr
|
|||
|
||||
## Angular element
|
||||
|
||||
An Angular [component](guide/glossary#component) packaged as a [custom element](guide/glossary#custom-element).
|
||||
An Angular [component](#component) packaged as a [custom element](#custom-element).
|
||||
|
||||
Learn more in [Angular Elements Overview](guide/elements).
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ Learn more in [Angular Elements Overview](guide/elements).
|
|||
|
||||
## annotation
|
||||
|
||||
A structure that provides metadata for a class. See [decorator](guide/glossary#decorator).
|
||||
A structure that provides metadata for a class. See [decorator](#decorator).
|
||||
|
||||
{@a app-shell}
|
||||
|
||||
|
|
@ -53,6 +53,19 @@ You can use the Angular CLI to [generate](cli/generate#appshell) an app shell.
|
|||
This can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.
|
||||
|
||||
See also [Service Worker and PWA](guide/service-worker-intro).
|
||||
{@a architect}
|
||||
|
||||
## Architect
|
||||
|
||||
The tool that the CLI uses to perform complex tasks such as compilation and test running, according to a provided configuration.
|
||||
Architect is a shell that runs a [builder](#builder) (defined in an [npm package](#npm-package)) with a given [target configuration](#target).
|
||||
|
||||
In the [workspace configuration file](guide/workspace-config#project-tool-configuration-options), an "architect" section provides configuration options for Architect builders.
|
||||
|
||||
For example, a built-in builder for linting is defined in the package `@angular-devkit/build_angular:tslint`, which uses the [TSLint](https://palantir.github.io/tslint/) tool to perform linting, with a configuration specified in a `tslint.json` file.
|
||||
|
||||
Use the [CLI command `ng run`](cli/run) to invoke a builder by specifying a [target configuration](#target) associated with that builder.
|
||||
Integrators can add builders to enable tools and workflows to run through the Angular CLI. For example, a custom builder can replace the third-party tools used by the built-in implementations for CLI commands such as `ng build` or `ng test`.
|
||||
|
||||
{@a attribute-directive}
|
||||
|
||||
|
|
@ -62,7 +75,7 @@ See also [Service Worker and PWA](guide/service-worker-intro).
|
|||
|
||||
## attribute directives
|
||||
|
||||
A category of [directive](guide/glossary#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
|
||||
as HTML attributes, hence the name.
|
||||
|
||||
|
|
@ -76,11 +89,11 @@ Learn more in [Attribute Directives](guide/attribute-directives).
|
|||
## binding
|
||||
|
||||
Generally, the practice of setting a variable or property to a data value.
|
||||
Within Angular, typically refers to [data binding](guide/glossary#data-binding),
|
||||
Within Angular, typically refers to [data binding](#data-binding),
|
||||
which coordinates DOM object properties with data object properties.
|
||||
|
||||
Sometimes refers to a [dependency-injection](guide/glossary#dependency-injection) binding
|
||||
between a [token](guide/glossary#token) and a dependency [provider](guide/glossary#provider).
|
||||
Sometimes refers to a [dependency-injection](#dependency-injection) binding
|
||||
between a [token](#token) and a dependency [provider](#provider).
|
||||
|
||||
{@a bootstrap}
|
||||
|
||||
|
|
@ -88,12 +101,24 @@ between a [token](guide/glossary#token) and a dependency [provider](guide/glossa
|
|||
|
||||
A way to initialize and launch an app or system.
|
||||
|
||||
In Angular, an app's root NgModule (`AppModule`) has a `bootstrap` property that identifies the app's top-level [components](guide/glossary#component).
|
||||
In Angular, an app's root NgModule (`AppModule`) has a `bootstrap` property that identifies the app's top-level [components](#component).
|
||||
During the bootstrap process, Angular creates and inserts these components into the `index.html` host web page.
|
||||
You can bootstrap multiple apps in the same `index.html`. Each app contains its own components.
|
||||
|
||||
Learn more in [Bootstrapping](guide/bootstrapping).
|
||||
|
||||
{@a builder}
|
||||
|
||||
## builder
|
||||
|
||||
A function that uses the [Architect](#architect) API to perform a complex process such as "build" or "test".
|
||||
The builder code is defined in an [npm package](#npm-package).
|
||||
|
||||
For example, [BrowserBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/browser) runs a [webpack](https://webpack.js.org/) build for a browser target and [KarmaBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/karma) starts the Karma server and runs a webpack build for unit tests.
|
||||
|
||||
The [CLI command `ng run`](cli/run) invokes a builder with a specific [target configuration](#target).
|
||||
The [workspace configuration](guide/workspace-config) file, `angular.json`, contains default configurations for built-in builders.
|
||||
|
||||
{@a C}
|
||||
|
||||
{@a case-conventions}
|
||||
|
|
@ -123,7 +148,7 @@ Upper snake case uses words in all capital letters connected with underscores. F
|
|||
|
||||
## class decorator
|
||||
|
||||
A [decorator](guide/glossary#decorator) that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type.
|
||||
A [decorator](#decorator) that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type.
|
||||
|
||||
The following decorators can declare Angular class types:
|
||||
* `@Component()`
|
||||
|
|
@ -137,7 +162,7 @@ The following decorators can declare Angular class types:
|
|||
|
||||
## class field decorator
|
||||
|
||||
A [decorator](guide/glossary#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`.
|
||||
A [decorator](#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`.
|
||||
|
||||
{@a collection}
|
||||
|
||||
|
|
@ -149,7 +174,7 @@ In Angular, a set of related [schematics](#schematic) collected in an [npm packa
|
|||
|
||||
## command-line interface (CLI)
|
||||
|
||||
The [Angular CLI](cli) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](guide/glossary#workspace) or [project](guide/glossary#project), and to run [schematics](guide/glossary#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment.
|
||||
The [Angular CLI](cli) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](#workspace) or [project](#project), and to run [schematics](#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment.
|
||||
|
||||
* To begin using the CLI for a new project, see [Getting Started](guide/quickstart).
|
||||
* To learn more about the full capabilities of the CLI, see the [CLI command reference](cli).
|
||||
|
|
@ -160,14 +185,19 @@ See also [Schematics CLI](#schematics-cli).
|
|||
|
||||
## component
|
||||
|
||||
A class with the `@Component()` [decorator](guide/glossary#decorator) that associates it with a companion [template](guide/glossary#template). Together, the component and template define a [view](guide/glossary#view).
|
||||
A component is a special type of [directive](guide/glossary#directive).
|
||||
A class with the `@Component()` [decorator](#decorator) that associates it with a companion [template](#template). Together, the component and template define a [view](#view).
|
||||
A component is a special type of [directive](#directive).
|
||||
The `@Component()` decorator extends the `@Directive()` decorator with template-oriented features.
|
||||
|
||||
An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through [data binding](guide/glossary#data-binding).
|
||||
An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through [data binding](#data-binding).
|
||||
|
||||
Read more about components, templates, and views in [Architecture Overview](guide/architecture).
|
||||
|
||||
## configuration
|
||||
|
||||
See [workspace configuration](#cli-config)
|
||||
|
||||
|
||||
{@a custom-element}
|
||||
|
||||
## custom element
|
||||
|
|
@ -178,7 +208,9 @@ The custom element feature extends HTML by allowing you to define a tag whose co
|
|||
|
||||
You can use the API to transform an Angular component so that it can be registered with the browser and used in any HTML that you add directly to the DOM within an Angular app. The custom element tag inserts the component's view, with change-detection and data-binding functionality, into content that would otherwise be displayed without Angular processing.
|
||||
|
||||
See also [dynamic component loading](guide/glossary#dynamic-components).
|
||||
See [Angular element](#angular-element).
|
||||
|
||||
See also [dynamic component loading](#dynamic-components).
|
||||
|
||||
|
||||
{@a D}
|
||||
|
|
@ -210,8 +242,8 @@ Read about the following forms of binding in [Template Syntax](guide/template-sy
|
|||
|
||||
## declarable
|
||||
|
||||
A class type that you can add to the `declarations` list of an [NgModule](guide/glossary#ngmodule).
|
||||
You can declare [components](guide/glossary#component), [directives](guide/glossary#directive), and [pipes](guide/glossary#pipe).
|
||||
A class type that you can add to the `declarations` list of an [NgModule](#ngmodule).
|
||||
You can declare [components](#component), [directives](#directive), and [pipes](#pipe).
|
||||
|
||||
Don't declare the following:
|
||||
* A class that's already declared in another NgModule
|
||||
|
|
@ -233,7 +265,7 @@ TypeScript adds support for decorators.
|
|||
Angular defines decorators that attach metadata to classes or properties
|
||||
so that it knows what those classes or properties mean and how they should work.
|
||||
|
||||
See [class decorator](guide/glossary#class-decorator), [class field decorator](guide/glossary#class-field-decorator).
|
||||
See [class decorator](#class-decorator), [class field decorator](#class-field-decorator).
|
||||
|
||||
{@a di}
|
||||
|
||||
|
|
@ -244,7 +276,7 @@ See [class decorator](guide/glossary#class-decorator), [class field decorator](g
|
|||
A design pattern and mechanism for creating and delivering some parts of an application (dependencies) to other parts of an application that require them.
|
||||
|
||||
In Angular, dependencies are typically services, but they also can be values, such as strings or functions.
|
||||
An [injector](guide/glossary#injector) for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured [provider](guide/glossary#provider) of the service or value.
|
||||
An [injector](#injector) for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured [provider](#provider) of the service or value.
|
||||
|
||||
Learn more in [Dependency Injection in Angular](guide/dependency-injection).
|
||||
|
||||
|
|
@ -252,7 +284,7 @@ Learn more in [Dependency Injection in Angular](guide/dependency-injection).
|
|||
|
||||
## DI token
|
||||
|
||||
A lookup token associated with a dependency [provider](guide/glossary#provider), for use with the [dependency injection](guide/glossary#di) system.
|
||||
A lookup token associated with a dependency [provider](#provider), for use with the [dependency injection](#di) system.
|
||||
|
||||
|
||||
{@a directive}
|
||||
|
|
@ -260,16 +292,16 @@ A lookup token associated with a dependency [provider](guide/glossary#provider),
|
|||
|
||||
## directive
|
||||
|
||||
A class that can modify the structure of the DOM or modify attributes in the DOM and component data model. A directive class definition is immediately preceded by a `@Directive()` [decorator](guide/glossary#decorator) that supplies metadata.
|
||||
A class that can modify the structure of the DOM or modify attributes in the DOM and component data model. A directive class definition is immediately preceded by a `@Directive()` [decorator](#decorator) that supplies metadata.
|
||||
|
||||
A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself. When Angular finds a directive in an HTML [template](guide/glossary#template), it creates the matching directive class instance and gives the instance control over that portion of the browser DOM.
|
||||
A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself. When Angular finds a directive in an HTML [template](#template), it creates the matching directive class instance and gives the instance control over that portion of the browser DOM.
|
||||
|
||||
There are three categories of directive:
|
||||
* [Components](guide/glossary#component) use `@Component()` (an extension of `@Directive()`) to associate a template with a class.
|
||||
* [Components](#component) use `@Component()` (an extension of `@Directive()`) to associate a template with a class.
|
||||
|
||||
* [Attribute directives](guide/glossary#attribute-directive) modify behavior and appearance of page elements.
|
||||
* [Attribute directives](#attribute-directive) modify behavior and appearance of page elements.
|
||||
|
||||
* [Structural directives](guide/glossary#structural-directive) modify the structure of the DOM.
|
||||
* [Structural directives](#structural-directive) modify the structure of the DOM.
|
||||
|
||||
Angular supplies a number of built-in directives that begin with the `ng` prefix.
|
||||
You can also create new directives to implement your own functionality.
|
||||
|
|
@ -288,7 +320,7 @@ Angular extends TypeScript with domain-specific languages for a number of domain
|
|||
|
||||
A technique for adding a component to the DOM at run time. Requires that you exclude the component from compilation and then connect it to Angular's change-detection and event-handling framework when you add it to the DOM.
|
||||
|
||||
See also [custom element](guide/glossary#custom-element), which provides an easier path with the same result.
|
||||
See also [custom element](#custom-element), which provides an easier path with the same result.
|
||||
|
||||
|
||||
{@a E}
|
||||
|
|
@ -299,7 +331,7 @@ See also [custom element](guide/glossary#custom-element), which provides an easi
|
|||
|
||||
NgModules or components that are loaded on launch are called eager-loaded, to distinguish them from those
|
||||
that are loaded at run time (lazy-loaded).
|
||||
See [lazy loading](guide/glossary#lazy-load).
|
||||
See [lazy loading](#lazy-load).
|
||||
|
||||
|
||||
{@a ecma}
|
||||
|
|
@ -308,7 +340,7 @@ See [lazy loading](guide/glossary#lazy-load).
|
|||
|
||||
The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
|
||||
|
||||
Not all browsers support the latest ECMAScript standard, but you can use a [transpiler](guide/glossary#transpile) (like [TypeScript](guide/glossary#typescript)) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers.
|
||||
Not all browsers support the latest ECMAScript standard, but you can use a [transpiler](#transpile) (like [TypeScript](#typescript)) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers.
|
||||
|
||||
To learn more, see [Browser Support](guide/browser-support).
|
||||
|
||||
|
|
@ -324,16 +356,16 @@ without reference to the native element.
|
|||
The documentation generally refers to *elements* (`ElementRef` instances), as distinct from *DOM elements*
|
||||
(which can be accessed directly if necessary).
|
||||
|
||||
Compare to [custom element](guide/glossary#custom-element).
|
||||
Compare to [custom element](#custom-element).
|
||||
|
||||
{@a entry-point}
|
||||
|
||||
## entry point
|
||||
|
||||
A JavaScript symbol that makes parts of an [npm package](guide/npm-packages) available for import by other code.
|
||||
The Angular [scoped packages](guide/glossary#scoped-package) each have an entry point named `index`.
|
||||
The Angular [scoped packages](#scoped-package) each have an entry point named `index`.
|
||||
|
||||
Within Angular, use [NgModules](guide/glossary#ngmodule) to make public parts available for import by other NgModules.
|
||||
Within Angular, use [NgModules](#ngmodule) to make public parts available for import by other NgModules.
|
||||
|
||||
|
||||
{@a F}
|
||||
|
|
@ -350,7 +382,7 @@ Read more forms in the [Introduction to forms in Angular](guide/forms-overview).
|
|||
|
||||
## form model
|
||||
|
||||
The "source of truth" for the value and validation status of a form input element at a given point in time. When using [reactive forms](guide/glossary#reactive-forms), the form model is created explicitly in the component class. When using [template-driven forms](guide/glossary#template-driven-forms), the form model is implicitly created by directives.
|
||||
The "source of truth" for the value and validation status of a form input element at a given point in time. When using [reactive forms](#reactive-forms), the form model is created explicitly in the component class. When using [template-driven forms](#template-driven-forms), the form model is implicitly created by directives.
|
||||
|
||||
Learn more about reactive and template-driven forms in the [Introduction to forms in Angular](guide/forms-overview).
|
||||
|
||||
|
|
@ -375,22 +407,22 @@ To learn more, see [Form Validation](guide/form-validation).
|
|||
|
||||
## immutability
|
||||
|
||||
The ability to alter the state of a value after its creation. [Reactive forms](guide/glossary#reactive-forms) perform immutable changes in that
|
||||
each change to the data model produces a new data model rather than modifying the existing one. [Template-driven forms](guide/glossary#template-driven-forms) perform mutable changes with `NgModel` and [two-way data binding](guide/glossary#data-binding) to modify the existing data model in place.
|
||||
The ability to alter the state of a value after its creation. [Reactive forms](#reactive-forms) perform immutable changes in that
|
||||
each change to the data model produces a new data model rather than modifying the existing one. [Template-driven forms](#template-driven-forms) perform mutable changes with `NgModel` and [two-way data binding](#data-binding) to modify the existing data model in place.
|
||||
|
||||
{@a injectable}
|
||||
|
||||
## injectable
|
||||
|
||||
An Angular class or other definition that provides a dependency using the [dependency injection](guide/glossary#di) mechanism. An injectable [service](guide/glossary#service) class must be marked by the `@Injectable()` [decorator](guide/glossary#decorator). Other items, such as constant values, can also be injectable.
|
||||
An Angular class or other definition that provides a dependency using the [dependency injection](#di) mechanism. An injectable [service](#service) class must be marked by the `@Injectable()` [decorator](#decorator). Other items, such as constant values, can also be injectable.
|
||||
|
||||
{@a injector}
|
||||
|
||||
## injector
|
||||
|
||||
An object in the Angular [dependency-injection](guide/glossary#dependency-injection) system
|
||||
An object in the Angular [dependency-injection](#dependency-injection) system
|
||||
that can find a named dependency in its cache or create a dependency
|
||||
using a configured [provider](guide/glossary#provider).
|
||||
using a configured [provider](#provider).
|
||||
Injectors are created for NgModules automatically as part of the bootstrap process
|
||||
and are inherited through the component hierarchy.
|
||||
|
||||
|
|
@ -406,10 +438,10 @@ Learn more about the injector hierarchy in [Hierarchical Dependency Injectors](g
|
|||
|
||||
## input
|
||||
|
||||
When defining a [directive](guide/glossary#directive), the `@Input()` decorator on a directive property
|
||||
When defining a [directive](#directive), the `@Input()` decorator on a directive property
|
||||
makes that property available as a *target* of a [property binding](guide/template-syntax#property-binding).
|
||||
Data values flow into an input property from the data source identified
|
||||
in the [template expression](guide/glossary#template-expression) to the right of the equal sign.
|
||||
in the [template expression](#template-expression) to the right of the equal sign.
|
||||
|
||||
To learn more, see [input and output properties](guide/template-syntax#inputs-outputs).
|
||||
|
||||
|
|
@ -417,7 +449,7 @@ To learn more, see [input and output properties](guide/template-syntax#inputs-ou
|
|||
|
||||
## interpolation
|
||||
|
||||
A form of property [data binding](guide/glossary#data-binding) in which a [template expression](guide/glossary#template-expression) between double-curly braces renders as text.
|
||||
A form of property [data binding](#data-binding) in which a [template expression](#template-expression) between double-curly braces renders as text.
|
||||
That text can be concatenated with neighboring text before it is assigned to an element property
|
||||
or displayed between element tags, as in this example.
|
||||
|
||||
|
|
@ -436,7 +468,7 @@ Read more about [interpolation](guide/template-syntax#interpolation) in [Templat
|
|||
|
||||
## JavaScript
|
||||
|
||||
See [ECMAScript](guide/glossary#ecma), [TypeScript](guide/glossary#typescript).
|
||||
See [ECMAScript](#ecma), [TypeScript](#typescript).
|
||||
|
||||
|
||||
{@a jit}
|
||||
|
|
@ -451,7 +483,7 @@ JIT compilation is the default (as opposed to AOT compilation) when you run Angu
|
|||
JIT mode is strongly discouraged for production use
|
||||
because it results in large application payloads that hinder the bootstrap performance.
|
||||
|
||||
Compare to [ahead-of-time (AOT) compilation](guide/glossary#aot).
|
||||
Compare to [ahead-of-time (AOT) compilation](#aot).
|
||||
|
||||
|
||||
{@a K}
|
||||
|
|
@ -464,21 +496,22 @@ Compare to [ahead-of-time (AOT) compilation](guide/glossary#aot).
|
|||
## lazy loading
|
||||
|
||||
A process that speeds up application load time by splitting the application into multiple bundles and loading them on demand.
|
||||
For example, dependencies can be lazy loaded as needed—as opposed to [eager-loaded](guide/glossary#eager-loading) modules that are required by the root module and are thus loaded on launch.
|
||||
For example, dependencies can be lazy loaded as needed—as opposed to [eager-loaded](#eager-loading) modules that are required by the root module and are thus loaded on launch.
|
||||
|
||||
The [router](guide/glossary#router) makes use of lazy loading to load child views only when the parent view is activated.
|
||||
The [router](#router) makes use of lazy loading to load child views only when the parent view is activated.
|
||||
Similarly, you can build custom elements that can be loaded into an Angular app when needed.
|
||||
|
||||
{@a library}
|
||||
|
||||
## library
|
||||
|
||||
In Angular, a [project](guide/glossary#project) that provides functionality that can be included in other Angular apps.
|
||||
In Angular, a [project](#project) that provides functionality that can be included in other Angular apps.
|
||||
A library isn't a complete Angular app and can't run independently.
|
||||
(To add re-usable Angular functionality to non-Angular web apps, you can use Angular [custom elements](#angular-element).)
|
||||
|
||||
* Library developers can use the [Angular CLI](guide/glossary#cli) to `generate` scaffolding for a new library in an existing [workspace](guide/glossary#workspace), and can publish a library as an `npm` package.
|
||||
* Library developers can use the [Angular CLI](#cli) to `generate` scaffolding for a new library in an existing [workspace](#workspace), and can publish a library as an `npm` package.
|
||||
|
||||
* Application developers can use the [Angular CLI](guide/glossary#cli) to `add` a published library for use with an application in the same [workspace](guide/glossary#workspace).
|
||||
* Application developers can use the [Angular CLI](#cli) to `add` a published library for use with an application in the same [workspace](#workspace).
|
||||
|
||||
See also [schematic](#schematic).
|
||||
|
||||
|
|
@ -486,14 +519,14 @@ See also [schematic](#schematic).
|
|||
|
||||
## lifecycle hook
|
||||
|
||||
An interface that allows you to tap into the lifecycle of [directives](guide/glossary#directive) and [components](guide/glossary#component) as they are created, updated, and destroyed.
|
||||
An interface that allows you to tap into the lifecycle of [directives](#directive) and [components](#component) as they are created, updated, and destroyed.
|
||||
|
||||
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 named `ngOnInit`.
|
||||
|
||||
Angular calls these hook methods in the following order:
|
||||
|
||||
* `ngOnChanges`: When an [input](guide/glossary#input)/[output](guide/glossary#output) binding value changes.
|
||||
* `ngOnChanges`: When an [input](#input)/[output](#output) binding value changes.
|
||||
* `ngOnInit`: After the first `ngOnChanges`.
|
||||
* `ngDoCheck`: Developer's custom change detection.
|
||||
* `ngAfterContentInit`: After component content initialized.
|
||||
|
|
@ -517,7 +550,7 @@ In JavaScript (ECMAScript), each file is a module and all objects defined in the
|
|||
|
||||
Angular ships as a collection of JavaScript modules (also called libraries). Each Angular library name begins with the `@angular` prefix. Install Angular libraries with the [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) and import parts of them with JavaScript `import` declarations.
|
||||
|
||||
Compare to [NgModule](guide/glossary#ngmodule).
|
||||
Compare to [NgModule](#ngmodule).
|
||||
|
||||
|
||||
{@a N}
|
||||
|
|
@ -526,12 +559,12 @@ Compare to [NgModule](guide/glossary#ngmodule).
|
|||
|
||||
## NgModule
|
||||
|
||||
A class definition preceded by the `@NgModule()` [decorator](guide/glossary#decorator), which declares and serves as a manifest for a block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
|
||||
A class definition preceded by the `@NgModule()` [decorator](#decorator), which declares and serves as a manifest for a block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
|
||||
|
||||
Like a [JavaScript module](guide/glossary#module), an NgModule can export functionality for use by other NgModules and import public functionality from other NgModules.
|
||||
The metadata for an NgModule class collects components, directives, and pipes that the application uses along with the list of imports and exports. See also [declarable](guide/glossary#declarable).
|
||||
Like a [JavaScript module](#module), an NgModule can export functionality for use by other NgModules and import public functionality from other NgModules.
|
||||
The metadata for an NgModule class collects components, directives, and pipes that the application uses along with the list of imports and exports. See also [declarable](#declarable).
|
||||
|
||||
NgModules are typically named after the file in which the exported thing is defined. For example, the Angular [DatePipe](api/common/DatePipe) class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. You import them from an Angular [scoped package](guide/glossary#scoped-package) such as `@angular/core`.
|
||||
NgModules are typically named after the file in which the exported thing is defined. For example, the Angular [DatePipe](api/common/DatePipe) class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. You import them from an Angular [scoped package](#scoped-package) such as `@angular/core`.
|
||||
|
||||
Every Angular application has a root module. By convention, the class is called `AppModule` and resides in a file named `app.module.ts`.
|
||||
|
||||
|
|
@ -551,7 +584,7 @@ Learn more about how Angular uses [Npm Packages](guide/npm-packages).
|
|||
|
||||
## observable
|
||||
|
||||
A producer of multiple values, which it pushes to [subscribers](guide/glossary#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion.
|
||||
A producer of multiple values, which it pushes to [subscribers](#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion.
|
||||
|
||||
Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller) or on a schedule. A subscriber receives notification of new values as they are produced and notification of either normal completion or error completion.
|
||||
|
||||
|
|
@ -564,16 +597,16 @@ To learn more, see [Observables](guide/observables).
|
|||
|
||||
## observer
|
||||
|
||||
An object passed to the `subscribe()` method for an [observable](guide/glossary#observable). The object defines the callbacks for the [subscriber](guide/glossary#subscriber).
|
||||
An object passed to the `subscribe()` method for an [observable](#observable). The object defines the callbacks for the [subscriber](#subscriber).
|
||||
|
||||
{@a output}
|
||||
|
||||
## output
|
||||
|
||||
When defining a [directive](guide/glossary#directive), the `@Output{}` decorator on a directive property
|
||||
When defining a [directive](#directive), the `@Output{}` decorator on a directive property
|
||||
makes that property available as a *target* of [event binding](guide/template-syntax#event-binding).
|
||||
Events stream *out* of this property to the receiver identified
|
||||
in the [template expression](guide/glossary#template-expression) to the right of the equal sign.
|
||||
in the [template expression](#template-expression) to the right of the equal sign.
|
||||
|
||||
To learn more, see [Input and Output Properties](guide/template-syntax#inputs-outputs).
|
||||
|
||||
|
|
@ -584,7 +617,7 @@ To learn more, see [Input and Output Properties](guide/template-syntax#inputs-ou
|
|||
|
||||
## pipe
|
||||
|
||||
A class which is preceded by the `@Pipe{}` decorator and which defines a function that transforms input values to output values for display in a [view](guide/glossary#view). Angular defines various pipes, and you can define new pipes.
|
||||
A class which is preceded by the `@Pipe{}` decorator and which defines a function that transforms input values to output values for display in a [view](#view). Angular defines various pipes, and you can define new pipes.
|
||||
|
||||
To learn more, see [Pipes](guide/pipes).
|
||||
|
||||
|
|
@ -599,22 +632,26 @@ See [Browser Support](guide/browser-support) for polyfills that support particul
|
|||
|
||||
## project
|
||||
|
||||
In Angular, a folder within a [workspace](guide/glossary#workspace) that contains an Angular app or [library](guide/glossary#library).
|
||||
A workspace can contain multiple projects.
|
||||
All apps in a workspace can use libraries in the same workspace.
|
||||
In the Angular CLI, a standalone application or [library](#library) that can be created or modified by a CLI command.
|
||||
|
||||
A project, as generated by the [`ng new`](cli/new), contains the set of source files, resources, and configuration files that you need to develop and test the application using the CLI. Projects can also be created with the `ng generate application` and `ng generate library` commands.
|
||||
|
||||
For more information, see [Project File Structure](guide/file-structure).
|
||||
|
||||
The [`angular.json`](guide/workspace-config) file configures all projects in a [workspace](#workspace).
|
||||
|
||||
{@a provider}
|
||||
|
||||
## provider
|
||||
|
||||
An object that implements one of the [`Provider`](api/core/Provider) interfaces. A provider object defines how to obtain an injectable dependency associated with a [DI token](guide/glossary#token).
|
||||
An [injector](guide/glossary#injector) uses the provider to create a new instance of a dependency
|
||||
An object that implements one of the [`Provider`](api/core/Provider) interfaces. A provider object defines how to obtain an injectable dependency associated with a [DI token](#token).
|
||||
An [injector](#injector) uses the provider to create a new instance of a dependency
|
||||
for a class that requires it.
|
||||
|
||||
Angular registers its own providers with every injector, for services that Angular defines.
|
||||
You can register your own providers for services that your app needs.
|
||||
|
||||
See also [service](guide/glossary#service), [dependency injection](guide/glossary#di).
|
||||
See also [service](#service), [dependency injection](#di).
|
||||
|
||||
Learn more in [Dependency Injection](guide/dependency-injection).
|
||||
|
||||
|
|
@ -628,7 +665,7 @@ Learn more in [Dependency Injection](guide/dependency-injection).
|
|||
## reactive forms
|
||||
|
||||
A framework for building Angular forms through code in a component.
|
||||
The alternative is a [template-driven form](guide/glossary#template-driven-forms).
|
||||
The alternative is a [template-driven form](#template-driven-forms).
|
||||
|
||||
When using reactive forms:
|
||||
|
||||
|
|
@ -645,11 +682,11 @@ The alternative is a template-driven form. For an introduction and comparison of
|
|||
|
||||
## router
|
||||
|
||||
A tool that configures and implements navigation among states and [views](guide/glossary#view) within an Angular app.
|
||||
A tool that configures and implements navigation among states and [views](#view) within an Angular app.
|
||||
|
||||
The `Router` module is an [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views. A [routing component](guide/glossary#routing-component) is one that imports the `Router` module and whose template contains a `RouterOutlet` element where it can display views produced by the router.
|
||||
The `Router` module is an [NgModule](#ngmodule) that provides the necessary service providers and directives for navigating through application views. A [routing component](#routing-component) is one that imports the `Router` module and whose template contains a `RouterOutlet` element where it can display views produced by the router.
|
||||
|
||||
The router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of [lazy loading](guide/glossary#lazy-load) in your Angular apps.
|
||||
The router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of [lazy loading](#lazy-load) in your Angular apps.
|
||||
|
||||
To learn more, see [Routing and Navigation](guide/router).
|
||||
|
||||
|
|
@ -657,20 +694,21 @@ To learn more, see [Routing and Navigation](guide/router).
|
|||
|
||||
## router outlet
|
||||
|
||||
A [directive](guide/glossary#directive) that acts as a placeholder in a routing component's template. Angular dynamically renders the template based on the current router state.
|
||||
A [directive](#directive) that acts as a placeholder in a routing component's template. Angular dynamically renders the template based on the current router state.
|
||||
|
||||
{@a router-component}
|
||||
|
||||
## routing component
|
||||
|
||||
An Angular [component](guide/glossary#component) with a `RouterOutlet` directive in its template that displays views based on router navigations.
|
||||
An Angular [component](#component) with a `RouterOutlet` directive in its template that displays views based on router navigations.
|
||||
|
||||
For more information, see [Routing and Navigation](guide/router).
|
||||
|
||||
{@a rule}
|
||||
|
||||
In [schematics](#schematic), a function that operates on a [file tree](#file-tree) to create, delete, or modify files in a specific manner, and returns a new `Tree` object.
|
||||
## rule
|
||||
|
||||
In [schematics](#schematic), a function that operates on a [file tree](#file-tree) to create, delete, or modify files in a specific manner.
|
||||
|
||||
{@a S}
|
||||
|
||||
|
|
@ -680,13 +718,15 @@ In [schematics](#schematic), a function that operates on a [file tree](#file-tre
|
|||
|
||||
A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code.
|
||||
A schematic defines [rules](#rule) that operate on a virtual file system called a [tree](#file-tree).
|
||||
The [Angular CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects.
|
||||
|
||||
The [Angular CLI](#cli) uses schematics to generate and modify [Angular projects](#project) and parts of projects.
|
||||
|
||||
* Angular provides a set of schematics for use with the CLI. See the [Angular CLI command reference](cli). The [`ng add`](cli/add) command runs schematics as part of adding a library to your project. The [`ng generate`](cli/generate) command runs schematics to create apps, libraries, and Angular code constructs.
|
||||
|
||||
* [Library](#library) developers can use the [Schematics CLI](#schematics-cli) to create schematics that enable the Angular CLI to add and update their published libraries, and to generate artifacts the library defines.
|
||||
* [Library](#library) developers can create schematics that enable the Angular CLI to add and update their published libraries, and to generate artifacts the library defines.
|
||||
Add these schematics to the npm package that you use to publish and share your library.
|
||||
|
||||
For more information, see [devkit documentation](https://www.npmjs.com/package/@angular-devkit/schematics).
|
||||
For more information, see [Schematics](guide/schematics) and [Integrating Libraries with the CLI](guide/creating-libraries#integrating-with-the-cli).
|
||||
|
||||
{@a schematics-cli}
|
||||
|
||||
|
|
@ -699,7 +739,7 @@ Using Node 6.9 or above, install the Schematics CLI globally:
|
|||
npm install -g @angular-devkit/schematics-cli
|
||||
</code-example>
|
||||
|
||||
This installs the `schematics` executable, which you can use to create a new project, add a new schematic to an existing project, or extend an existing schematic.
|
||||
This installs the `schematics` executable, which you can use to create a new schematics [collection](#collection) with an initial named schematic. The collection folder is a workspace for schematics. You can also use the `schematics` command to add a new schematic to an existing collection, or extend an existing schematic.
|
||||
|
||||
{@a scoped-package}
|
||||
|
||||
|
|
@ -724,19 +764,19 @@ It can also pre-generate pages as HTML files that you serve later.
|
|||
This technique can improve performance on mobile and low-powered devices and improve the user experience by showing a static first page quickly while the client-side app is loading.
|
||||
The static version can also make your app more visible to web crawlers.
|
||||
|
||||
You can easily prepare an app for server-side rendering by using the [CLI](guide/glossary#cli) to run the [Angular Universal](#universal) tool, using the `@nguniversal/express-engine` [schematic](#schematic).
|
||||
You can easily prepare an app for server-side rendering by using the [CLI](#cli) to run the [Angular Universal](#universal) tool, using the `@nguniversal/express-engine` [schematic](#schematic).
|
||||
|
||||
|
||||
{@a service}
|
||||
|
||||
## service
|
||||
|
||||
In Angular, a class with the [@Injectable()](guide/glossary#injectable) decorator that encapsulates non-UI logic and code that can be reused across an application.
|
||||
In Angular, a class with the [@Injectable()](#injectable) decorator that encapsulates non-UI logic and code that can be reused across an application.
|
||||
Angular distinguishes components from services to increase modularity and reusability.
|
||||
|
||||
The `@Injectable()` metadata allows the service class to be used with the [dependency injection](guide/glossary#di) mechanism.
|
||||
The injectable class is instantiated by a [provider](guide/glossary#provider).
|
||||
[Injectors](guide/glossary#injector) maintain lists of providers and use them to provide service instances when they are required by components or other services.
|
||||
The `@Injectable()` metadata allows the service class to be used with the [dependency injection](#di) mechanism.
|
||||
The injectable class is instantiated by a [provider](#provider).
|
||||
[Injectors](#injector) maintain lists of providers and use them to provide service instances when they are required by components or other services.
|
||||
|
||||
To learn more, see [Introduction to Services and Dependency Injection](guide/architecture-services).
|
||||
|
||||
|
|
@ -745,7 +785,7 @@ To learn more, see [Introduction to Services and Dependency Injection](guide/arc
|
|||
|
||||
## structural directives
|
||||
|
||||
A category of [directive](guide/glossary#directive) that is responsible for shaping HTML layout by modifying the DOM&mdashthat is, adding, removing, or manipulating elements and their children.
|
||||
A category of [directive](#directive) that is responsible for shaping HTML layout by modifying the DOM&mdashthat is, adding, removing, or manipulating elements and their children.
|
||||
|
||||
To learn more, see [Structural Directives](guide/structural-directives).
|
||||
|
||||
|
|
@ -753,42 +793,57 @@ To learn more, see [Structural Directives](guide/structural-directives).
|
|||
|
||||
## subscriber
|
||||
|
||||
A function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the `subscribe()` method of an [observable](guide/glossary#observable).
|
||||
A function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the `subscribe()` method of an [observable](#observable).
|
||||
|
||||
The act of subscribing to an observable triggers its execution, associates callbacks with it, and creates a `Subscription` object that lets you unsubscribe.
|
||||
|
||||
The `subscribe()` method takes a JavaScript object (called an [observer](guide/glossary#observer)) with up to three callbacks, one for each type of notification that an observable can deliver:
|
||||
The `subscribe()` method takes a JavaScript object (called an [observer](#observer)) with up to three callbacks, one for each type of notification that an observable can deliver:
|
||||
|
||||
* The `next` notification sends a value such as a number, a string, or an object.
|
||||
* The `error` notification sends a JavaScript Error or exception.
|
||||
* The `complete` notification doesn't send a value, but the handler is called when the call completes. Scheduled values can continue to be returned after the call completes.
|
||||
|
||||
{@a T}
|
||||
|
||||
{@a target}
|
||||
|
||||
## target
|
||||
|
||||
A buildable or runnable subset of a [project](#project), configured as an object in the [workspace configuration file](guide/workspace-config#project-tool-configuration-options), and executed by an [Architect](#architect) [builder](#builder).
|
||||
|
||||
In the `angular.json` file, each project has an "architect" section that contains targets which configure builders. Some of these targets correspond to [CLI commands](#cli), such as `build`, `serve`, `test`, and `lint`.
|
||||
|
||||
For example, the Architect builder invoked by the `ng build` command to compile a project uses a particular build tool, and has a default configuration whose values can be overridden on the command line. The `build` target also defines an alternate configuration for a "production" build, that can be invoked with the `--prod` flag on the `build` command.
|
||||
|
||||
The Architect tool provides a set of builders. The [`ng new` command](cli/new) provides a set of targets for the initial application project. The [`ng generate application`](cli/generate#application) and [`ng generate library`](cli/generate#library) commands provide a set of targets for each new [project](#project). These targets, their options and configurations, can be customized to meet the needs of your project. For example, you may want to add a "staging" or "testing" configuration to a project's "build" target.
|
||||
|
||||
You can also define a custom builder, and add a target to the project configuration that uses your custom builder. You can then run the target using the [`ng run`](cli/run) CLI command.
|
||||
|
||||
{@a template}
|
||||
|
||||
## template
|
||||
|
||||
Code associated with a component that defines how to render the component's [view](guide/glossary#view).
|
||||
Code associated with a component that defines how to render the component's [view](#view).
|
||||
|
||||
A template combines straight HTML with Angular [data-binding](guide/glossary#data-binding) syntax, [directives](guide/glossary#directive),
|
||||
and [template expressions](guide/glossary#template-expression) (logical constructs).
|
||||
A template combines straight HTML with Angular [data-binding](#data-binding) syntax, [directives](#directive),
|
||||
and [template expressions](#template-expression) (logical constructs).
|
||||
The Angular elements insert or calculate values that modify the HTML elements before the page is displayed.
|
||||
|
||||
A template is associated with a [component](guide/glossary#component) class through the `@Component()` [decorator](guide/glossary#decorator). The HTML can be provided inline, as the value of the `template` property, or in a separate HTML file linked through the `templateUrl` property.
|
||||
A template is associated with a [component](#component) class through the `@Component()` [decorator](#decorator). The HTML can be provided inline, as the value of the `template` property, or in a separate HTML file linked through the `templateUrl` property.
|
||||
|
||||
Additional templates, represented by `TemplateRef` objects, can define alternative or *embedded* views, which can be referenced from multiple components.
|
||||
|
||||
{@a template-drive-forms}
|
||||
{@a template-driven-forms}
|
||||
|
||||
## template-driven forms
|
||||
|
||||
A format for building Angular forms using HTML forms and input elements in the view.
|
||||
The alternative format uses the [reactive forms](guide/glossary#reactive-forms) framework.
|
||||
The alternative format uses the [reactive forms](#reactive-forms) framework.
|
||||
|
||||
When using template-driven forms:
|
||||
|
||||
* The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
|
||||
* [Two-way binding](guide/glossary#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.
|
||||
* The associated Angular directives are prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
|
||||
|
||||
|
|
@ -798,7 +853,7 @@ The alternative is a reactive form. For an introduction and comparison of both f
|
|||
|
||||
## template expression
|
||||
|
||||
A TypeScript-like syntax that Angular evaluates within a [data binding](guide/glossary#data-binding).
|
||||
A TypeScript-like syntax that Angular evaluates within a [data binding](#data-binding).
|
||||
|
||||
Read about how to write template expressions in [Template expressions](guide/template-syntax#template-expressions).
|
||||
|
||||
|
|
@ -806,7 +861,7 @@ Read about how to write template expressions in [Template expressions](guide/te
|
|||
|
||||
## token
|
||||
|
||||
An opaque identifier used for efficient table lookup. In Angular, a [DI token](guide/glossary#di-token) is used to find [providers](guide/glossary#provider) of dependencies in the [dependency injection](guide/glossary#di) system.
|
||||
An opaque identifier used for efficient table lookup. In Angular, a [DI token](#di-token) is used to find [providers](#provider) of dependencies in the [dependency injection](#di) system.
|
||||
|
||||
{@a transpile}
|
||||
|
||||
|
|
@ -853,18 +908,18 @@ To learn more, see [Angular Universal: server-side rendering](guide/universal).
|
|||
## view
|
||||
|
||||
The smallest grouping of display elements that can be created and destroyed together.
|
||||
Angular renders a view under the control of one or more [directives](guide/glossary#directive),
|
||||
especially [component](guide/glossary#component) directives and their companion [templates](guide/glossary#template).
|
||||
Angular renders a view under the control of one or more [directives](#directive),
|
||||
especially [component](#component) directives and their companion [templates](#template).
|
||||
|
||||
A view is specifically represented by a `ViewRef` instance associated with the component.
|
||||
A view that belongs to a component is called a *host view*.
|
||||
Views are typically collected into [view hierarchies](guide/glossary#view-tree).
|
||||
Views are typically collected into [view hierarchies](#view-tree).
|
||||
|
||||
Properties of elements in a view can change dynamically, in response to user actions;
|
||||
the structure (number and order) of elements in a view can't.
|
||||
You can change the structure of elements by inserting, moving, or removing nested views within their view containers.
|
||||
|
||||
View hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a [router](guide/glossary#router).
|
||||
View hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a [router](#router).
|
||||
|
||||
{@a view-tree}
|
||||
|
||||
|
|
@ -879,16 +934,35 @@ The view hierarchy doesn't imply a component hierarchy. Views that are embedded
|
|||
|
||||
## web component
|
||||
|
||||
See [custom element](guide/glossary#custom-element).
|
||||
See [custom element](#custom-element).
|
||||
|
||||
{@a workspace}
|
||||
|
||||
## workspace
|
||||
|
||||
In Angular, a folder that contains [projects](guide/glossary#project) (that is, apps and libraries).
|
||||
The [CLI](guide/glossary#cli) `ng new` command creates a workspace to contain projects.
|
||||
A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI] (#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)).
|
||||
|
||||
The [CLI](#cli) [`ng new` command](cli/new) creates a file system directory (the "workspace root").
|
||||
In the workspace root, it also creates the workspace [configuration file](#configuration) (`angular.json`) and, by default, an initial application project with the same name.
|
||||
|
||||
Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder.
|
||||
|
||||
For more information, see [Workspace Configuration](guide/workspace-config).
|
||||
|
||||
{@a cli-config}
|
||||
|
||||
{@a config}
|
||||
|
||||
## workspace configuration
|
||||
|
||||
A file named `angular.json` at the root level of an Angular [workspace](#workspace) provides workspace-wide and project-specific configuration defaults for build and development tools that are provided by or integrated with the [Angular CLI](#cli).
|
||||
|
||||
For more information, see [Workspace Configuration](guide/workspace-config).
|
||||
|
||||
Additional project-specific configuration files are used by tools, such as `package.json` for the [npm package manager](#npm-package), `tsconfig.json` for [TypeScript transpilation](#transpile), and `tslint.json` for [TSLint](https://palantir.github.io/tslint/).
|
||||
|
||||
For more information, see [Workspace and Project File Structure](guide/file-structure).
|
||||
|
||||
{@a X}
|
||||
|
||||
|
||||
|
|
@ -902,7 +976,7 @@ Commands that create or operate on apps and libraries (such as `add` and `genera
|
|||
|
||||
An execution context for a set of asynchronous tasks. Useful for debugging, profiling, and testing apps that include asynchronous operations such as event processing, promises, and calls to remote servers.
|
||||
|
||||
An Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving [data bindings](guide/glossary#data-binding).
|
||||
An Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving [data bindings](#data-binding).
|
||||
|
||||
A zone client can take action before and after an async operation completes.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue