diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 0a80f44469..834983f840 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -19,18 +19,18 @@ unexpected definitions. ## ahead-of-time (AOT) compilation -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. +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). 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. -{@a angular-element} +{@a angular-element} ## Angular element -An Angular [component](guide/glossary#component) packaged as a [custom element](guide/glossary#custom-element). +An Angular [component](guide/glossary#component) packaged as a [custom element](guide/glossary#custom-element). Learn more in [Angular Elements Overview](guide/elements). @@ -62,8 +62,8 @@ 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), +Generally, the practice of setting a variable or property to a data value. +Within Angular, typically refers to [data binding](guide/glossary#data-binding), which coordinates DOM object properties with data object properties. Sometimes refers to a [dependency-injection](guide/glossary#dependency-injection) binding @@ -75,7 +75,7 @@ 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](guide/glossary#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. @@ -90,7 +90,7 @@ Learn more in [Bootstrapping](guide/bootstrapping). ## case types -Angular uses capitalization conventions to distinguish the names of various types, as described in the [naming guidelines section](guide/styleguide#02-01) of the Style Guide. Here's a summary of the case types: +Angular uses capitalization conventions to distinguish the names of various types, as described in the [naming guidelines section](guide/styleguide#02-01) of the Style Guide. Here's a summary of the case types: * camelCase : Symbols, properties, methods, pipe names, non-component directive selectors, constants. Standard or lower camel case uses lowercase on the first letter of the item. For example, "selectedHero". @@ -124,7 +124,13 @@ 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](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 collection} + +## collection + +In Angular, a set of related [schematics](#schematic) collected in an [npm package](#npm-package). {@a cli} @@ -135,13 +141,15 @@ The [Angular CLI](cli) is a command-line tool for managing the Angular developme * 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). +See also [Schematics CLI](#schematics-cli). + {@a component} ## 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). -The `@Component()` decorator extends the `@Directive()` decorator with template-oriented features. +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). @@ -151,7 +159,7 @@ Read more about components, templates, and views in [Architecture Overview](guid ## custom element -A web platform feature, currently supported by most browsers and available in other browsers through polyfills (see [Browser support](guide/browser-support)). +A web platform feature, currently supported by most browsers and available in other browsers through polyfills (see [Browser support](guide/browser-support)). The custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. A custom element (also called a *web component*) is recognized by a browser when it's added to the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry). @@ -189,7 +197,7 @@ 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). +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). Don't declare the following: @@ -204,16 +212,15 @@ Don't declare the following: {@a decoration} - ## decorator | decoration -A function that modifies a class or property definition. Decorators (also called *annotations*) are an experimental (stage 2) [JavaScript language feature](https://github.com/wycats/javascript-decorators). +A function that modifies a class or property definition. Decorators (also called *annotations*) are an experimental (stage 2) [JavaScript language feature](https://github.com/wycats/javascript-decorators). 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. +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](guide/glossary#class-decorator), [class field decorator](guide/glossary#class-field-decorator). {@a di} @@ -251,15 +258,15 @@ There are three categories of directive: * [Structural directives](guide/glossary#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. +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. You associate a *selector* (an HTML tag such as ``) with a custom directive, thereby extending the [template syntax](guide/template-syntax) that you can use in your apps. {@a dom} ## domain-specific language (DSL) -A special-purpose library or API; see [Domain-specific language](https://en.wikipedia.org/wiki/Domain-specific_language). +A special-purpose library or API; see [Domain-specific language](https://en.wikipedia.org/wiki/Domain-specific_language). Angular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in NgModules such as [animations](guide/animations), [forms](guide/forms), and [routing and navigation](guide/router). {@a dynamic-components} @@ -270,6 +277,7 @@ A technique for adding a component to the DOM at run time. Requires that you exc See also [custom element](guide/glossary#custom-element), which provides an easier path with the same result. + {@a E} {@a eager-loading} @@ -287,7 +295,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](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. To learn more, see [Browser Support](guide/browser-support). @@ -296,8 +304,8 @@ To learn more, see [Browser Support](guide/browser-support). ## element -Angular defines an `ElementRef` class to wrap render-specific native UI elements. -In most cases, this allows you to use Angular templates and data binding to access DOM elements +Angular defines an `ElementRef` class to wrap render-specific native UI elements. +In most cases, this allows you to use Angular templates and data binding to access DOM elements without reference to the native element. The documentation generally refers to *elements* (`ElementRef` instances), as distinct from *DOM elements* @@ -309,7 +317,7 @@ Compare to [custom element](guide/glossary#custom-element). ## entry point -A JavaScript symbol that makes parts of an [npm package](guide/npm-packages) available for import by other code. +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`. Within Angular, use [NgModules](guide/glossary#ngmodule) to make public parts available for import by other NgModules. @@ -369,7 +377,7 @@ An Angular class or other definition that provides a dependency using the [depen An object in the Angular [dependency-injection](guide/glossary#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](guide/glossary#provider). Injectors are created for NgModules automatically as part of the bootstrap process and are inherited through the component hierarchy. @@ -385,7 +393,7 @@ 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](guide/glossary#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. @@ -396,7 +404,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](guide/glossary#data-binding) in which a [template expression](guide/glossary#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. @@ -423,11 +431,11 @@ See [ECMAScript](guide/glossary#ecma), [TypeScript](guide/glossary#typescript). ## just-in-time (JIT) compilation -The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into +The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code at run time, as part of bootstrapping. -JIT compilation is the default (as opposed to AOT compilation) when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development. -JIT mode is strongly discouraged for production use +JIT compilation is the default (as opposed to AOT compilation) when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development. +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). @@ -442,22 +450,24 @@ 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. +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. -The [router](guide/glossary#router) makes use of lazy loading to load child views only when the parent view is activated. +The [router](guide/glossary#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. -A library isn't a complete Angular app and can't run independently. +In Angular, a [project](guide/glossary#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. -* Library developers can use the [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](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. -* App developers can use the [CLI](guide/glossary#cli) to `add` a published library for use with an app in the same [workspace](guide/glossary#workspace). +* 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). + +See also [schematic](#schematic). {@a lifecycle-hook} @@ -488,7 +498,7 @@ To learn more, see [Lifecycle Hooks](guide/lifecycle-hooks). ## module -In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, `NgModule`. +In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, `NgModule`. In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules. @@ -516,9 +526,9 @@ To learn more, see [NgModules](guide/ngmodules). {@a npm-package} -## npm package +## npm package -The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is used to distribute and load Angular modules and libraries. +The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is used to distribute and load Angular modules and libraries. Learn more about how Angular uses [Npm Packages](guide/npm-packages). @@ -528,11 +538,11 @@ 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](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. -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. +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. -Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/). +Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/). To learn more, see [Observables](guide/observables). @@ -547,8 +557,8 @@ An object passed to the `subscribe()` method for an [observable](guide/glossary# ## output -When defining a [directive](guide/glossary#directive), the `@Output{}` decorator on a directive property -makes that property available as a *target* of [event binding](guide/template-syntax#event-binding). +When defining a [directive](guide/glossary#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. @@ -562,22 +572,22 @@ 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. - + To learn more, see [Pipes](guide/pipes). {@a polyfill} ## polyfill -An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. -See [Browser Support](guide/browser-support) for polyfills that support particular functionality for particular platforms. +An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. +See [Browser Support](guide/browser-support) for polyfills that support particular functionality for particular platforms. {@a project} ## 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. +A workspace can contain multiple projects. All apps in a workspace can use libraries in the same workspace. {@a provider} @@ -588,7 +598,7 @@ An object that implements one of the [`Provider`](api/core/Provider) interfaces. An [injector](guide/glossary#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. +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). @@ -625,7 +635,7 @@ The alternative is a template-driven form. For an introduction and comparison of A tool that configures and implements navigation among states and [views](guide/glossary#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 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. To learn more, see [Routing and Navigation](guide/router). @@ -644,6 +654,10 @@ An Angular [component](guide/glossary#component) with a `RouterOutlet` directive 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. + {@a S} @@ -651,22 +665,37 @@ For more information, see [Routing and Navigation](guide/router). ## schematic -A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. -The Angular [CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects. +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. -* 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. +* 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 developers can create schematics that enable the CLI to generate their published libraries. -For more information, see [devkit documentation](https://www.npmjs.com/package/@angular-devkit/schematics). +* [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. + + For more information, see [devkit documentation](https://www.npmjs.com/package/@angular-devkit/schematics). + +{@a schematics-cli} + +## Schematics CLI + +Schematics come with their own command-line tool. +Using Node 6.9 or above, install the Schematics CLI globally: + + +npm install -g @angular-devkit/schematics-cli + + +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. {@a scoped-package} ## scoped package -A way to group related [npm packages](guide/npm-packages). +A way to group related [npm packages](guide/npm-packages). NgModules are delivered within scoped packages whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/forms`, and `@angular/router`. -Import a scoped package in the same way that you import a normal package. +Import a scoped package in the same way that you import a normal package. @@ -676,11 +705,11 @@ Import a scoped package in the same way that you import a normal package. ## 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()](guide/glossary#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). +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. To learn more, see [Introduction to Services and Dependency Injection](guide/architecture-services). @@ -713,13 +742,13 @@ The `subscribe()` method takes a JavaScript object (called an [observer](guide/g ## 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](guide/glossary#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](guide/glossary#data-binding) syntax, [directives](guide/glossary#directive), +and [template expressions](guide/glossary#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](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. Additional templates, represented by `TemplateRef` objects, can define alternative or *embedded* views, which can be referenced from multiple components. @@ -759,17 +788,23 @@ An opaque identifier used for efficient table lookup. In Angular, a [DI token](g The translation process that transforms one version of JavaScript to another version; for example, down-leveling ES2015 to the older ES5 version. +{@a file-tree} + +## tree + +In [schematics](#schematic), a virtual file system represented by the `Tree` class. +Schematic [rules](#rule) take a tree object as input, operate on them, and return a new tree object. {@a typescript} ## TypeScript -A programming language based on JavaScript that is notable for its optional typing system. +A programming language based on JavaScript that is notable for its optional typing system. TypeScript provides compile-time type checking and strong tooling support (such as -code completion, refactoring, inline documentation, and intelligent search). +code completion, refactoring, inline documentation, and intelligent search). Many code editors and IDEs support TypeScript either natively or with plug-ins. -TypeScript is the preferred language for Angular development. +TypeScript is the preferred language for Angular development. Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/). @@ -781,16 +816,16 @@ Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org ## view -The smallest grouping of display elements that can be created and destroyed together. +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). +especially [component](guide/glossary#component) directives and their companion [templates](guide/glossary#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). +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). -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. +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). @@ -799,7 +834,7 @@ View hierarchies can be loaded and unloaded dynamically as the user navigates th ## view hierarchy -A tree of related views that can be acted on as a unit. The root view is a component's *host view*. A host view can be the root of a tree of *embedded views*, collected in a *view container* (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection. +A tree of related views that can be acted on as a unit. The root view is a component's *host view*. A host view can be the root of a tree of *embedded views*, collected in a *view container* (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection. The view hierarchy doesn't imply a component hierarchy. Views that are embedded in the context of a particular hierarchy can be host views of other components. Those components can be in the same NgModule as the hosting component, or belong to other NgModules. @@ -815,8 +850,8 @@ See [custom element](guide/glossary#custom-element). ## 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. -Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder. +The [CLI](guide/glossary#cli) `ng new` command creates a workspace to contain projects. +Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder. {@a X} @@ -833,7 +868,7 @@ An execution context for a set of asynchronous tasks. Useful for debugging, prof 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). -A zone client can take action before and after an async operation completes. +A zone client can take action before and after an async operation completes. Learn more about zones in this [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).