diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 792e332085..880eb0cb18 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -17,15 +17,15 @@ by mapping AngularJS syntax to the equivalent Angular syntax. ## Contents -* [Template basics](#template-basics)—binding and local variables. +* [Template basics](guide/ajs-quick-reference#template-basics)—binding and local variables. -* [Template directives](#template-directives)—built-in directives `ngIf` and `ngClass`. +* [Template directives](guide/ajs-quick-reference#template-directives)—built-in directives `ngIf` and `ngClass`. -* [Filters/pipes](#filters-pipes)—built-in *filters*, known as *pipes* in Angular. +* [Filters/pipes](guide/ajs-quick-reference#filters-pipes)—built-in *filters*, known as *pipes* in Angular. -* [Modules/controllers/components](#controllers-components)—*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular. +* [Modules/controllers/components](guide/ajs-quick-reference#controllers-components)—*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular. -* [Style sheets](#style-sheets)—more options for CSS than in AngularJS. +* [Style sheets](guide/ajs-quick-reference#style-sheets)—more options for CSS than in AngularJS. ## Template basics Templates are the user-facing part of an Angular application and are written in HTML. @@ -86,8 +86,8 @@ The following table lists some of the key AngularJS template features with their The context of the binding is implied and is always the associated component, so it needs no reference variable. - For more information, see the [Interpolation](../guide/template-syntax.html#interpolation) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information, see the [Interpolation](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -117,7 +117,7 @@ The following table lists some of the key AngularJS template features with their Many (but not all) of the built-in filters from AngularJS are built-in pipes in Angular. - For more information, see [Filters/pipes](#filters-pipes) below. + For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below. @@ -145,8 +145,8 @@ The following table lists some of the key AngularJS template features with their Angular has true template input variables that are explicitly defined using the `let` keyword. - For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#microsyntax) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information, see the [ngFor micro-syntax](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -155,7 +155,7 @@ The following table lists some of the key AngularJS template features with their -[Back to top](#top) +[Back to top](guide/ajs-quick-reference#top) ## Template directives AngularJS provides more than seventy built-in directives for templates. @@ -219,7 +219,7 @@ The following are some of the key AngularJS built-in directives and their equiva in `main.ts` and the application's root component (`AppComponent`) in `app.module.ts`. - For more information see the [Setup](../guide/setup.html) page. + For more information see the [Setup](guide/setup) page. @@ -262,8 +262,8 @@ The following are some of the key AngularJS built-in directives and their equiva Angular also has **class binding**, which is a good way to add or remove a single class, as shown in the third example. - For more information see the [Attribute, class, and style bindings](../guide/template-syntax.html#other-bindings) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information see the [Attribute, class, and style bindings](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -309,8 +309,8 @@ The following are some of the key AngularJS built-in directives and their equiva For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events. - For more information, see the [Event binding](../guide/template-syntax.html#event-binding) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information, see the [Event binding](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -340,7 +340,7 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator. - For more information, see [Architecture Overview](../guide/architecture.html#component). + For more information, see [Architecture Overview](guide/architecture). @@ -353,14 +353,14 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-hide In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on - an expression. For more information, see [ng-show](#ng-show). + an expression. For more information, see [ng-show](guide/ajs-quick-reference#ng-show). ### Bind to the `hidden` property In Angular, you use property binding; there is no built-in *hide* directive. - For more information, see [ng-show](#ng-show). + For more information, see [ng-show](guide/ajs-quick-reference#ng-show). @@ -396,15 +396,15 @@ The following are some of the key AngularJS built-in directives and their equiva Angular uses property binding; there is no built-in *href* directive. Place the element's `href` property in square brackets and set it to a quoted template expression. - For more information see the [Property binding](../guide/template-syntax.html#property-binding) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information see the [Property binding](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='router-link'} - For more information on routing, see the [RouterLink binding](../guide/router.html#router-link) - section of the [Routing & Navigation](../guide/router.html) page. + For more information on routing, see the [RouterLink binding](guide/router) + section of the [Routing & Navigation](guide/router) page. @@ -438,7 +438,7 @@ The following are some of the key AngularJS built-in directives and their equiva In this example, the `` element is removed from the DOM unless the `movies` array has a length. The (*) before `ngIf` is required in this example. - For more information, see [Structural Directives](../guide/structural-directives.html). + For more information, see [Structural Directives](guide/structural-directives). @@ -468,7 +468,7 @@ The following are some of the key AngularJS built-in directives and their equiva For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel) - section of the [Template Syntax](../guide/template-syntax.html) page. + section of the [Template Syntax](guide/template-syntax) page. @@ -505,7 +505,7 @@ The following are some of the key AngularJS built-in directives and their equiva the `let` keyword identifies `movie` as an input variable; the list preposition is `of`, not `in`. - For more information, see [Structural Directives](../guide/structural-directives.html). + For more information, see [Structural Directives](guide/structural-directives). @@ -542,8 +542,8 @@ The following are some of the key AngularJS built-in directives and their equiva In this example, the `
` element is hidden if the `favoriteHero` variable is not truthy. - For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information on property binding, see the [Property binding](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -572,8 +572,8 @@ The following are some of the key AngularJS built-in directives and their equiva Angular uses property binding; there is no built-in *src* directive. Place the `src` property in square brackets and set it to a quoted template expression. - For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information on property binding, see the [Property binding](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -608,11 +608,11 @@ The following are some of the key AngularJS built-in directives and their equiva Angular also has **style binding**, which is good way to set a single style. This is shown in the second example. - For more information on style binding, see the [Style binding](../guide/template-syntax.html#style-binding) section of the - [Template Syntax](../guide/template-syntax.html) page. + For more information on style binding, see the [Style binding](guide/template-syntax) section of the + [Template Syntax](guide/template-syntax) page. - For more information on the `ngStyle` directive, see [NgStyle](../guide/template-syntax.html#ngStyle) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -664,8 +664,8 @@ The following are some of the key AngularJS built-in directives and their equiva The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example. - For more information, see [The NgSwitch directives](../guide/template-syntax.html#ngSwitch) - section of the [Template Syntax](../guide/template-syntax.html) page. + For more information, see [The NgSwitch directives](guide/template-syntax) + section of the [Template Syntax](guide/template-syntax) page. @@ -674,7 +674,7 @@ The following are some of the key AngularJS built-in directives and their equiva
-[Back to top](#top) +[Back to top](guide/ajs-quick-reference#top) {@a filters-pipes} @@ -682,7 +682,7 @@ The following are some of the key AngularJS built-in directives and their equiva ## Filters/pipes Angular **pipes** provide formatting and transformation for data in the template, similar to AngularJS **filters**. Many of the built-in filters in AngularJS have corresponding pipes in Angular. -For more information on pipes, see [Pipes](../guide/pipes.html). +For more information on pipes, see [Pipes](guide/pipes). @@ -913,7 +913,7 @@ For more information on pipes, see [Pipes](../guide/pipes.html).
-[Back to top](#top) +[Back to top](guide/ajs-quick-reference#top) {@a controllers-components} @@ -975,8 +975,8 @@ The Angular code is shown using TypeScript. This is a nonissue in Angular because ES 2015 modules handle the namespacing for you. - For more information on modules, see the [Modules](../guide/architecture.html#modules) section of the - [Architecture Overview](../guide/architecture.html). + For more information on modules, see the [Modules](guide/architecture) section of the + [Architecture Overview](guide/architecture). @@ -1005,7 +1005,7 @@ The Angular code is shown using TypeScript. - `imports`: specifies the list of other modules that this module depends upon - `declaration`: keeps track of your components, pipes, and directives. - For more information on modules, see [Angular Modules (NgModule)](../guide/ngmodule.html). + For more information on modules, see [Angular Modules (NgModule)](guide/ngmodule). @@ -1043,8 +1043,8 @@ The Angular code is shown using TypeScript. This is how you associate a template with logic, which is defined in the component class. - For more information, see the [Components](../guide/architecture.html#components) - section of the [Architecture Overview](../guide/architecture.html) page. + For more information, see the [Components](guide/architecture) + section of the [Architecture Overview](guide/architecture) page. @@ -1073,8 +1073,8 @@ The Angular code is shown using TypeScript. NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class. - For more information, see the [Components](../guide/architecture.html#components) - section of the [Architecture Overview](../guide/architecture.html) page. + For more information, see the [Components](guide/architecture) + section of the [Architecture Overview](guide/architecture) page. @@ -1108,8 +1108,8 @@ The Angular code is shown using TypeScript. This example injects a `MovieService`. The first parameter's TypeScript type tells Angular what to inject, even after minification. - For more information, see the [Dependency injection](../guide/architecture.html#dependency-injection) - section of the [Architecture Overview](../guide/architecture.html). + For more information, see the [Dependency injection](guide/architecture) + section of the [Architecture Overview](guide/architecture). @@ -1118,7 +1118,7 @@ The Angular code is shown using TypeScript. -[Back to top](#top) +[Back to top](guide/ajs-quick-reference#top) {@a style-sheets} @@ -1192,4 +1192,4 @@ also encapsulate a style sheet within a specific component. -[Back to top](#top) \ No newline at end of file +[Back to top](guide/ajs-quick-reference#top) \ No newline at end of file diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 36cf753423..3661e33d3f 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -30,16 +30,16 @@ add it to your page. # Contents -* [Example: Transitioning between two states](#example-transitioning-between-states). -* [States and transitions](#states-and-transitions). -* [Example: Entering and leaving](#example-entering-and-leaving). -* [Example: Entering and leaving from different states](#example-entering-and-leaving-from-different-states). -* [Animatable properties and units](#animatable-properties-and-units). -* [Automatic property calculation](#automatic-property-calculation). -* [Animation timing](#animation-timing). -* [Multi-step animations with keyframes](#multi-step-animations-with-keyframes). -* [Parallel animation groups](#parallel-animation-groups). -* [Animation callbacks](#animation-callbacks). +* [Example: Transitioning between two states](guide/animations#example-transitioning-between-states). +* [States and transitions](guide/animations#states-and-transitions). +* [Example: Entering and leaving](guide/animations#example-entering-and-leaving). +* [Example: Entering and leaving from different states](guide/animations#example-entering-and-leaving-from-different-states). +* [Animatable properties and units](guide/animations#animatable-properties-and-units). +* [Automatic property calculation](guide/animations#automatic-property-calculation). +* [Animation timing](guide/animations#animation-timing). +* [Multi-step animations with keyframes](guide/animations#multi-step-animations-with-keyframes). +* [Parallel animation groups](guide/animations#parallel-animation-groups). +* [Animation callbacks](guide/animations#animation-callbacks). The examples in this page are available as a . diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index f349c0f93c..a9a15b1499 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -11,16 +11,16 @@ during a build process. {@a toc} ## Table of Contents -* [Overview](#overview) -* [_Ahead-of-Time_ vs _Just-in-Time_](#aot-jit) -* [Compile with AOT](#compile) -* [Bootstrap](#bootstrap) -* [Tree Shaking](#tree-shaking) -* [Load the bundle](#load) -* [Serve the app](#serve) -* [Workflow and convenience script](#workflow) -* [Source Code](#source-code) -* [Tour of Heroes](#toh) +* [Overview](guide/aot-compiler#overview) +* [_Ahead-of-Time_ vs _Just-in-Time_](guide/aot-compiler#aot-jit) +* [Compile with AOT](guide/aot-compiler#compile) +* [Bootstrap](guide/aot-compiler#bootstrap) +* [Tree Shaking](guide/aot-compiler#tree-shaking) +* [Load the bundle](guide/aot-compiler#load) +* [Serve the app](guide/aot-compiler#serve) +* [Workflow and convenience script](guide/aot-compiler#workflow) +* [Source Code](guide/aot-compiler#source-code) +* [Tour of Heroes](guide/aot-compiler#toh) {@a overview} @@ -128,7 +128,7 @@ then modify it to look as follows. The `compilerOptions` section is unchanged except for one property. **Set the `module` to `es2015`**. -This is important as explained later in the [Tree Shaking](#tree-shaking) section. +This is important as explained later in the [Tree Shaking](guide/aot-compiler#tree-shaking) section. What's really new is the `ngc` section at the bottom called `angularCompilerOptions`. Its `"genDir"` property tells the compiler @@ -198,7 +198,7 @@ The AOT path changes application bootstrapping. Instead of bootstrapping `AppModule`, you bootstrap the application with the generated module factory, `AppModuleNgFactory`. Make a copy of `main.ts` and name it `main-jit.ts`. -This is the JIT version; set it aside as you may need it [later](#run-jit "Running with JIT"). +This is the JIT version; set it aside as you may need it [later](guide/aot-compiler#run-jit "Running with JIT"). Open `main.ts` and convert it to AOT compilation. Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to @@ -408,7 +408,7 @@ The same source code can be built both ways. Here's one way to do that. {@example 'cb-aot-compiler/ts/src/index-jit.html' region='jit'} Notice the slight change to the `system.import` which now specifies `src/app/main-jit`. -That's the JIT version of the bootstrap file that we preserved [above](#bootstrap) +That's the JIT version of the bootstrap file that we preserved [above](guide/aot-compiler#bootstrap) Open a _different_ terminal window and enter. npm start @@ -434,7 +434,7 @@ Now you can develop JIT and AOT, side-by-side. The sample above is a trivial variation of the QuickStart app. In this section you apply what you've learned about AOT compilation and Tree Shaking -to an app with more substance, the tutorial [_Tour of Heroes_](../tutorial/toh-pt6.html). +to an app with more substance, the tutorial [_Tour of Heroes_](tutorial/toh-pt6). ### JIT in development, AOT in production @@ -472,7 +472,7 @@ It does not need `SystemJS`, so that script is absent from its `index.html` ***main.ts*** JIT and AOT applications boot in much the same way but require different Angular libraries to do so. -The key differences, covered in the [Bootstrap](#bootstrap) section above, +The key differences, covered in the [Bootstrap](guide/aot-compiler#bootstrap) section above, are evident in these `main` files which can and should reside in the same folder: diff --git a/aio/content/guide/appmodule.md b/aio/content/guide/appmodule.md index 10d3241be1..87e025f349 100644 --- a/aio/content/guide/appmodule.md +++ b/aio/content/guide/appmodule.md @@ -7,17 +7,17 @@ Tell Angular how to construct and bootstrap the app in the root "AppModule". @description An Angular module class describes how the application parts fit together. Every application has at least one Angular module, the _root_ module -that you [bootstrap](#main) to launch the application. +that you [bootstrap](guide/appmodule#main) to launch the application. You can call it anything you want. The conventional name is `AppModule`. -The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`. +The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`. You'll evolve this module as your application grows. {@example 'setup/ts/src/app/app.module.ts'} After the `import` statements, you come to a class adorned with the -**`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained'). +**`@NgModule`** [_decorator_](guide/glossary). The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class). `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application. @@ -26,7 +26,7 @@ The `@NgModule` decorator identifies `AppModule` as an Angular module class (als * **_declarations_** — the application's lone component, which is also ... * **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page. -The [Angular Modules (NgModule)](ngmodule.html) guide dives deeply into the details of Angular modules. +The [Angular Modules (NgModule)](guide/ngmodule) guide dives deeply into the details of Angular modules. All you need to know at the moment is a few basics about these three properties. @@ -76,7 +76,7 @@ You must declare _every_ component in an `NgModule` class. If you use a component without declaring it, you'll see a clear error message in the browser console. You'll learn to create two other kinds of classes — -[directives](attribute-directives.html) and [pipes](pipes.html) — +[directives](guide/attribute-directives) and [pipes](guide/pipes) — that you must also add to the `declarations` array. @@ -93,7 +93,7 @@ Do not put any other kind of class in `declarations`; _not_ `NgModule` classes, {@a bootstrap-array} ### The _bootstrap_ array -You launch the application by [_bootstrapping_](#main) the root `AppModule`. +You launch the application by [_bootstrapping_](guide/appmodule#main) the root `AppModule`. Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array and inserts each one into the browser DOM. @@ -154,4 +154,4 @@ As your app grows, you'll consider subdividing it into multiple "feature" module some of which can be loaded later ("lazy loaded") if and when the user chooses to visit those features. -When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](ngmodule.html) guide. \ No newline at end of file +When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](guide/ngmodule) guide. \ No newline at end of file diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index 380757a6b6..ae29d02579 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -22,14 +22,14 @@ You'll learn the details in the pages that follow. For now, focus on the big pic The architecture diagram identifies the eight main building blocks of an Angular application: -* [Modules](#modules) -* [Components](#components) -* [Templates](#templates) -* [Metadata](#metadata) -* [Data binding](#data-binding) -* [Directives](#directives) -* [Services](#services) -* [Dependency injection](#dependency-injection) +* [Modules](guide/architecture#modules) +* [Components](guide/architecture#components) +* [Templates](guide/architecture#templates) +* [Metadata](guide/architecture#metadata) +* [Data binding](guide/architecture#data-binding) +* [Directives](guide/architecture#directives) +* [Services](guide/architecture#services) +* [Dependency injection](guide/architecture#dependency-injection) Learn these building blocks, and you're on your way. @@ -78,7 +78,7 @@ For example, this `HeroListComponent` has a `heroes` property that returns !{_an that it acquires from a service. `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list. Angular creates, updates, and destroys components as the user moves through the application. -Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](lifecycle-hooks.html), like `ngOnInit()` declared above. +Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()` declared above.
@@ -99,7 +99,7 @@ template for our `HeroListComponent`: {@example 'architecture/ts/src/app/hero-list.component.html'} -Although this template uses typical HTML elements like `

` and `

`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](template-syntax.html). +Although this template uses typical HTML elements like `

` and `

`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](guide/template-syntax). In the last line of the template, the `` tag is a custom element that represents a new component, `HeroDetailComponent`. @@ -126,7 +126,7 @@ Notice how `` rests comfortably among native HTML elements. Custom

Metadata tells Angular how to process a class.

-
[Looking back at the code](#component-code) for `HeroListComponent`, you can see that it's just a class. +
[Looking back at the code](guide/architecture#component-code) for `HeroListComponent`, you can see that it's just a class. There is no evidence of a framework, no "Angular" in it at all. In fact, `HeroListComponent` really is *just a class*. It's not a component until you *tell Angular about it*. @@ -144,7 +144,7 @@ where it finds a `` tag in *parent* HTML. For example, if an app's HTML contains ``, then Angular inserts an instance of the `HeroListComponent` view between those tags. -- `templateUrl`: module-relative address of this component's HTML template, shown [above](#templates). +- `templateUrl`: module-relative address of this component's HTML template, shown [above](guide/architecture#templates). - `providers`: !{_array} of **dependency injection providers** for services that the component requires. This is one way to tell Angular that the component's constructor requires a `HeroService` so it can get the list of heroes to display. @@ -178,14 +178,14 @@ Angular supports **data binding**, a mechanism for coordinating parts of a template with parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides. -As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions.
The `HeroListComponent` [example](#templates) template has three forms: -* The `{{hero.name}}` [*interpolation*](displaying-data.html#interpolation) +As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions.
The `HeroListComponent` [example](guide/architecture#templates) template has three forms: +* The `{{hero.name}}` [*interpolation*](guide/displaying-data) displays the component's `hero.name` property value within the `
  • ` element. -* The `[hero]` [*property binding*](template-syntax.html#property-binding) passes the value of `selectedHero` from +* The `[hero]` [*property binding*](guide/template-syntax) passes the value of `selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`. -* The `(click)` [*event binding*](user-input.html#click) calls the component's `selectHero` method when the user clicks a hero's name. +* The `(click)` [*event binding*](guide/user-input) calls the component's `selectHero` method when the user clicks a hero's name. **Two-way data binding** is an important fourth form that combines property and event binding in a single notation, using the `ngModel` directive. @@ -234,9 +234,9 @@ sometimes by name but more often as the target of an assignment or a binding. **Structural** directives alter layout by adding, removing, and replacing elements in DOM. -The [example template](#templates) uses two built-in structural directives: -* [`*ngFor`](displaying-data.html#ngFor) tells Angular to stamp out one `
  • ` per hero in the `heroes` list. -* [`*ngIf`](displaying-data.html#ngIf) includes the `HeroDetail` component only if a selected hero exists. +The [example template](guide/architecture#templates) uses two built-in structural directives: +* [`*ngFor`](guide/displaying-data) tells Angular to stamp out one `
  • ` per hero in the `heroes` list. +* [`*ngIf`](guide/displaying-data) includes the `HeroDetail` component only if a selected hero exists. **Attribute** directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name. @@ -245,9 +245,9 @@ an example of an attribute directive. `ngModel` modifies the behavior of an existing element (typically an ``) by setting its display value property and responding to change events. Angular has a few more directives that either alter the layout structure -(for example, [ngSwitch](template-syntax.html#ngSwitch)) +(for example, [ngSwitch](guide/template-syntax)) or modify aspects of DOM elements and components -(for example, [ngStyle](template-syntax.html#ngStyle) and [ngClass](template-syntax.html#ngClass)). +(for example, [ngStyle](guide/template-syntax) and [ngClass](guide/template-syntax)). Of course, you can also write your own directives. Components such as `HeroListComponent` are one kind of custom directive. @@ -336,7 +336,7 @@ Registering at a component level means you get a new instance of the service with each new instance of that component. +The full story is in the [dependency injection](guide/dependency-injection) page. --> Points to remember about dependency injection: @@ -359,14 +359,14 @@ Points to remember about dependency injection: You've learned the basics about the eight main building blocks of an Angular application: -* [Modules](#modules) -* [Components](#components) -* [Templates](#templates) -* [Metadata](#metadata) -* [Data binding](#data-binding) -* [Directives](#directives) -* [Services](#services) -* [Dependency injection](#dependency-injection) +* [Modules](guide/architecture#modules) +* [Components](guide/architecture#components) +* [Templates](guide/architecture#templates) +* [Metadata](guide/architecture#metadata) +* [Data binding](guide/architecture#data-binding) +* [Directives](guide/architecture#directives) +* [Services](guide/architecture#services) +* [Dependency injection](guide/architecture#dependency-injection) That's a foundation for everything else in an Angular application, and it's more than enough to get going. @@ -375,7 +375,7 @@ But it doesn't include everything you need to know. Here is a brief, alphabetical list of other important Angular features and services. Most of them are covered in this documentation (or soon will be). -> [**Animations**](animations.html): Animate component behavior +> [**Animations**](guide/animations): Animate component behavior without deep knowledge of animation techniques or CSS with Angular's animation library. > **Change detection**: The change detection documentation will cover how Angular decides that a component property value has changed, @@ -384,18 +384,18 @@ when to update the screen, and how it uses **zones** to intercept asynchronous a > **Events**: The events documentation will cover how to use components and services to raise events with mechanisms for publishing and subscribing to events. -> [**Forms**](forms.html): Support complex data entry scenarios with HTML-based validation and dirty checking. +> [**Forms**](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking. -> [**HTTP**](server-communication.html): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. +> [**HTTP**](guide/server-communication): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. -> [**Lifecycle hooks**](lifecycle-hooks.html): Tap into key moments in the lifetime of a component, from its creation to its destruction, +> [**Lifecycle hooks**](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces. -> [**Pipes**](pipes.html): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression: +> [**Pipes**](guide/pipes): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression: > > > `price | currency:'USD':true` > > It displays a price of 42.33 as `$42.33`. -> [**Router**](router.html): Navigate from page to page within the client +> [**Router**](guide/router): Navigate from page to page within the client application and never leave the browser. diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index edf0f1624a..034242c480 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -9,12 +9,12 @@ An **Attribute** directive changes the appearance or behavior of a DOM element. # Contents -* [Directives overview](#directive-overview) -* [Build a simple attribute directive](#write-directive) -* [Apply the attribute directive to an element in a template](#apply-directive) -* [Respond to user-initiated events](#respond-to-user) -* [Pass values into the directive with an _@Input_ data binding](#bindings) -* [Bind to a second property](#second-property) +* [Directives overview](guide/attribute-directives#directive-overview) +* [Build a simple attribute directive](guide/attribute-directives#write-directive) +* [Apply the attribute directive to an element in a template](guide/attribute-directives#apply-directive) +* [Respond to user-initiated events](guide/attribute-directives#respond-to-user) +* [Pass values into the directive with an _@Input_ data binding](guide/attribute-directives#bindings) +* [Bind to a second property](guide/attribute-directives#second-property) Try the . @@ -27,15 +27,15 @@ There are three kinds of directives in Angular: 1. Attribute directives—change the appearance or behavior of an element, component, or another directive. *Components* are the most common of the three directives. -You saw a component for the first time in the [QuickStart](../quickstart.html) guide. +You saw a component for the first time in the [QuickStart](quickstart) guide. *Structural Directives* change the structure of the view. -Two examples are [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf). -Learn about them in the [Structural Directives](structural-directives.html) guide. +Two examples are [NgFor](guide/template-syntax) and [NgIf](guide/template-syntax). +Learn about them in the [Structural Directives](guide/structural-directives) guide. *Attribute directives* are used as attributes of elements. -The built-in [NgStyle](template-syntax.html#ngStyle) directive in the -[Template Syntax](template-syntax.html) guide, for example, +The built-in [NgStyle](guide/template-syntax) directive in the +[Template Syntax](guide/template-syntax) guide, for example, can change several element styles at the same time. ## Build a simple attribute directive @@ -50,7 +50,7 @@ directive to set an element's background color when the user hovers over that element. You can apply it like this: ### Write the directive code -Follow the [setup](setup.html) instructions for creating a new local project +Follow the [setup](guide/setup) instructions for creating a new local project named attribute-directives. Create the following source file in the indicated folder: @@ -61,7 +61,7 @@ Create the following source file in the indicated folder: The `import` statement specifies symbols from the Angular `core`: 1. `Directive` provides the functionality of the `@Directive` decorator. -1. `ElementRef` [injects](dependency-injection.html) into the directive's constructor +1. `ElementRef` [injects](guide/dependency-injection) into the directive's constructor so the code can access the DOM element. 1. `Input` allows data to flow from the binding expression into the directive. @@ -195,7 +195,7 @@ Start by adding a `highlightColor` property to the directive class like this: Notice the `@Input` !{_decorator}. It adds metadata to the class that makes the directive's `highlightColor` property available for binding. It's called an *input* property because data flows from the binding expression _into_ the directive. -Without that input metadata, Angular rejects the binding; see [below](#why-input "Why add @Input?") for more about that. +Without that input metadata, Angular rejects the binding; see [below](guide/attribute-directives#why-input "Why add @Input?") for more about that. Try it by adding the following directive binding variations to the `AppComponent` template: Add a `color` property to the `AppComponent`. @@ -268,10 +268,10 @@ Here's how the harness should work when you're done coding. This page covered how to: -- [Build an **attribute directive**](#write-directive) that modifies the behavior of an element. -- [Apply the directive](#apply-directive) to an element in a template. -- [Respond to **events**](#respond-to-user) that change the directive's behavior. -- [**Bind** values to the directive](#bindings). +- [Build an **attribute directive**](guide/attribute-directives#write-directive) that modifies the behavior of an element. +- [Apply the directive](guide/attribute-directives#apply-directive) to an element in a template. +- [Respond to **events**](guide/attribute-directives#respond-to-user) that change the directive's behavior. +- [**Bind** values to the directive](guide/attribute-directives#bindings). The final source code follows: diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md index e2bea3d79d..54e8ef6286 100644 --- a/aio/content/guide/browser-support.md +++ b/aio/content/guide/browser-support.md @@ -307,7 +307,7 @@ These are the polyfills required to run an Angular application on each supported - [ES6](#core-es6) + [ES6](guide/browser-support#core-es6) @@ -322,7 +322,7 @@ These are the polyfills required to run an Angular application on each supported - [ES6
    classList](#classlist) + [ES6
    classList](guide/browser-support#classlist) @@ -370,7 +370,7 @@ Here are the features which may require additional polyfills: - [Web Animations](#web-animations) + [Web Animations](guide/browser-support#web-animations) @@ -390,7 +390,7 @@ Here are the features which may require additional polyfills: - [Intl API](#intl) + [Intl API](guide/browser-support#intl) @@ -410,7 +410,7 @@ Here are the features which may require additional polyfills: - [classList](#classlist) + [classList](guide/browser-support#classlist) @@ -430,7 +430,7 @@ Here are the features which may require additional polyfills: - [Typed Array](#typedarray)
    [Blob](#blob)
    [FormData](#formdata) + [Typed Array](guide/browser-support#typedarray)
    [Blob](guide/browser-support#blob)
    [FormData](guide/browser-support#formdata) diff --git a/aio/content/guide/cb-dependency-injection.md b/aio/content/guide/cb-dependency-injection.md index ad7cf674ce..1c1afac853 100644 --- a/aio/content/guide/cb-dependency-injection.md +++ b/aio/content/guide/cb-dependency-injection.md @@ -9,41 +9,41 @@ Dependency Injection is a powerful pattern for managing code dependencies. In this cookbook we will explore many of the features of Dependency Injection (DI) in Angular. ## Table of contents -[Application-wide dependencies](#app-wide-dependencies) +[Application-wide dependencies](guide/cb-dependency-injection#app-wide-dependencies) -[External module configuration](#external-module-configuration) +[External module configuration](guide/cb-dependency-injection#external-module-configuration) -[*@Injectable* and nested service dependencies](#nested-dependencies) +[*@Injectable* and nested service dependencies](guide/cb-dependency-injection#nested-dependencies) -[Limit service scope to a component subtree](#service-scope) +[Limit service scope to a component subtree](guide/cb-dependency-injection#service-scope) -[Multiple service instances (sandboxing)](#multiple-service-instances) +[Multiple service instances (sandboxing)](guide/cb-dependency-injection#multiple-service-instances) -[Qualify dependency lookup with *@Optional* and *@Host*](#qualify-dependency-lookup) +[Qualify dependency lookup with *@Optional* and *@Host*](guide/cb-dependency-injection#qualify-dependency-lookup) -[Inject the component's DOM element](#component-element) +[Inject the component's DOM element](guide/cb-dependency-injection#component-element) -[Define dependencies with providers](#providers) -* [The *provide* object literal](#provide) -* [useValue - the *value provider*](#usevalue) -* [useClass - the *class provider*](#useclass) -* [useExisting - the *alias provider*](#useexisting) -* [useFactory - the *factory provider*](#usefactory) +[Define dependencies with providers](guide/cb-dependency-injection#providers) +* [The *provide* object literal](guide/cb-dependency-injection#provide) +* [useValue - the *value provider*](guide/cb-dependency-injection#usevalue) +* [useClass - the *class provider*](guide/cb-dependency-injection#useclass) +* [useExisting - the *alias provider*](guide/cb-dependency-injection#useexisting) +* [useFactory - the *factory provider*](guide/cb-dependency-injection#usefactory) -[Provider token alternatives](#tokens) -* [class-interface](#class-interface) -* [OpaqueToken](#opaque-token) +[Provider token alternatives](guide/cb-dependency-injection#tokens) +* [class-interface](guide/cb-dependency-injection#class-interface) +* [OpaqueToken](guide/cb-dependency-injection#opaque-token) -[Inject into a derived class](#di-inheritance) +[Inject into a derived class](guide/cb-dependency-injection#di-inheritance) -[Find a parent component by injection](#find-parent) - * [Find parent with a known component type](#known-parent) - * [Cannot find a parent by its base class](#base-parent) - * [Find a parent by its class-interface](#class-interface-parent) - * [Find a parent in a tree of parents (*@SkipSelf*)](#parent-tree) - * [A *provideParent* helper function](#provideparent) +[Find a parent component by injection](guide/cb-dependency-injection#find-parent) + * [Find parent with a known component type](guide/cb-dependency-injection#known-parent) + * [Cannot find a parent by its base class](guide/cb-dependency-injection#base-parent) + * [Find a parent by its class-interface](guide/cb-dependency-injection#class-interface-parent) + * [Find a parent in a tree of parents (*@SkipSelf*)](guide/cb-dependency-injection#parent-tree) + * [A *provideParent* helper function](guide/cb-dependency-injection#provideparent) -[Break circularities with a forward class reference (*forwardRef*)](#forwardref) +[Break circularities with a forward class reference (*forwardRef*)](guide/cb-dependency-injection#forwardref) **See the ** of the code supporting this cookbook. @@ -62,7 +62,7 @@ Service classes can act as their own providers which is why listing them in the is all the registration we need. A *provider* is something that can create or deliver a service. Angular creates a service instance from a class provider by "new-ing" it. -Learn more about providers [below](#providers).Now that we've registered these services, +Learn more about providers [below](guide/cb-dependency-injection#providers).Now that we've registered these services, Angular can inject them into the constructor of *any* component or service, *anywhere* in the application. {@example 'cb-dependency-injection/ts/src/app/hero-bios.component.ts' region='ctor'} @@ -79,7 +79,7 @@ We do this when (a) we expect the service to be injectable everywhere or (b) we must configure another application global service _before it starts_. We see an example of the second case here, where we configure the Component Router with a non-default -[location strategy](../guide/router.html#location-strategy) by listing its provider +[location strategy](guide/router) by listing its provider in the `providers` list of the `AppModule`. @@ -264,7 +264,7 @@ But when this component is projected into a *parent* component, that parent comp We look at this second, more interesting case in our next example. ### Demonstration -The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that we looked at [above](#hero-bios-component). +The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that we looked at [above](guide/cb-dependency-injection#hero-bios-component). {@example 'cb-dependency-injection/ts/src/app/hero-bios.component.ts' region='hero-bios-and-contacts'} @@ -325,7 +325,7 @@ Although we strive to avoid it, many visual effects and 3rd party tools (such as require DOM access. To illustrate, we've written a simplified version of the `HighlightDirective` from -the [Attribute Directives](../guide/attribute-directives.html) chapter. +the [Attribute Directives](guide/attribute-directives) chapter. {@example 'cb-dependency-injection/ts/src/app/highlight.directive.ts'} @@ -371,7 +371,7 @@ If it doesn't, it may be able to make one with the help of a ***provider***. A *provider* is a recipe for delivering a service associated with a *token*. If the injector doesn't have a provider for the requested *token*, it delegates the request to its parent injector, where the process repeats until there are no more injectors. -If the search is futile, the injector throws an error ... unless the request was [optional](#optional). +If the search is futile, the injector throws an error ... unless the request was [optional](guide/cb-dependency-injection#optional). Let's return our attention to providers themselves.A new injector has no providers. Angular initializes the injectors it creates with some providers it cares about. @@ -408,7 +408,7 @@ It's visually simple: a few properties and the output of a logger. The code behi #### The *provide* object literal The `provide` object literal takes a *token* and a *definition object*. -The *token* is usually a class but [it doesn't have to be](#tokens). +The *token* is usually a class but [it doesn't have to be](guide/cb-dependency-injection#tokens). The *definition* object has one main property, (e.g. `useValue`) that indicates how the provider should create or return the provided value. @@ -433,7 +433,7 @@ The `Hero` provider token is a class which makes sense because the value is a `H and the consumer of the injected hero would want the type information. The `TITLE` provider token is *not a class*. -It's a special kind of provider lookup key called an [OpaqueToken](#opaquetoken). +It's a special kind of provider lookup key called an [OpaqueToken](guide/cb-dependency-injection#opaquetoken). We often use an `OpaqueToken` when the dependency is a simple value like a string, a number, or a function. The value of a *value provider* must be defined *now*. We can't create the value later. @@ -486,7 +486,7 @@ creating ***two ways to access the same service object***. Narrowing an API through an aliasing interface is _one_ important use case for this technique. We're aliasing for that very purpose here. Imagine that the `LoggerService` had a large API (it's actually only three methods and a property). -We want to shrink that API surface to just the two members exposed by the `MinimalLogger` [*class-interface*](#class-interface): +We want to shrink that API surface to just the two members exposed by the `MinimalLogger` [*class-interface*](guide/cb-dependency-injection#class-interface): {@example 'cb-dependency-injection/ts/src/app/date-logger.service.ts' region='minimal-logger'} @@ -718,7 +718,7 @@ after injecting an `AlexComponent` into her constructor: {@example 'cb-dependency-injection/ts/src/app/parent-finder.component.ts' region='cathy'} -We added the [@Optional](#optional) qualifier for safety but +We added the [@Optional](guide/cb-dependency-injection#optional) qualifier for safety but the confirms that the `alex` parameter is set. @@ -741,7 +741,7 @@ That's not possible because TypeScript interfaces disappear from the transpiled which doesn't support interfaces. There's no artifact we could look for.We're not claiming this is good design. We are asking *can a component inject its parent via the parent's base class*? -The sample's `CraigComponent` explores this question. [Looking back](#alex) +The sample's `CraigComponent` explores this question. [Looking back](guide/cb-dependency-injection#alex) we see that the `Alex` component *extends* (*inherits*) from a class named `Base`. {@example 'cb-dependency-injection/ts/src/app/parent-finder.component.ts' region='alex-class-signature'} @@ -758,14 +758,14 @@ confirms that the `alex` parameter is null. ### Find a parent by its class-interface -We can find a parent component with a [class-interface](#class-interface). +We can find a parent component with a [class-interface](guide/cb-dependency-injection#class-interface). The parent must cooperate by providing an *alias* to itself in the name of a *class-interface* token. Recall that Angular always adds a component instance to its own injector; -that's why we could inject *Alex* into *Cathy* [earlier](#known-parent). +that's why we could inject *Alex* into *Cathy* [earlier](guide/cb-dependency-injection#known-parent). -We write an [*alias provider*](#useexisting) — a `provide` object literal with a `useExisting` definition — +We write an [*alias provider*](guide/cb-dependency-injection#useexisting) — a `provide` object literal with a `useExisting` definition — that creates an *alternative* way to inject the same component instance and add that provider to the `providers` array of the `@Component` metadata for the `AlexComponent`: @@ -774,8 +774,8 @@ and add that provider to the `providers` array of the `@Component` metadata for {@example 'cb-dependency-injection/ts/src/app/parent-finder.component.ts' region='alex-providers'} -[Parent](#parent-token) is the provider's *class-interface* token. -The [*forwardRef*](#forwardref) breaks the circular reference we just created by having the `AlexComponent` refer to itself. +[Parent](guide/cb-dependency-injection#parent-token) is the provider's *class-interface* token. +The [*forwardRef*](guide/cb-dependency-injection#forwardref) breaks the circular reference we just created by having the `AlexComponent` refer to itself. *Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter, the same way we've done it before: @@ -802,8 +802,8 @@ Here's *Barry*: {@example 'cb-dependency-injection/ts/src/app/parent-finder.component.ts' region='barry'} -*Barry*'s `providers` array looks just like [*Alex*'s](#alex-providers). -If we're going to keep writing [*alias providers*](#useexisting) like this we should create a [helper function](#provideparent). +*Barry*'s `providers` array looks just like [*Alex*'s](guide/cb-dependency-injection#alex-providers). +If we're going to keep writing [*alias providers*](guide/cb-dependency-injection#useexisting) like this we should create a [helper function](guide/cb-dependency-injection#provideparent). For now, focus on *Barry*'s constructor: @@ -841,7 +841,7 @@ Here's *Alice*, *Barry* and family in action: {@a parent-token} ### The *Parent* class-interface -We [learned earlier](#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class. +We [learned earlier](guide/cb-dependency-injection#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class. Our example defines a `Parent` *class-interface* . @@ -870,7 +870,7 @@ It doesn't in this example *only* to demonstrate that the code will compile and ### A *provideParent* helper function Writing variations of the same parent *alias provider* gets old quickly, -especially this awful mouthful with a [*forwardRef*](#forwardref): +especially this awful mouthful with a [*forwardRef*](guide/cb-dependency-injection#forwardref): {@example 'cb-dependency-injection/ts/src/app/parent-finder.component.ts' region='alex-providers'} diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md index ffc534fd5c..e1033588ef 100644 --- a/aio/content/guide/change-log.md +++ b/aio/content/guide/change-log.md @@ -13,7 +13,7 @@ Now you can download the sample code for any guide and run it locally. Look for the new download links next to the "live example" links. ## Template Syntax/Structural Directives: refreshed (2017-02-06) -The [_Template-Syntax_](template-syntax.html) and [_Structural Directives_](structural-directives.html) +The [_Template-Syntax_](guide/template-syntax) and [_Structural Directives_](guide/structural-directives) guides were significantly revised for clarity, accuracy, and current recommended practices. Discusses ``. Revised samples are more clear and cover all topics discussed. @@ -38,43 +38,43 @@ Notably: * Added `lite-server` configuration (`bs-config.json`) to serve `src/`. ## NEW: Reactive Forms guide (2017-01-31) -The new [**Reactive Forms**](reactive-forms.html) guide explains how and why to build a "reactive form". +The new [**Reactive Forms**](guide/reactive-forms) guide explains how and why to build a "reactive form". "Reactive Forms" are the code-based counterpart to the declarative "Template Driven" forms approach -introduced in the [Forms](forms.html) guide. +introduced in the [Forms](guide/forms) guide. Check it out before you decide how to add forms to your app. Remember also that you can use both techniques in the same app, choosing the approach that best fits each scenario. ## NEW: Deployment guide (2017-01-30) -The new [Deployment](deployment.html) guide describes techniques for putting your application on a server. +The new [Deployment](guide/deployment) guide describes techniques for putting your application on a server. It includes important advice on optimizing for production. ## Hierarchical Dependency Injection: refreshed (2017-01-13) -[Hierarchical Dependency Injection](hierarchical-dependency-injection.html) guide is significantly revised. +[Hierarchical Dependency Injection](guide/hierarchical-dependency-injection) guide is significantly revised. Closes issue #3086. Revised samples are clearer and cover all topics discussed. ## Miscellaneous (2017-01-05) -* [Setup](setup.html) guide: +* [Setup](guide/setup) guide: added (optional) instructions on how to remove _non-essential_ files. * No longer consolidate RxJS operator imports in `rxjs-extensions` file; each file should import what it needs. * All samples prepend template/style URLs with `./` as a best practice. -* [Style Guide](style-guide.html): copy edits and revised rules. +* [Style Guide](guide/style-guide): copy edits and revised rules. ## Router: more detail (2016-12-21) -Added more information to the [Router](router.html) guide +Added more information to the [Router](guide/router) guide including sections named outlets, wildcard routes, and preload strategies. ## HTTP: how to set default request headers (and other request options) (2016-12-14) Added section on how to set default request headers (and other request options) to -[HTTP](server-communication.html#override-default-request-options) guide. +[HTTP](guide/server-communication) guide. ## Testing: added component test plunkers (2016-12-02) Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: one for the QuickStart seed's `AppComponent` and another for the Testing guide's `BannerComponent`. -Linked to these plunkers in [Testing](testing.html#live-examples) and [Setup anatomy](setup-systemjs-anatomy) guides. +Linked to these plunkers in [Testing](guide/testing) and [Setup anatomy](guide/setup-systemjs-anatomy) guides. ## Internationalization: pluralization and _select_ (2016-11-30) -The [Internationalization (i18n)](../cookbook/i18n.html) guide explains how to handle pluralization and +The [Internationalization (i18n)](cookbook/i18n) guide explains how to handle pluralization and translation of alternative texts with `select`. The sample demonstrates these features too. @@ -86,7 +86,7 @@ see quickstart issue: [angular/quickstart#294](https://github.com/angular/quicks ## QuickStart Rewrite (2016-11-18) The QuickStart is completely rewritten so that it actually is quick. It references a minimal "Hello Angular" app running in Plunker. -The new [Setup](setup.html) page tells you how to install a local development environment +The new [Setup](guide/setup) page tells you how to install a local development environment by downloading (or cloning) the QuickStart github repository. You are no longer asked to copy-and-paste code into setup files that were not explained anyway. @@ -94,14 +94,14 @@ You are no longer asked to copy-and-paste code into setup files that were not ex Docs and code samples updated and tested with Angular v.2.2.0. ## UPDATE: NgUpgrade Guide for the AOT friendly _upgrade/static_ module (2016-11-14) -The updated [NgUpgrade Guide](upgrade.html) guide covers the +The updated [NgUpgrade Guide](guide/upgrade) guide covers the new AOT friendly `upgrade/static` module released in v.2.2.0, which is the recommended facility for migrating from AngularJS to Angular. The documentation for the version prior to v.2.2.0 has been removed. ## ES6 described in "TypeScript to JavaScript" (2016-11-14) -The updated [TypeScript to JavaScript](../cookbook/ts-to-js.html) cookbook +The updated [TypeScript to JavaScript](cookbook/ts-to-js) cookbook now explains how to write apps in ES6/7 by translating the common idioms in the TypeScript documentation examples (and elsewhere on the web) to ES6/7 and ES5. @@ -114,7 +114,7 @@ Documentation samples now get TypeScript type information for 3rd party librarie from npm `@types` packages rather than with the _typings_ tooling. The `typings.json` file is gone. -The [AngularJS Upgrade](upgrade.html) guide reflects this change. +The [AngularJS Upgrade](guide/upgrade) guide reflects this change. The `package.json` installs `@types/angular` and several `@types/angular-...` packages in support of upgrade; these are not needed for pure Angular development. @@ -138,7 +138,7 @@ New `:enter` and `:leave` aliases make animation more natural. Docs and code samples updated and tested with Angular v.2.1.0. ## NEW "Ahead of time (AOT) Compilation" cookbook (2016-10-11) -The NEW [Ahead of time (AOT) Compilation](../cookbook/aot-compiler.html) cookbook +The NEW [Ahead of time (AOT) Compilation](cookbook/aot-compiler) cookbook explains what AOT compilation is and why you'd want it. It demonstrates the basics with a QuickStart app followed by the more advanced considerations of compiling and bundling the Tour of Heroes. @@ -147,17 +147,17 @@ followed by the more advanced considerations of compiling and bundling the Tour Docs and code samples updated and tested with Angular v.2.0.2. ## "Routing and Navigation" guide with the _Router Module_ (2016-10-5) -The [Routing and Navigation](router.html) guide now locates route configuration +The [Routing and Navigation](guide/router) guide now locates route configuration in a _Routing Module_. The _Routing Module_ replaces the previous _routing object_ involving the `ModuleWithProviders`. All guided samples with routing use the _Routing Module_ and prose content has been updated, most conspicuously in the -[NgModule](ngmodule.html) guide and [NgModule FAQ](../cookbook/ngmodule-faq.html) cookbook. +[NgModule](guide/ngmodule) guide and [NgModule FAQ](cookbook/ngmodule-faq) cookbook. ## New "Internationalization" Cookbook (2016-09-30) -Added a new [Internationalization (i18n)](../cookbook/i18n.html) cookbook that shows how +Added a new [Internationalization (i18n)](cookbook/i18n) cookbook that shows how to use Angular "i18n" facilities to translate template text into multiple languages. ## "angular-in-memory-web-api" package rename (2016-09-27) @@ -171,7 +171,7 @@ The new "angular-in-memory-web-api" has new features. ## "Style Guide" with _NgModules_ (2016-09-27) -[StyleGuide](style-guide.html) explains recommended conventions for Angular modules (NgModule). +[StyleGuide](guide/style-guide) explains recommended conventions for Angular modules (NgModule). Barrels now are far less useful and have been removed from the style guide; they remain valuable but are not a matter of Angular style. Also relaxed the rule that discouraged use of the `@Component.host` property. @@ -187,5 +187,5 @@ modules with SystemJS as the samples currently do. ## "Lifecycle Hooks" guide simplified (2016-09-24) -The [Lifecycle Hooks](lifecycle-hooks.html) guide is shorter, simpler, and +The [Lifecycle Hooks](guide/lifecycle-hooks) guide is shorter, simpler, and draws more attention to the order in which Angular calls the hooks. \ No newline at end of file diff --git a/aio/content/guide/component-communication.md b/aio/content/guide/component-communication.md index 6b887c9b56..cc1191c479 100644 --- a/aio/content/guide/component-communication.md +++ b/aio/content/guide/component-communication.md @@ -9,25 +9,25 @@ Share information between different directives and components. in which two or more components share information. ## Table of contents -[Pass data from parent to child with input binding](#parent-to-child) +[Pass data from parent to child with input binding](guide/component-communication#parent-to-child) -[Intercept input property changes with a setter](#parent-to-child-setter) +[Intercept input property changes with a setter](guide/component-communication#parent-to-child-setter) -[Intercept input property changes with *ngOnChanges*](#parent-to-child-on-changes) +[Intercept input property changes with *ngOnChanges*](guide/component-communication#parent-to-child-on-changes) -[Parent listens for child event](#child-to-parent) +[Parent listens for child event](guide/component-communication#child-to-parent) -[Parent interacts with child via a *local variable*](#parent-to-child-local-var) +[Parent interacts with child via a *local variable*](guide/component-communication#parent-to-child-local-var) -[Parent calls a *ViewChild*](#parent-to-view-child) +[Parent calls a *ViewChild*](guide/component-communication#parent-to-view-child) -[Parent and children communicate via a service](#bidirectional-service) +[Parent and children communicate via a service](guide/component-communication#bidirectional-service) **See the **. ## Pass data from parent to child with input binding `HeroChildComponent` has two ***input properties***, -typically adorned with [@Input decorations](../guide/template-syntax.html#inputs-outputs). +typically adorned with [@Input decorations](guide/template-syntax). {@example 'cb-component-communication/ts/src/app/hero-child.component.ts'} @@ -54,7 +54,7 @@ E2E test that all children were instantiated and displayed as expected: {@example 'cb-component-communication/e2e-spec.ts' region='parent-to-child'} -[Back to top](#top) +[Back to top](guide/component-communication#top) ## Intercept input property changes with a setter @@ -83,14 +83,14 @@ E2E tests of input property setter with empty and non-empty names: {@example 'cb-component-communication/e2e-spec.ts' region='parent-to-child-setter'} -[Back to top](#top) +[Back to top](guide/component-communication#top) ## Intercept input property changes with *ngOnChanges* Detect and act upon changes to input property values with the `ngOnChanges` method of the `OnChanges` lifecycle hook interface. May prefer this approach to the property setter when watching multiple, interacting input properties. -Learn about `ngOnChanges` in the [LifeCycle Hooks](../guide/lifecycle-hooks.html) chapter.This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes: +Learn about `ngOnChanges` in the [LifeCycle Hooks](guide/lifecycle-hooks) chapter.This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes: {@example 'cb-component-communication/ts/src/app/version-child.component.ts'} @@ -114,7 +114,7 @@ the expected `ngOnChanges` calls and values: {@example 'cb-component-communication/e2e-spec.ts' region='parent-to-child-onchanges'} -[Back to top](#top) +[Back to top](guide/component-communication#top) ## Parent listens for child event @@ -122,7 +122,7 @@ The child component exposes an `EventEmitter` property with which it `emits` eve The parent binds to that event property and reacts to those events. The child's `EventEmitter` property is an ***output property***, - typically adorned with an [@Output decoration](../guide/template-syntax.html#inputs-outputs) + typically adorned with an [@Output decoration](guide/template-syntax) as seen in this `VoterComponent`: @@ -150,7 +150,7 @@ Test that clicking the *Agree* and *Disagree* buttons update the appropriate cou {@example 'cb-component-communication/e2e-spec.ts' region='child-to-parent'} -[Back to top](#top) +[Back to top](guide/component-communication#top) ## Parent interacts with child via *local variable* @@ -200,7 +200,7 @@ Test also that clicking the *Stop* button pauses the countdown timer: {@example 'cb-component-communication/e2e-spec.ts' region='countdown-timer-tests'} -[Back to top](#top) +[Back to top](guide/component-communication#top) ## Parent calls a *ViewChild* @@ -214,9 +214,9 @@ must read or write child component values or must call child component methods. When the parent component *class* requires that kind of access, we ***inject*** the child component into the parent as a *ViewChild*. -We'll illustrate this technique with the same [Countdown Timer](#countdown-timer-example) example. +We'll illustrate this technique with the same [Countdown Timer](guide/component-communication#countdown-timer-example) example. We won't change its appearance or behavior. -The child [CountdownTimerComponent](#countdown-timer-example) is the same as well. +The child [CountdownTimerComponent](guide/component-communication#countdown-timer-example) is the same as well. We are switching from the *local variable* to the *ViewChild* technique solely for the purpose of demonstration.Here is the parent, `CountdownViewChildParentComponent`: @@ -248,7 +248,7 @@ We use `setTimeout` to wait one tick and then revise the `seconds` method so that it takes future values from the timer component. ### Test it -Use [the same countdown timer tests](#countdown-tests) as before.[Back to top](#top) +Use [the same countdown timer tests](guide/component-communication#countdown-tests) as before.[Back to top](guide/component-communication#top) ## Parent and children communicate via a service @@ -298,4 +298,4 @@ and verify that the *History* meets expectations: {@example 'cb-component-communication/e2e-spec.ts' region='bidirectional-service'} -[Back to top](#top) \ No newline at end of file +[Back to top](guide/component-communication#top) \ No newline at end of file diff --git a/aio/content/guide/component-relative-paths.md b/aio/content/guide/component-relative-paths.md index 13952d743a..154dc8a27a 100644 --- a/aio/content/guide/component-relative-paths.md +++ b/aio/content/guide/component-relative-paths.md @@ -33,7 +33,7 @@ It would be much easier to write and maintain our application components if we c We can if we build our application as `commonjs` modules and load those modules with a suitable package loader such as `systemjs` or `webpack`. -Learn why [below](#why-default). +Learn why [below](guide/component-relative-paths#why-default). The Angular CLI uses these technologies and defaults to the *component-relative path* approach described here. @@ -98,7 +98,7 @@ The result looks like this: ~~~ {.alert.is-helpful} -Webpack users may prefer [an alternative approach](#webpack). +Webpack users may prefer [an alternative approach](guide/component-relative-paths#webpack). ~~~ @@ -189,6 +189,6 @@ properties that reference *component-relative URLS. {@example 'webpack/ts/src/app/app.component.ts'} -Webpack will do a `require` behind the scenes to load the templates and styles. Read more [here](../guide/webpack.html#highlights). +Webpack will do a `require` behind the scenes to load the templates and styles. Read more [here](guide/webpack). -See the [Introduction to Webpack](../guide/webpack.html). \ No newline at end of file +See the [Introduction to Webpack](guide/webpack). \ No newline at end of file diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index aee0d4a2de..9b38c0e8ad 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -16,12 +16,12 @@ This page describes how to load and apply these component styles. ## Table Of Contents -* [Using component styles](#using-component-styles) -* [Special selectors](#special-selectors) -* [Loading styles into components](#loading-styles) -* [Controlling view encapsulation: native, emulated, and none](#view-encapsulation) -* [Appendix 1: Inspecting the CSS generated in emulated view encapsulation](#inspect-generated-css) -* [Appendix 2: Loading styles with relative URLs](#relative-urls) +* [Using component styles](guide/component-styles#using-component-styles) +* [Special selectors](guide/component-styles#special-selectors) +* [Loading styles into components](guide/component-styles#loading-styles) +* [Controlling view encapsulation: native, emulated, and none](guide/component-styles#view-encapsulation) +* [Appendix 1: Inspecting the CSS generated in emulated view encapsulation](guide/component-styles#inspect-generated-css) +* [Appendix 2: Loading styles with relative URLs](guide/component-styles#relative-urls) You can run the in Plunker and download the code from there. @@ -120,7 +120,7 @@ The `/deep/` selector also has the alias `>>>`. You can use either interchangeab Use the `/deep/` and `>>>` selectors only with *emulated* view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the -[Controlling view encapsulation](#view-encapsulation) section. +[Controlling view encapsulation](guide/component-styles#view-encapsulation) section. ~~~ @@ -201,7 +201,7 @@ Choose from the following modes: view inside that shadow DOM. The component's styles are included within the shadow DOM. * `Emulated` view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. - For details, see [Appendix 1](#inspect-generated-css). + For details, see [Appendix 1](guide/component-styles#inspect-generated-css). * `None` means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md index 2f9444e53d..3c39681e54 100644 --- a/aio/content/guide/dependency-injection.md +++ b/aio/content/guide/dependency-injection.md @@ -11,13 +11,13 @@ we really can't build an Angular application without it. It's used so widely that almost everyone just calls it _DI_. In this chapter we'll learn what DI is and why we want it. -Then we'll learn [how to use it](#angular-di) in an Angular app. +Then we'll learn [how to use it](guide/dependency-injection#angular-di) in an Angular app. -- [Why dependency injection?](#why-dependency-injection) -- [Angular dependency injection](#angular-dependency-injection) -- [Injector providers](#injector-providers) -- [Dependency injection tokens](#dependency-injection-tokens) -- [Summary](#summary) +- [Why dependency injection?](guide/dependency-injection#why-dependency-injection) +- [Angular dependency injection](guide/dependency-injection#angular-dependency-injection) +- [Injector providers](guide/dependency-injection#injector-providers) +- [Dependency injection tokens](guide/dependency-injection#dependency-injection-tokens) +- [Summary](guide/dependency-injection#summary) Run the . @@ -170,7 +170,7 @@ That sounds nice. What does it do for us when building components in Angular? Let's see, one step at a time. We'll begin with a simplified version of the `HeroesComponent` -that we built in the [The Tour of Heroes](../tutorial/). +that we built in the [The Tour of Heroes](tutorial/). @@ -219,7 +219,7 @@ write the service code in its own file. Our `HeroService` exposes a `getHeroes` method that returns the same mock data as before, but none of its consumers need to know that. Notice the `@Injectable()` #{_decorator} above the service class. -We'll discuss its purpose [shortly](#injectable). +We'll discuss its purpose [shortly](guide/dependency-injection#injectable). We aren't even pretending this is a real service. If we were actually getting data from a remote server, the API would have to be @@ -239,7 +239,7 @@ We don't have to create an Angular injector. Angular creates an application-wide injector for us during the bootstrap process. We do have to configure the injector by registering the **providers** that create the services our application requires. -We'll explain what [providers](#providers) are later in this chapter. +We'll explain what [providers](guide/dependency-injection#providers) are later in this chapter. ### Registering providers in a component Here's a revised `HeroesComponent` that registers the `HeroService`. @@ -251,7 +251,7 @@ Here's a revised `HeroesComponent` that registers the `HeroService`. The `HeroListComponent` should get heroes from the injected `HeroService`. Per the dependency injection pattern, the component must ask for the service in its -constructor, [as we explained earlier](#ctor-injection). +constructor, [as we explained earlier](guide/dependency-injection#ctor-injection). It's a small change: @@ -301,10 +301,10 @@ would be explicitly created: {@example 'dependency-injection/ts/src/app/car/car-injector.ts' region='injector-create-and-call'} We won't find code like that in the Tour of Heroes or any of our other samples. -We *could* write code that [explicitly creates an injector](#explicit-injector) if we *had* to, but we rarely do. +We *could* write code that [explicitly creates an injector](guide/dependency-injection#explicit-injector) if we *had* to, but we rarely do. Angular takes care of creating and calling injectors when it creates components for us — whether through HTML markup, as in ``, -or after navigating to a component with the [router](./router.html). +or after navigating to a component with the [router](guide/router). If we let Angular do its job, we'll enjoy the benefits of automated dependency injection. ### Singleton services @@ -314,7 +314,7 @@ In our example, a single `HeroService` instance is shared among the However, Angular DI is an hierarchical injection system, which means that nested injectors can create their own service instances. -Learn more about that in the [Hierarchical Injectors](./hierarchical-dependency-injection.html) chapter. +Learn more about that in the [Hierarchical Injectors](guide/hierarchical-dependency-injection) chapter. ### Testing the component We emphasized earlier that designing a class for dependency injection makes the class easier to test. @@ -327,7 +327,7 @@ under test: {@example 'dependency-injection/ts/src/app/test.component.ts' region='spec'} -Learn more in [Testing](./testing.html). +Learn more in [Testing](guide/testing). ### When the service needs a service Our `HeroService` is very simple. It doesn't have any dependencies of its own. @@ -453,7 +453,7 @@ We wrote the `providers` #{_array} like this: {@example 'dependency-injection/ts/src/app/providers.component.ts' region='providers-3'} -The first is the [token](#token) that serves as the key for both locating a dependency value +The first is the [token](guide/dependency-injection#token) that serves as the key for both locating a dependency value and registering the provider. The second is a !{_secondParam}, @@ -528,8 +528,8 @@ which makes this object play the logger role. {@example 'dependency-injection/ts/src/app/providers.component.ts' region='providers-7'} See more `useValue` examples in the -[Non-class dependencies](#non-class-dependencies) and -[OpaqueToken](#opaquetoken) sections. +[Non-class dependencies](guide/dependency-injection#non-class-dependencies) and +[OpaqueToken](guide/dependency-injection#opaquetoken) sections.
    @@ -583,7 +583,7 @@ We inject both the `Logger` and the `UserService` into the factory provider and The `useFactory` field tells Angular that the provider is a factory function whose implementation is the `heroServiceFactory`. -The `deps` property is #{_an} #{_array} of [provider tokens](#token). +The `deps` property is #{_an} #{_array} of [provider tokens](guide/dependency-injection#token). The `Logger` and `UserService` classes serve as tokens for their own class providers. The injector resolves these tokens and injects the corresponding services into the matching factory function parameters. Notice that we captured the factory provider in #{_an} #{exportedvar}, `heroServiceProvider`. @@ -647,7 +647,7 @@ This is especially convenient when we consider that most dependency values are p {@example 'dependency-injection/ts/src/app/app.config.ts' region='config'} We'd like to make this configuration object available for injection. -We know we can register an object with a [value provider](#value-provider). +We know we can register an object with a [value provider](guide/dependency-injection#value-provider). ### OpaqueToken One solution to choosing a provider token for non-class dependencies is @@ -700,7 +700,7 @@ adding a parameter to a constructor. Angular dependency injection is more capable than we've described. We can learn more about its advanced features, beginning with its support for nested injectors, in the -[Hierarchical Dependency Injection](hierarchical-dependency-injection.html) chapter. +[Hierarchical Dependency Injection](guide/hierarchical-dependency-injection) chapter. ## Appendix: Working with injectors directly diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index 3c675a6f3b..2ec808d6d3 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -10,21 +10,21 @@ This page describes tools and techniques for deploy and optimize your Angular ap {@a toc} ## Table of contents -* [Overview](#overview) -* [Simplest deployment possible](#dev-deploy) -* [Optimize for production](#optimize) - * [Ahead-of-Time (AOT) compilation](#aot) - * [Webpack](#webpack) - * [Tree shaking with _rollup_](#rollup) - * [Pruned libraries](#prune) - * [Measure performance first](#measure) -* [Angular configuration](#angular-configuration) - * [The `base` tag](#base-tag) - * [Enable production mode](#enable-prod-mode) - * [Lazy loading](#lazy-loading) -* [Server configuration](#server-configuration) - * [Routed apps must fallback to `index.html`](#fallback) - * [CORS: requesting services from a different server](#cors) +* [Overview](guide/deployment#overview) +* [Simplest deployment possible](guide/deployment#dev-deploy) +* [Optimize for production](guide/deployment#optimize) + * [Ahead-of-Time (AOT) compilation](guide/deployment#aot) + * [Webpack](guide/deployment#webpack) + * [Tree shaking with _rollup_](guide/deployment#rollup) + * [Pruned libraries](guide/deployment#prune) + * [Measure performance first](guide/deployment#measure) +* [Angular configuration](guide/deployment#angular-configuration) + * [The `base` tag](guide/deployment#base-tag) + * [Enable production mode](guide/deployment#enable-prod-mode) + * [Lazy loading](guide/deployment#lazy-loading) +* [Server configuration](guide/deployment#server-configuration) + * [Routed apps must fallback to `index.html`](guide/deployment#fallback) + * [CORS: requesting services from a different server](guide/deployment#cors) {@a overview} @@ -34,20 +34,20 @@ This page describes tools and techniques for deploy and optimize your Angular ap This guide describes techniques for preparing and deploying an Angular application to a server running remotely. The techniques progress from _easy but suboptimal_ to _more optimal and more involved_. -* The [simple way](#dev-deploy "Simplest deployment possible") is to copy the development environment to the server. +* The [simple way](guide/deployment#dev-deploy "Simplest deployment possible") is to copy the development environment to the server. -* [_Ahead of Time_ compilation (AOT)](#aot "AOT Compilation") is the first of -[several optimization strategies](#optimize). -You'll also want to read the [detailed instructions in the AOT Cookbook](../cookbook/aot-compiler.html "AOT Cookbook"). +* [_Ahead of Time_ compilation (AOT)](guide/deployment#aot "AOT Compilation") is the first of +[several optimization strategies](guide/deployment#optimize). +You'll also want to read the [detailed instructions in the AOT Cookbook](cookbook/aot-compiler). -* [Webpack](#webpack "Webpack Optimization") is a popular general purpose packaging tool with a rich ecosystem, including plugins for AOT. -The Angular [webpack guide](webpack.html "Webpack: an introduction") can get you started and +* [Webpack](guide/deployment#webpack "Webpack Optimization") is a popular general purpose packaging tool with a rich ecosystem, including plugins for AOT. +The Angular [webpack guide](guide/webpack) can get you started and _this_ page provides additional optimization advice, but you'll probably have to learn more about webpack on your own. -* The [Angular configuration](#angular-configuration "Angular configuration") section calls attention to +* The [Angular configuration](guide/deployment#angular-configuration "Angular configuration") section calls attention to specific client application changes that could improve performance. -* The [Server configuration](#server-configuration "Server configuration") section describes +* The [Server configuration](guide/deployment#server-configuration "Server configuration") section describes server-side changes that may be necessary, _no matter how you deploy the application_. @@ -61,7 +61,7 @@ directly out of the development environment. It's already running locally. You'll just copy it, almost _as is_, to a non-local server that others can reach. -1. Copy _everything_ (or [_almost_ everything](#node-modules "Loading npm packages from the web")) +1. Copy _everything_ (or [_almost_ everything](guide/deployment#node-modules "Loading npm packages from the web")) from the local project folder to a folder on the server. 1. If you're serving the app out of a subfolder, @@ -69,12 +69,12 @@ edit a version of `index.html` to set the `` appropriately. For example, if the URL to `index.html` is `www.mysite.com/my/app/`, set the _base href_ to ``. Otherwise, leave it alone. -[More on this below](#base-tag). +[More on this below](guide/deployment#base-tag). 1. Configure the server to redirect requests for missing files to `index.html`. -[More on this below](#fallback). +[More on this below](guide/deployment#fallback). -1. Enable production mode as [described below](#enable-prod-mode) (optional). +1. Enable production mode as [described below](guide/deployment#enable-prod-mode) (optional). That's the simplest deployment you can do. @@ -83,7 +83,7 @@ That's the simplest deployment you can do. This is _not_ a production deployment. It's not optimized and it won't be fast for users. It might be good enough for sharing your progress and ideas internally with managers, teammates, and other stakeholders. -Be sure to read about [optimizing for production](#optimize "Optimizing for production") below. +Be sure to read about [optimizing for production](guide/deployment#optimize "Optimizing for production") below. @@ -184,7 +184,7 @@ The following trivial router sample app shows these changes. Practice with this sample before attempting these techniques on your application. -1. Follow the [setup instructions](../guide/setup.html "Angular QuickStart setup") for creating a new project +1. Follow the [setup instructions](guide/setup) for creating a new project named . 1. Add the "Simple deployment" sample files shown above. @@ -254,9 +254,9 @@ Apps compiled with AOT launch faster for several reasons. * You don't download the Angular compiler, which is pretty big on its own. * The compiler discards unused Angular directives that a tree-shaking tool can then exclude. -Learn more about AOT Compilation in the [AOT Cookbook](../cookbook/aot-compiler.html "AOT Cookbook") +Learn more about AOT Compilation in the [AOT Cookbook](cookbook/aot-compiler) which describes running the AOT compiler from the command line -and using [_rollup_](#rollup) for bundling, minification, uglification and tree shaking. +and using [_rollup_](guide/deployment#rollup) for bundling, minification, uglification and tree shaking. {@a webpack} @@ -264,7 +264,7 @@ and using [_rollup_](#rollup) for bundling, minification, uglification and tree Webpack 2 is another great option for inlining templates and style-sheets, for bundling, minifying, and uglifying the application. -The "[Webpack: an introduction](webpack.html "Webpack: an introduction")" guide will get you started +The "[Webpack: an introduction](guide/webpack)" guide will get you started using webpack with Angular. Consider configuring _Webpack_ with the official @@ -338,7 +338,7 @@ For example, given the ``, the browser resolves a URL such into a server request for `my/app/some/place/foo.jpg`. During navigation, the Angular router uses the _base href_ as the base path to component, template, and module files. -See also the [*APP_BASE_HREF*](../api/common/index/APP_BASE_HREF-let.html "API: APP_BASE_HREF") alternative.In development, you typically start the server in the folder that holds `index.html`. +See also the [*APP_BASE_HREF*](api/common/index/APP_BASE_HREF-let) alternative.In development, you typically start the server in the folder that holds `index.html`. That's the root folder and you'd add `` near the top of `index.html` because `/` is the root of the app. But on the shared or production server, you might serve the app from a subfolder. @@ -361,7 +361,7 @@ console: Switching to production mode can make it run faster by disabling development specific checks such as the dual change detection cycles. -To enable [production mode](../api/core/index/enableProdMode-function.html) when running remotely, add the following code to the `main.ts`. +To enable [production mode](api/core/index/enableProdMode-function) when running remotely, add the following code to the `main.ts`. {@example 'deployment/ts/src/main.ts' region='enableProdMode'} @@ -375,8 +375,8 @@ You can dramatically reduce launch time by only loading the application modules absolutely must be present when the app starts. Configure the Angular Router to defer loading of all other modules (and their associated code), either by -[waiting until the app has launched](router.html#preloading "Preloading") -or by [_lazy loading_](router.html#asynchronous-routing "Lazy loading") +[waiting until the app has launched](guide/router) +or by [_lazy loading_](guide/router) them on demand. #### Don't eagerly import something from a lazy loaded module @@ -545,5 +545,5 @@ Read about how to enable CORS for specific servers at {@a next-steps} ## Next steps - If you want to go beyond the [simple _copy-deploy_](#dev-deploy "Simplest deployment possible") approach, - read the [AOT Cookbook](../cookbook/aot-compiler.html "AOT Cookbook") next. \ No newline at end of file + If you want to go beyond the [simple _copy-deploy_](guide/deployment#dev-deploy "Simplest deployment possible") approach, + read the [AOT Cookbook](cookbook/aot-compiler) next. \ No newline at end of file diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md index ae30fe7a01..fbc01107ee 100644 --- a/aio/content/guide/displaying-data.md +++ b/aio/content/guide/displaying-data.md @@ -19,9 +19,9 @@ The final UI looks like this: # Contents -* [Showing component properties with interpolation](#interpolation). -* [Showing !{_an} !{_array} property with NgFor](#ngFor). -* [Conditional display with NgIf](#ngIf). +* [Showing component properties with interpolation](guide/displaying-data#interpolation). +* [Showing !{_an} !{_array} property with NgFor](guide/displaying-data#ngFor). +* [Conditional display with NgIf](guide/displaying-data#ngIf). The demonstrates all of the syntax and code snippets described in this page. @@ -31,7 +31,7 @@ The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`. -Follow the [setup](setup.html) instructions for creating a new project +Follow the [setup](guide/setup) instructions for creating a new project named . Then modify the file by @@ -93,22 +93,22 @@ It marks that `
  • ` element (and its children) as the "repeater template": ~~~ {.alert.is-important} Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax. -For more information, see the [Template Syntax](./template-syntax.html#ngFor) page. +For more information, see the [Template Syntax](guide/template-syntax) page. ~~~ Notice the `hero` in the `ngFor` double-quoted instruction; it is an example of a template input variable. Read -more about template input variables in the [microsyntax](./template-syntax.html#microsyntax) section of -the [Template Syntax](./template-syntax.html) page. +more about template input variables in the [microsyntax](guide/template-syntax) section of +the [Template Syntax](guide/template-syntax) page. Angular duplicates the `
  • ` for each item in the list, setting the `hero` variable to the item (the hero) in the current iteration. Angular uses that variable as the context for the interpolation in the double curly braces. In this case, `ngFor` is displaying !{_an} !{_array}, but `ngFor` can -repeat items for any [iterable](!{_iterableUrl}) object.Now the heroes appear in an unordered list. +repeat items for any [iterable](guide/!{_iterableUrl}) object.Now the heroes appear in an unordered list.
    After ngfor @@ -150,7 +150,7 @@ To see it in action, add the following paragraph at the bottom of the template: ~~~ {.alert.is-important} Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax. -Read more about `ngIf` and `*` in the [ngIf section](./template-syntax.html#ngIf) of the [Template Syntax](./template-syntax.html) page. +Read more about `ngIf` and `*` in the [ngIf section](guide/template-syntax) of the [Template Syntax](guide/template-syntax) page. ~~~ @@ -160,8 +160,8 @@ The template expression inside the double quotes, When the component's list of heroes has more than three items, Angular adds the paragraph to the DOM and the message appears. If there are three or fewer items, Angular omits the paragraph, so no message appears. For more information, -see the [template expressions](./template-syntax.html#template-expressions) section of the -[Template Syntax](./template-syntax.html) page. +see the [template expressions](guide/template-syntax) section of the +[Template Syntax](guide/template-syntax) page. ~~~ {.alert.is-helpful} diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index 844698f156..d3de623eb0 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -11,11 +11,11 @@ In this cookbook we show how to use `ComponentFactoryResolver` to add components ## Table of contents - [Dynamic Component Loading](#dynamic-loading) + [Dynamic Component Loading](guide/dynamic-component-loader#dynamic-loading) - [Where to load the component](#where-to-load) + [Where to load the component](guide/dynamic-component-loader#where-to-load) - [Loading components](#loading-components) + [Loading components](guide/dynamic-component-loader#loading-components) ## Dynamic Component Loading diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md index 87815ddff5..73cba29ec4 100644 --- a/aio/content/guide/dynamic-form.md +++ b/aio/content/guide/dynamic-form.md @@ -21,15 +21,15 @@ The agency is constantly tinkering with the application process. We can create the forms on the fly *without changing our application code*. ## Table of contents - [Bootstrap](#bootstrap) + [Bootstrap](guide/dynamic-form#bootstrap) - [Question Model](#object-model) + [Question Model](guide/dynamic-form#object-model) - [Form Component](#form-component) + [Form Component](guide/dynamic-form#form-component) - [Questionnaire Metadata](#questionnaire-metadata) + [Questionnaire Metadata](guide/dynamic-form#questionnaire-metadata) - [Dynamic Template](#dynamic-template) + [Dynamic Template](guide/dynamic-form#dynamic-template) **See the **. ## Bootstrap @@ -165,4 +165,4 @@ The final form looks like this: Dynamic-Form
    -[Back to top](#top) \ No newline at end of file +[Back to top](guide/dynamic-form#top) \ No newline at end of file diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md index 16cef1695a..ac290d6439 100644 --- a/aio/content/guide/form-validation.md +++ b/aio/content/guide/form-validation.md @@ -12,21 +12,21 @@ We can improve overall data quality by validating user input for accuracy and co In this cookbook we show how to validate user input in the UI and display useful validation messages using first the template-driven forms and then the reactive forms approach. -Learn more about these choices in the [Forms chapter.](../guide/forms.html) +Learn more about these choices in the [Forms chapter.](guide/forms) {@a toc} ## Table of Contents - [Simple Template-Driven Forms](#template1) + [Simple Template-Driven Forms](guide/form-validation#template1) - [Template-Driven Forms with validation messages in code](#template2) + [Template-Driven Forms with validation messages in code](guide/form-validation#template2) - [Reactive Forms with validation in code](#reactive) + [Reactive Forms with validation in code](guide/form-validation#reactive) - [Custom validation](#custom-validation) + [Custom validation](guide/form-validation#custom-validation) - [Testing](#testing) + [Testing](guide/form-validation#testing) {@a live-example} @@ -85,7 +85,7 @@ The full template repeats this kind of layout for each data entry control on the We shouldn't show errors for a new hero before the user has had a chance to edit the value. The checks for `dirty` and `touched` prevent premature display of errors. -Learn about `dirty` and `touched` in the [Forms](../guide/forms.html) chapter.The component class manages the hero model used in the data binding +Learn about `dirty` and `touched` in the [Forms](guide/forms) chapter.The component class manages the hero model used in the data binding as well as other code to support the view. @@ -148,8 +148,8 @@ The `` element HTML is almost the same. There are noteworthy differences: - The hard-code error message `` are gone. - There's a new attribute, `forbiddenName`, that is actually a custom validation directive. -It invalidates the control if the user enters "bob" anywhere in the name ([try it](#live-example)). -We discuss [custom validation directives](#custom-validation) later in this cookbook. +It invalidates the control if the user enters "bob" anywhere in the name ([try it](guide/form-validation#live-example)). +We discuss [custom validation directives](guide/form-validation#custom-validation) later in this cookbook. - The `#name` template variable is gone because we no longer refer to the Angular control for this element. @@ -179,7 +179,7 @@ the name of that variable as a string (`'heroForm'` in this case). - The `heroForm` object changes several times during the life of the component, most notably when we add a new hero. We'll have to re-inspect it periodically. -- Angular calls the `ngAfterViewChecked` [lifecycle hook method](../guide/lifecycle-hooks.html#afterview) +- Angular calls the `ngAfterViewChecked` [lifecycle hook method](guide/lifecycle-hooks) when anything changes in the view. That's the right time to see if there's a new `heroForm` object. @@ -245,7 +245,7 @@ Here's how we imported it in the `HeroFormTemplateModule`. We haven't talked about the `SharedModule` or its `SubmittedComponent` which appears at the bottom of every form template in this cookbook. -They're not germane to the validation story. Look at the [live example](#live-example) if you're interested. +They're not germane to the validation story. Look at the [live example](guide/form-validation#live-example) if you're interested. @@ -266,7 +266,7 @@ This approach requires a bit more effort. *You have to write the control model a In return, you can * add, change, and remove validation functions on the fly * manipulate the control model dynamically from within the component -* [test](#testing) validation and control logic with isolated unit tests. +* [test](guide/form-validation#testing) validation and control logic with isolated unit tests. The third cookbook sample re-writes the hero form in _reactive forms_ style. @@ -346,7 +346,7 @@ Here's the section of code devoted to that process, paired with the template-dri - we inject the `FormBuilder` in a constructor. -- we call a `buildForm` method in the `ngOnInit` [lifecycle hook method](../guide/lifecycle-hooks.html#hooks-overview) +- we call a `buildForm` method in the `ngOnInit` [lifecycle hook method](guide/lifecycle-hooks) because that's when we'll have the hero data. We'll call it again in the `addHero` method. A real app would retrieve the hero asynchronously from a data service, a task best performed in the `ngOnInit` hook.- the `buildForm` method uses the `FormBuilder` (`fb`) to declare the form control model. Then it attaches the same `onValueChanged` handler (there's a one line difference) @@ -363,9 +363,9 @@ Most of the validator functions are stock validators provided by Angular as stat Angular has stock validators that correspond to the standard HTML validation attributes. The `forbiddenNames` validator on the `"name"` control is a custom validator, -discussed in a separate [section below](#custom-validation). +discussed in a separate [section below](guide/form-validation#custom-validation). - Learn more about `FormBuilder` in the [Introduction to FormBuilder](../guide/reactive-forms.html#formbuilder) section of Reactive Forms guide. + Learn more about `FormBuilder` in the [Introduction to FormBuilder](guide/reactive-forms) section of Reactive Forms guide. #### Committing hero value changes In two-way data binding, the user's changes flow automatically from the controls back to the data model properties. @@ -410,7 +410,7 @@ Here's the complete reactive component file, compared to the two template-driven -Run the [live example](#live-example) to see how the reactive form behaves +Run the [live example](guide/form-validation#live-example) to see how the reactive form behaves and to compare all of the files in this cookbook sample. @@ -461,7 +461,7 @@ The rest of the directive is unremarkable and we present it here without further {@example 'cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts' region='directive'} -See the [Attribute Directives](../guide/attribute-directives.html) chapter. +See the [Attribute Directives](guide/attribute-directives) chapter. diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md index 825c87abb1..57773053dc 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -29,7 +29,7 @@ You can run the in Plunker and download the code f ## Template-driven forms -You can build forms by writing templates in the Angular [template syntax](./template-syntax.html) with +You can build forms by writing templates in the Angular [template syntax](guide/template-syntax) with the form-specific directives and techniques described in this page. You can also use a reactive (or model-driven) approach to build forms. @@ -74,7 +74,7 @@ You'll build this form in small steps: 1. Disable the form’s *Submit* button until the form is valid. ## Setup -Follow the [setup](setup.html) instructions for creating a new project +Follow the [setup](guide/setup) instructions for creating a new project named angular-forms. ## Create the Hero model class @@ -119,8 +119,8 @@ Understanding this component requires only the Angular concepts covered in previ - You defined dummy data for `model` and `powers`, as befits a demo. Down the road, you can inject a data service to get and save real data or perhaps expose these properties as inputs and outputs -(see [Input and output properties](./template-syntax.html#inputs-outputs) on the -[Template Syntax](./template-syntax.html) page) for binding to a +(see [Input and output properties](guide/template-syntax) on the +[Template Syntax](guide/template-syntax) page) for binding to a parent component. This is not a concern now and these future changes won't affect the form. - You added a `diagnostic` property to return a JSON representation of the model. It'll help you see what you're doing during development; you've left yourself a cleanup note to discard it later. @@ -230,7 +230,7 @@ You maintain that list internally (in `HeroFormComponent`). You'll add a `select` to the form and bind the options to the `powers` list using `ngFor`, -a technique seen previously in the [Displaying Data](./displaying-data.html) page. +a technique seen previously in the [Displaying Data](guide/displaying-data) page. Add the following HTML *immediately below* the *Alter Ego* group: This code repeats the `