docs(aio): update headers for toc (#16969)
This commit is contained in:
Jesús Rodríguez
Chuck Jazdzewski
parent
5f723cb92c
commit
cd5bc64658
|
|
@ -1,10 +1,4 @@
|
|||
@title
|
||||
AngularJS to Angular Quick Reference
|
||||
|
||||
@intro
|
||||
Learn how AngularJS concepts and techniques map to Angular.
|
||||
|
||||
@description
|
||||
# AngularJS to Angular Quick Reference
|
||||
|
||||
|
||||
{@a top}
|
||||
|
|
@ -19,21 +13,6 @@ by mapping AngularJS syntax to the equivalent Angular syntax.
|
|||
|
||||
**See the Angular syntax in this <live-example name="ajs-quick-reference"></live-example>**.
|
||||
|
||||
<!--
|
||||
## Contents
|
||||
|
||||
* [Template basics](guide/ajs-quick-reference#template-basics)—binding and local variables.
|
||||
|
||||
* [Template directives](guide/ajs-quick-reference#template-directives)—built-in directives `ngIf` and `ngClass`.
|
||||
|
||||
* [Filters/pipes](guide/ajs-quick-reference#filters-pipes)—built-in *filters*, known as *pipes* 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](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.
|
||||
The following table lists some of the key AngularJS template features with their equivalent Angular template syntax.
|
||||
|
|
|
|||
|
|
@ -22,21 +22,6 @@ add it to your page.
|
|||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
# Contents
|
||||
|
||||
* [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).
|
||||
-->
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
The examples in this page are available as a <live-example></live-example>.
|
||||
|
|
|
|||
|
|
@ -1,40 +1,8 @@
|
|||
@title
|
||||
Ahead-of-Time Compilation
|
||||
|
||||
@intro
|
||||
Learn how to use ahead-of-time compilation.
|
||||
|
||||
@description
|
||||
# Ahead-of-Time Compilation
|
||||
|
||||
This cookbook describes how to radically improve performance by compiling _ahead-of-time_ (AOT)
|
||||
during a build process.
|
||||
|
||||
{@a toc}
|
||||
<!--
|
||||
# Contents
|
||||
|
||||
* [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)
|
||||
* [Bootstrap](guide/aot-compiler#bootstrap)
|
||||
* [Tree shaking](guide/aot-compiler#tree-shaking)
|
||||
* [Rollup](guide/aot-compiler#rollup)
|
||||
* [Rollup Plugins](guide/aot-compiler#rollup-plugins)
|
||||
* [Run Rollup](guide/aot-compiler#run-rollup)
|
||||
* [Load the bundle](guide/aot-compiler#load)
|
||||
* [Serve the app](guide/aot-compiler#serve)
|
||||
* [AOT QuickStart source code](guide/aot-compiler#source-code)
|
||||
* [Workflow and convenience script](guide/aot-compiler#workflow)
|
||||
* [Develop JIT along with AOT](guide/aot-compiler#run-jit)
|
||||
* [Tour of Heroes](guide/aot-compiler#toh)
|
||||
* [JIT in development, AOT in production](guide/aot-compiler#jit-dev-aot-prod)
|
||||
* [Tree shaking](guide/aot-compiler#shaking)
|
||||
* [Running the application](guide/aot-compiler#running-app)
|
||||
* [Inspect the Bundle](guide/aot-compiler#inspect-bundle)
|
||||
|
||||
-->
|
||||
|
||||
{@a overview}
|
||||
|
||||
## Overview
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
AppModule: the root module
|
||||
|
||||
@intro
|
||||
Tell Angular how to construct and bootstrap the app in the root "AppModule".
|
||||
|
||||
@description
|
||||
|
||||
# AppModule: the root module
|
||||
|
||||
An Angular module class describes how the application parts fit together.
|
||||
Every application has at least one Angular module, the _root_ module
|
||||
|
|
@ -193,4 +186,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)](guide/ngmodule) guide.
|
||||
When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](guide/ngmodule) guide.
|
||||
|
|
|
|||
|
|
@ -2,18 +2,6 @@
|
|||
|
||||
An **Attribute** directive changes the appearance or behavior of a DOM element.
|
||||
|
||||
<!--
|
||||
# Contents
|
||||
|
||||
* [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 <live-example title="Attribute Directive example"></live-example>.
|
||||
|
||||
{@a directive-overview}
|
||||
|
|
@ -136,7 +124,7 @@ Now when the app runs, the `myHighlight` directive highlights the paragraph text
|
|||
|
||||
<div class="l-sub-section">
|
||||
|
||||
### Your directive isn't working?
|
||||
<h3 class="no-toc">Your directive isn't working?</h3>
|
||||
|
||||
Did you remember to add the directive to the `declarations` attribute of `@NgModule`?
|
||||
It is easy to forget!
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Browser support
|
||||
|
||||
@intro
|
||||
Browser support and polyfills guide.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Browser support
|
||||
|
||||
Angular supports most recent browsers. This includes the following specific versions:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
@title
|
||||
Change Log
|
||||
|
||||
@intro
|
||||
An annotated history of recent documentation improvements.
|
||||
|
||||
@description
|
||||
# Change Log
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
@title
|
||||
Cheat Sheet
|
||||
|
||||
@description
|
||||
# Cheat Sheet
|
||||
|
||||
<div id="cheatsheet">
|
||||
<table class="is-full-width is-fixed-layout">
|
||||
|
|
@ -387,4 +384,4 @@ so the <code>@Directive</code> configuration applies to components as well</p>
|
|||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
@title
|
||||
CLI QuickStart
|
||||
|
||||
@description
|
||||
|
||||
# CLI QuickStart
|
||||
|
||||
Good tools make application development quicker and easier to maintain than
|
||||
if you did everything by hand.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
@title
|
||||
Component Interaction
|
||||
# Component Interaction
|
||||
|
||||
@intro
|
||||
Share information between different directives and components.
|
||||
|
||||
@description
|
||||
{@a top}
|
||||
|
||||
This cookbook contains recipes for common component communication scenarios
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
@title
|
||||
Dependency Injection
|
||||
|
||||
@intro
|
||||
Techniques for Dependency Injection.
|
||||
|
||||
@description
|
||||
# Dependency Injection
|
||||
|
||||
|
||||
Dependency Injection is a powerful pattern for managing code dependencies.
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Dependency Injection
|
||||
|
||||
@intro
|
||||
Angular's dependency injection system creates and delivers dependent services "just-in-time".
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Dependency Injection
|
||||
|
||||
**Dependency injection** is an important application design pattern.
|
||||
Angular has its own dependency injection framework, and
|
||||
|
|
@ -16,45 +8,6 @@ It's used so widely that almost everyone just calls it _DI_.
|
|||
This page covers what DI is, why it's so useful,
|
||||
and [how to use it](guide/dependency-injection#angular-di) in an Angular app.
|
||||
|
||||
<!--
|
||||
|
||||
# Contents
|
||||
|
||||
* [Why dependency injection?](guide/dependency-injection#why-di)
|
||||
* [Angular dependency injection](guide/dependency-injection#angular-dependency-injection)
|
||||
|
||||
* [Configuring the injector](guide/dependency-injection#injector-config)
|
||||
* [Registering providers in an `NgModule`](guide/dependency-injection#register-providers-ngmodule)
|
||||
* [Registering providers in a component](guide/dependency-injection#register-providers-component)
|
||||
* [When to use `NgModule` versus an application component](guide/dependency-injection#ngmodule-vs-comp)
|
||||
* [Preparing the `HeroListComponent` for injection](guide/dependency-injection#prep-for-injection)
|
||||
* [Implicit injector creation](guide/dependency-injection#di-metadata)
|
||||
* [Singleton services](guide/dependency-injection#singleton-services)
|
||||
* [Testing the component](guide/dependency-injection#testing-the-component)
|
||||
* [When the service needs a service](guide/dependency-injection#service-needs-service)
|
||||
* [Why `@Injectable()`?](guide/dependency-injection#injectable)
|
||||
|
||||
* [Creating and registering a logger service](guide/dependency-injection#logger-service)
|
||||
* [Injector providers](guide/dependency-injection#injector-providers)
|
||||
|
||||
* [The `Provider` class and `provide` object literal](guide/dependency-injection#provide)
|
||||
* [Alternative class providers](guide/dependency-injection#class-provider)
|
||||
* [Class provider with dependencies](guide/dependency-injection#class-provider-dependencies)
|
||||
* [Aliased class providers](guide/dependency-injection#aliased-class-providers)
|
||||
* [Value providers](guide/dependency-injection#value-provider)
|
||||
* [Factory providers](guide/dependency-injection#factory-provider)
|
||||
|
||||
* [Dependency injection tokens](guide/dependency-injection#dependency-injection-tokens)
|
||||
|
||||
* [Non-class dependencies](guide/dependency-injection#non-class-dependencies)
|
||||
* [`InjectionToken`](guide/dependency-injection#injection-token)
|
||||
|
||||
* [Optional dependencies](guide/dependency-injection#optional)
|
||||
* [Summary](guide/dependency-injection#summary)
|
||||
* [Appendix: Working with injectors directly](guide/dependency-injection#explicit-injector)
|
||||
|
||||
-->
|
||||
|
||||
Run the <live-example></live-example>.
|
||||
|
||||
{@a why-di }
|
||||
|
|
|
|||
|
|
@ -1,39 +1,10 @@
|
|||
@title
|
||||
Deployment
|
||||
|
||||
@intro
|
||||
Learn how to deploy your Angular app.
|
||||
|
||||
@description
|
||||
|
||||
# Deployment
|
||||
|
||||
This page describes tools and techniques for deploy and optimize your Angular application.
|
||||
|
||||
|
||||
{@a toc}
|
||||
|
||||
<!--
|
||||
|
||||
## Table of contents
|
||||
|
||||
* [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}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Displaying Data
|
||||
|
||||
@intro
|
||||
Property binding helps show app data in the UI.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Displaying Data
|
||||
|
||||
You can display data by binding controls in an HTML template to properties of an Angular component.
|
||||
|
||||
|
|
@ -21,16 +13,6 @@ The final UI looks like this:
|
|||
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
|
||||
</figure>
|
||||
|
||||
<!--
|
||||
|
||||
# Contents
|
||||
|
||||
* [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).
|
||||
|
||||
-->
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
||||
|
|
@ -282,7 +264,7 @@ That brief syntax does a lot:
|
|||
|
||||
|
||||
|
||||
## Using the Hero class
|
||||
### Using the Hero class
|
||||
|
||||
After importing the `Hero` class, the `AppComponent.heroes` property can return a _typed_ array
|
||||
of `Hero` objects:
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
@title
|
||||
Dynamic Forms
|
||||
|
||||
@intro
|
||||
Render dynamic forms with FormGroup.
|
||||
|
||||
@description
|
||||
# Dynamic Forms
|
||||
|
||||
{@a top}
|
||||
|
||||
|
|
@ -27,17 +21,6 @@ The agency is constantly tinkering with the application process.
|
|||
You can create the forms on the fly *without changing the application code*.
|
||||
{@a toc}
|
||||
|
||||
<!--
|
||||
|
||||
# Contents
|
||||
* [Bootstrap](guide/dynamic-form#bootstrap)
|
||||
* [Question model](guide/dynamic-form#object-model)
|
||||
* [Question form components](guide/dynamic-form#form-component)
|
||||
* [Questionnaire data](guide/dynamic-form#questionnaire-data)
|
||||
* [Dynamic template](guide/dynamic-form#dynamic-template)
|
||||
|
||||
-->
|
||||
|
||||
See the <live-example name="dynamic-form"></live-example>.
|
||||
|
||||
{@a bootstrap}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
Form Validation
|
||||
|
||||
@intro
|
||||
Validate user's form entries.
|
||||
|
||||
@description
|
||||
|
||||
# Form Validation
|
||||
|
||||
{@a top}
|
||||
|
||||
|
|
@ -29,34 +22,6 @@ and the [Reactive Forms](guide/reactive-forms) guides.
|
|||
|
||||
{@a toc}
|
||||
|
||||
<!--
|
||||
|
||||
## Contents
|
||||
|
||||
* [Simple template-driven forms](guide/form-validation#template1)
|
||||
* [Template-driven forms with validation messages in code](guide/form-validation#template2)
|
||||
|
||||
* [Component Class](guide/form-validation#component-class)
|
||||
* [The benefits of messages in code](guide/form-validation#improvement)
|
||||
* [`FormModule` and template-driven forms](guide/form-validation#formmodule)
|
||||
|
||||
* [Reactive forms with validation in code](guide/form-validation#reactive)
|
||||
|
||||
* [Switch to the `ReactiveFormsModule`](guide/form-validation#reactive-forms-module)
|
||||
* [Component template](guide/form-validation#reactive-component-template)
|
||||
* [Component class](guide/form-validation#reactive-component-class)
|
||||
|
||||
* [`FormBuilder` declaration](guide/form-validation#formbuilder)
|
||||
* [Committing hero value changes](guide/form-validation#committing-changes)
|
||||
|
||||
* [Custom validation](guide/form-validation#custom-validation)
|
||||
|
||||
* [Custom validation directive](guide/form-validation#custom-validation-directive)
|
||||
|
||||
* [Testing considerations](guide/form-validation#testing)
|
||||
|
||||
-->
|
||||
|
||||
{@a live-example}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
Forms
|
||||
|
||||
@intro
|
||||
A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.
|
||||
|
||||
@description
|
||||
|
||||
# Forms
|
||||
|
||||
Forms are the mainstay of business applications.
|
||||
You use forms to log in, submit a help request, place an order, book a flight,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
@title
|
||||
Angular Glossary
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Angular Glossary
|
||||
|
||||
Angular has its own vocabulary.
|
||||
Most Angular terms are common English words
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Hierarchical Dependency Injectors
|
||||
|
||||
@intro
|
||||
Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Hierarchical Dependency Injectors
|
||||
|
||||
You learned the basics of Angular Dependency injection in the
|
||||
[Dependency Injection](guide/dependency-injection) guide.
|
||||
|
|
|
|||
|
|
@ -1,49 +1,10 @@
|
|||
@title
|
||||
Internationalization (i18n)
|
||||
|
||||
@intro
|
||||
Translate the app's template text into multiple languages.
|
||||
|
||||
@description
|
||||
|
||||
# Internationalization (i18n)
|
||||
|
||||
{@a top}
|
||||
|
||||
|
||||
Angular's _internationalization_ (_i18n_) tools help make your app available in multiple languages.
|
||||
|
||||
<!--
|
||||
|
||||
# Contents
|
||||
|
||||
* [Angular and i18n template translation](guide/i18n#angular-i18n)
|
||||
* [Mark text with the _i18n_ attribute](guide/i18n#i18n-attribute)
|
||||
* [Help the translator with a description and intent](guide/i18n#help-translator)
|
||||
* [Translate text without creating an element](guide/i18n#no-element)
|
||||
* [Add _i18n-..._ translation attributes](guide/i18n#translate-attributes)
|
||||
* [Handle singular and plural](guide/i18n#cardinality)
|
||||
* [Select among alternative texts](guide/i18n#select)
|
||||
* [Create a translation source file with the **_ng-xi18n_ extraction tool**](guide/i18n#ng-xi18n)
|
||||
* [Other translation formats](guide/i18n#other-formats)
|
||||
* [Other options](guide/i18n#ng-xi18n-options)
|
||||
* [Add an `npm` script for convenience](guide/i18n#npm-i18n-script)
|
||||
* [Translate text messages](guide/i18n#translate)
|
||||
* [Create a localization folder](guide/i18n#localization-folder)
|
||||
* [Translate text nodes](guide/i18n#translate-text-nodes)
|
||||
* [Translate `plural` and `select`](guide/i18n#translate-plural-select)
|
||||
* [Translate `plural`](guide/i18n#translate-plural)
|
||||
* [Translate `select`](guide/i18n#translate-select)
|
||||
* [The app before translation](guide/i18n#app-pre-translation)
|
||||
* [Merge the completed translation file into the app](guide/i18n#merge)
|
||||
* [Merge with the JIT compiler](guide/i18n#jit)
|
||||
* [SystemJS text plugin](guide/i18n#text-plugin)
|
||||
* [Create translation providers](guide/i18n#create-translation-providers)
|
||||
* [Bootstrap the app with translation providers](guide/i18n#bootstrap-the-app)
|
||||
* [Internationalization with the AOT compiler](guide/i18n#aot)
|
||||
* [Translation file maintenance and _id_ changes](guide/i18n#maintenance)
|
||||
|
||||
-->
|
||||
|
||||
Try this <live-example name="i18n" title="i18n Example in Spanish">live example</live-example>
|
||||
of a JIT-compiled app, translated into Spanish.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
NgModule FAQs
|
||||
|
||||
@intro
|
||||
Answers to frequently asked questions about @NgModule.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# NgModule FAQs
|
||||
|
||||
NgModules help organize an application into cohesive blocks of functionality.
|
||||
|
||||
|
|
@ -24,62 +16,6 @@ These FAQs assume that you have read the [NgModules](guide/ngmodule) page.
|
|||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
|
||||
Declarations
|
||||
|
||||
* [What classes should I add to _declarations_?](guide/ngmodule-faq#q-what-to-declare)
|
||||
* [What is a _declarable_?](guide/ngmodule-faq#q-declarable)
|
||||
* [What classes should I _not_ add to _declarations_?](guide/ngmodule-faq#q-what-not-to-declare)
|
||||
* [Why list the same component in multiple _NgModule_ properties?](guide/ngmodule-faq#q-why-multiple-mentions)
|
||||
* [What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?](guide/ngmodule-faq#q-why-cant-bind-to)
|
||||
|
||||
Imports
|
||||
|
||||
* [What should I import?](guide/ngmodule-faq#q-what-to-import)
|
||||
* [Should I import _BrowserModule_ or _CommonModule_?](guide/ngmodule-faq#q-browser-vs-common-module)
|
||||
* [What if I import the same module twice?](guide/ngmodule-faq#q-reimport)
|
||||
|
||||
Exports
|
||||
|
||||
* [What should I export?](guide/ngmodule-faq#q-what-to-export)
|
||||
* [What should I *not* export?](guide/ngmodule-faq#q-what-not-to-export)
|
||||
* [Can I re-export imported classes and modules?](guide/ngmodule-faq#q-re-export)
|
||||
* [What is the _forRoot_ method?](guide/ngmodule-faq#q-for-root)
|
||||
|
||||
Service Providers
|
||||
|
||||
* [Why is a service provided in a feature module visible everywhere?](guide/ngmodule-faq#q-module-provider-visibility)
|
||||
* [Why is a service provided in a _lazy-loaded_ module visible only to that module?](guide/ngmodule-faq#q-lazy-loaded-module-provider-visibility)
|
||||
* [What if two modules provide the same service?](guide/ngmodule-faq#q-module-provider-duplicates)
|
||||
* [How do I restrict service scope to a module?](guide/ngmodule-faq#q-component-scoped-providers)
|
||||
* [Should I add app-wide providers to the root _AppModule_ or the root _AppComponent_?](guide/ngmodule-faq#q-root-component-or-module)
|
||||
* [Should I add other providers to a module or a component?](guide/ngmodule-faq#q-component-or-module)
|
||||
* [Why is it bad if _SharedModule_ provides a service to a lazy-loaded module?](guide/ngmodule-faq#q-why-bad)
|
||||
* [Why does lazy loading create a child injector?](guide/ngmodule-faq#q-why-child-injector)
|
||||
* [How can I tell if a module or service was previously loaded?](guide/ngmodule-faq#q-is-it-loaded)
|
||||
|
||||
Entry Components
|
||||
|
||||
* [What is an _entry component_?](guide/ngmodule-faq#q-entry-component-defined)
|
||||
* [What is the difference between a _bootstrap_ component and an _entry component_?](guide/ngmodule-faq#q-bootstrap_vs_entry_component)
|
||||
* [When do I add components to _entryComponents_?](guide/ngmodule-faq#q-when-entry-components)
|
||||
* [Why does Angular need _entryComponents_?](guide/ngmodule-faq#q-why-entry-components)
|
||||
|
||||
General
|
||||
|
||||
* [What kinds of modules should I have and how should I use them?](guide/ngmodule-faq#q-module-recommendations)
|
||||
* [What's the difference between Angular and JavaScript Modules?](guide/ngmodule-faq#q-ng-vs-js-modules)
|
||||
* [How does Angular find components, directives, and pipes in a template?](guide/ngmodule-faq#q-template-reference)
|
||||
* [What is a "template reference"?](guide/ngmodule-faq#q-template-reference)
|
||||
* [What is the Angular compiler?](guide/ngmodule-faq#q-angular-compiler)
|
||||
* [Can you summarize the NgModule API?](guide/ngmodule-faq#q-ngmodule-api)
|
||||
|
||||
|
||||
<hr/>
|
||||
|
||||
-->
|
||||
|
||||
{@a q-what-to-declare}
|
||||
|
||||
|
||||
|
|
@ -550,7 +486,8 @@ from components outside the `AppComponent` tree. This is a rare use case.
|
|||
|
||||
More generally, [prefer registering providers in modules](guide/ngmodule-faq#q-component-or-module) to registering in components.
|
||||
|
||||
### Discussion
|
||||
<h3 class="no-toc">Discussion</h3>
|
||||
|
||||
Angular registers all startup module providers with the application root injector.
|
||||
The services created from root injector providers are available to the entire application.
|
||||
They are _application-scoped_.
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
Npm Packages
|
||||
|
||||
@intro
|
||||
Recommended npm packages, and how to specify package dependencies.
|
||||
|
||||
@description
|
||||
|
||||
# Npm Packages
|
||||
|
||||
Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages.
|
||||
These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/">npm</a>).
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
Reactive Forms
|
||||
|
||||
@intro
|
||||
Create a reactive form using FormBuilder, groups, and arrays.
|
||||
|
||||
@description
|
||||
|
||||
# Reactive Forms
|
||||
|
||||
_Reactive forms_ is an Angular technique for creating forms in a _reactive_ style.
|
||||
This guide explains reactive forms as you follow the steps to build a "Hero Detail Editor" form.
|
||||
|
|
@ -13,30 +6,6 @@ This guide explains reactive forms as you follow the steps to build a "Hero Deta
|
|||
|
||||
{@a toc}
|
||||
|
||||
<!--
|
||||
|
||||
## Contents
|
||||
|
||||
* [Introduction to reactive forms](guide/reactive-forms#intro)
|
||||
* [Setup](guide/reactive-forms#setup)
|
||||
* [Create a data model](guide/reactive-forms#data-model)
|
||||
* [Create a _reactive forms_ component](guide/reactive-forms#create-component)
|
||||
* [Create its template file](guide/reactive-forms#create-template)
|
||||
* [Import the _ReactiveFormsModule_](guide/reactive-forms#import)
|
||||
* [Display the _HeroDetailComponent_](guide/reactive-forms#update)
|
||||
* [Add a FormGroup](guide/reactive-forms#formgroup)
|
||||
* [Taking a look at the form model](guide/reactive-forms#json)
|
||||
* [Introduction to _FormBuilder_](guide/reactive-forms#formbuilder)
|
||||
* [Validators.required](guide/reactive-forms#validators)
|
||||
* [Nested FormGroups](guide/reactive-forms#grouping)
|
||||
* [Inspect _FormControl_ properties](guide/reactive-forms#properties)
|
||||
* [Set form model data using _setValue_ and _patchValue_](guide/reactive-forms#set-data)
|
||||
* [Use _FormArray_ to present an array of _FormGroups_](guide/reactive-forms#form-array)
|
||||
* [Observe control changes](guide/reactive-forms#observe-control)
|
||||
* [Save form data](guide/reactive-forms#save)
|
||||
|
||||
-->
|
||||
|
||||
Try the <live-example plnkr="final" title="Reactive Forms (final) in Plunker">Reactive Forms live-example</live-example>.
|
||||
|
||||
You can also run the <live-example title="Reactive Forms Demo in Plunker">Reactive Forms Demo</live-example> version
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
Routing & Navigation
|
||||
|
||||
@intro
|
||||
Discover the basics of screen navigation with the Angular Router.
|
||||
|
||||
@description
|
||||
|
||||
# Routing & Navigation
|
||||
|
||||
The Angular **`Router`** enables navigation from one [view](guide/glossary#view) to the next
|
||||
as users perform application tasks.
|
||||
|
|
@ -33,110 +26,6 @@ You can navigate imperatively when the user clicks a button, selects from a drop
|
|||
or in response to some other stimulus from any source. And the router logs activity
|
||||
in the browser's history journal so the back and forward buttons work as well.
|
||||
|
||||
<!--
|
||||
|
||||
# Contents
|
||||
|
||||
* [The Basics](guide/router#basics)
|
||||
|
||||
* [`<base href>`](guide/router#basics-base-href)
|
||||
* [Router imports](guide/router#basics-router-imports)
|
||||
* [Configuration](guide/router#basics-config)
|
||||
* [Router outlet](guide/router#basics-router-outlet)
|
||||
* [Router links](guide/router#basics-router-links)
|
||||
* [Router state](guide/router#basics-router-state)
|
||||
* [Summary](guide/router#basics-summary)
|
||||
|
||||
* [The sample application](guide/router#sample-app-intro)
|
||||
|
||||
* [Milestone 1: Getting started with the router](guide/router#getting-started)
|
||||
|
||||
* [Setting the base href](guide/router#base-href)
|
||||
* [Importing from the router library](guide/router#import)
|
||||
* [Define routes](guide/router#route-config)
|
||||
* [The `AppComponent` shell](guide/router#shell)
|
||||
* [RouterOutlet](guide/router#router-outlet)
|
||||
* [`RouterLink binding`](guide/router#router-link)
|
||||
* [`RouterLinkActive` binding](guide/router#router-link-active)
|
||||
* [Wildcard route](guide/router#wildcard)
|
||||
* [The default route to heroes](guide/router#default-route)
|
||||
|
||||
* [Milestone 2: Routing module](guide/router#routing-module)
|
||||
|
||||
* [Refactor the routing configuration into a routing module](guide/router#routing-refactor)
|
||||
* [Do you need a Routing Module?](guide/router#why-routing-module)
|
||||
|
||||
* [Milestone 3: Heroes feature](guide/router#heroes-feature)
|
||||
|
||||
* [Add heroes functionality](guide/router#heroes-functionality)
|
||||
* [Hero feature routing requirements](guide/router#hero-routing-requirements)
|
||||
* [Hero feature route configuration](guide/router#hero-routing-module)
|
||||
* [Add the routing module to the _HeroesModule_](guide/router#adding-routing-module)
|
||||
* [Remove duplicate hero routes](guide/router#remove-duplicate-hero-routes)
|
||||
* [Import hero module into AppModule](guide/router#merge-hero-routes)
|
||||
* [Module import order matters](guide/router#routing-module-order)
|
||||
* [Route Definition with a parameter](guide/router#route-def-with-parameter)
|
||||
* [Navigate to hero detail imperatively](guide/router#navigate)
|
||||
* [Setting the route parameters in the list view](guide/router#route-parameters)
|
||||
* [ActivatedRoute: the one-stop-shop for route information](guide/router#activated-route)
|
||||
* [Observable params and component reuse](guide/router#reuse)
|
||||
* [Snapshot: the _no-observable_ alternative](guide/router#snapshot)
|
||||
* [Navigating back to the list component](guide/router#nav-to-list)
|
||||
* [Route Parameters: Required or optional?](guide/router#optional-route-parameters)
|
||||
* [Heroes list: optionally selecting a hero](guide/router#optionally-selecting)
|
||||
* [Route parameters in the *ActivatedRoute* service](guide/router#route-parameters-activated-route)
|
||||
* [Adding animations to the routed component](guide/router#route-animation)
|
||||
* [Milestone 3 wrap up](guide/router#milestone-3-wrap-up)
|
||||
|
||||
* [Milestone 4: Crisis center feature](guide/router#milestone-4)
|
||||
|
||||
* [A crisis center with child routes](guide/router#crisis-child-routes)
|
||||
* [Child routing component](guide/router#child-routing-component)
|
||||
* [Child route configuration](guide/router#child-route-config)
|
||||
* [Import crisis center module into the _AppModule_ routes](guide/router#import-crisis-module)
|
||||
* [Relative navigation](guide/router#relative-navigation)
|
||||
* [Navigate to crisis detail with a relative URL](guide/router#nav-to-crisis)
|
||||
* [Displaying multiple routes in named outlets](guide/router#named-outlets)
|
||||
* [Secondary routes](guide/router#secondary-routes)
|
||||
* [Add a secondary route](guide/router#add-secondary-route)
|
||||
* [Secondary route navigation: merging routes during navigation](guide/router#secondary-route-navigation)
|
||||
* [Clearing secondary routes](guide/router#clear-secondary-routes)
|
||||
|
||||
* [Milestone 5: Route guards](guide/router#guards)
|
||||
|
||||
* [`CanActivate`: requiring authentication](guide/router#can-activate-guard)
|
||||
* [Component-less route: grouping routes without a component](guide/router#component-less-route)
|
||||
* [Guard the admin feature](guide/router#guard-admin-feature)
|
||||
* [Teach *AuthGuard* to authenticate](guide/router#teach-auth)
|
||||
* [Add the login component](guide/router#add-login-component)
|
||||
* [`CanActivateChild`: guarding child routes](guide/router#can-activate-child-guard)
|
||||
* [`CanDeactivate`: handling unsaved changes](guide/router#can-deactivate-guard)
|
||||
* [Cancel and save](guide/router#cancel-save)
|
||||
* [`Resolve`: pre-fetching component data](guide/router#resolve-guard)
|
||||
* [Fetch data before navigating](guide/router#fetch-before-navigating)
|
||||
* [Query parameters and fragments](guide/router#query-parameters)
|
||||
|
||||
* [Milestone 6: Asynchronous routing](guide/router#asynchronous-routing)
|
||||
|
||||
* [Lazy loading route configuration](guide/router#lazy-loading-route-config)
|
||||
* [CanLoad Guard: guarding unauthorized loading of feature modules](guide/router#can-load-guard)
|
||||
* [Preloading: background loading of feature areas](guide/router#preloading)
|
||||
* [How preloading works](guide/router#how-preloading)
|
||||
* [Lazy load the crisis center](guide/router#lazy-load-crisis-center)
|
||||
* [_CanLoad_ blocks preload](guide/router#preload-canload)
|
||||
* [Custom Preloading Strategy](guide/router#custom-preloading)
|
||||
* [Inspect the router's configuration](guide/router#inspect-config)
|
||||
* [Wrap up and final app](guide/router#final-app)
|
||||
|
||||
* [Appendices](guide/router#appendices)
|
||||
|
||||
* [Appendix: link parameters array](guide/router#link-parameters-array)
|
||||
* [Appendix: *LocationStrategy* and browser URL styles](guide/router#location-strategy)
|
||||
|
||||
|
||||
-->
|
||||
|
||||
|
||||
{@a basics}
|
||||
|
||||
|
||||
|
|
@ -3980,7 +3869,7 @@ The appendix material isn't essential. Continued reading is for the curious.
|
|||
|
||||
|
||||
|
||||
## Appendix: link parameters array
|
||||
### Appendix: link parameters array
|
||||
|
||||
A link parameters array holds the following ingredients for router navigation:
|
||||
|
||||
|
|
@ -4073,7 +3962,7 @@ any legal sequence of route paths, (required) router parameters, and (optional)
|
|||
|
||||
|
||||
|
||||
## Appendix: *LocationStrategy* and browser URL styles
|
||||
### Appendix: *LocationStrategy* and browser URL styles
|
||||
|
||||
When the router navigates to a new component view, it updates the browser's location and history
|
||||
with a URL for that view.
|
||||
|
|
@ -4131,7 +4020,7 @@ Learn about providers and the bootstrap process in the
|
|||
|
||||
|
||||
|
||||
### Which strategy is best?
|
||||
#### Which strategy is best?
|
||||
|
||||
You must choose a strategy and you need to make the right call early in the project.
|
||||
It won't be easy to change later once the application is in production
|
||||
|
|
@ -4153,7 +4042,7 @@ without hashes (#) in the middle.
|
|||
Stick with the default unless you have a compelling reason to
|
||||
resort to hash routes.
|
||||
|
||||
### HTML5 URLs and the *<base href>*
|
||||
#### HTML5 URLs and the *<base href>*
|
||||
|
||||
While the router uses the
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" title="Browser history push-state">HTML5 pushState</a>
|
||||
|
|
@ -4185,7 +4074,7 @@ Those developers may still use HTML5 URLs by taking two remedial steps:
|
|||
|
||||
{@a hashlocationstrategy}
|
||||
|
||||
### *HashLocationStrategy*
|
||||
#### *HashLocationStrategy*
|
||||
|
||||
You can go old-school with the `HashLocationStrategy` by
|
||||
providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot`
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Security
|
||||
|
||||
@intro
|
||||
Developing for content security in Angular applications.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Security
|
||||
|
||||
This page describes Angular's built-in
|
||||
protections against common web-application vulnerabilities and attacks such as cross-site
|
||||
|
|
@ -15,19 +7,6 @@ this user?_) and authorization (_What can this user do?_).
|
|||
|
||||
For more information about the attacks and mitigations described below, see [OWASP Guide Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
|
||||
|
||||
<!--
|
||||
|
||||
# Contents
|
||||
|
||||
* [Reporting vulnerabilities](guide/security#report-issues).
|
||||
* [Best practices](guide/security#best-practices).
|
||||
* [Preventing cross-site scripting (XSS)](guide/security#xss).
|
||||
* [Trusting safe values](guide/security#bypass-security-apis).
|
||||
* [HTTP-Level vulnerabilities](guide/security#http).
|
||||
* [Auditing Angular applications](guide/security#code-review).
|
||||
|
||||
-->
|
||||
|
||||
You can run the <live-example></live-example> in Plunker and download the code from there.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Anatomy of the Setup Project
|
||||
|
||||
@intro
|
||||
Inside the local development environment for SystemJS.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Anatomy of the Setup Project
|
||||
|
||||
The documentation [setup](guide/setup) procedures install a _lot_ of files.
|
||||
Most of them can be safely ignored.
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Setup for local development
|
||||
|
||||
@intro
|
||||
Install the Angular QuickStart seed for faster, more efficient development on your machine.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Setup for local development
|
||||
|
||||
{@a develop-locally}
|
||||
|
||||
|
|
@ -20,21 +12,10 @@ maintained [on github](https://github.com/angular/quickstart "Install the github
|
|||
|
||||
Make sure you have [node and npm installed](guide/setup#install-prerequisites "What if you don't have node and npm?").
|
||||
|
||||
<!--
|
||||
|
||||
Then ...
|
||||
|
||||
1. Create a project folder (you can call it `quickstart` and rename it later).
|
||||
1. [Clone](guide/setup#clone "Clone it from github") or [download](guide/setup#download "download it from github") the **QuickStart seed** into your project folder.
|
||||
1. Install [npm](guide/setup#install-prerequisites "What if you don't have node and npm?") packages.
|
||||
1. Run `npm start` to launch the sample application.
|
||||
|
||||
-->
|
||||
|
||||
{@a clone}
|
||||
|
||||
|
||||
### Clone
|
||||
## Clone
|
||||
|
||||
Perform the _clone-to-launch_ steps with these terminal commands.
|
||||
|
||||
|
|
@ -63,7 +44,7 @@ Perform the _clone-to-launch_ steps with these terminal commands.
|
|||
{@a download}
|
||||
|
||||
|
||||
### Download
|
||||
## Download
|
||||
<a href="https://github.com/angular/quickstart/archive/master.zip" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
|
||||
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Structural Directives
|
||||
|
||||
@intro
|
||||
Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Structural Directives
|
||||
|
||||
<style>
|
||||
h4 {font-size: 17px !important; text-transform: none !important;}
|
||||
|
|
@ -19,27 +11,6 @@ Angular has a powerful template engine that lets us easily manipulate the DOM st
|
|||
This guide looks at how Angular manipulates the DOM with **structural directives** and
|
||||
how you can write your own structural directives to do the same thing.
|
||||
|
||||
<!--
|
||||
|
||||
### Table of contents
|
||||
|
||||
* [What are structural directives?](guide/structural-directives#definition)
|
||||
* [*NgIf* case study](guide/structural-directives#ngIf)
|
||||
* [The asterisk (*) prefix](guide/structural-directives#asterisk)
|
||||
* [Inside *NgFor*](guide/structural-directives#ngFor)
|
||||
|
||||
* [microsyntax](guide/structural-directives#microsyntax)
|
||||
* [template input variables](guide/structural-directives#template-input-variable)
|
||||
* [one structural directive per element](guide/structural-directives#one-per-element)
|
||||
|
||||
* [Inside the *NgSwitch* directives](guide/structural-directives#ngSwitch)
|
||||
* [Prefer the (*) prefix](guide/structural-directives#prefer-asterisk)
|
||||
* [The <ng-template> element](guide/structural-directives#template)
|
||||
* [Group sibling elements with <ng-container>](guide/structural-directives#ng-container)
|
||||
* [Write a structural directive](guide/structural-directives#unless)
|
||||
|
||||
-->
|
||||
|
||||
Try the <live-example></live-example>.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
Style Guide
|
||||
|
||||
@intro
|
||||
Write Angular with style.
|
||||
|
||||
@description
|
||||
|
||||
# Style Guide
|
||||
|
||||
Looking for an opinionated guide to Angular syntax, conventions, and application structure?
|
||||
Step right in!
|
||||
|
|
@ -15,23 +8,6 @@ This style guide presents preferred conventions and, as importantly, explains wh
|
|||
|
||||
{@a toc}
|
||||
|
||||
<!--
|
||||
|
||||
# Contents
|
||||
|
||||
* [Single responsibility](guide/styleguide#single-responsibility)
|
||||
* [Naming](guide/styleguide#naming)
|
||||
* [Coding conventions](guide/styleguide#coding-conventions)
|
||||
* [App structure and Angular modules](guide/styleguide#application-structure-and-angular-modules)
|
||||
* [Components](guide/styleguide#components)
|
||||
* [Directives](guide/styleguide#directives)
|
||||
* [Services](guide/styleguide#services)
|
||||
* [Data services](guide/styleguide#data-services)
|
||||
* [Lifecycle hooks](guide/styleguide#lifecycle-hooks)
|
||||
* [Appendix](guide/styleguide#appendix)
|
||||
|
||||
-->
|
||||
|
||||
## Style vocabulary
|
||||
|
||||
Each guideline describes either a good or bad practice, and all have a consistent presentation.
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
@title
|
||||
Testing
|
||||
|
||||
@intro
|
||||
Techniques and practices for testing an Angular app.
|
||||
|
||||
@description
|
||||
|
||||
|
||||
# Testing
|
||||
|
||||
This guide offers tips and techniques for testing Angular applications.
|
||||
Though this page includes some general testing principles and techniques,
|
||||
|
|
@ -15,123 +7,6 @@ the focus is on testing applications written with Angular.
|
|||
|
||||
{@a top}
|
||||
|
||||
<!--
|
||||
|
||||
|
||||
# Contents
|
||||
|
||||
* [Live examples](guide/testing#live-examples "Live examples of the tests in this guide")
|
||||
<br><br>
|
||||
* [Introduction to Angular testing](guide/testing#testing-intro)
|
||||
|
||||
* [Tools and technologies](guide/testing#tools-and-tech)
|
||||
* [Setup](guide/testing#setup)
|
||||
* [Isolated unit tests vs. the Angular testing utilities](guide/testing#isolated-v-testing-utilities)
|
||||
|
||||
* [The first karma test](guide/testing#1st-karma-test)
|
||||
|
||||
* [Run with karma](guide/testing#run-karma)
|
||||
* [Test debugging](guide/testing#test-debugging)
|
||||
* [Try the live example](guide/testing#live-karma-example)
|
||||
|
||||
* [Test a component](guide/testing#simple-component-test)
|
||||
|
||||
* [_TestBed_](guide/testing#testbed)
|
||||
* [_createComponent_](guide/testing#create-component)
|
||||
* [_ComponentFixture_, _DebugElement_, and _query(By.css)_](guide/testing#component-fixture)
|
||||
* [The tests](guide/testing#the-tests)
|
||||
* [_detectChanges_: Angular change detection within a test](guide/testing#detect-changes)
|
||||
* [Try the live example](guide/testing#try-example)
|
||||
* [Automatic change detection](guide/testing#auto-detect-changes)
|
||||
|
||||
* [Test a component with an external template](guide/testing#component-with-external-template)
|
||||
|
||||
* [The first asynchronous _beforeEach_](guide/testing#async-in-before-each)
|
||||
* [_compileComponents_](guide/testing#compile-components)
|
||||
* [The second synchronous _beforeEach_](guide/testing#second-before-each)
|
||||
* [Waiting for _compileComponents_](guide/testing#waiting-compile-components)
|
||||
* [Try the live example](guide/testing#live-external-template-example)
|
||||
|
||||
* [Test a component with a service dependency](guide/testing#component-with-dependency)
|
||||
|
||||
* [Provide service test doubles](guide/testing#service-test-doubles)
|
||||
* [Get injected services](guide/testing#get-injected-service)
|
||||
* [_TestBed.get_](guide/testing#testbed-get)
|
||||
* [Always get the service from an injector](guide/testing#service-from-injector)
|
||||
* [Final setup and tests](guide/testing#welcome-spec-setup)
|
||||
|
||||
* [Test a component with an async service](guide/testing#component-with-async-service)
|
||||
|
||||
* [Spying on the real service](guide/testing#service-spy)
|
||||
* [Synchronous tests](guide/testing#sync-tests)
|
||||
* [The _async_ funciton in it](guide/testing#async)
|
||||
* [_whenStable_](guide/testing#when-stable)
|
||||
* [The _fakeAsync_ function](guide/testing#fake-async)
|
||||
* [The _tick_ function](guide/testing#tick)
|
||||
* [_jasmine.done_](guide/testing#jasmine-done)
|
||||
|
||||
* [Test a component with inputs and outputs](guide/testing#component-with-input-output)
|
||||
|
||||
* [Test _DashboardHeroComponent_ stand-alone](guide/testing#dashboard-standalone)
|
||||
* [_triggerEventHandler_](guide/testing#trigger-event-handler)
|
||||
|
||||
* [Test a component inside a test host component](guide/testing#component-inside-test-host)
|
||||
|
||||
* [Test a routed component](guide/testing#routed-component)
|
||||
|
||||
* [The _inject_ helper function](guide/testing#inject)
|
||||
* [Test a routed component with parameters](guide/testing#routed-component-w-param)
|
||||
* [Create an _Observable_ test double](guide/testing#stub-observable)
|
||||
* [Testing with the _Observable_ test double](guide/testing#tests-w-observable-double)
|
||||
|
||||
* [Use a _page_ object to simplify setup](guide/testing#page-object)
|
||||
* [Set up with module imports](guide/testing#import-module)
|
||||
* [Import the feature module](guide/testing#feature-module-import)
|
||||
<br><br>
|
||||
* [Override a component's providers](guide/testing#component-override)
|
||||
|
||||
* [The _overrideComponent_ method](guide/testing#override-component-method)
|
||||
* [Provide a _spy-stub (HeroDetailServiceSpy)_](guide/testing#spy-stub)
|
||||
* [The override tests](guide/testing#override-tests)
|
||||
* [More overrides](guide/testing#more-overrides)
|
||||
|
||||
* [Test a _RouterOutlet_ component](guide/testing#router-outlet-component)
|
||||
|
||||
* [Stubbing unneeded components](guide/testing#stub-component)
|
||||
* [Stubbing the _RouterLink_](guide/testing#router-link-stub)
|
||||
* [_By.directive_ and injected directives](guide/testing#by-directive)
|
||||
* [What good are these tests?](guide/testing#why-stubbed-routerlink-tests)
|
||||
|
||||
* ["Shallow component tests" with *NO\_ERRORS\_SCHEMA*](guide/testing#shallow-component-test)
|
||||
<br><br>
|
||||
* [Test an attribute directive](guide/testing#attribute-directive)
|
||||
<br><br>
|
||||
* [Isolated unit tests](guide/testing#isolated-unit-tests "Unit testing without the Angular testing utilities")
|
||||
|
||||
* [Services](guide/testing#isolated-service-tests)
|
||||
* [Services with dependencies](guide/testing#services-with-dependencies)
|
||||
* [Pipes](guide/testing#isolated-pipe-tests)
|
||||
* [Write Angular tests too](guide/testing#write-tests)
|
||||
* [Components](guide/testing#isolated-component-tests)
|
||||
|
||||
* [Angular testing utility APIs](guide/testing#atu-apis)
|
||||
|
||||
* [_TestBed_ class summary](guide/testing#testbed-class-summary)
|
||||
* [The _ComponentFixture_](guide/testing#component-fixture-api-summary)
|
||||
* [_ComponentFixture_ properties](guide/testing#component-fixture-properties)
|
||||
* [The _ComponentFixture_ methods](guide/testing#component-fixture-methods)
|
||||
* [_DebugElement_](guide/testing#debug-element-details)
|
||||
|
||||
* [Test environment setup files](guide/testing#setup-files)
|
||||
|
||||
* [npm packages](guide/testing#npm-packages)
|
||||
|
||||
* [FAQ: Frequently asked questions](guide/testing#faq "Frequently asked questions")
|
||||
|
||||
It’s a big agenda. Fortunately, you can learn a little bit at a time and put each lesson to use.
|
||||
|
||||
-->
|
||||
|
||||
## Live examples
|
||||
|
||||
This guide presents tests of a sample application that is much like the [_Tour of Heroes_ tutorial](tutorial).
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
TypeScript Configuration
|
||||
|
||||
@intro
|
||||
TypeScript configuration for Angular developers.
|
||||
|
||||
@description
|
||||
|
||||
# TypeScript Configuration
|
||||
|
||||
TypeScript is a primary language for Angular application development.
|
||||
It is a superset of JavaScript with design-time support for type safety and tooling.
|
||||
|
|
@ -139,4 +132,4 @@ QuickStart identifies two *typings*, or `d.ts`, files:
|
|||
* [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *nodejs* environment;
|
||||
you can view an example in the [webpack](guide/webpack) page.
|
||||
|
||||
QuickStart doesn't require these typings but many of the samples do.
|
||||
QuickStart doesn't require these typings but many of the samples do.
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
User Input
|
||||
|
||||
@intro
|
||||
User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.
|
||||
|
||||
@description
|
||||
|
||||
# User Input
|
||||
|
||||
User actions such as clicking a link, pushing a button, and entering
|
||||
text raise DOM events.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
@title
|
||||
Visual Studio 2015 QuickStart
|
||||
# Visual Studio 2015 QuickStart
|
||||
|
||||
@intro
|
||||
Use Visual Studio 2015 with the QuickStart files.
|
||||
|
||||
@description
|
||||
{@a top}
|
||||
|
||||
Some developers prefer Visual Studio as their Integrated Development Environment (IDE).
|
||||
|
|
@ -30,21 +25,6 @@ the QuickStart application itself.
|
|||
To set up the QuickStart files with an **ASP.NET 4.x project** in
|
||||
Visual Studio 2015, follow these steps:
|
||||
|
||||
<!--
|
||||
|
||||
|
||||
* [Prerequisite](guide/visual-studio-2015#prereq1): Install Node.js.
|
||||
* [Prerequisite](guide/visual-studio-2015#prereq2): Install Visual Studio 2015 Update 3.
|
||||
* [Prerequisite](guide/visual-studio-2015#prereq3): Configure external web tools.
|
||||
* [Prerequisite](guide/visual-studio-2015#prereq4): Install TypeScript 2.2 for Visual Studio 2015.
|
||||
* [Step 1](guide/visual-studio-2015#download): Download the QuickStart files.
|
||||
* [Step 2](guide/visual-studio-2015#create-project): Create the Visual Studio ASP.NET project.
|
||||
* [Step 3](guide/visual-studio-2015#copy): Copy the QuickStart files into the ASP.NET project folder.
|
||||
* [Step 4](guide/visual-studio-2015#restore): Restore required packages.
|
||||
* [Step 5](guide/visual-studio-2015#build-and-run): Build and run the app.
|
||||
|
||||
-->
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@title
|
||||
Webpack: An Introduction
|
||||
|
||||
@intro
|
||||
Create Angular applications with a Webpack based tooling.
|
||||
|
||||
@description
|
||||
|
||||
# Webpack: An Introduction
|
||||
|
||||
<style>
|
||||
h4 {font-size: 17px !important; text-transform: none !important;}
|
||||
|
|
@ -781,7 +774,7 @@ Here again are the TypeScript entry-point files that define the `polyfills` and
|
|||
|
||||
{@a highlights}
|
||||
|
||||
### Highlights
|
||||
<h3 class="no-toc">Highlights</h3>
|
||||
|
||||
* There are no `<script>` or `<link>` tags in the `index.html`.
|
||||
The `HtmlWebpackPlugin` inserts them dynamically at runtime.
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ function formatNumber(
|
|||
* details see your native internationalization library.
|
||||
*
|
||||
* WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
|
||||
* and may require a polyfill. See {@linkDocs guide/browser-support} for details.
|
||||
* and may require a polyfill. See [Browser Support](guide/browser-support) for details.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
|
|
@ -107,7 +107,7 @@ export class DecimalPipe implements PipeTransform {
|
|||
* - `digitInfo` See {@link DecimalPipe} for detailed description.
|
||||
*
|
||||
* WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
|
||||
* and may require a polyfill. See {@linkDocs guide/browser-support} for details.
|
||||
* and may require a polyfill. See [Browser Support](guide/browser-support) for details.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
|
|
@ -140,7 +140,7 @@ export class PercentPipe implements PipeTransform {
|
|||
* - `digitInfo` See {@link DecimalPipe} for detailed description.
|
||||
*
|
||||
* WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
|
||||
* and may require a polyfill. See {@linkDocs guide/browser-support} for details.
|
||||
* and may require a polyfill. See [Browser Support](guide/browser-support) for details.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue