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