glossary: replace cached by latest before edits

Author: chalin

public/docs/ts/_cache/glossary.jade

@@ -20,7 +20,31 @@ include _util-fns
 // #docregion a1
 <a id="A"></a>
 // #enddocregion a1
+a#aot
 .l-main-section
+:marked
+  ## Ahead of Time (AOT) Compilation
+.l-sub-section
+  :marked
+    Angular applications can be compiled by developers at build-time. 
+    By compiling your application using the compiler-cli, `ngc`, you can boostrap directly 
+    to a Module Factory, meaning you don't need to include the Angular compiler in your javascript bundle. 
+    Ahead of Time compiled applications also benefit from decreased load time and increased performance.
+
+.l-main-section
+<a id="angular-module"></a>
+:marked
+  ## Angular Module
+.l-sub-section
+  :marked
+    Helps us organize an application into cohesive blocks of functionality.
+    An Angular module identifies the components, directives, and pipes that are used by the application
+    along with the list of external Angular modules that the application needs, such as `FormsModule`.
+
+    Every Angular application has an application root module class. By convention the class is
+    called `AppModule` and resides in a file named `app.component.ts`.
+
+    See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples.
 :marked
   ## Annotation
 .l-sub-section
@@ -50,10 +74,10 @@ include _util-fns
   ## Barrel
 .l-sub-section
   :marked
-    A barrel is a way to *rollup exports* from several modules into a single convenience module.
-    The barrel itself is a module file that re-exports *selected* exports of other modules.
+    A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module.
+    The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
 
-    Imagine three modules in a `heroes` folder:
+    Imagine three ES2015 modules in a `heroes` folder:
   code-example.
     // heroes/hero.component.ts
     export class HeroComponent {}
@@ -81,12 +105,17 @@ include _util-fns
     import { Hero, HeroService } from '../heroes'; // index is implied
   :marked
     The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
+
 // #enddocregion b-c
 :marked
   That's why we can write this:
 +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
 // #docregion b-c
 
+.alert.is-important
+  :marked
+    Note that you can often achieve this same goal using [Angular modules](#angular-module) instead.
+
 :marked
   ## Binding
 .l-sub-section
@@ -102,10 +131,9 @@ include _util-fns
   ## Bootstrap
 .l-sub-section
   :marked
-    We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
-    The `bootstrap` method identifies an application's top level "root" [Component](#component)
-    and optionally registers service [providers](#provider) with the
-    [dependency injection system](#dependency-injection).
+    We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
+    The bootstraping 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 [QuickStart](/docs/ts/latest/quickstart.html).
 
     One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
 
@@ -271,9 +299,7 @@ include _util-fns
     Registering providers is a critical preparatory step.
 
     Angular registers some of its own providers with every injector.
-    We can register our own providers. Quite often the best time to register a `Provider`
-    is when we [bootstrap](#bootstrap) the application.
-    There are other opportunities to register as well.
+    We can register our own providers.
 
     Learn more in the [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html) chapter.
 :marked
@@ -322,23 +348,17 @@ include _util-fns
     The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
 
     The latest approved version of JavaScript is
-    [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
-    (AKA "ES2015" or "ES6") and many Angular 2 developers will write their applications
+    [ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
+    (AKA "ES2016" or "ES7") and many Angular 2 developers will write their applications
     either in this version of the language or a dialect that strives to be
     compatible with it such as [TypeScript](#typesScript).
 
-    Most modern browsers today only support the prior "ECMAScript 5" (AKA ES5) standard.
-    Applications written in ES2015 or one of its dialects must be "[transpiled](#transpile)"
+    Most modern browsers today only support the much older "ECMAScript 5" (AKA ES5) standard.
+    Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
     to ES5 JavaScript.
 
     Angular 2 developers may choose to write in ES5 directly.
-:marked
-  ## ECMAScript 2015
-.l-sub-section
-  :marked
-    The latest released version of JavaScript,
-    [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
-    (AKA "ES2015" or "ES6")
+
 :marked
   ## ES2015
 .l-sub-section
@@ -402,7 +422,16 @@ include _util-fns
 
 <a id="J"></a>
 
+a#jit
 .l-main-section
+:marked
+  ## Just in Time (JIT) Compilation
+.l-sub-section
+  :marked
+    With Angular _Just in Time_  bootstrapping you compile your components and modules in the browser
+    and launch the application dynamically. This is a good choice during development.
+    Consider the [Ahead of Time](#aot) mode for production apps.
+
 <a id="K"></a>
 :marked
   ## kebab-case
@@ -450,6 +479,14 @@ include _util-fns
 :marked
   ## Module
 .l-sub-section
+
+  .alert.is-important
+    :marked
+     In Angular, there are two types of modules:
+     - [Angular modules](#angular-module). 
+     See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples.
+     - ES2015 modules as described in this section.
+
   :marked
     Angular apps are modular.
 
@@ -487,6 +524,17 @@ include _util-fns
 <a id="N"></a>
 <a id="O"></a>
 .l-main-section
+:marked
+  ## Observable
+.l-sub-section
+  :marked
+    We can think of an observable as an array whose items arrive asynchronously over time. 
+    Observables help us manage asynchronous data, such as data coming from a backend service.
+    Observables 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 ES 2016, the next version of JavaScript.
+
 :marked
   ## Output
 .l-sub-section
@@ -505,7 +553,7 @@ include _util-fns
 .l-sub-section
   :marked
     The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter. 
-    Class names are typically spelled in PascalCase. Examples include: `Person` and `Customer`.
+    Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
 
     This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase).
     In this documentation, "PascalCase" means *upper camel case* and  "camelCase" means *lower camel case*.
@@ -516,7 +564,7 @@ include _util-fns
   :marked
     An Angular pipe is a function that transforms input values to output values for
     display in a [view](#view). We use the `#{atSym}Pipe` !{decorator}
-    to associate the pipe function with a name. We then can use that
+    to associate the pipe function with a name. We can then use that
     name in our HTML to declaratively transform values on screen.
 
     Here's an example that uses the built-in `currency` pipe to display
@@ -543,6 +591,23 @@ include _util-fns
 .l-main-section
 <a id="Q"></a>
 <a id="R"></a>
+<a id="reactive-forms"></a>
+:marked
+  ## Reactive Forms
+.l-sub-section
+  :marked
+    A technique for building Angular forms through code in a component.
+    The alternate 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`.
+
+    Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation
+    of form controls.
+
 :marked
   ## Router
 .l-sub-section
@@ -555,18 +620,32 @@ include _util-fns
     The Angular [Component Router](/docs/ts/latest/guide/router.html) is a richly featured mechanism for configuring
     and managing the entire view navigation process including the creation and destruction
     of views.
+
+    In most cases, components becomes attached to a [router](#router) by means
+    of a `RouterConfig` that defines routes to views.
+
+    A [routing component's](#routing-component) template has a `RouterOutlet` element where it can display views produced by the router.
+
+    Other views in the application likely have anchor tags or buttons with `RouterLink` directives that users can click to navigate.
+
+    See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
+
 :marked
-  ## Routing Component
+  ## RouterModule
 .l-sub-section
   :marked
-    A [Component](#component) with an attached router.
+    A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
 
-    In most cases, the component became attached to a [router](#router) by means
-    of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component.
+    See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
 
-    The component's template has a `RouterOutlet` element where it can display views produced by the router.
+<a id="routing-component"></a>
+:marked
+  ## Routing Component
+.l-sub-section
+  :marked
+    An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations.
 
-    It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
+    See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
 
 <a id="S"></a>
 .l-main-section
@@ -587,6 +666,23 @@ include _util-fns
   +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
 // #docregion n-s-2
 
+:marked
+  ## Service
+.l-sub-section
+  :marked
+    Components are great and all … but what do we do with data or logic that are not associated 
+    with a specific view or that we want to share across components? We build services!
+
+    Applications often require services such as a hero data service or a logging service.
+    Our components depend on these services to do the heavy lifting.
+
+    A service is a class with a focused purpose.
+    We often create a service to implement features that are
+    independent from any specific view, 
+    provide share data or logic across components, or encapsulate external interactions.
+
+    See the [Services](/docs/ts/latest/tutorial/toh-pt4.html) chapter of the tutorial to learn more.
+
 :marked
   ## Structural Directive
 .l-sub-section
@@ -597,6 +693,8 @@ include _util-fns
 
     The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
     good examples in this category.
+
+    See the [Structural Directives](/docs/ts/latest/guide/structural-directives.html) chapter to learn more.
 // #enddocregion n-s-2
 
 // #docregion t1
@@ -612,11 +710,31 @@ include _util-fns
 
     We write templates in a special [Template Syntax](/docs/ts/latest/guide/template-syntax.html).
 
+<a id="template-driven-forms"></a>
+: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).
+
+    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 in synchronization with the user's entry into the input elements.
+    - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and
+    two-way binding set up.
+    - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
+
+    Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios.
+
+    Learn how to build template-driven forms
+    in the [Forms](/docs/ts/latest/guide/forms.html) chapter.
+
 :marked
   ## Template Expression
 .l-sub-section
   :marked
-    An expression in a JavaScript-like syntax that Angular evaluates within
+    An expression is a JavaScript-like syntax that Angular evaluates within
     a [data binding](#data-binding).  Learn how to write template expressions
     in the [Template Syntax](/docs/ts/latest/guide/template-syntax.html#template-expressions) chapter.