honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

build(aio): rename `src/content` to `src/generated` 

This commit will definitely require a clean up of your
working folder:

```
cd aio
git clean -xdf
yarn setup
```
This commit is contained in:
Peter Bacon Darwin 2017-05-03 13:55:00 +01:00 committed by Matias Niemelä
parent 1cfb263ee3
commit 5b96fb9320
56 changed files with 234 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/.angular-cli.json
View File

@ -9,7 +9,7 @@
"outDir": "dist",
"assets": [
"assets",
"content",
"generated",
"app/search/search-worker.js",
"favicon.ico",
"pwa-manifest.json"

2
aio/.gitignore vendored
View File

@ -3,7 +3,7 @@
# compiled output
/dist
/out-tsc
/src/content
/src/generated
/tmp
# dependencies

22
aio/content/guide/animations.md
View File

@ -61,7 +61,7 @@ The examples in this page are available as a <live-example></live-example>.
## Quickstart example: Transitioning between two states
<figure>
<img src="content/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
<img src="generated/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px"></img>
</figure>
@ -167,7 +167,7 @@ controls the timing of switching between one set of styles and the next:
<figure class='image-display'>
<img src="content/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"></img>
</figure>
@ -215,7 +215,7 @@ transitions that apply regardless of which state the animation is in. For exampl
<figure class='image-display'>
<img src="content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"></img>
</figure>
@ -232,7 +232,7 @@ regardless of what state it was in before it left.
<figure class='image-display'>
<img src="content/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
<img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"></img>
</figure>
@ -242,7 +242,7 @@ The wildcard state `*` also matches `void`.
## Example: Entering and leaving
<figure>
<img src="content/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
<img src="generated/images/guide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;"></img>
</figure>
@ -289,7 +289,7 @@ These two common animations have their own aliases:
## Example: Entering and leaving from different states
<figure>
<img src="content/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
<img src="generated/images/guide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px"></img>
</figure>
@ -308,7 +308,7 @@ This gives you fine-grained control over each transition:
<figure class='image-display'>
<img src="content/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"></img>
</figure>
@ -341,7 +341,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
## Automatic property calculation
<figure>
<img src="content/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
<img src="generated/images/guide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px"></img>
</figure>
@ -400,7 +400,7 @@ and the delay (or as the *second* value when there is no delay):
<figure>
<img src="content/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
<img src="generated/images/guide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px"></img>
</figure>
@ -422,7 +422,7 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
## Multi-step animations with keyframes
<figure>
<img src="content/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
<img src="generated/images/guide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px"></img>
</figure>
@ -456,7 +456,7 @@ offsets receive offsets `0`, `0.5`, and `1`.
## Parallel animation groups
<figure>
<img src="content/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
<img src="generated/images/guide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px"></img>
</figure>

6
aio/content/guide/aot-compiler.md
View File

@ -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
<a href="/content/zips/toh-pt6/toh-pt6.zip" target="_blank">Tour of Heroes' zip</a>
<a href="generated/zips/toh-pt6/toh-pt6.zip" target="_blank">Tour of Heroes' zip</a>
and run `npm install` on it.
</div>
@ -602,8 +602,8 @@ showing exactly which application and Angular modules and classes are included i
Here's the map for _Tour of Heroes_.
<a href="content/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
<a href="generated/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
<figure class='image-display'>
<img src="content/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
<img src="generated/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle"></img>
</figure>
</a>

30
aio/content/guide/architecture.md
View File

@ -27,7 +27,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
<figure>
<img src="content/images/guide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
<img src="generated/images/guide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700"></img>
</figure>
@ -64,7 +64,7 @@ Learn these building blocks, and you're on your way.
## Modules
<figure>
<img src="content/images/guide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -182,7 +182,7 @@ These are two different and _complementary_ module systems. Use them both to wri
<figure>
<img src="content/images/guide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -244,7 +244,7 @@ Learn more from the [Angular modules](guide/ngmodule) page.
<figure>
<img src="content/images/guide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -284,7 +284,7 @@ Your app can take action at each moment in this lifecycle through optional [life
## Templates
<figure>
<img src="content/images/guide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -314,7 +314,7 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
<figure>
<img src="content/images/guide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -330,7 +330,7 @@ Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom
## Metadata
<figure>
<img src="content/images/guide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -379,7 +379,7 @@ so it can get the list of heroes to display.
<figure>
<img src="content/images/guide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -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.
<figure>
<img src="content/images/guide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" style="width:220px; float:left; margin-left:-40px;margin-right:20px"></img>
</figure>
@ -454,7 +454,7 @@ from the root of the application component tree through all child components.
<figure>
<img src="content/images/guide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -463,7 +463,7 @@ Data binding plays an important role in communication
between a template and its component.<br class="l-clear-both">
<figure>
<img src="content/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -478,7 +478,7 @@ Data binding is also important for communication between parent and child compon
## Directives
<figure>
<img src="content/images/guide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/directive.png" alt="Parent child" style="float:left; width:150px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -556,7 +556,7 @@ Of course, you can also write your own directives. Components such as
## Services
<figure>
<img src="content/images/guide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -624,7 +624,7 @@ application logic into services and make those services available to components
## Dependency injection
<figure>
<img src="content/images/guide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -656,7 +656,7 @@ This is *dependency injection*.
The process of `HeroService` injection looks a bit like this:
<figure>
<img src="content/images/guide/architecture/injector-injects.png" alt="Service"></img>
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service"></img>
</figure>

8
aio/content/guide/attribute-directives.md
View File

@ -168,7 +168,7 @@ Now when the app runs, the `myHighlight` directive highlights the paragraph text
<figure class='image-display'>
<img src="content/images/guide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
<img src="generated/images/guide/attribute-directives/first-highlight.png" alt="First Highlight"></img>
</figure>
@ -280,7 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
<figure class='image-display'>
<img src="content/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight"></img>
</figure>
@ -438,7 +438,7 @@ Here are the harness and directive in action.
<figure class='image-display'>
<img src="content/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2"></img>
</figure>
@ -491,7 +491,7 @@ Here's how the harness should work when you're done coding.
<figure class='image-display'>
<img src="content/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"></img>
</figure>

6
aio/content/guide/cli-quickstart.md
View File

@ -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 <a href="/content/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
@ -123,7 +123,7 @@ Your app greets you with a message:
<figure class='image-display'>
<img src='content/images/guide/cli-quickstart/app-works.png' alt="The app works!"></img>
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!"></img>
</figure>
@ -161,7 +161,7 @@ Open `src/app/app.component.css` and give the component some style.
<figure class='image-display'>
<img src='content/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app"></img>
</figure>

12
aio/content/guide/component-communication.md
View File

@ -54,7 +54,7 @@ The running application displays three heroes:
<figure class='image-display'>
<img src="content/images/guide/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
<img src="generated/images/guide/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
</figure>
@ -98,7 +98,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name
<figure class='image-display'>
<img src="content/images/guide/component-communication/setter.png" alt="Parent-to-child-setter"></img>
<img src="generated/images/guide/component-communication/setter.png" alt="Parent-to-child-setter"></img>
</figure>
@ -156,7 +156,7 @@ Here's the output of a button-pushing sequence:
<figure class='image-display'>
<img src="content/images/guide/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
<img src="generated/images/guide/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
</figure>
@ -210,7 +210,7 @@ and the method processes it:
<figure class='image-display'>
<img src="content/images/guide/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
<img src="generated/images/guide/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
</figure>
@ -272,7 +272,7 @@ Here we see the parent and child working together.
<figure class='image-display'>
<img src="content/images/guide/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
<img src="generated/images/guide/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
</figure>
@ -424,7 +424,7 @@ facilitated by the service:
<figure class='image-display'>
<img src="content/images/guide/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
<img src="generated/images/guide/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
</figure>

24
aio/content/guide/dependency-injection-in-action.md
View File

@ -171,7 +171,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User"></img>
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User"></img>
</figure>
@ -337,7 +337,7 @@ Find this example in <live-example name="dependency-injection-in-action">live co
and confirm that the three `HeroBioComponent` instances have their own cached hero data.
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios"></img>
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios"></img>
</figure>
@ -403,7 +403,7 @@ placing it in the `<ng-content>` slot of the `HeroBioComponent` template:
It looks like this, with the hero's telephone number from `HeroContactComponent` projected above the hero description:
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact"></img>
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact"></img>
</figure>
@ -440,7 +440,7 @@ Thanks to `@Optional()`, Angular sets the `loggerService` to null and the rest o
Here's the `HeroBiosAndContactsComponent` in action.
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into"></img>
</figure>
@ -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.
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host"></img>
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host"></img>
</figure>
@ -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 `<hero-bios-and-contacts>` tag.
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios"></img>
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios"></img>
</figure>
{@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.
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month" width="300px"></img>
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month" width="300px"></img>
</figure>
@ -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:
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API"></img>
</figure>
@ -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:
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry" width="300px"></img>
</figure>
@ -941,7 +941,7 @@ to display a *sorted* list of heroes.
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes"></img>
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes"></img>
</figure>
@ -1154,7 +1154,7 @@ the same way you've done it before:
Here's *Alex* and family in action:
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action"></img>
<img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action"></img>
</figure>
@ -1215,7 +1215,7 @@ Here's *Alice*, *Barry* and family in action:
<figure class='image-display'>
<img src="content/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action"></img>
<img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action"></img>
</figure>

6
aio/content/guide/displaying-data.md
View File

@ -18,7 +18,7 @@ The final UI looks like this:
<figure class='image-display'>
<img src="content/images/guide/displaying-data/final.png" alt="Final UI"></img>
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI"></img>
</figure>
@ -126,7 +126,7 @@ inside the `<my-app>` tag.
Now run the app. It should display the title and hero name:
<figure class='image-display'>
<img src="content/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
<img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero"></img>
</figure>
@ -233,7 +233,7 @@ Now the heroes appear in an unordered list.
<figure class='image-display'>
<img src="content/images/guide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
<img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor"></img>
</figure>

2
aio/content/guide/dynamic-component-loader.md
View File

@ -214,7 +214,7 @@ Here are two sample components and the `AdComponent` interface for reference:
The final ad banner looks like this:
<figure class='image-display'>
<img src="content/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
<img src="generated/images/guide/dynamic-component-loader/ads.gif" alt="Ads"></img>
</figure>

2
aio/content/guide/dynamic-form.md
View File

@ -218,7 +218,7 @@ Saving and retrieving the data is an exercise for another time.
The final form looks like this:
<figure class='image-display'>
<img src="content/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
<img src="generated/images/guide/dynamic-form/dynamic-form.png" alt="Dynamic-Form"></img>
</figure>

18
aio/content/guide/forms.md
View File

@ -60,7 +60,7 @@ You'll learn to build a template-driven form that looks like this:
<figure class='image-display'>
<img src="content/images/guide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
<img src="generated/images/guide/forms/hero-form-1.png" width="400px" alt="Clean Form"></img>
</figure>
@ -74,7 +74,7 @@ If you delete the hero name, the form displays a validation error in an attentio
<figure class='image-display'>
<img src="content/images/guide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
<img src="generated/images/guide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required"></img>
</figure>
@ -372,7 +372,7 @@ Running the app right now would be disappointing.
<figure class='image-display'>
<img src="content/images/guide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
<img src="generated/images/guide/forms/hero-form-3.png" width="400px" alt="Early form with no binding"></img>
</figure>
@ -456,7 +456,7 @@ At some point it might look like this:
<figure class='image-display'>
<img src="content/images/guide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
<img src="generated/images/guide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action"></img>
</figure>
@ -529,7 +529,7 @@ If you run the app now and change every hero model property, the form might disp
<figure class='image-display'>
<img src="content/images/guide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
<img src="generated/images/guide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in action"></img>
</figure>
@ -642,7 +642,7 @@ The actions and effects are as follows:
<figure class='image-display'>
<img src="content/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
<img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition"></img>
</figure>
@ -651,7 +651,7 @@ You should see the following transitions and class names:
<figure class='image-display'>
<img src="content/images/guide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
<img src="generated/images/guide/forms/ng-control-class-changes.png" width="500px" alt="Control state transitions"></img>
</figure>
@ -671,7 +671,7 @@ on the left of the input box:
<figure class='image-display'>
<img src="content/images/guide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
<img src="generated/images/guide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form"></img>
</figure>
@ -705,7 +705,7 @@ When the user deletes the name, the form should look like this:
<figure class='image-display'>
<img src="content/images/guide/forms/name-required-error.png" width="400px" alt="Name required"></img>
<img src="generated/images/guide/forms/name-required-error.png" width="400px" alt="Name required"></img>
</figure>

8
aio/content/guide/hierarchical-dependency-injection.md
View File

@ -55,7 +55,7 @@ open simultaneously.
<figure class='image-display'>
<img src="content/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
<img src="generated/images/guide/dependency-injection/component-hierarchy.png" alt="injector tree" width="600"></img>
</figure>
@ -149,7 +149,7 @@ Each tax return component has the following characteristics:
<figure class='image-display'>
<img src="content/images/guide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
<img src="generated/images/guide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action"></img>
</figure>
@ -234,7 +234,7 @@ Component (B) is the parent of another component (C) that defines its own, even
<figure class='image-display'>
<img src="content/images/guide/dependency-injection/car-components.png" alt="car components" width="220"></img>
<img src="generated/images/guide/dependency-injection/car-components.png" alt="car components" width="220"></img>
</figure>
@ -247,7 +247,7 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
<figure class='image-display'>
<img src="content/images/guide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
<img src="generated/images/guide/dependency-injection/injector-tree.png" alt="car injector tree" width="600"></img>
</figure>

6
aio/content/guide/http.md
View File

@ -178,7 +178,7 @@ The app uses the Angular <code>Http</code> client to communicate via **XMLHttpRe
It works like this:
<figure class='image-display'>
<img src='content/images/guide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
<img src='generated/images/guide/http/http-toh.gif' alt="ToH mini app" width="250"></img>
</figure>
@ -746,7 +746,7 @@ types in a text box:
<figure class='image-display'>
<img src='content/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
<img src='generated/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250"></img>
</figure>
@ -865,7 +865,7 @@ It should only make requests when the user *stops typing*.
Here's how it will work after refactoring:
<figure class='image-display'>
<img src='content/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
<img src='generated/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250"></img>
</figure>

14
aio/content/guide/lifecycle-hooks.md
View File

@ -9,7 +9,7 @@ Angular calls lifecycle hook methods on directives and components as it creates,
<figure>
<img src="content/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px"></img>
</figure>
@ -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.
<figure class='image-display'>
<img src="content/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
<img src="generated/images/guide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo"></img>
</figure>
@ -549,7 +549,7 @@ with an entry in the *Hook Log* as seen here:
<figure class='image-display'>
<img src='content/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
<img src='generated/images/guide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive"></img>
</figure>
@ -672,7 +672,7 @@ Here's the sample in action as the user makes changes.
<figure class='image-display'>
<img src='content/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
<img src='generated/images/guide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges"></img>
</figure>
@ -718,7 +718,7 @@ so you can see how often `DoCheck` is called. The results are illuminating:
<figure class='image-display'>
<img src='content/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
<img src='generated/images/guide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck"></img>
</figure>
@ -795,7 +795,7 @@ for one turn of the browser's JavaScript cycle and that's just long enough.
Here's *AfterView* in action:
<figure class='image-display'>
<img src='content/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
<img src='generated/images/guide/lifecycle-hooks/after-view-anim.gif' alt="AfterView"></img>
</figure>
@ -859,7 +859,7 @@ It tells Angular where to insert that content.
In this case, the projected content is the `<my-child>` from the parent.
<figure class='image-display'>
<img src='content/images/guide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
<img src='generated/images/guide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content"></img>
</figure>

10
aio/content/guide/pipes.md
View File

@ -145,7 +145,7 @@ As you click the button, the displayed date alternates between
<figure class='image-display'>
<img src='content/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
<img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle"></img>
</figure>
@ -237,7 +237,7 @@ Now you need a component to demonstrate the pipe.
<figure class='image-display'>
<img src='content/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
<img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
</figure>
@ -285,7 +285,7 @@ your pipe and two-way data binding with `ngModel`.
<figure class='image-display'>
<img src='content/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
<img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator"></img>
</figure>
@ -372,7 +372,7 @@ code with checkbox switches and additional displays to help you experience these
<figure class='image-display'>
<img src='content/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
<img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes"></img>
</figure>
@ -559,7 +559,7 @@ The component renders as the following:
<figure class='image-display'>
<img src='content/images/guide/pipes/hero-list.png' alt="Hero List"></img>
<img src='generated/images/guide/pipes/hero-list.png' alt="Hero List"></img>
</figure>

14
aio/content/guide/reactive-forms.md
View File

@ -353,7 +353,7 @@ Now that everything is wired up, the browser should display something like this:
<figure class='image-display'>
<img src="content/images/guide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
<img src="generated/images/guide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl"></img>
</figure>
@ -457,7 +457,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
<figure class='image-display'>
<img src="content/images/guide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
<img src="generated/images/guide/reactive-forms/json-output.png" width="400px" alt="JSON output"></img>
</figure>
@ -567,7 +567,7 @@ The browser displays the following:
<figure class='image-display'>
<img src="content/images/guide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
<img src="generated/images/guide/reactive-forms/validators-json-output.png" width="400px" alt="Single FormControl"></img>
</figure>
@ -696,7 +696,7 @@ with the nested address `FormGroup`:
<figure class='image-display'>
<img src="content/images/guide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
<img src="generated/images/guide/reactive-forms/address-group.png" width="400px" alt="JSON output"></img>
</figure>
@ -1052,7 +1052,7 @@ Together they look a bit like this:
<figure class='image-display'>
<img src="content/images/guide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
<img src="generated/images/guide/reactive-forms/hero-list.png" width="420px" alt="HeroListComponent"></img>
</figure>
@ -1265,7 +1265,7 @@ Back in the browser, select the hero named "Magneta".
<figure class='image-display'>
<img src="content/images/guide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
<img src="generated/images/guide/reactive-forms/addresses-array.png" width="400px" alt="JSON output of addresses array"></img>
</figure>
@ -1343,7 +1343,7 @@ After you implement both features in this section, the form will look like this:
<figure class='image-display'>
<img src="content/images/guide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
<img src="generated/images/guide/reactive-forms/save-revert-buttons.png" width="389px" alt="Form with save & revert buttons"></img>
</figure>

24
aio/content/guide/router.md
View File

@ -533,7 +533,7 @@ and the *Heroes* view with its list of heroes.
<figure class='image-display'>
<img src='content/images/guide/router/hero-list.png' alt="Hero List" width="250"></img>
<img src='generated/images/guide/router/hero-list.png' alt="Hero List" width="250"></img>
</figure>
@ -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.
<figure class='image-display'>
<img src='content/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
<img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250"></img>
</figure>
@ -558,7 +558,7 @@ Now click the *Crisis Center* link for a list of ongoing crises.
<figure class='image-display'>
<img src='content/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
<img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250"></img>
</figure>
@ -571,7 +571,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
<figure class='image-display'>
<img src='content/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
<img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250"></img>
</figure>
@ -587,7 +587,7 @@ Up pops a dialog box.
<figure class='image-display'>
<img src='content/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
<img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250"></img>
</figure>
@ -609,7 +609,7 @@ Proceed to the first application milestone.
Begin with a simple version of the app that navigates between two empty views.
<figure class='image-display'>
<img src='content/images/guide/router/router-1-anim.gif' alt="App in action" width="250"></img>
<img src='generated/images/guide/router/router-1-anim.gif' alt="App in action" width="250"></img>
</figure>
@ -765,7 +765,7 @@ and a *router outlet* where the router swaps views on and off the page. Here's w
<figure class='image-display'>
<img src='content/images/guide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
<img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell" width="300"></img>
</figure>
@ -1250,7 +1250,7 @@ Here's how the user will experience this version of the app:
<figure class='image-display'>
<img src='content/images/guide/router/router-2-anim.gif' alt="App in action"></img>
<img src='generated/images/guide/router/router-2-anim.gif' alt="App in action"></img>
</figure>
@ -1880,7 +1880,7 @@ it would be nice if the viewed hero was preselected in the list.
<figure class='image-display'>
<img src='content/images/guide/router/selected-hero.png' alt="Selected hero"></img>
<img src='generated/images/guide/router/selected-hero.png' alt="Selected hero"></img>
</figure>
@ -2098,7 +2098,7 @@ Look for it within the repeated `<li>` tag as shown here:
When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
<figure class='image-display'>
<img src='content/images/guide/router/selected-hero.png' alt="Selected List"></img>
<img src='generated/images/guide/router/selected-hero.png' alt="Selected List"></img>
</figure>
@ -2396,7 +2396,7 @@ If your app had many feature areas, the app component trees might look like this
<figure class='image-display'>
<img src='content/images/guide/router/component-tree.png' alt="Component Tree"></img>
<img src='generated/images/guide/router/component-tree.png' alt="Component Tree"></img>
</figure>
@ -2695,7 +2695,7 @@ and two buttons, "Send" and "Cancel".
<figure class='image-display'>
<img src='content/images/guide/router/contact-popup.png' alt="Contact popup" width="250"></img>
<img src='generated/images/guide/router/contact-popup.png' alt="Contact popup" width="250"></img>
</figure>

4
aio/content/guide/security.md
View File

@ -143,7 +143,7 @@ tag but keeps safe content such as the text content of the `<script>` tag and th
<figure class='image-display'>
<img src='content/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
<img src='generated/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'></img>
</figure>
@ -232,7 +232,7 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
<figure class='image-display'>
<img src='content/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
<img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'></img>
</figure>

4
aio/content/guide/set-document-title.md
View File

@ -29,7 +29,7 @@ See the <live-example name="set-document-title"></live-example>.
</td>
<td>
<img src='content/images/plunker/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img> <br></br> <img src='content/images/plunker/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
<img src='generated/images/plunker/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right"></img> <br></br> <img src='generated/images/plunker/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right"></img>
</td>
</tr>
@ -89,7 +89,7 @@ You can inject the `Title` service into the root `AppComponent` and expose a bin
Bind that method to three anchor tags and voilà!
<figure class='image-display'>
<img src="content/images/guide/set-document-title/set-title-anim.gif" alt="Set title"></img>
<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title"></img>
</figure>

18
aio/content/guide/structural-directives.md
View File

@ -158,7 +158,7 @@ Confirm that fact using browser developer tools to inspect the DOM.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
<img src='generated/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM"></img>
</figure>
@ -186,7 +186,7 @@ While invisible, the element remains in the DOM.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
<img src='generated/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM"></img>
</figure>
@ -261,7 +261,7 @@ Only the finished product ends up in the DOM.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
<img src='generated/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM"></img>
</figure>
@ -498,7 +498,7 @@ Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
<img src='generated/images/guide/structural-directives/template-rendering.png' width="350" alt="template tag rendering"></img>
</figure>
@ -564,7 +564,7 @@ The constructed paragraph renders strangely.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
<img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style"></img>
</figure>
@ -588,7 +588,7 @@ the drop down is empty.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
<img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work"></img>
</figure>
@ -613,7 +613,7 @@ It renders properly.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
<img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style"></img>
</figure>
@ -631,7 +631,7 @@ The drop down works properly.
<figure class='image-display'>
<img src='content/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
<img src='generated/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly"></img>
</figure>
@ -788,7 +788,7 @@ When the `condition` is truthy, the top (A) paragraph is removed and the bottom
<figure class='image-display'>
<img src='content/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
<img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action"></img>
</figure>

10
aio/content/guide/template-syntax.md
View File

@ -1069,7 +1069,7 @@ content harmlessly.
<figure class='image-display'>
<img src='content/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
<img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width='500px'></img>
</figure>
@ -1839,7 +1839,7 @@ Here are all variations in action, including the uppercase version:
<figure class='image-display'>
<img src='content/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
<img src='generated/images/guide/template-syntax/ng-model-anim.gif' alt="NgModel variations"></img>
</figure>
@ -2134,7 +2134,7 @@ Here is an illustration of the _trackBy_ effect.
<figure class='image-display'>
<img src='content/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
<img src='generated/images/guide/template-syntax/ng-for-track-by-anim.gif' alt="trackBy"></img>
</figure>
@ -2169,7 +2169,7 @@ Angular puts only the *selected* element into the DOM.
<figure class='image-display'>
<img src='content/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
<img src='generated/images/guide/template-syntax/switch-anim.gif' alt="trackBy"></img>
</figure>
@ -2419,7 +2419,7 @@ The terms _input_ and _output_ reflect the perspective of the target directive.
<figure class='image-display'>
<img src='content/images/guide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
<img src='generated/images/guide/template-syntax/input-output.png' alt="Inputs and outputs"></img>
</figure>

8
aio/content/guide/testing.md
View File

@ -389,7 +389,7 @@ The Angular CLI has different commands to do the same thing. Adjust accordingly.
After a few moments, karma opens a browser and starts writing to the console.
<figure class='image-display'>
<img src='content/images/guide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
<img src='generated/images/guide/testing/karma-browser.png' style="width:400px;" alt="Karma browser"></img>
</figure>
@ -473,7 +473,7 @@ Debug specs in the browser in the same way that you debug an application.
<figure class='image-display'>
<img src='content/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging"></img>
</figure>
@ -1916,7 +1916,7 @@ Inspect and download _all_ of the guide's application test code with this <live-
The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
<figure class='image-display'>
<img src='content/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
<img src='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action"></img>
</figure>
@ -2507,7 +2507,7 @@ A better solution is to create an artificial test component that demonstrates al
<figure class='image-display'>
<img src='content/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
<img src='generated/images/guide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action"></img>
</figure>

14
aio/content/guide/upgrade.md
View File

@ -338,7 +338,7 @@ everything work seamlessly:
<figure class='image-display'>
<img src="content/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
<img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700"></img>
</figure>
@ -383,7 +383,7 @@ ways:
<figure class='image-display'>
<img src="content/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
<img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500"></img>
</figure>
@ -437,7 +437,7 @@ AngularJS and Angular approaches. Here's what happens:
<figure class='image-display'>
<img src="content/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
<img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600"></img>
</figure>
@ -571,7 +571,7 @@ existing AngularJS code works as before _and_ you're ready to run Angular code.
### Using Angular Components from AngularJS Code
<figure>
<img src="content/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -735,7 +735,7 @@ For example, we can easily make multiple copies of the component using `ng-repe
### Using AngularJS Component Directives from Angular Code
<figure>
<img src="content/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -938,7 +938,7 @@ and then provide the input and output using Angular template syntax:
### Projecting AngularJS Content into Angular Components
<figure>
<img src="content/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>
@ -985,7 +985,7 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
### Transcluding Angular Content into AngularJS Component Directives
<figure>
<img src="content/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px"></img>
</figure>

8
aio/content/guide/user-input.md
View File

@ -98,7 +98,7 @@ Here's what the UI displays:
<figure class='image-display'>
<img src='content/images/guide/user-input/keyup1-anim.gif' alt="key up 1"></img>
<img src='generated/images/guide/user-input/keyup1-anim.gif' alt="key up 1"></img>
</figure>
@ -181,7 +181,7 @@ Type something in the input box, and watch the display update with each keystrok
<figure class='image-display'>
<img src='content/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
<img src='generated/images/guide/user-input/keyup-loop-back-anim.gif' alt="loop back"></img>
</figure>
@ -235,7 +235,7 @@ Then Angular calls the event handler only when the user presses _Enter_.
Here's how it works.
<figure class='image-display'>
<img src='content/images/guide/user-input/keyup3-anim.gif' alt="key up 3"></img>
<img src='generated/images/guide/user-input/keyup3-anim.gif' alt="key up 3"></img>
</figure>
@ -269,7 +269,7 @@ clicking **Add**.
<figure class='image-display'>
<img src='content/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
<img src='generated/images/guide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes"></img>
</figure>

16
aio/content/guide/webpack.md
View File

@ -52,12 +52,12 @@ This guide offers a taste of Webpack and explains how to use it with Angular app
* [Development configuration](guide/webpack#development-configuration)
* [Production configuration](guide/webpack#production-configuration)
* [Test configuration](guide/webpack#test-configuration)
* [Trying it out](guide/webpack#try)
* [Highlights](guide/webpack#highlights)
* [Conclusion](guide/webpack#conclusion)
You can also <a href="/content/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
You can also <a href="generated/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
{@a what-is-webpack}
@ -209,8 +209,8 @@ Configure loaders for TypeScript and CSS as follows.
When Webpack encounters `import` statements like the following,
it applies the `test` RegEx patterns.
When Webpack encounters `import` statements like the following,
it applies the `test` RegEx patterns.
<div class='code-example'>
@ -233,7 +233,7 @@ The imported file doesn't match the second pattern so its loader is ignored.
The second `import` matches the second `.css` pattern for which you have *two* loaders chained by the (!) character.
Webpack applies chained loaders *right to left*. So it applies
the `css` loader first to flatten CSS `@import` and `url(...)` statements.
the `css` loader first to flatten CSS `@import` and `url(...)` statements.
Then it applies the `style` loader to append the css inside `<style>` elements on the page.
@ -490,7 +490,7 @@ Rules tell Webpack which loaders to use for each file, or module:
* `angular2-template-loader`&mdash;loads angular components' template and styles.
* `html-loader`&mdash;for component templates.
* images/fonts&mdash;Images and fonts are bundled as well.
* CSS&mdash;the first pattern matches application-wide styles; the second handles
* CSS&mdash;the first pattern matches application-wide styles; the second handles
component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
<div class="l-sub-section">
@ -610,7 +610,7 @@ appropriate `<script>` and `<link>` tags into the `index.html`.
The CSS styles are buried inside the Javascript bundles by default. The `ExtractTextPlugin` extracts them into
external `.css` files that the `HtmlWebpackPlugin` inscribes as `<link>` tags into the `index.html`.
Refer to the [Webpack documentation](https://webpack.github.io/docs/) for details on these and
Refer to the [Webpack documentation](https://webpack.github.io/docs/) for details on these and
other configuration options in this file.
Grab the app code at the end of this guide and try:
@ -785,7 +785,7 @@ Webpack techniques covered in this guide.
The <code>app.component.html</code> displays this downloadable Angular logo
<a href="assets/images/logos/angular/angular.png">
<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
on the image and download it to that folder.

32
aio/content/marketing/docs.md
View File

@ -3,7 +3,7 @@
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
<div class="card-container clearfix">
<a href="/content/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
title="Experience Angular in a live coding environment">
<section>Experience Angular</section>
<p>A quick look at an Angular application.</p>
@ -14,7 +14,7 @@ Angular is a platform that makes it easy to build applications with the web. Ang
<section>Get Going with Angular</section>
<p>Get going on your own environment with the Quickstart and Tutorial</p>
<p class="card-footer center" >
<a href="guide/quickstart" title="Angular Quickstart">Quickstart</a> &nbsp;
<a href="guide/quickstart" title="Angular Quickstart">Quickstart</a> &nbsp;
<a href="tutorial" title="Angular Tutorial">Tutorial</a>
</p>
<!--<p class="card-footer"><a href="guide/quickstart">Quickstart</a></p>
@ -29,27 +29,27 @@ Angular is a platform that makes it easy to build applications with the web. Ang
</div>
## Assumptions
This documentation assumes that you are already familiar with
[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"),
and some of the tools from the
[latest standards](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") such as
[classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes")
and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules").
The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript").
Most Angular code can be written with just the latest JavaScript,
using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection,
This documentation assumes that you are already familiar with
[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"),
and some of the tools from the
[latest standards](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") such as
[classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes")
and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules").
The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript").
Most Angular code can be written with just the latest JavaScript,
using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection,
and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata.
## Feedback
You can sit with us!
You can file documentation
[issues](https://github.com/angular/angular/issues "Angular Github issues") and create
You can file documentation
[issues](https://github.com/angular/angular/issues "Angular Github issues") and create
[pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests")
on the Angular Github repository.
The [contributing guide](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide")
will help you contribute to the community.
Our community values respectful, supportive communication.
Please consult and adhere to the
will help you contribute to the community.
Our community values respectful, supportive communication.
Please consult and adhere to the
[code of conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "contributor code of conduct").

12
aio/content/marketing/news.html
View File

@ -16,7 +16,7 @@
2.1.0 Now Available</a></div>
<p>Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our
announced adoption of Semantic Versioning...</p>
<div class="author"><img src="content/images/bios/stephenfluin.jpg">
<div class="author"><img src="generated/images/bios/stephenfluin.jpg">
<div class="posted">Posted by <b>Stephen Fluin</b></div>
</div>
</div>
@ -30,7 +30,7 @@
<p>In order for the ecosystem around Angular to thrive, developers need stability from the
Angular framework so that reusable components and libraries, tools and learned practices
don’t go obsolete unexpectedly...</p>
<div class="author"><img src="content/images/bios/igor-minar.jpg">
<div class="author"><img src="generated/images/bios/igor-minar.jpg">
<div class="posted">Posted by <b>Igor Minar</b></div>
</div>
</div>
@ -50,7 +50,7 @@
A Pre-Populated SQLite Database With NativeScript And Angular 2</a></div>
<p>I figured it would be a good idea to demonstrate how to ship a NativeScript Angular 2
application with a pre-filled SQLite database rather than populating it on-the-fly....</p>
<div class="author"><img src="content/images/bios/shield-bio-placeholder.png">
<div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
<div class="posted">Posted by <b>Nic Raboy</b></div>
</div>
</div>
@ -64,7 +64,7 @@
<p>If there was one feature in Angular that made us go “Wow”, then it was probably its
two-way data binding system. Changes in the application state have been automagically
reflected into the view...</p>
<div class="author"><img src="content/images/bios/angular-gde-bio-placeholder.png">
<div class="author"><img src="generated/images/bios/angular-gde-bio-placeholder.png">
<div class="posted">Posted by <b>Pascal Precht</b></div>
</div>
</div>
@ -79,7 +79,7 @@
a Material Design app with Angular 2</a></div>
<p>This walkthrough reveals how to create a DialogComponent and to-do app with Angular
Material and the Angular CLI...</p>
<div class="author"><img src="content/images/bios/shield-bio-placeholder.png">
<div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
<div class="posted">Posted by <b>Daniel Zen</b></div>
</div>
</div>
@ -92,7 +92,7 @@
Angular CLI to create Angular 2 applications in Docker</a></div>
<p>Angular CLI is a great tool for developing Angular 2 applications. I thought it would be
fun to do a quick demo...</p>
<div class="author"><img src="content/images/bios/shield-bio-placeholder.png">
<div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
<div class="posted">Posted by <b>Simeon Bateman</b></div>
</div>
</div>

10
aio/content/tutorial/index.md
View File

@ -41,7 +41,7 @@ view and the most heroic heroes:
<figure class='image-display'>
<img src='content/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"></img>
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"></img>
</figure>
@ -54,7 +54,7 @@ where you can change the hero's name.
<figure class='image-display'>
<img src='content/images/guide/toh/hero-details-1.png' alt="Details of hero in app"></img>
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app"></img>
</figure>
@ -65,7 +65,7 @@ If you click "Heroes," the app displays the "Heroes" master list view.
<figure class='image-display'>
<img src='content/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app"></img>
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app"></img>
</figure>
@ -79,7 +79,7 @@ The following diagram captures all of the navigation options.
<figure class='image-display'>
<img src='content/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
</figure>
@ -88,7 +88,7 @@ Here's the app in action:
<figure class='image-display'>
<img src='content/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action"></img>
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action"></img>
</figure>

4
aio/content/tutorial/toh-pt2.md
View File

@ -394,7 +394,7 @@ like this:
<figure class='image-display'>
<img src='content/images/guide/toh/heroes-list-selected.png' alt="Selected hero"></img>
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero"></img>
</figure>
@ -435,7 +435,7 @@ After clicking "Magneta", the list should look like this:
<figure class='image-display'>
<img src='content/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app"></img>
<img src='generated/images/guide/toh/heroes-list-1.png' alt="Output of heroes list app"></img>
</figure>

6
aio/content/tutorial/toh-pt5.md
View File

@ -19,7 +19,7 @@ When you’re done, users will be able to navigate the app like this:
<figure class='image-display'>
<img src='content/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations"></img>
</figure>
@ -967,7 +967,7 @@ After clicking a hero, users should see something like this below the hero list:
<figure class='image-display'>
<img src='content/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"></img>
<img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"></img>
</figure>
@ -1221,7 +1221,7 @@ Look at the app now. The dashboard, heroes, and navigation links are styled.
<figure class='image-display'>
<img src='content/images/guide/toh/heroes-dashboard-1.png' alt="View navigations"></img>
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="View navigations"></img>
</figure>

2
aio/content/tutorial/toh-pt6.md
View File

@ -700,7 +700,7 @@ If you enter characters that match any existing hero names, you'll see something
<figure class='image-display'>
<img src='content/images/guide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component"></img>
</figure>

2
aio/ngsw-manifest.json
View File

@ -12,7 +12,7 @@
"static.ignore": [
"\\.js\\.map$",
"^/assets/images/.*/unused/",
"^/content/(?:docs/(?!api/api-list\\.json).*|images|live-examples|zips)/"
"^/generated/(?:docs/(?!api/api-list\\.json).*|images|live-examples|zips)/"
],
"routing": {
"index": "/index.html",

2
aio/package.json
View File

@ -21,7 +21,7 @@
"deploy-preview": "scripts/deploy-preview.sh",
"deploy-staging": "scripts/deploy-staging.sh",
"check-env": "node ../tools/check-environment.js",
"predocs": "rimraf src/content",
"predocs": "rimraf src/generated/{docs,*.json}",
"docs": "dgeni ./tools/transforms/angular.io-package",
"docs-watch": "node tools/transforms/authors-package/watchr.js",
"docs-lint": "eslint --ignore-path=\"tools/transforms/.eslintignore\" tools/transforms",

2
aio/src/NOTES.md
View File

@ -135,7 +135,7 @@ The mapping of URL path to the path to fetch the document contents is simply:
```ts
private computePath(url) {
url = url.startsWith('/') ? url : '/' + url;
return 'content/docs' + url + '.json';
return 'generated/docs' + url + '.json';
}
```

2
aio/src/app/app.component.spec.ts
View File

@ -544,7 +544,7 @@ class TestHttp {
if (/navigation\.json/.test(url)) {
data = this.navJson;
} else {
const match = /content\/docs\/(.+)\.json/.exec(url);
const match = /generated\/docs\/(.+)\.json/.exec(url);
const id = match[1];
// Make up a title for test purposes
const title = id.split('/').pop().replace(/^([a-z])/, (_, letter) => letter.toUpperCase());

2
aio/src/app/documents/document.service.spec.ts
View File

@ -14,7 +14,7 @@ import { DocumentService, DocumentContents,
FETCHING_ERROR_ID, FILE_NOT_FOUND_ID } from './document.service';
const CONTENT_URL_PREFIX = 'content/docs/';
const CONTENT_URL_PREFIX = 'generated/docs/';
function createResponse(body: any) {
return new Response(new ResponseOptions({ body: JSON.stringify(body) }));

5
aio/src/app/documents/document.service.ts
View File

@ -17,7 +17,8 @@ import { Logger } from 'app/shared/logger.service';
export const FILE_NOT_FOUND_ID = 'file-not-found';
export const FETCHING_ERROR_ID = 'fetching-error';
const CONTENT_URL_PREFIX = 'content/docs/';
export const CONTENT_URL_PREFIX = 'generated/';
export const DOC_CONTENT_URL_PREFIX = CONTENT_URL_PREFIX + 'docs/';
const FETCHING_ERROR_CONTENTS = `
<div class="nf-container l-flex-wrap flex-center">
<div class="nf-icon material-icons">error_outline</div>
@ -56,7 +57,7 @@ export class DocumentService {
}
private fetchDocument(id: string): Observable<DocumentContents> {
const requestPath = `content/docs/${id}.json`;
const requestPath = `${DOC_CONTENT_URL_PREFIX}${id}.json`;
this.logger.log('fetching document from', requestPath);
const subject = new AsyncSubject();
this.http

2
aio/src/app/embedded/api/api.service.spec.ts
View File

@ -90,7 +90,7 @@ describe('ApiService', () => {
it('should connect to the server w/ expected URL', () => {
service.fetchSections();
expect(backend.connectionsArray.length).toEqual(1);
expect(backend.connectionsArray[0].request.url).toEqual('content/docs/api/api-list.json');
expect(backend.connectionsArray[0].request.url).toEqual('generated/docs/api/api-list.json');
});
it('should refresh the #sections observable w/ new content on second call', () => {

3
aio/src/app/embedded/api/api.service.ts
View File

@ -8,6 +8,7 @@ import 'rxjs/add/operator/map';
import 'rxjs/add/operator/takeUntil';
import { Logger } from 'app/shared/logger.service';
import { DOC_CONTENT_URL_PREFIX } from 'app/documents/document.service';
export interface ApiItem {
name: string;
@ -29,7 +30,7 @@ export interface ApiSection {
@Injectable()
export class ApiService implements OnDestroy {
private apiBase = 'content/docs/api/';
private apiBase = DOC_CONTENT_URL_PREFIX + 'api/';
private apiListJsonDefault = 'api-list.json';
private firstTime = true;
private onDestroy = new Subject();

3
aio/src/app/embedded/contributor/contributor.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Input } from '@angular/core';
import { Contributor } from './contributors.model';
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
@Component({
selector: 'aio-contributor',
@ -57,7 +58,7 @@ import { Contributor } from './contributors.model';
export class ContributorComponent {
@Input() person: Contributor;
noPicture = '_no-one.png';
pictureBase = 'content/images/bios/';
pictureBase = CONTENT_URL_PREFIX + 'images/bios/';
flipCard(person) {
person.isFlipped = !person.isFlipped;

2
aio/src/app/embedded/contributor/contributor.service.spec.ts
View File

@ -35,7 +35,7 @@ describe('ContributorService', () => {
it('should make a single connection to the server', () => {
expect(backend.connectionsArray.length).toEqual(1);
expect(backend.connectionsArray[0].request.url).toEqual('content/contributors.json');
expect(backend.connectionsArray[0].request.url).toEqual('generated/contributors.json');
});
describe('#contributors', () => {

3
aio/src/app/embedded/contributor/contributor.service.ts
View File

@ -7,8 +7,9 @@ import 'rxjs/add/operator/publishLast';
import { Logger } from 'app/shared/logger.service';
import { Contributor, ContributorGroup } from './contributors.model';
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
const contributorsPath = 'content/contributors.json';
const contributorsPath = CONTENT_URL_PREFIX + 'contributors.json';
const knownGroups = ['Angular', 'Community'];
@Injectable()

7
aio/src/app/embedded/live-example/live-example.component.ts
View File

@ -1,13 +1,14 @@
/* tslint:disable component-selector */
import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
import { boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils';
const defaultPlnkrImg = 'plunker/placeholder.png';
const imageBase = 'content/images/';
const liveExampleBase = 'content/live-examples/';
const zipBase = 'content/zips/';
const imageBase = CONTENT_URL_PREFIX + 'images/';
const liveExampleBase = CONTENT_URL_PREFIX + 'live-examples/';
const zipBase = CONTENT_URL_PREFIX + 'zips/';
/**
* Angular.io Live Example Embedded Component

2
aio/src/app/embedded/resource/resource.service.spec.ts
View File

@ -35,7 +35,7 @@ describe('ResourceService', () => {
it('should make a single connection to the server', () => {
expect(backend.connectionsArray.length).toEqual(1);
expect(backend.connectionsArray[0].request.url).toEqual('content/resources.json');
expect(backend.connectionsArray[0].request.url).toEqual('generated/resources.json');
});
describe('#categories', () => {

3
aio/src/app/embedded/resource/resource.service.ts
View File

@ -7,8 +7,9 @@ import 'rxjs/add/operator/publishLast';
import { Logger } from 'app/shared/logger.service';
import { Category, Resource, SubCategory } from './resource.model';
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
const resourcesPath = 'content/resources.json';
const resourcesPath = CONTENT_URL_PREFIX + 'resources.json';
@Injectable()
export class ResourceService {

2
aio/src/app/navigation/navigation.service.spec.ts
View File

@ -40,7 +40,7 @@ describe('NavigationService', () => {
it('should make a single connection to the server', () => {
expect(backend.connectionsArray.length).toEqual(1);
expect(backend.connectionsArray[0].request.url).toEqual('content/navigation.json');
expect(backend.connectionsArray[0].request.url).toEqual('generated/navigation.json');
});
it('should expose the server response', () => {

3
aio/src/app/navigation/navigation.service.ts
View File

@ -10,12 +10,13 @@ import 'rxjs/add/operator/publishReplay';
import { Logger } from 'app/shared/logger.service';
import { LocationService } from 'app/shared/location.service';
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
// Import and re-export the Navigation model types
import { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
export { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
const navigationPath = 'content/navigation.json';
const navigationPath = CONTENT_URL_PREFIX + 'navigation.json';
@Injectable()
export class NavigationService {

2
aio/src/app/search/search-worker.js
View File

@ -3,7 +3,7 @@
/* eslint-env worker */
/* global importScripts, lunr */
var SEARCH_TERMS_URL = '/content/docs/app/search-data.json';
var SEARCH_TERMS_URL = '/generated/docs/app/search-data.json';
// NOTE: This needs to be kept in sync with `ngsw-manifest.json`.
importScripts('https://unpkg.com/lunr@0.7.2/lunr.min.js');

2
aio/tools/example-zipper/generateZips.js
View File

@ -2,6 +2,6 @@ const ExampleZipper = require('./exampleZipper');
const path = require('canonical-path');
const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
const ZIPS_PATH = path.join(__dirname, '../../src/content/zips');
const ZIPS_PATH = path.join(__dirname, '../../src/generated/zips');
new ExampleZipper(EXAMPLES_PATH, ZIPS_PATH);

2
aio/tools/plunker-builder/generatePlunkers.js
View File

@ -3,7 +3,7 @@ const regularPlunker = require('./regularPlunker');
const embeddedPlunker = require('./embeddedPlunker');
const EXAMPLES_PATH = path.join(__dirname, '../../content/examples');
const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/content/live-examples');
const LIVE_EXAMPLES_PATH = path.join(__dirname, '../../src/generated/live-examples');
regularPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH);
embeddedPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH);

2
aio/tools/transforms/README.md
View File

@ -16,7 +16,7 @@ The local packages have unit tests that you can execute by running `yarn docs-te
## What does it generate?
The output from dgeni is written to files in the `src/content` folder.
The output from dgeni is written to files in the `src/generated` folder.
Notably this includes a JSON file containing the partial HTML for each "page" of the documentation, such as API pages and guides.
It also includes JSON files that contain metadata about the documentation such as navigation data and

29
aio/tools/transforms/authors-package/index.spec.js
View File

@ -1,8 +1,7 @@
const fs = require('fs');
const {resolve} = require('canonical-path');
const {generateDocs} = require('./index.js');
const rootPath = resolve(__dirname, '../../../..');
const outputPath = resolve(rootPath, 'aio/src/content/docs');
const { DOCS_OUTPUT_PATH } = require('../config');
describe('authors-package', () => {
let files;
@ -18,10 +17,10 @@ describe('authors-package', () => {
it('should generate marketing docs if the "fileChanged" is a marketing doc', (done) => {
generateDocs('aio/content/marketing/about.html', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'about.json'));
expect(files).toContain(resolve(outputPath, '../navigation.json'));
expect(files).toContain(resolve(outputPath, '../contributors.json'));
expect(files).toContain(resolve(outputPath, '../resources.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'about.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../navigation.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../contributors.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../resources.json'));
done();
});
}, 4000);
@ -29,7 +28,7 @@ describe('authors-package', () => {
it('should generate tutorial docs if the "fileChanged" is a tutorial doc', (done) => {
generateDocs('aio/content/tutorial/toh-pt5.md', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'tutorial/toh-pt5.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial/toh-pt5.json'));
done();
});
}, 4000);
@ -37,7 +36,7 @@ describe('authors-package', () => {
it('should generate tutorial docs if the "fileChanged" is the tutorial index', (done) => {
generateDocs('aio/content/tutorial/index.md', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'tutorial.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial.json'));
done();
});
}, 4000);
@ -45,7 +44,7 @@ describe('authors-package', () => {
it('should generate tutorial docs if the "fileChanged" is a tutorial example', (done) => {
generateDocs('aio/content/examples/toh-pt3/app/app.component.1.html', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'tutorial/toh-pt3.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial/toh-pt3.json'));
done();
});
}, 4000);
@ -53,7 +52,7 @@ describe('authors-package', () => {
it('should generate guide doc if the "fileChanged" is a guide doc', (done) => {
generateDocs('aio/content/guide/architecture.md', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'guide/architecture.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
done();
});
}, 4000);
@ -61,7 +60,7 @@ describe('authors-package', () => {
it('should generate guide doc if the "fileChanged" is a guide example', (done) => {
generateDocs('aio/content/examples/architecture/src/app/app.module.ts', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'guide/architecture.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
done();
});
}, 4000);
@ -69,16 +68,16 @@ describe('authors-package', () => {
it('should generate API doc if the "fileChanged" is an API doc', (done) => {
generateDocs('packages/forms/src/form_builder.ts', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'api/forms/FormBuilder.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'api/forms/FormBuilder.json'));
done();
});
}, 4000);
}, 8000);
it('should generate API doc if the "fileChanged" is an API example', (done) => {
generateDocs('packages/examples/forms/ts/formBuilder/form_builder_example.ts', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'api/forms/FormBuilder.json'));
expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'api/forms/FormBuilder.json'));
done();
});
}, 4000);
}, 8000);
});

16
aio/tools/transforms/authors-package/watchr.js
View File

@ -1,14 +1,12 @@
/* eslint no-console: "off" */
const watchr = require('watchr');
const {resolve, relative} = require('canonical-path');
const {relative} = require('canonical-path');
const {generateDocs} = require('./index.js');
const rootPath = resolve(__dirname, '../../../..');
const contentsPath = resolve(rootPath, 'aio/content');
const apiPath = resolve(rootPath, 'packages');
const { PROJECT_ROOT, CONTENTS_PATH, API_SOURCE_PATH } = require('../config');
function listener(changeType, fullPath) {
try {
const relativePath = relative(rootPath, fullPath);
const relativePath = relative(PROJECT_ROOT, fullPath);
console.log('The file', relativePath, `was ${changeType}d at`, new Date().toUTCString());
generateDocs(relativePath);
} catch(err) {
@ -38,12 +36,12 @@ if (process.argv.indexOf('--watch-only') === -1) {
p.then(() => {
console.log('===================================================================');
console.log('Started watching files in:');
console.log(' - ', contentsPath);
console.log(' - ', apiPath);
console.log(' - ', CONTENTS_PATH);
console.log(' - ', API_SOURCE_PATH);
console.log('Doc gen will run when you change a file in either of these folders.');
console.log('===================================================================');
watchr.open(contentsPath, listener, next);
watchr.open(apiPath, listener, next);
watchr.open(CONTENTS_PATH, listener, next);
watchr.open(API_SOURCE_PATH, listener, next);
});

2
aio/tools/transforms/config.js
View File

@ -6,7 +6,7 @@ const AIO_PATH = resolve(PROJECT_ROOT, 'aio');
const TEMPLATES_PATH = resolve(AIO_PATH, 'tools/transforms/templates');
const API_TEMPLATES_PATH = resolve(TEMPLATES_PATH, 'api');
const CONTENTS_PATH = resolve(AIO_PATH, 'content');
const OUTPUT_PATH = resolve(AIO_PATH, 'src/content');
const OUTPUT_PATH = resolve(AIO_PATH, 'src/generated');
const DOCS_OUTPUT_PATH = resolve(OUTPUT_PATH, 'docs');
const API_SOURCE_PATH = resolve(PROJECT_ROOT, 'packages');