diff --git a/aio/.angular-cli.json b/aio/.angular-cli.json index 8c73878547..a9321db025 100644 --- a/aio/.angular-cli.json +++ b/aio/.angular-cli.json @@ -9,7 +9,7 @@ "outDir": "dist", "assets": [ "assets", - "content", + "generated", "app/search/search-worker.js", "favicon.ico", "pwa-manifest.json" diff --git a/aio/.gitignore b/aio/.gitignore index 49e9231363..b0de214ff5 100644 --- a/aio/.gitignore +++ b/aio/.gitignore @@ -3,7 +3,7 @@ # compiled output /dist /out-tsc -/src/content +/src/generated /tmp # dependencies diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 5f8a75b0a9..780aa78f0d 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -61,7 +61,7 @@ The examples in this page are available as a . ## Quickstart example: Transitioning between two states
- A simple transition animation + A simple transition animation
@@ -167,7 +167,7 @@ controls the timing of switching between one set of styles and the next:
- In Angular animations you define states and transitions between states + In Angular animations you define states and transitions between states
@@ -215,7 +215,7 @@ transitions that apply regardless of which state the animation is in. For exampl
- The wildcard state can be used to match many different transitions at once + The wildcard state can be used to match many different transitions at once
@@ -232,7 +232,7 @@ regardless of what state it was in before it left.
- The void state can be used for enter and leave transitions + The void state can be used for enter and leave transitions
@@ -242,7 +242,7 @@ The wildcard state `*` also matches `void`. ## Example: Entering and leaving
- Enter and leave animations + Enter and leave animations
@@ -289,7 +289,7 @@ These two common animations have their own aliases: ## Example: Entering and leaving from different states
- Enter and leave animations combined with state animations + Enter and leave animations combined with state animations
@@ -308,7 +308,7 @@ This gives you fine-grained control over each transition:
- This example transitions between active, inactive, and void states + This example transitions between active, inactive, and void states
@@ -341,7 +341,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau ## Automatic property calculation
- Animation with automated height calculation + Animation with automated height calculation
@@ -400,7 +400,7 @@ and the delay (or as the *second* value when there is no delay):
- Animations with specific timings + Animations with specific timings
@@ -422,7 +422,7 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: ## Multi-step animations with keyframes
- Animations with some bounce implemented with keyframes + Animations with some bounce implemented with keyframes
@@ -456,7 +456,7 @@ offsets receive offsets `0`, `0.5`, and `1`. ## Parallel animation groups
- Parallel animations with different timings, implemented with groups + Parallel animations with different timings, implemented with groups
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index 18cdab19fc..34cdc0f299 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -536,7 +536,7 @@ Rollup does the tree shaking as before. The general audience instructions for running the AOT build of the Tour of Heroes app are not ready. The following instructions presuppose that you have downloaded the - Tour of Heroes' zip + Tour of Heroes' zip and run `npm install` on it. @@ -602,8 +602,8 @@ showing exactly which application and Angular modules and classes are included i Here's the map for _Tour of Heroes_. - +
- toh-pt6-bundle + toh-pt6-bundle
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index f145c4d610..b225883e29 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -27,7 +27,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
- overview + overview
@@ -64,7 +64,7 @@ Learn these building blocks, and you're on your way. ## Modules
- Component + Component
@@ -182,7 +182,7 @@ These are two different and _complementary_ module systems. Use them both to wri
- Component + Component
@@ -244,7 +244,7 @@ Learn more from the [Angular modules](guide/ngmodule) page.
- Component + Component
@@ -284,7 +284,7 @@ Your app can take action at each moment in this lifecycle through optional [life ## Templates
- Template + Template
@@ -314,7 +314,7 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
- Metadata + Metadata
@@ -330,7 +330,7 @@ Notice how `` rests comfortably among native HTML elements. Custom ## Metadata
- Metadata + Metadata
@@ -379,7 +379,7 @@ so it can get the list of heroes to display.
- Metadata + Metadata
@@ -406,7 +406,7 @@ into actions and value updates. Writing such push/pull logic by hand is tedious, read as any experienced jQuery programmer can attest.
- Data Binding + Data Binding
@@ -454,7 +454,7 @@ from the root of the application component tree through all child components.
- Data Binding + Data Binding
@@ -463,7 +463,7 @@ Data binding plays an important role in communication between a template and its component.
- Parent/Child binding + Parent/Child binding
@@ -478,7 +478,7 @@ Data binding is also important for communication between parent and child compon ## Directives
- Parent child + Parent child
@@ -556,7 +556,7 @@ Of course, you can also write your own directives. Components such as ## Services
- Service + Service
@@ -624,7 +624,7 @@ application logic into services and make those services available to components ## Dependency injection
- Service + Service
@@ -656,7 +656,7 @@ This is *dependency injection*. The process of `HeroService` injection looks a bit like this:
- Service + Service
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index 25f47e9574..86b641dc73 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -168,7 +168,7 @@ Now when the app runs, the `myHighlight` directive highlights the paragraph text
- First Highlight + First Highlight
@@ -280,7 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
- Second Highlight + Second Highlight
@@ -438,7 +438,7 @@ Here are the harness and directive in action.
- Highlight v.2 + Highlight v.2
@@ -491,7 +491,7 @@ Here's how the harness should work when you're done coding.
- Final Highlight + Final Highlight
diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md index ad3d2ee648..7f57e6ec26 100644 --- a/aio/content/guide/cli-quickstart.md +++ b/aio/content/guide/cli-quickstart.md @@ -26,7 +26,7 @@ You'll pursue these ends in the following high-level steps: 3. [Serve](guide/cli-quickstart#serve) the application. 4. [Edit](guide/cli-quickstart#first-component) the application. -And you can also download the example. +And you can also download the example. @@ -123,7 +123,7 @@ Your app greets you with a message:
- The app works! + The app works!
@@ -161,7 +161,7 @@ Open `src/app/app.component.css` and give the component some style.
- Output of QuickStart app + Output of QuickStart app
diff --git a/aio/content/guide/component-communication.md b/aio/content/guide/component-communication.md index 2cee231bc3..547a7ac87c 100644 --- a/aio/content/guide/component-communication.md +++ b/aio/content/guide/component-communication.md @@ -54,7 +54,7 @@ The running application displays three heroes:
- Parent-to-child + Parent-to-child
@@ -98,7 +98,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name
- Parent-to-child-setter + Parent-to-child-setter
@@ -156,7 +156,7 @@ Here's the output of a button-pushing sequence:
- Parent-to-child-onchanges + Parent-to-child-onchanges
@@ -210,7 +210,7 @@ and the method processes it:
- Child-to-parent + Child-to-parent
@@ -272,7 +272,7 @@ Here we see the parent and child working together.
- countdown timer + countdown timer
@@ -424,7 +424,7 @@ facilitated by the service:
- bidirectional-service + bidirectional-service
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md index 87018b8d68..102bf4cacd 100644 --- a/aio/content/guide/dependency-injection-in-action.md +++ b/aio/content/guide/dependency-injection-in-action.md @@ -171,7 +171,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
- Logged In User + Logged In User
@@ -337,7 +337,7 @@ Find this example in live co and confirm that the three `HeroBioComponent` instances have their own cached hero data.
- Bios + Bios
@@ -403,7 +403,7 @@ placing it in the `` slot of the `HeroBioComponent` template: It looks like this, with the hero's telephone number from `HeroContactComponent` projected above the hero description:
- bio and contact + bio and contact
@@ -440,7 +440,7 @@ Thanks to `@Optional()`, Angular sets the `loggerService` to null and the rest o Here's the `HeroBiosAndContactsComponent` in action.
- Bios with contact into + Bios with contact into
@@ -450,7 +450,7 @@ until it finds the logger at the `AppComponent` level. The logger logic kicks in with the gratuitous "!!!", indicating that the logger was found.
- Without @Host + Without @Host
@@ -495,7 +495,7 @@ first without a value (yielding the default color) and then with an assigned col The following image shows the effect of mousing over the `` tag.
- Highlighted bios + Highlighted bios
{@a providers} @@ -573,7 +573,7 @@ The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and It's visually simple: a few properties and the logs produced by a logger.
- Hero of the month + Hero of the month
@@ -728,7 +728,7 @@ Now put it to use in a simplified version of the `HeroOfTheMonthComponent`. The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger` so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor:
- MinimalLogger restricted API + MinimalLogger restricted API
@@ -743,7 +743,7 @@ Behind the scenes, Angular actually sets the `logger` parameter to the full serv The following image, which displays the logging date, confirms the point:
- DateLoggerService entry + DateLoggerService entry
@@ -941,7 +941,7 @@ to display a *sorted* list of heroes.
- Sorted Heroes + Sorted Heroes
@@ -1154,7 +1154,7 @@ the same way you've done it before: Here's *Alex* and family in action:
- Alex in action + Alex in action
@@ -1215,7 +1215,7 @@ Here's *Alice*, *Barry* and family in action:
- Alice in action + Alice in action
diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md index a7fa20d696..54c1f0bc02 100644 --- a/aio/content/guide/displaying-data.md +++ b/aio/content/guide/displaying-data.md @@ -18,7 +18,7 @@ The final UI looks like this:
- Final UI + Final UI
@@ -126,7 +126,7 @@ inside the `` tag. Now run the app. It should display the title and hero name:
- Title and Hero + Title and Hero
@@ -233,7 +233,7 @@ Now the heroes appear in an unordered list.
- After ngfor + After ngfor
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index ff7c34cb5b..261431c390 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -214,7 +214,7 @@ Here are two sample components and the `AdComponent` interface for reference: The final ad banner looks like this:
- Ads + Ads
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md index 7998d97527..c6c0bf9ce6 100644 --- a/aio/content/guide/dynamic-form.md +++ b/aio/content/guide/dynamic-form.md @@ -218,7 +218,7 @@ Saving and retrieving the data is an exercise for another time. The final form looks like this:
- Dynamic-Form + Dynamic-Form
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md index 3c54b42b47..73a6612d0f 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -60,7 +60,7 @@ You'll learn to build a template-driven form that looks like this:
- Clean Form + Clean Form
@@ -74,7 +74,7 @@ If you delete the hero name, the form displays a validation error in an attentio
- Invalid, Name Required + Invalid, Name Required
@@ -372,7 +372,7 @@ Running the app right now would be disappointing.
- Early form with no binding + Early form with no binding
@@ -456,7 +456,7 @@ At some point it might look like this:
- ngModel in action + ngModel in action
@@ -529,7 +529,7 @@ If you run the app now and change every hero model property, the form might disp
- ngModel in action + ngModel in action
@@ -642,7 +642,7 @@ The actions and effects are as follows:
- Control State Transition + Control State Transition
@@ -651,7 +651,7 @@ You should see the following transitions and class names:
- Control state transitions + Control state transitions
@@ -671,7 +671,7 @@ on the left of the input box:
- Invalid Form + Invalid Form
@@ -705,7 +705,7 @@ When the user deletes the name, the form should look like this:
- Name required + Name required
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md index cbfabfb0ec..2b709aeb01 100644 --- a/aio/content/guide/hierarchical-dependency-injection.md +++ b/aio/content/guide/hierarchical-dependency-injection.md @@ -55,7 +55,7 @@ open simultaneously.
- injector tree + injector tree
@@ -149,7 +149,7 @@ Each tax return component has the following characteristics:
- Heroes in action + Heroes in action
@@ -234,7 +234,7 @@ Component (B) is the parent of another component (C) that defines its own, even
- car components + car components
@@ -247,7 +247,7 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
- car injector tree + car injector tree
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md index d336ec6984..029b4a790d 100644 --- a/aio/content/guide/http.md +++ b/aio/content/guide/http.md @@ -178,7 +178,7 @@ The app uses the Angular Http client to communicate via **XMLHttpRe It works like this:
- ToH mini app + ToH mini app
@@ -746,7 +746,7 @@ types in a text box:
- Wikipedia search app (v.1) + Wikipedia search app (v.1)
@@ -865,7 +865,7 @@ It should only make requests when the user *stops typing*. Here's how it will work after refactoring:
- Wikipedia search app (v.2) + Wikipedia search app (v.2)
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md index f7e200aea2..40894e7f62 100644 --- a/aio/content/guide/lifecycle-hooks.md +++ b/aio/content/guide/lifecycle-hooks.md @@ -9,7 +9,7 @@ Angular calls lifecycle hook methods on directives and components as it creates,
- Us + Us
@@ -465,7 +465,7 @@ The peek-a-boo exists to show how Angular calls the hooks in the expected order. This snapshot reflects the state of the log after the user clicked the *Create...* button and then the *Destroy...* button.
- Peek-a-boo + Peek-a-boo
@@ -549,7 +549,7 @@ with an entry in the *Hook Log* as seen here:
- Spy Directive + Spy Directive
@@ -672,7 +672,7 @@ Here's the sample in action as the user makes changes.
- OnChanges + OnChanges
@@ -718,7 +718,7 @@ so you can see how often `DoCheck` is called. The results are illuminating:
- DoCheck + DoCheck
@@ -795,7 +795,7 @@ for one turn of the browser's JavaScript cycle and that's just long enough. Here's *AfterView* in action:
- AfterView + AfterView
@@ -859,7 +859,7 @@ It tells Angular where to insert that content. In this case, the projected content is the `` from the parent.
- Projected Content + Projected Content
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md index 62b83dc606..b4e1e5f74e 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -145,7 +145,7 @@ As you click the button, the displayed date alternates between
- Date Format Toggle + Date Format Toggle
@@ -237,7 +237,7 @@ Now you need a component to demonstrate the pipe.
- Power Booster + Power Booster
@@ -285,7 +285,7 @@ your pipe and two-way data binding with `ngModel`.
- Power Boost Calculator + Power Boost Calculator
@@ -372,7 +372,7 @@ code with checkbox switches and additional displays to help you experience these
- Flying Heroes + Flying Heroes
@@ -559,7 +559,7 @@ The component renders as the following:
- Hero List + Hero List
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index 7730015015..d84cff421b 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -353,7 +353,7 @@ Now that everything is wired up, the browser should display something like this:
- Single FormControl + Single FormControl
@@ -457,7 +457,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
- JSON output + JSON output
@@ -567,7 +567,7 @@ The browser displays the following:
- Single FormControl + Single FormControl
@@ -696,7 +696,7 @@ with the nested address `FormGroup`:
- JSON output + JSON output
@@ -1052,7 +1052,7 @@ Together they look a bit like this:
- HeroListComponent + HeroListComponent
@@ -1265,7 +1265,7 @@ Back in the browser, select the hero named "Magneta".
- JSON output of addresses array + JSON output of addresses array
@@ -1343,7 +1343,7 @@ After you implement both features in this section, the form will look like this:
- Form with save & revert buttons + Form with save & revert buttons
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 6679975c3c..434a6ac3f0 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -533,7 +533,7 @@ and the *Heroes* view with its list of heroes.
- Hero List + Hero List
@@ -541,7 +541,7 @@ and the *Heroes* view with its list of heroes. Select one hero and the app takes you to a hero editing screen.
- Crisis Center Detail + Crisis Center Detail
@@ -558,7 +558,7 @@ Now click the *Crisis Center* link for a list of ongoing crises.
- Crisis Center List + Crisis Center List
@@ -571,7 +571,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
- Crisis Center Detail + Crisis Center Detail
@@ -587,7 +587,7 @@ Up pops a dialog box.
- Confirm Dialog + Confirm Dialog
@@ -609,7 +609,7 @@ Proceed to the first application milestone. Begin with a simple version of the app that navigates between two empty views.
- App in action + App in action
@@ -765,7 +765,7 @@ and a *router outlet* where the router swaps views on and off the page. Here's w
- Shell + Shell
@@ -1250,7 +1250,7 @@ Here's how the user will experience this version of the app:
- App in action + App in action
@@ -1880,7 +1880,7 @@ it would be nice if the viewed hero was preselected in the list.
- Selected hero + Selected hero
@@ -2098,7 +2098,7 @@ Look for it within the repeated `
  • ` tag as shown here: When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
    - Selected List + Selected List
    @@ -2396,7 +2396,7 @@ If your app had many feature areas, the app component trees might look like this
    - Component Tree + Component Tree
    @@ -2695,7 +2695,7 @@ and two buttons, "Send" and "Cancel".
    - Contact popup + Contact popup
    diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md index 11294aa383..01f9d93c24 100644 --- a/aio/content/guide/security.md +++ b/aio/content/guide/security.md @@ -143,7 +143,7 @@ tag but keeps safe content such as the text content of the `