diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
index f5bd7c3f02..6fa5c2d6b3 100644
--- a/aio/content/guide/ajs-quick-reference.md
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -372,7 +372,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#component).
+ For more information, see [Architecture Overview](guide/architecture#components).
@@ -1315,4 +1315,4 @@ also encapsulate a style sheet within a specific component.
-[Back to top](guide/ajs-quick-reference#top)
\ No newline at end of file
+[Back to top](guide/ajs-quick-reference#top)
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index a7638dcc3e..18cdab19fc 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -13,7 +13,7 @@ during a build process.
# Contents
-* [Overview](guide/overview)
+* [Overview](guide/aot-compiler#overview)
* [Ahead-of-time (AOT) vs just-in-time (JIT)](guide/aot-compiler#aot-jit)
* [Why do AOT compilation?](guide/aot-compiler#why-aot)
* [Compile with AOT](guide/aot-compiler#compile)
@@ -221,7 +221,7 @@ Here is AOT bootstrap in `main.ts` next to the original JIT version:
-Be sure to [recompile](guide/aot-compiler#compiling-aot) with `ngc`!
+Be sure to [recompile](guide/aot-compiler#compile) with `ngc`!
{@a tree-shaking}
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index 73a92d3f20..f145c4d610 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -669,7 +669,7 @@ A provider is something that can create or return a service, typically the servi
You can register providers in modules or in components.
-In general, add providers to the [root module](guide/architecture#module) so that
+In general, add providers to the [root module](guide/architecture#modules) so that
the same instance of a service is available everywhere.
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index b353d05d0a..25f47e9574 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -21,7 +21,7 @@ An **Attribute** directive changes the appearance or behavior of a DOM element.
Try the .
-
+{@a directive-overview}
## Directives overview
@@ -32,7 +32,7 @@ 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) guide.
+You saw a component for the first time in the [QuickStart](guide/quickstart) guide.
*Structural Directives* change the structure of the view.
Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf).
@@ -61,7 +61,7 @@ when the user hovers over that element. You can apply it like this:
-
+{@a write-directive}
### Write the directive code
@@ -126,7 +126,7 @@ into the constructor.
`ElementRef` is a service that grants direct access to the DOM element
through its `nativeElement` property.
-
+{@a apply-directive}
## Apply the attribute directive
@@ -207,7 +207,7 @@ It created an instance of the `HighlightDirective` class and
injected a reference to the `
` element into the directive's constructor
which sets the `
` element's background style to yellow.
-
+{@a respond-to-user}
## Respond to user-initiated events
@@ -284,7 +284,7 @@ the mouse hovers over the `p` and disappears as it moves out.
-
+{@a bindings}
## Pass values into the directive with an _@Input_ data binding
@@ -442,7 +442,7 @@ Here are the harness and directive in action.
-
+{@a second-property}
## Bind to a second property
@@ -541,7 +541,7 @@ The final source code follows:
You can also experience and download the .
-
+{@a why-input}
### Appendix: Why add _@Input_?
diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md
index 909e5f662f..ca8c887018 100644
--- a/aio/content/guide/browser-support.md
+++ b/aio/content/guide/browser-support.md
@@ -335,7 +335,8 @@ Here are the features which may require additional polyfills:
@@ -351,9 +352,10 @@ Here are the features which may require additional polyfills:
-
+
- Date, currency, decimal and percent pipes
+
+ [Date](api/common/DatePipe), [currency](api/common/CurrencyPipe), [decimal](api/common/DecimalPipe) and [percent](api/common/PercentPipe) pipes
@@ -371,7 +373,8 @@ Here are the features which may require additional polyfills:
- NgClass on SVG elements
+
+ [NgClass](api/common/NgClass) on SVG elements
@@ -389,7 +392,8 @@ Here are the features which may require additional polyfills:
- Http when sending and receiving binary data
+
+ [Http](guide/http) when sending and receiving binary data
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index 843f7b3228..1cc7cc3c1e 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -13,7 +13,7 @@ This log calls attention to recent significant changes.
## Updated to Angular 4.0. Documentation for Angular 2.x can be found at [v2.angular.io](https://v2.angular.io).
-## All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)
+## All mention of moduleId removed. "Component relative paths" guide deleted (2017-03-13)
We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.
This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.
@@ -94,7 +94,7 @@ Linked to these plunkers in [Testing](guide/testing#live-examples) and [Setup an
## Internationalization: pluralization and _select_ (2016-11-30)
-The [Internationalization (i18n)](cookbook/i18n) guide explains how to handle pluralization and
+The [Internationalization (i18n)](guide/i18n) guide explains how to handle pluralization and
translation of alternative texts with `select`.
The sample demonstrates these features too.
@@ -126,7 +126,7 @@ 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) cookbook
+The updated [TypeScript to JavaScript](guide/ts-to-js) guide
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.
@@ -168,9 +168,9 @@ 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)
+## NEW "Ahead of time (AOT) Compilation" guide (2016-10-11)
-The NEW [Ahead of time (AOT) Compilation](guide/aot-compiler) cookbook
+The NEW [Ahead of time (AOT) Compilation](guide/aot-compiler) guide
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.
@@ -187,11 +187,11 @@ The _Routing Module_ replaces the previous _routing object_ involving the `Modul
All guided samples with routing use the _Routing Module_ and prose content has been updated,
most conspicuously in the
-[NgModule](guide/ngmodule) guide and [NgModule FAQ](cookbook/ngmodule-faq) cookbook.
+[NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
-## New "Internationalization" Cookbook (2016-09-30)
+## New "Internationalization" guide (2016-09-30)
-Added a new [Internationalization (i18n)](cookbook/i18n) cookbook that shows how
+Added a new [Internationalization (i18n)](guide/i18n) guide 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)
diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md
index fe1581581b..ad3d2ee648 100644
--- a/aio/content/guide/cli-quickstart.md
+++ b/aio/content/guide/cli-quickstart.md
@@ -13,7 +13,7 @@ as testing, bundling, and deployment.
The goal in this guide is to build and run a simple Angular
application in TypeScript, using the Angular CLI
-while adhering to the [Style Guide](guide/guide/styleguide) recommendations that
+while adhering to the [Style Guide](guide/styleguide) recommendations that
benefit _every_ Angular project.
By the end of the chapter, you'll have a basic understanding of development with the CLI
@@ -64,7 +64,7 @@ Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globa
-
+
Step 2. Create a new project
@@ -173,7 +173,7 @@ Looking good!
## What's next?
That's about all you'd expect to do in a "Hello, World" app.
-You're ready to take the [Tour of Heroes Tutorial](guide/tutorial) and build
+You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
a small application that demonstrates the great things you can build with Angular.
Or you can stick around a bit longer to learn about the files in your brand new project.
@@ -355,7 +355,7 @@ Any files outside of this folder are meant to support building your app.
- Defines `AppModule`, the [root module](guide/guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
+ Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
Right now it declares only the `AppComponent`.
Soon there will be more components to declare.
@@ -459,7 +459,7 @@ Any files outside of this folder are meant to support building your app.
Different browsers have different levels of support of the web standards.
Polyfills help normalize those differences.
You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
- the [Browser Support guide](guide/guide/browser-support) for more information.
+ the [Browser Support guide](guide/browser-support) for more information.
@@ -812,8 +812,8 @@ These files go in the root folder next to `src/`.
### Next Step
-If you're new to Angular, continue on the
-[learning path](guide/guide/learning-angular "Angular learning path").
+If you're new to Angular, continue with the
+[tutorial](tutorial "Tour of Heroes tutorial").
You can skip the "Setup" step since you're already using the Angular CLI setup.
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md
index efe258adfc..87018b8d68 100644
--- a/aio/content/guide/dependency-injection-in-action.md
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -82,7 +82,7 @@ is all the registration you need.
A *provider* is something that can create or deliver a service.
Angular creates a service instance from a class provider by using `new`.
-Read more about providers in the [Dependency Injection](guide/dependency-injection#!)
+Read more about providers in the [Dependency Injection](guide/dependency-injection#injector-providers)
guide.
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
index e04267206e..0c4eb79c0b 100644
--- a/aio/content/guide/dependency-injection.md
+++ b/aio/content/guide/dependency-injection.md
@@ -53,7 +53,7 @@ and [how to use it](guide/dependency-injection#angular-di) in an Angular app.
Run the .
-
+{@a why-di }
## Why dependency injection?
@@ -248,7 +248,7 @@ This is what a **dependency injection framework** is all about.
Now that you know what dependency injection is and appreciate its benefits,
read on to see how it is implemented in Angular.
-
+{@a angular-di}
## Angular dependency injection
@@ -440,7 +440,7 @@ the `HeroesComponent`.
Also see *"Should I add app-wide providers to the root `AppModule` or
-the root `AppComponent`?"* in the [NgModule FAQ](cookbook/ngmodule-faq#q-root-component-or-module).
+the root `AppComponent`?"* in the [NgModule FAQ](guide/ngmodule-faq#q-root-component-or-module).
@@ -611,7 +611,7 @@ You call that property within the `getHeroes()` method when anyone asks for hero
### Why _@Injectable()_?
-**@Injectable()** marks a class as available to an
+**[@Injectable()](api/core/Injectable)** marks a class as available to an
injector for instantiation. Generally speaking, an injector reports an
error when trying to instantiate a class that is not marked as
`@Injectable()`.
@@ -671,7 +671,7 @@ like `HeroesComponent`. So why doesn't `HeroesComponent` have
You *can* add it if you really want to. It isn't necessary because the
`HeroesComponent` is already marked with `@Component`, and this
decorator class (like `@Directive` and `@Pipe`, which you learn about later)
-is a subtype of @Injectable(). It is in
+is a subtype of [@Injectable()](api/core/Injectable). It is in
fact `@Injectable()` decorators that
identify a class as a target for instantiation by an injector.
@@ -692,7 +692,7 @@ the compiler adds the metadata to the generated JavaScript
for _every class with at least one decorator_.
While any decorator will trigger this effect, mark the service class with the
-@Injectable() decorator
+[@Injectable()](api/core/Injectable) decorator
to make the intent clear.
@@ -717,7 +717,7 @@ The application will fail mysteriously if you forget the parentheses.
-
+{@a logger-service}
## Creating and registering a logger service
@@ -762,7 +762,7 @@ create and inject into a new `HeroListComponent`.
The chain of creations started with the `Logger` provider. *Providers* are the subject of the next section.
-
+{@a providers}
## Injector providers
@@ -1038,7 +1038,7 @@ Here you see the new and the old implementation side-by-side:
-
+{@a token}
## Dependency injection tokens
@@ -1147,7 +1147,7 @@ There is no interface type information left for Angular to find at runtime.
### _InjectionToken_
One solution to choosing a provider token for non-class dependencies is
-to define and use an InjectionToken.
+to define and use an [*InjectionToken*](api/core/InjectionToken).
The definition of such a token looks like this:
@@ -1239,7 +1239,7 @@ You can learn more about its advanced features, beginning with its support for
nested injectors, in
[Hierarchical Dependency Injection](guide/hierarchical-dependency-injection).
-
+{@a explicit-injector}
## Appendix: Working with injectors directly
@@ -1286,8 +1286,7 @@ must acquire services generically and dynamically.
-
-
+{@a one-class-per-file}
## Appendix: Why have one class per file
diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md
index d1e1b96cab..5d5b37b446 100644
--- a/aio/content/guide/deployment.md
+++ b/aio/content/guide/deployment.md
@@ -381,7 +381,7 @@ During navigation, the Angular router uses the _base href_ as the base path to c
-See also the [*APP_BASE_HREF*](api/common/index/APP_BASE_HREF-let "API: APP_BASE_HREF") alternative.
+See also the [*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF") alternative.
@@ -415,7 +415,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) when running remotely, add the following code to the `main.ts`.
+To enable [production mode](api/core/enableProdMode) when running remotely, add the following code to the `main.ts`.
diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md
index d28bcdce89..a7fa20d696 100644
--- a/aio/content/guide/displaying-data.md
+++ b/aio/content/guide/displaying-data.md
@@ -41,7 +41,7 @@ snippets described in this page.
-
+{@a interpolation}
## Showing component properties with interpolation
The easiest way to display a component property
@@ -162,7 +162,7 @@ Although this example uses variable assignment to initialize the components, you
This app uses more terse "variable assignment" style simply for brevity.
-
+{@a ngFor}
## Showing an array property with ***ngFor**
@@ -306,7 +306,7 @@ Fix that to display only the hero's `name` property.
The display looks the same, but the code is clearer.
-
+{@a ngIf}
## Conditional display with NgIf
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md
index ef446e6e92..7998d97527 100644
--- a/aio/content/guide/dynamic-form.md
+++ b/aio/content/guide/dynamic-form.md
@@ -6,6 +6,7 @@ Render dynamic forms with FormGroup.
@description
+{@a top}
Building handcrafted forms can be costly and time-consuming,
especially if you need a great number of them, they're similar to each other, and they change frequently
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
index fd8889451a..3c54b42b47 100644
--- a/aio/content/guide/forms.md
+++ b/aio/content/guide/forms.md
@@ -29,7 +29,7 @@ This page shows you how to build a simple form from scratch. Along the way you'l
You can run the in Plunker and download the code from there.
-
+{@a template-driven}
## Template-driven forms
@@ -364,7 +364,7 @@ This code repeats the `
-
+{@a http-providers}
# Providing HTTP services
@@ -167,7 +167,7 @@ Loading its module now saves time.
-
+{@a http-client}
## The Tour of Heroes HTTP client demo
@@ -257,7 +257,7 @@ With a basic understanding of the component, you're ready to look inside the `He
{@a HeroService}
-
+{@a fetch-data}
## Fetch data with _http.get()_
@@ -580,7 +580,7 @@ In the `headers` object, the `Content-Type` specifies that the body represents J
Next, the `headers` object is used to configure the `options` object. The `options`
object is a new instance of `RequestOptions`, a class that allows you to specify
-certain settings when instantiating a request. In this way, [headers](api/http/index/Headers-class) is one of the [RequestOptions](api/http/index/RequestOptions-class).
+certain settings when instantiating a request. In this way, [headers](api/http/Headers) is one of the [RequestOptions](api/http/RequestOptions).
In the `return` statement, `options` is the *third* argument of the `post()` method, as shown above.
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
index d0bffab4a9..f7e200aea2 100644
--- a/aio/content/guide/lifecycle-hooks.md
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -292,7 +292,7 @@ Other Angular sub-systems may have their own lifecycle hooks apart from these co
3rd party libraries might implement their hooks as well in order to give developers more
control over how these libraries are used.
-
+{@a the-sample}
## Lifecycle examples
@@ -648,7 +648,7 @@ This example monitors the `OnChanges` hook.
The `ngOnChanges()` method takes an object that maps each changed property name to a
-[SimpleChange](api/core/index/SimpleChange-class) object holding the current and previous property values.
+[SimpleChange](api/core/SimpleChange) object holding the current and previous property values.
This hook iterates over the changed properties and logs them.
The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
@@ -760,7 +760,7 @@ The `AfterViewComponent` displays this child view *within its template*:
The following hooks take action based on changing values *within the child view*,
which can only be reached by querying for the child view via the property decorated with
-[@ViewChild](api/core/index/ViewChild-decorator).
+[@ViewChild](api/core/ViewChild).
@@ -896,7 +896,7 @@ projected into the component.
The following *AfterContent* hooks take action based on changing values in a *content child*,
which can only be reached by querying for them via the property decorated with
-[@ContentChild](api/core/index/ContentChild-decorator).
+[@ContentChild](api/core/ContentChild).
diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md
index e327f1ceba..c8eb6e9967 100644
--- a/aio/content/guide/ngmodule-faq.md
+++ b/aio/content/guide/ngmodule-faq.md
@@ -358,7 +358,7 @@ The `forRoot` static method is a convention that makes it easy for developers to
The `RouterModule.forRoot` method is a good example.
Apps pass a `Routes` object to `RouterModule.forRoot` in order to configure the app-wide `Router` service with routes.
-`RouterModule.forRoot` returns a [ModuleWithProviders](api/core/index/ModuleWithProviders-interface).
+`RouterModule.forRoot` returns a [ModuleWithProviders](api/core/ModuleWithProviders).
You add that result to the `imports` list of the root `AppModule`.
diff --git a/aio/content/guide/ngmodule.md b/aio/content/guide/ngmodule.md
index d961c58340..f7d1314593 100644
--- a/aio/content/guide/ngmodule.md
+++ b/aio/content/guide/ngmodule.md
@@ -32,10 +32,10 @@ This page covers NgModules in greater depth.
* [Shared modules](guide/ngmodule#shared-module "Create modules for commonly used components, directives, and pipes")
* [The Core module](guide/ngmodule#core-module "Create a core module with app-wide singleton services and single-use components")
* [Configure core services with _forRoot_](guide/ngmodule#core-for-root "Configure providers during module import")
-* [Prevent re-import of the _CoreModule_](guide/ngmodule#prevent-reimport "because bad things happen if a lazy loaded module imports Core")
+* [Prevent reimport of the _CoreModule_](guide/ngmodule#prevent-reimport "because bad things happen if a lazy loaded module imports Core")
+
### Live examples
@@ -52,7 +52,7 @@ Here's an index to live examples at key moments in the evolution of the sample:
This page covers NgModule concepts in a tutorial fashion.
-The companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") cookbook
+The companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") guide
offers answers to specific design and implementation questions.
Read this page before reading those FAQs.
@@ -157,7 +157,7 @@ Angular offers a variety of bootstrapping options targeting multiple platforms.
This page describes two options, both targeting the browser.
### Dynamic bootstrapping with the just-in-time (JIT) compiler
-In the first, _dynamic_ option, the [Angular compiler](cookbook/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
+In the first, _dynamic_ option, the [Angular compiler](guide/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
compiles the application in the browser and then launches the app.
@@ -374,7 +374,7 @@ More accurately, `NgIf` is declared in `CommonModule` from `@angular/common`.
`CommonModule` contributes many of the common directives that applications need, including `ngIf` and `ngFor`.
-`BrowserModule` imports `CommonModule` and [re-exports](cookbook/ngmodule-faq#q-re-export) it.
+`BrowserModule` imports `CommonModule` and [re-exports](guide/ngmodule-faq#q-re-export) it.
The net effect is that an importer of `BrowserModule` gets `CommonModule` directives automatically.
@@ -404,7 +404,7 @@ implemented with Angular forms in the [template-driven form](guide/forms#templat
You can write Angular form components in
template-driven or
-[reactive](cookbook/dynamic-form) style.
+[reactive](guide/dynamic-form) style.
The following sample imports the `FormsModule` from `@angular/forms` because
@@ -594,8 +594,8 @@ Now you can inject `ContactService` (like `UserService`) into any component in t
To inject `ContactService`, you must first import its _type_.
Only Contact components should import the `ContactService` type.
- Read more in the [How do I restrict service scope to a module?](cookbook/ngmodule-faq#q-component-scoped-providers) section
- of the [NgModule FAQs](cookbook/ngmodule-faq) page.
+ Read more in the [How do I restrict service scope to a module?](guide/ngmodule-faq#q-component-scoped-providers) section
+ of the [NgModule FAQs](guide/ngmodule-faq) page.
@@ -824,8 +824,8 @@ Before `ContactComponent` can bind with `[(ngModel)]`, its `ContactModule` must
You also replaced `BrowserModule` by `CommonModule`, for reasons explained in the
-[Should I import BrowserModule or CommonModule?](cookbook/ngmodule-faq#q-browser-vs-common-module)
-section of the [NgModule FAQs](cookbook/ngmodule-faq) page.
+[Should I import BrowserModule or CommonModule?](guide/ngmodule-faq#q-browser-vs-common-module)
+section of the [NgModule FAQs](guide/ngmodule-faq) page.
You _declare_ the contact component, directive, and pipe in the module `declarations`.
@@ -1067,8 +1067,8 @@ _forRoot_ and _forChild_ are conventional names for methods that
deliver different `import` values to root and feature modules.
Angular doesn't recognize them but Angular developers do.
-[Follow this convention](cookbook/ngmodule-faq#q-for-root) if you write a similar module
-that has both shared [declarables](cookbook/ngmodule-faq#q-declarable) and services.
+[Follow this convention](guide/ngmodule-faq#q-for-root) if you write a similar module
+that has both shared [declarables](guide/ngmodule-faq#q-declarable) and services.
@@ -1252,7 +1252,7 @@ and only one provider of it.
`UserService` is an application-wide singleton.
You don't want each module to have its own separate instance.
-Yet there is [a real danger](cookbook/ngmodule-faq#q-why-it-is-bad) of that happening
+Yet there is [a real danger](guide/ngmodule-faq#q-why-bad) of that happening
if the `SharedModule` provides the `UserService`.
@@ -1419,7 +1419,7 @@ A module that adds providers to the application can offer a facility for configu
By convention, the `forRoot` static method both provides and configures services at the same time.
It takes a service configuration object and returns a
-[ModuleWithProviders](api/core/index/ModuleWithProviders-interface), which is
+[ModuleWithProviders](api/core/ModuleWithProviders), which is
a simple object with the following properties:
* `ngModule`: the `CoreModule` class
@@ -1495,7 +1495,7 @@ Remember to _import_ the result; don't add it to any other `@NgModule` list.
## Prevent reimport of the _CoreModule_
Only the root `AppModule` should import the `CoreModule`.
-[Bad things happen](cookbook/ngmodule-faq#q-why-it-is-bad) if a lazy-loaded module imports it.
+[Bad things happen](guide/ngmodule-faq#q-why-bad) if a lazy-loaded module imports it.
@@ -1538,5 +1538,5 @@ You made it! You can examine and download the complete source for this final ver
### Frequently asked questions
Now that you understand NgModules, you may be interested
-in the companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") page
+in the companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") page
with its ready answers to specific design and implementation questions.
diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md
index 7279e273c5..efde63b24e 100644
--- a/aio/content/guide/npm-packages.md
+++ b/aio/content/guide/npm-packages.md
@@ -104,7 +104,7 @@ the pieces that help render into the DOM.
This package also includes the `bootstrapStatic()` method
for bootstrapping applications for production builds that pre-compile templates offline.
-***@angular/platform-browser-dynamic***: Includes [Providers](api/core/index/Provider-type-alias)
+***@angular/platform-browser-dynamic***: Includes [Providers](api/core/Provider)
and a [bootstrap](guide/ngmodule#bootstrap) method for applications that
compile templates on the client. Don’t use offline compilation.
Use this package for bootstrapping during development and for bootstrapping plunker samples.
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md
index aabfc86ae6..62b83dc606 100644
--- a/aio/content/guide/pipes.md
+++ b/aio/content/guide/pipes.md
@@ -51,7 +51,7 @@ Focus on the component's template.
Inside the interpolation expression, you flow the component's `birthday` value through the
-[pipe operator](guide/template-syntax#pipe) ( | ) to the [Date pipe](api/common/index/DatePipe-pipe)
+[pipe operator](guide/template-syntax#pipe) ( | ) to the [Date pipe](api/common/DatePipe)
function on the right. All pipes work this way.
@@ -85,7 +85,7 @@ They are all available for use in any template.
-Read more about these and many other built-in pipes in the [pipes topics](api/#!?query=pipe) of the
+Read more about these and many other built-in pipes in the [pipes topics](api?type=pipe) of the
[API Reference](api); filter for entries that include the word "pipe".
Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in the [Appendix](guide/pipes#no-filter-pipe) of this page.
@@ -154,7 +154,7 @@ As you click the button, the displayed date alternates between
-Read more about the `DatePipe` format options in the [Date Pipe](api/common/index/DatePipe-pipe)
+Read more about the `DatePipe` format options in the [Date Pipe](api/common/DatePipe)
API Reference page.
@@ -586,7 +586,7 @@ It displays the same hero data in JSON format by chaining through to the built-i
-The [JsonPipe](api/common/index/JsonPipe-pipe)
+The [JsonPipe](api/common/JsonPipe)
provides an easy way to diagnosis a mysteriously failing data binding or
inspect an object for future binding.
@@ -621,7 +621,7 @@ transformations. Use them like styles, dropping them
into your template's expressions to enrich the appeal and usability
of your views.
-Explore Angular's inventory of built-in pipes in the [API Reference](api/#!?query=pipe).
+Explore Angular's inventory of built-in pipes in the [API Reference](api?type=pipe).
Try writing a custom pipe and perhaps contributing it to the community.
diff --git a/aio/content/guide/quickstart.md b/aio/content/guide/quickstart.md
index 27e8feef6b..736e722613 100644
--- a/aio/content/guide/quickstart.md
+++ b/aio/content/guide/quickstart.md
@@ -16,7 +16,7 @@ A _component_ is the combination of an HTML template and a component class that
Try this **QuickStart example on Plunker** without installing anything.
-Try it locally with the [***QuickStart seed***](guide/guide/setup "Setup for local development with the QuickStart seed")
+Try it locally with the [***QuickStart seed***](guide/setup "Setup for local development with the QuickStart seed")
and prepare for development of a real Angular application.
@@ -37,7 +37,7 @@ The `selector` property tells Angular to display the component inside a custom `
The `template` property defines a message inside an `
` header.
The message starts with "Hello" and ends with `{{name}}`,
-which is an Angular [interpolation binding](guide/guide/displaying-data) expression.
+which is an Angular [interpolation binding](guide/displaying-data) expression.
At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
Interpolation binding is one of many Angular features you'll discover in this documentation.
@@ -57,7 +57,7 @@ In the example, change the component class's `name` property from `'Angular'` to
This example is written in TypeScript, a superset of JavaScript. Angular
- uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; this guide explains how.
+ uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; [this guide](guide/ts-to-js] explains how.
@@ -73,7 +73,7 @@ In the example, change the component class's `name` property from `'Angular'` to
### Next step
-Start [**learning Angular**](guide/guide/learning-angular "Learning Angular").
+Start the [**tutorial**](tutorial "Tour of Heroes tutorial").
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index 6db2305e32..7730015015 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -233,7 +233,7 @@ In real apps, most form controls have both.
This guide touches only briefly on `Validators`. For an in-depth look at them,
-read the [Form Validation](cookbook/form-validation) cookbook.
+read the [Form Validation](guide/form-validation) guide.
@@ -317,21 +317,21 @@ Revise the `AppComponent` template so it displays the `HeroDetailComponent`.
### Essential form classes
It may be helpful to read a brief description of the core form classes.
-* [_AbstractControl_](api/forms/index/AbstractControl-class "API Reference: AbstractControl")
+* [_AbstractControl_](api/forms/AbstractControl "API Reference: AbstractControl")
is the abstract base class for the three concrete form control classes:
`FormControl`, `FormGroup`, and `FormArray`.
It provides their common behaviors and properties, some of which are _observable_.
-* [_FormControl_](api/forms/index/FormControl-class "API Reference: FormControl")
+* [_FormControl_](api/forms/FormControl "API Reference: FormControl")
tracks the value and validity status of an _individual_ form control.
It corresponds to an HTML form control such as an input box or selector.
-* [_FormGroup_](api/forms/index/FormGroup-class "API Reference: FormGroup")
+* [_FormGroup_](api/forms/FormGroup "API Reference: FormGroup")
tracks the value and validity state of a _group_ of `AbstractControl` instances.
The group's properties include its child controls.
The top-level form in your component is a `FormGroup`.
-* [_FormArray_](api/forms/index/FormArray-class "API Reference: FormArray")
+* [_FormArray_](api/forms/FormArray "API Reference: FormArray")
tracks the value and validity state of a numerically indexed _array_ of `AbstractControl` instances.
You'll learn more about these classes as you work through this guide.
@@ -582,7 +582,7 @@ Using `Validators.required` is optional for the rest of the guide.
It remains in each of the following examples with the same configuration.
For more on validating Angular forms, see the
-[Form Validation](cookbook/form-validation) guide.
+[Form Validation](guide/form-validation) guide.
### More FormControls
@@ -645,9 +645,9 @@ You tie these controls to the template HTML elements in the same way,
specifiying the `FormControl` name with the `formControlName` directive.
See the API reference for more information about
-[radio buttons](api/forms/index/RadioControlValueAccessor-directive "API: RadioControlValueAccessor"),
-[selects](api/forms/index/SelectControlValueAccessor-directive "API: SelectControlValueAccessor"), and
-[checkboxes](api/forms/index/CheckboxControlValueAccessor-directive "API: CheckboxControlValueAccessor").
+[radio buttons](api/forms/RadioControlValueAccessor "API: RadioControlValueAccessor"),
+[selects](api/forms/SelectControlValueAccessor "API: SelectControlValueAccessor"), and
+[checkboxes](api/forms/CheckboxControlValueAccessor "API: CheckboxControlValueAccessor").
@@ -830,12 +830,12 @@ such as one of the following:
Learn about other `FormControl` properties in the
-[_AbstractControl_](api/forms/index/AbstractControl-class) API reference.
+[_AbstractControl_](api/forms/AbstractControl) API reference.
One common reason for inspecting `FormControl` properties is to
make sure the user entered valid values.
Read more about validating Angular forms in the
-[Form Validation](cookbook/form-validation) guide.
+[Form Validation](guide/form-validation) guide.
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index deb14d8f6a..6679975c3c 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -602,7 +602,7 @@ This short introduction will do for now.
Proceed to the first application milestone.
-
+{@a getting-started}
## Milestone 1: Getting started with the router
@@ -710,7 +710,7 @@ A router must be configured with a list of route definitions.
The first configuration defines an array of two routes with simple paths leading to the
`CrisisListComponent` and `HeroListComponent`.
-Each definition translates to a [Route](api/router/index/Route-interface) object which has two things: a
+Each definition translates to a [Route](api/router/Route) object which has two things: a
`path`, the URL path segment for this route; and a
`component`, the component associated with this route.
@@ -1137,7 +1137,7 @@ Here are the files discussed in this milestone.
-
+{@a routing-module}
## Milestone 2: *Routing module*
@@ -1152,7 +1152,7 @@ The **Routing Module** has several characteristics:
* Separates routing concerns from other application concerns.
* Provides a module to replace or remove when testing the application.
* Provides a well-known location for routing service providers including guards and resolvers.
-* Does **not** [declare components](cookbook/ngmodule-faq#routing-module).
+* Does **not** [declare components](guide/ngmodule-faq#routing-module).
{@a routing-refactor}
@@ -1230,7 +1230,7 @@ It makes testing the feature module easier.
Its existence calls attention to the fact that a module is routed.
It is where developers expect to find and expand routing configuration.
-
+{@a heroes-feature}
## Milestone 3: Heroes feature
@@ -1658,7 +1658,7 @@ the `HeroDetailComponent` via the `ActivatedRoute` service.
### ActivatedRoute: the one-stop-shop for route information
The route path and parameters are available through an injected router service called the
-[ActivatedRoute](api/router/index/ActivatedRoute-interface).
+[ActivatedRoute](api/router/ActivatedRoute).
It has a great deal of useful information including:
@@ -1859,7 +1859,7 @@ It holds the _path to the `HeroListComponent`_:
-
+{@a optional-route-parameters}
### Route Parameters: Required or optional?
@@ -2861,7 +2861,7 @@ This time, the value of `'popup'` is `null`. That's not a route, but it is a leg
Setting the popup `RouterOutlet` to `null` clears the outlet and removes
the secondary popup route from the current URL.
-
+{@a guards}
## Milestone 5: Route guards
@@ -2903,15 +2903,15 @@ router will wait for the observable to resolve to `true` or `false`.
The router supports multiple kinds of guards:
-1. [`CanActivate`](api/router/index/CanActivate-interface) to mediate navigation *to* a route.
+1. [`CanActivate`](api/router/CanActivate) to mediate navigation *to* a route.
-2. [`CanActivateChild()`](api/router/index/CanActivateChild-interface) to mediate navigation *to* a child route.
+2. [`CanActivateChild()`](api/router/CanActivateChild) to mediate navigation *to* a child route.
-3. [`CanDeactivate`](api/router/index/CanDeactivate-interface) to mediate navigation *away* from the current route.
+3. [`CanDeactivate`](api/router/CanDeactivate) to mediate navigation *away* from the current route.
-4. [`Resolve`](api/router/index/Resolve-interface) to perform route data retrieval *before* route activation.
+4. [`Resolve`](api/router/Resolve) to perform route data retrieval *before* route activation.
-5. [`CanLoad`](api/router/index/CanLoad-interface) to mediate navigation *to* a feature module loaded _asynchronously_.
+5. [`CanLoad`](api/router/CanLoad) to mediate navigation *to* a feature module loaded _asynchronously_.
You can have multiple guards at every level of a routing hierarchy.
@@ -3612,7 +3612,7 @@ the `preserveQueryParams` and `preserveFragment` bindings respectively.
-
+{@a asynchronous-routing}
## Milestone 6: Asynchronous routing
@@ -4186,8 +4186,7 @@ Those developers may still use HTML5 URLs by taking two remedial steps:
1. Provide the router with an appropriate [APP_BASE_HREF][] value.
1. Use _root URLs_ for all web resources: CSS, images, scripts, and template HTML files.
-[APP_BASE_HREF]: ../api/common/index/APP_BASE_HREF-let.html
-
+{@a hashlocationstrategy}
### *HashLocationStrategy*
diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md
index cd01c637e6..11294aa383 100644
--- a/aio/content/guide/security.md
+++ b/aio/content/guide/security.md
@@ -37,7 +37,7 @@ You can run the in Plunker and download the code f
-To report vulnerabilities in Angular itself, email us at [security@angular.io](guide/mailto:security@angular).
+To report vulnerabilities in Angular itself, email us at [security@angular.io](mailto:security@angular.io).
For more information about how Google handles security issues, see [Google's security
philosophy](https://www.google.com/about/appsecurity/).
@@ -174,7 +174,7 @@ and greatly improves application performance. Use the offline template compiler
deployments; don't dynamically generate templates. Angular trusts template code, so generating
templates, in particular templates containing user data, circumvents Angular's built-in protections.
For information about dynamically constructing forms in a safe way, see the
-[Dynamic Forms](cookbook/dynamic-form) cookbook page.
+[Dynamic Forms](guide/dynamic-form) guide page.
### Server-side XSS protection
diff --git a/aio/content/guide/set-document-title.md b/aio/content/guide/set-document-title.md
index 0c6d73a2c8..bb140fd930 100644
--- a/aio/content/guide/set-document-title.md
+++ b/aio/content/guide/set-document-title.md
@@ -71,7 +71,7 @@ means that you could run your app inside Electron.js or Windows Universal to del
## Use the *Title* service
Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
-The [Title](api/platform-browser/index/Title-class) service is a simple class that provides an API
+The [Title](api/platform-browser/Title) service is a simple class that provides an API
for getting and setting the current HTML document title:
* `getTitle() : string`—Gets the title of the current HTML document.
diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md
index 7875f5a93a..5d7379335b 100644
--- a/aio/content/guide/setup.md
+++ b/aio/content/guide/setup.md
@@ -284,7 +284,7 @@ The following are all in `src/`
- Compiles the application with the [JIT compiler](glossary#jit) and
+ Compiles the application with the [JIT compiler](guide/glossary#jit) and
[bootstraps](guide/appmodule#main "bootstrap the application")
the application's main module (`AppModule`) to run in the browser.
The JIT compiler is a reasonable choice during the development of most projects and
@@ -305,7 +305,7 @@ The following are all in `src/`
### Next Step
-If you're new to Angular, we recommend staying on the [learning path](guide/learning-angular "Angular learning path").
+If you're new to Angular, we recommend you follow the [tutorial](tutorial "Tour of Heroes tutorial").
@@ -346,7 +346,7 @@ use other versions of node and npm.
Links on almost every documentation page open completed samples in the browser.
You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
-The [QuickStart](quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
+The [QuickStart](guide/quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
so the reader can discover Angular without distraction.
The other samples are based on the QuickStart seed.
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
index e4fa423524..1106492d2c 100644
--- a/aio/content/guide/structural-directives.md
+++ b/aio/content/guide/structural-directives.md
@@ -339,7 +339,7 @@ It's intended source is implicit.
Angular sets `let-hero` to the value of the context's `$implicit` property
which `NgFor` has initialized with the hero for the current iteration.
-* The [API guide](api/common/index/NgFor-directive "API: NgFor")
+* The [API guide](api/common/NgFor "API: NgFor")
describes additional `NgFor` directive properties and context properties.
These microsyntax mechanisms are available to you when you write your own structural directives.
@@ -710,15 +710,15 @@ Angular's own directives do not.
### _TemplateRef_ and _ViewContainerRef_
A simple structural directive like this one creates an
-[_embedded view_](api/core/index/EmbeddedViewRef-class "API: EmbeddedViewRef")
+[_embedded view_](api/core/EmbeddedViewRef "API: EmbeddedViewRef")
from the Angular-generated `` and inserts that view in a
-[_view container_](api/core/index/ViewContainerRef-class "API: ViewContainerRef")
+[_view container_](api/core/ViewContainerRef "API: ViewContainerRef")
adjacent to the directive's original `
` host element.
You'll acquire the `` contents with a
-[`TemplateRef`](api/core/index/TemplateRef-class "API: TemplateRef")
+[`TemplateRef`](api/core/TemplateRef "API: TemplateRef")
and access the _view container_ through a
-[`ViewContainerRef`](api/core/index/ViewContainerRef-class "API: ViewContainerRef").
+[`ViewContainerRef`](api/core/ViewContainerRef "API: ViewContainerRef").
You inject both in the directive constructor as private variables of the class.
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index ddb13d94c9..fae3d6e096 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -151,7 +151,7 @@ it assigns this composite interpolated result to an **element or directive prope
You appear to be inserting the result between element tags and assigning it to attributes.
It's convenient to think so, and you rarely suffer for this mistake.
Though this is not exactly true. Interpolation is a special syntax that Angular converts into a
-[property binding](guide/template-syntax#property-binding), as is explained [below](guide/template-syntax#property-binding-or-interpolation-).
+[property binding](guide/template-syntax#property-binding), as is explained [below](guide/template-syntax#property-binding-or-interpolation).
But first, let's take a closer look at template expressions and statements.
back to top
@@ -888,8 +888,8 @@ If the element raises events, you can listen to them with an [event binding](gui
If you must read a target element property or call one of its methods,
you'll need a different technique.
See the API reference for
-[ViewChild](api/core/index/ViewChild-decorator) and
-[ContentChild](api/core/index/ContentChild-decorator).
+[ViewChild](api/core/ViewChild) and
+[ContentChild](api/core/ContentChild).
@@ -1017,6 +1017,8 @@ not a template expression. Angular sets it and forgets about it.
The `[hero]` binding, on the other hand, remains a live binding to the component's `currentHero` property.
+{@a property-binding-or-interpolation}
+
### Property binding or interpolation?
You often have a choice between interpolation and property binding.
@@ -1407,7 +1409,7 @@ If the event belongs to a directive (recall that components are directives),
### Custom events with EventEmitter
-Directives typically raise custom events with an Angular [EventEmitter](api/core/index/EventEmitter-class).
+Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
The directive creates an `EventEmitter` and exposes it as a property.
The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
@@ -1786,7 +1788,7 @@ The `ngModel` data property sets the element's value property and the `ngModelCh
listens for changes to the element's value.
The details are specific to each kind of element and therefore the `NgModel` directive only works for an element
-supported by a [ControlValueAccessor](api/forms/index/ControlValueAccessor-interface)
+supported by a [ControlValueAccessor](api/forms/ControlValueAccessor)
that adapts an element to this protocol.
The `` box is one of those elements.
Angular provides *value accessors* for all of the basic HTML form elements and the
@@ -2081,7 +2083,7 @@ The next example captures the `index` in a variable named `i` and displays it wi
Learn about the other `NgFor` context values such as `last`, `even`,
-and `odd` in the [NgFor API reference](api/common/index/NgFor-directive).
+and `odd` in the [NgFor API reference](api/common/NgFor).
@@ -2266,7 +2268,7 @@ What is the value of `heroForm`?
If Angular hadn't taken it over when you imported the `FormsModule`,
it would be the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement).
-The `heroForm` is actually a reference to an Angular [NgForm](api/forms/index/NgForm-directive "API: NgForm")
+The `heroForm` is actually a reference to an Angular [NgForm](api/forms/NgForm "API: NgForm")
directive with the ability to track the value and validity of every control in the form.
The native `