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

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

Browse Source 
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", "outDir": "dist",
"assets": [ "assets": [
"assets", "assets",
"content", "generated",
"app/search/search-worker.js", "app/search/search-worker.js",
"favicon.ico", "favicon.ico",
"pwa-manifest.json" "pwa-manifest.json"

2
aio/.gitignore vendored
View File

@ -3,7 +3,7 @@
# compiled output # compiled output
/dist /dist
/out-tsc /out-tsc
/src/content /src/generated
/tmp /tmp
# dependencies # 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 ## Quickstart example: Transitioning between two states
<figure> <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> </figure>
@ -167,7 +167,7 @@ controls the timing of switching between one set of styles and the next:
<figure class='image-display'> <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> </figure>
@ -215,7 +215,7 @@ transitions that apply regardless of which state the animation is in. For exampl
<figure class='image-display'> <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> </figure>
@ -232,7 +232,7 @@ regardless of what state it was in before it left.
<figure class='image-display'> <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> </figure>
@ -242,7 +242,7 @@ The wildcard state `*` also matches `void`.
## Example: Entering and leaving ## Example: Entering and leaving
<figure> <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> </figure>
@ -289,7 +289,7 @@ These two common animations have their own aliases:
## Example: Entering and leaving from different states ## Example: Entering and leaving from different states
<figure> <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> </figure>
@ -308,7 +308,7 @@ This gives you fine-grained control over each transition:
<figure class='image-display'> <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> </figure>
@ -341,7 +341,7 @@ If you don't provide a unit when specifying dimension, Angular assumes the defau
## Automatic property calculation ## Automatic property calculation
<figure> <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> </figure>
@ -400,7 +400,7 @@ and the delay (or as the *second* value when there is no delay):
<figure> <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> </figure>
@ -422,7 +422,7 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
## Multi-step animations with keyframes ## Multi-step animations with keyframes
<figure> <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> </figure>
@ -456,7 +456,7 @@ offsets receive offsets `0`, `0.5`, and `1`.
## Parallel animation groups ## Parallel animation groups
<figure> <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> </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 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 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. and run `npm install` on it.
</div> </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_. 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'> <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> </figure>
</a> </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> <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> </figure>
@ -64,7 +64,7 @@ Learn these building blocks, and you're on your way.
## Modules ## Modules
<figure> <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> </figure>
@ -182,7 +182,7 @@ These are two different and _complementary_ module systems. Use them both to wri
<figure> <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> </figure>
@ -244,7 +244,7 @@ Learn more from the [Angular modules](guide/ngmodule) page.
<figure> <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> </figure>
@ -284,7 +284,7 @@ Your app can take action at each moment in this lifecycle through optional [life
## Templates ## Templates
<figure> <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> </figure>
@ -314,7 +314,7 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
<figure> <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> </figure>
@ -330,7 +330,7 @@ Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom
## Metadata ## Metadata
<figure> <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> </figure>
@ -379,7 +379,7 @@ so it can get the list of heroes to display.
<figure> <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> </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. read as any experienced jQuery programmer can attest.
<figure> <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> </figure>
@ -454,7 +454,7 @@ from the root of the application component tree through all child components.
<figure> <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> </figure>
@ -463,7 +463,7 @@ Data binding plays an important role in communication
between a template and its component.<br class="l-clear-both"> between a template and its component.<br class="l-clear-both">
<figure> <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> </figure>
@ -478,7 +478,7 @@ Data binding is also important for communication between parent and child compon
## Directives ## Directives
<figure> <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> </figure>
@ -556,7 +556,7 @@ Of course, you can also write your own directives. Components such as
## Services ## Services
<figure> <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> </figure>
@ -624,7 +624,7 @@ application logic into services and make those services available to components
## Dependency injection ## Dependency injection
<figure> <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> </figure>
@ -656,7 +656,7 @@ This is *dependency injection*.
The process of `HeroService` injection looks a bit like this: The process of `HeroService` injection looks a bit like this:
<figure> <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> </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'> <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> </figure>
@ -280,7 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
<figure class='image-display'> <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> </figure>
@ -438,7 +438,7 @@ Here are the harness and directive in action.
<figure class='image-display'> <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> </figure>
@ -491,7 +491,7 @@ Here's how the harness should work when you're done coding.
<figure class='image-display'> <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> </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. 3. [Serve](guide/cli-quickstart#serve) the application.
4. [Edit](guide/cli-quickstart#first-component) 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'> <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> </figure>
@ -161,7 +161,7 @@ Open `src/app/app.component.css` and give the component some style.
<figure class='image-display'> <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> </figure>

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

@ -54,7 +54,7 @@ The running application displays three heroes:
<figure class='image-display'> <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> </figure>
@ -98,7 +98,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name
<figure class='image-display'> <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> </figure>
@ -156,7 +156,7 @@ Here's the output of a button-pushing sequence:
<figure class='image-display'> <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> </figure>
@ -210,7 +210,7 @@ and the method processes it:
<figure class='image-display'> <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> </figure>
@ -272,7 +272,7 @@ Here we see the parent and child working together.
<figure class='image-display'> <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> </figure>
@ -424,7 +424,7 @@ facilitated by the service:
<figure class='image-display'> <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> </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'> <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> </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. and confirm that the three `HeroBioComponent` instances have their own cached hero data.
<figure class='image-display'> <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> </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: It looks like this, with the hero's telephone number from `HeroContactComponent` projected above the hero description:
<figure class='image-display'> <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> </figure>
@ -440,7 +440,7 @@ Thanks to `@Optional()`, Angular sets the `loggerService` to null and the rest o
Here's the `HeroBiosAndContactsComponent` in action. Here's the `HeroBiosAndContactsComponent` in action.
<figure class='image-display'> <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> </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. with the gratuitous "!!!", indicating that the logger was found.
<figure class='image-display'> <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> </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. The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.
<figure class='image-display'> <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> </figure>
{@a providers} {@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. It's visually simple: a few properties and the logs produced by a logger.
<figure class='image-display'> <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> </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: 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'> <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> </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: The following image, which displays the logging date, confirms the point:
<figure class='image-display'> <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> </figure>
@ -941,7 +941,7 @@ to display a *sorted* list of heroes.
<figure class='image-display'> <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> </figure>
@ -1154,7 +1154,7 @@ the same way you've done it before:
Here's *Alex* and family in action: Here's *Alex* and family in action:
<figure class='image-display'> <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> </figure>
@ -1215,7 +1215,7 @@ Here's *Alice*, *Barry* and family in action:
<figure class='image-display'> <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> </figure>

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

@ -18,7 +18,7 @@ The final UI looks like this:
<figure class='image-display'> <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> </figure>
@ -126,7 +126,7 @@ inside the `<my-app>` tag.
Now run the app. It should display the title and hero name: Now run the app. It should display the title and hero name:
<figure class='image-display'> <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> </figure>
@ -233,7 +233,7 @@ Now the heroes appear in an unordered list.
<figure class='image-display'> <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> </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: The final ad banner looks like this:
<figure class='image-display'> <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> </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: The final form looks like this:
<figure class='image-display'> <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> </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'> <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> </figure>
@ -74,7 +74,7 @@ If you delete the hero name, the form displays a validation error in an attentio
<figure class='image-display'> <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> </figure>
@ -372,7 +372,7 @@ Running the app right now would be disappointing.
<figure class='image-display'> <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> </figure>
@ -456,7 +456,7 @@ At some point it might look like this:
<figure class='image-display'> <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> </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'> <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> </figure>
@ -642,7 +642,7 @@ The actions and effects are as follows:
<figure class='image-display'> <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> </figure>
@ -651,7 +651,7 @@ You should see the following transitions and class names:
<figure class='image-display'> <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> </figure>
@ -671,7 +671,7 @@ on the left of the input box:
<figure class='image-display'> <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> </figure>
@ -705,7 +705,7 @@ When the user deletes the name, the form should look like this:
<figure class='image-display'> <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> </figure>

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

@ -55,7 +55,7 @@ open simultaneously.
<figure class='image-display'> <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> </figure>
@ -149,7 +149,7 @@ Each tax return component has the following characteristics:
<figure class='image-display'> <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> </figure>
@ -234,7 +234,7 @@ Component (B) is the parent of another component (C) that defines its own, even
<figure class='image-display'> <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> </figure>
@ -247,7 +247,7 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
<figure class='image-display'> <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> </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: It works like this:
<figure class='image-display'> <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> </figure>
@ -746,7 +746,7 @@ types in a text box:
<figure class='image-display'> <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> </figure>
@ -865,7 +865,7 @@ It should only make requests when the user *stops typing*.
Here's how it will work after refactoring: Here's how it will work after refactoring:
<figure class='image-display'> <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> </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> <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> </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. This snapshot reflects the state of the log after the user clicked the *Create...* button and then the *Destroy...* button.
<figure class='image-display'> <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> </figure>
@ -549,7 +549,7 @@ with an entry in the *Hook Log* as seen here:
<figure class='image-display'> <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> </figure>
@ -672,7 +672,7 @@ Here's the sample in action as the user makes changes.
<figure class='image-display'> <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> </figure>
@ -718,7 +718,7 @@ so you can see how often `DoCheck` is called. The results are illuminating:
<figure class='image-display'> <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> </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: Here's *AfterView* in action:
<figure class='image-display'> <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> </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. In this case, the projected content is the `<my-child>` from the parent.
<figure class='image-display'> <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> </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'> <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> </figure>
@ -237,7 +237,7 @@ Now you need a component to demonstrate the pipe.
<figure class='image-display'> <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> </figure>
@ -285,7 +285,7 @@ your pipe and two-way data binding with `ngModel`.
<figure class='image-display'> <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> </figure>
@ -372,7 +372,7 @@ code with checkbox switches and additional displays to help you experience these
<figure class='image-display'> <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> </figure>
@ -559,7 +559,7 @@ The component renders as the following:
<figure class='image-display'> <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> </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'> <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> </figure>
@ -457,7 +457,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
<figure class='image-display'> <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> </figure>
@ -567,7 +567,7 @@ The browser displays the following:
<figure class='image-display'> <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> </figure>
@ -696,7 +696,7 @@ with the nested address `FormGroup`:
<figure class='image-display'> <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> </figure>
@ -1052,7 +1052,7 @@ Together they look a bit like this:
<figure class='image-display'> <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> </figure>
@ -1265,7 +1265,7 @@ Back in the browser, select the hero named "Magneta".
<figure class='image-display'> <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> </figure>
@ -1343,7 +1343,7 @@ After you implement both features in this section, the form will look like this:
<figure class='image-display'> <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> </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'> <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> </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. Select one hero and the app takes you to a hero editing screen.
<figure class='image-display'> <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> </figure>
@ -558,7 +558,7 @@ Now click the *Crisis Center* link for a list of ongoing crises.
<figure class='image-display'> <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> </figure>
@ -571,7 +571,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
<figure class='image-display'> <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> </figure>
@ -587,7 +587,7 @@ Up pops a dialog box.
<figure class='image-display'> <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> </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. Begin with a simple version of the app that navigates between two empty views.
<figure class='image-display'> <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> </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'> <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> </figure>
@ -1250,7 +1250,7 @@ Here's how the user will experience this version of the app:
<figure class='image-display'> <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> </figure>
@ -1880,7 +1880,7 @@ it would be nice if the viewed hero was preselected in the list.
<figure class='image-display'> <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> </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: When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
<figure class='image-display'> <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> </figure>
@ -2396,7 +2396,7 @@ If your app had many feature areas, the app component trees might look like this
<figure class='image-display'> <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> </figure>
@ -2695,7 +2695,7 @@ and two buttons, "Send" and "Cancel".
<figure class='image-display'> <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> </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'> <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> </figure>
@ -232,7 +232,7 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
<figure class='image-display'> <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> </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>
<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> </td>
</tr> </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à! Bind that method to three anchor tags and voilà!
<figure class='image-display'> <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> </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'> <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> </figure>
@ -186,7 +186,7 @@ While invisible, the element remains in the DOM.
<figure class='image-display'> <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> </figure>
@ -261,7 +261,7 @@ Only the finished product ends up in the DOM.
<figure class='image-display'> <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> </figure>
@ -498,7 +498,7 @@ Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
<figure class='image-display'> <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> </figure>
@ -564,7 +564,7 @@ The constructed paragraph renders strangely.
<figure class='image-display'> <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> </figure>
@ -588,7 +588,7 @@ the drop down is empty.
<figure class='image-display'> <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> </figure>
@ -613,7 +613,7 @@ It renders properly.
<figure class='image-display'> <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> </figure>
@ -631,7 +631,7 @@ The drop down works properly.
<figure class='image-display'> <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> </figure>
@ -788,7 +788,7 @@ When the `condition` is truthy, the top (A) paragraph is removed and the bottom
<figure class='image-display'> <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> </figure>

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

@ -1069,7 +1069,7 @@ content harmlessly.
<figure class='image-display'> <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> </figure>
@ -1839,7 +1839,7 @@ Here are all variations in action, including the uppercase version:
<figure class='image-display'> <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> </figure>
@ -2134,7 +2134,7 @@ Here is an illustration of the _trackBy_ effect.
<figure class='image-display'> <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> </figure>
@ -2169,7 +2169,7 @@ Angular puts only the *selected* element into the DOM.
<figure class='image-display'> <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> </figure>
@ -2419,7 +2419,7 @@ The terms _input_ and _output_ reflect the perspective of the target directive.
<figure class='image-display'> <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> </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. After a few moments, karma opens a browser and starts writing to the console.
<figure class='image-display'> <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> </figure>
@ -473,7 +473,7 @@ Debug specs in the browser in the same way that you debug an application.
<figure class='image-display'> <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> </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. The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
<figure class='image-display'> <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> </figure>
@ -2507,7 +2507,7 @@ A better solution is to create an artificial test component that demonstrates al
<figure class='image-display'> <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> </figure>

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

@ -338,7 +338,7 @@ everything work seamlessly:
<figure class='image-display'> <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> </figure>
@ -383,7 +383,7 @@ ways:
<figure class='image-display'> <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> </figure>
@ -437,7 +437,7 @@ AngularJS and Angular approaches. Here's what happens:
<figure class='image-display'> <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> </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 ### Using Angular Components from AngularJS Code
<figure> <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> </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 ### Using AngularJS Component Directives from Angular Code
<figure> <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> </figure>
@ -938,7 +938,7 @@ and then provide the input and output using Angular template syntax:
### Projecting AngularJS Content into Angular Components ### Projecting AngularJS Content into Angular Components
<figure> <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> </figure>
@ -985,7 +985,7 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
### Transcluding Angular Content into AngularJS Component Directives ### Transcluding Angular Content into AngularJS Component Directives
<figure> <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> </figure>

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

@ -98,7 +98,7 @@ Here's what the UI displays:
<figure class='image-display'> <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> </figure>
@ -181,7 +181,7 @@ Type something in the input box, and watch the display update with each keystrok
<figure class='image-display'> <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> </figure>
@ -235,7 +235,7 @@ Then Angular calls the event handler only when the user presses _Enter_.
Here's how it works. Here's how it works.
<figure class='image-display'> <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> </figure>
@ -269,7 +269,7 @@ clicking **Add**.
<figure class='image-display'> <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> </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) * [Development configuration](guide/webpack#development-configuration)
* [Production configuration](guide/webpack#production-configuration) * [Production configuration](guide/webpack#production-configuration)
* [Test configuration](guide/webpack#test-configuration) * [Test configuration](guide/webpack#test-configuration)
* [Trying it out](guide/webpack#try) * [Trying it out](guide/webpack#try)
* [Highlights](guide/webpack#highlights) * [Highlights](guide/webpack#highlights)
* [Conclusion](guide/webpack#conclusion) * [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} {@a what-is-webpack}
@ -209,8 +209,8 @@ Configure loaders for TypeScript and CSS as follows.
When Webpack encounters `import` statements like the following, When Webpack encounters `import` statements like the following,
it applies the `test` RegEx patterns. it applies the `test` RegEx patterns.
<div class='code-example'> <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. 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 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. 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. * `angular2-template-loader`&mdash;loads angular components' template and styles.
* `html-loader`&mdash;for component templates. * `html-loader`&mdash;for component templates.
* images/fonts&mdash;Images and fonts are bundled as well. * 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). component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
<div class="l-sub-section"> <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 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`. 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. other configuration options in this file.
Grab the app code at the end of this guide and try: 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 The <code>app.component.html</code> displays this downloadable Angular logo
<a href="assets/images/logos/angular/angular.png"> <a href="assets/images/logos/angular/angular.png">
<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>. <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. 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 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"> <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"> title="Experience Angular in a live coding environment">
<section>Experience Angular</section> <section>Experience Angular</section>
<p>A quick look at an Angular application.</p> <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> <section>Get Going with Angular</section>
<p>Get going on your own environment with the Quickstart and Tutorial</p> <p>Get going on your own environment with the Quickstart and Tutorial</p>
<p class="card-footer center" > <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> <a href="tutorial" title="Angular Tutorial">Tutorial</a>
</p> </p>
<!--<p class="card-footer"><a href="guide/quickstart">Quickstart</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> </div>
## Assumptions ## Assumptions
This documentation assumes that you are already familiar with 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"), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"),
and some of the tools from the and some of the tools from the
[latest standards](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") such as [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") [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"). 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"). The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript").
Most Angular code can be written with just the latest JavaScript, 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, 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. and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata.
## Feedback ## Feedback
You can sit with us! You can sit with us!
You can file documentation You can file documentation
[issues](https://github.com/angular/angular/issues "Angular Github issues") and create [issues](https://github.com/angular/angular/issues "Angular Github issues") and create
[pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests") [pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests")
on the Angular Github repository. on the Angular Github repository.
The [contributing guide](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide") The [contributing guide](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide")
will help you contribute to the community. will help you contribute to the community.
Our community values respectful, supportive communication. Our community values respectful, supportive communication.
Please consult and adhere to the 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"). [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> 2.1.0 Now Available</a></div>
<p>Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our <p>Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our
announced adoption of Semantic Versioning...</p> 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 class="posted">Posted by <b>Stephen Fluin</b></div>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
<p>In order for the ecosystem around Angular to thrive, developers need stability from the <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 Angular framework so that reusable components and libraries, tools and learned practices
don’t go obsolete unexpectedly...</p> 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 class="posted">Posted by <b>Igor Minar</b></div>
</div> </div>
</div> </div>
@ -50,7 +50,7 @@
A Pre-Populated SQLite Database With NativeScript And Angular 2</a></div> 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 <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> 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 class="posted">Posted by <b>Nic Raboy</b></div>
</div> </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 <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 two-way data binding system. Changes in the application state have been automagically
reflected into the view...</p> 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 class="posted">Posted by <b>Pascal Precht</b></div>
</div> </div>
</div> </div>
@ -79,7 +79,7 @@
a Material Design app with Angular 2</a></div> a Material Design app with Angular 2</a></div>
<p>This walkthrough reveals how to create a DialogComponent and to-do app with Angular <p>This walkthrough reveals how to create a DialogComponent and to-do app with Angular
Material and the Angular CLI...</p> 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 class="posted">Posted by <b>Daniel Zen</b></div>
</div> </div>
</div> </div>
@ -92,7 +92,7 @@
Angular CLI to create Angular 2 applications in Docker</a></div> 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 <p>Angular CLI is a great tool for developing Angular 2 applications. I thought it would be
fun to do a quick demo...</p> 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 class="posted">Posted by <b>Simeon Bateman</b></div>
</div> </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'> <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> </figure>
@ -54,7 +54,7 @@ where you can change the hero's name.
<figure class='image-display'> <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> </figure>
@ -65,7 +65,7 @@ If you click "Heroes," the app displays the "Heroes" master list view.
<figure class='image-display'> <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> </figure>
@ -79,7 +79,7 @@ The following diagram captures all of the navigation options.
<figure class='image-display'> <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> </figure>
@ -88,7 +88,7 @@ Here's the app in action:
<figure class='image-display'> <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> </figure>

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

@ -394,7 +394,7 @@ like this:
<figure class='image-display'> <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> </figure>
@ -435,7 +435,7 @@ After clicking "Magneta", the list should look like this:
<figure class='image-display'> <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> </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'> <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> </figure>
@ -967,7 +967,7 @@ After clicking a hero, users should see something like this below the hero list:
<figure class='image-display'> <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> </figure>
@ -1221,7 +1221,7 @@ Look at the app now. The dashboard, heroes, and navigation links are styled.
<figure class='image-display'> <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> </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'> <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> </figure>

2
aio/ngsw-manifest.json
View File

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

2
aio/package.json
View File

@ -21,7 +21,7 @@
"deploy-preview": "scripts/deploy-preview.sh", "deploy-preview": "scripts/deploy-preview.sh",
"deploy-staging": "scripts/deploy-staging.sh", "deploy-staging": "scripts/deploy-staging.sh",
"check-env": "node ../tools/check-environment.js", "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": "dgeni ./tools/transforms/angular.io-package",
"docs-watch": "node tools/transforms/authors-package/watchr.js", "docs-watch": "node tools/transforms/authors-package/watchr.js",
"docs-lint": "eslint --ignore-path=\"tools/transforms/.eslintignore\" tools/transforms", "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 ```ts
private computePath(url) { private computePath(url) {
url = url.startsWith('/') ? url : '/' + 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)) { if (/navigation\.json/.test(url)) {
data = this.navJson; data = this.navJson;
} else { } else {
const match = /content\/docs\/(.+)\.json/.exec(url); const match = /generated\/docs\/(.+)\.json/.exec(url);
const id = match[1]; const id = match[1];
// Make up a title for test purposes // Make up a title for test purposes
const title = id.split('/').pop().replace(/^([a-z])/, (_, letter) => letter.toUpperCase()); 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'; 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) { function createResponse(body: any) {
return new Response(new ResponseOptions({ body: JSON.stringify(body) })); 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 FILE_NOT_FOUND_ID = 'file-not-found';
export const FETCHING_ERROR_ID = 'fetching-error'; 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 = ` const FETCHING_ERROR_CONTENTS = `
<div class="nf-container l-flex-wrap flex-center"> <div class="nf-container l-flex-wrap flex-center">
<div class="nf-icon material-icons">error_outline</div> <div class="nf-icon material-icons">error_outline</div>
@ -56,7 +57,7 @@ export class DocumentService {
} }
private fetchDocument(id: string): Observable<DocumentContents> { 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); this.logger.log('fetching document from', requestPath);
const subject = new AsyncSubject(); const subject = new AsyncSubject();
this.http 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', () => { it('should connect to the server w/ expected URL', () => {
service.fetchSections(); service.fetchSections();
expect(backend.connectionsArray.length).toEqual(1); 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', () => { 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 'rxjs/add/operator/takeUntil';
import { Logger } from 'app/shared/logger.service'; import { Logger } from 'app/shared/logger.service';
import { DOC_CONTENT_URL_PREFIX } from 'app/documents/document.service';
export interface ApiItem { export interface ApiItem {
name: string; name: string;
@ -29,7 +30,7 @@ export interface ApiSection {
@Injectable() @Injectable()
export class ApiService implements OnDestroy { export class ApiService implements OnDestroy {
private apiBase = 'content/docs/api/'; private apiBase = DOC_CONTENT_URL_PREFIX + 'api/';
private apiListJsonDefault = 'api-list.json'; private apiListJsonDefault = 'api-list.json';
private firstTime = true; private firstTime = true;
private onDestroy = new Subject(); 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 { Component, Input } from '@angular/core';
import { Contributor } from './contributors.model'; import { Contributor } from './contributors.model';
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
@Component({ @Component({
selector: 'aio-contributor', selector: 'aio-contributor',
@ -57,7 +58,7 @@ import { Contributor } from './contributors.model';
export class ContributorComponent { export class ContributorComponent {
@Input() person: Contributor; @Input() person: Contributor;
noPicture = '_no-one.png'; noPicture = '_no-one.png';
pictureBase = 'content/images/bios/'; pictureBase = CONTENT_URL_PREFIX + 'images/bios/';
flipCard(person) { flipCard(person) {
person.isFlipped = !person.isFlipped; 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', () => { it('should make a single connection to the server', () => {
expect(backend.connectionsArray.length).toEqual(1); 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', () => { 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 { Logger } from 'app/shared/logger.service';
import { Contributor, ContributorGroup } from './contributors.model'; 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']; const knownGroups = ['Angular', 'Community'];
@Injectable() @Injectable()

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

@ -1,13 +1,14 @@
/* tslint:disable component-selector */ /* tslint:disable component-selector */
import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core'; import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
import { boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils'; import { boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils';
const defaultPlnkrImg = 'plunker/placeholder.png'; const defaultPlnkrImg = 'plunker/placeholder.png';
const imageBase = 'content/images/'; const imageBase = CONTENT_URL_PREFIX + 'images/';
const liveExampleBase = 'content/live-examples/'; const liveExampleBase = CONTENT_URL_PREFIX + 'live-examples/';
const zipBase = 'content/zips/'; const zipBase = CONTENT_URL_PREFIX + 'zips/';
/** /**
* Angular.io Live Example Embedded Component * 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', () => { it('should make a single connection to the server', () => {
expect(backend.connectionsArray.length).toEqual(1); 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', () => { 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 { Logger } from 'app/shared/logger.service';
import { Category, Resource, SubCategory } from './resource.model'; 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() @Injectable()
export class ResourceService { 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', () => { it('should make a single connection to the server', () => {
expect(backend.connectionsArray.length).toEqual(1); 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', () => { 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 { Logger } from 'app/shared/logger.service';
import { LocationService } from 'app/shared/location.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 and re-export the Navigation model types
import { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model'; import { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, VersionInfo } from './navigation.model';
export { 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() @Injectable()
export class NavigationService { export class NavigationService {

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

@ -3,7 +3,7 @@
/* eslint-env worker */ /* eslint-env worker */
/* global importScripts, lunr */ /* 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`. // NOTE: This needs to be kept in sync with `ngsw-manifest.json`.
importScripts('https://unpkg.com/lunr@0.7.2/lunr.min.js'); 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 path = require('canonical-path');
const EXAMPLES_PATH = path.join(__dirname, '../../content/examples'); 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); 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 embeddedPlunker = require('./embeddedPlunker');
const EXAMPLES_PATH = path.join(__dirname, '../../content/examples'); 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); regularPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH);
embeddedPlunker.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? ## 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. 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 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 fs = require('fs');
const {resolve} = require('canonical-path'); const {resolve} = require('canonical-path');
const {generateDocs} = require('./index.js'); const {generateDocs} = require('./index.js');
const rootPath = resolve(__dirname, '../../../..'); const { DOCS_OUTPUT_PATH } = require('../config');
const outputPath = resolve(rootPath, 'aio/src/content/docs');
describe('authors-package', () => { describe('authors-package', () => {
let files; let files;
@ -18,10 +17,10 @@ describe('authors-package', () => {
it('should generate marketing docs if the "fileChanged" is a marketing doc', (done) => { it('should generate marketing docs if the "fileChanged" is a marketing doc', (done) => {
generateDocs('aio/content/marketing/about.html', { silent: true }).then(() => { generateDocs('aio/content/marketing/about.html', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'about.json')); expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'about.json'));
expect(files).toContain(resolve(outputPath, '../navigation.json')); expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../navigation.json'));
expect(files).toContain(resolve(outputPath, '../contributors.json')); expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../contributors.json'));
expect(files).toContain(resolve(outputPath, '../resources.json')); expect(files).toContain(resolve(DOCS_OUTPUT_PATH, '../resources.json'));
done(); done();
}); });
}, 4000); }, 4000);
@ -29,7 +28,7 @@ describe('authors-package', () => {
it('should generate tutorial docs if the "fileChanged" is a tutorial doc', (done) => { it('should generate tutorial docs if the "fileChanged" is a tutorial doc', (done) => {
generateDocs('aio/content/tutorial/toh-pt5.md', { silent: true }).then(() => { generateDocs('aio/content/tutorial/toh-pt5.md', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); 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(); done();
}); });
}, 4000); }, 4000);
@ -37,7 +36,7 @@ describe('authors-package', () => {
it('should generate tutorial docs if the "fileChanged" is the tutorial index', (done) => { it('should generate tutorial docs if the "fileChanged" is the tutorial index', (done) => {
generateDocs('aio/content/tutorial/index.md', { silent: true }).then(() => { generateDocs('aio/content/tutorial/index.md', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'tutorial.json')); expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'tutorial.json'));
done(); done();
}); });
}, 4000); }, 4000);
@ -45,7 +44,7 @@ describe('authors-package', () => {
it('should generate tutorial docs if the "fileChanged" is a tutorial example', (done) => { 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(() => { generateDocs('aio/content/examples/toh-pt3/app/app.component.1.html', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); 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(); done();
}); });
}, 4000); }, 4000);
@ -53,7 +52,7 @@ describe('authors-package', () => {
it('should generate guide doc if the "fileChanged" is a guide doc', (done) => { it('should generate guide doc if the "fileChanged" is a guide doc', (done) => {
generateDocs('aio/content/guide/architecture.md', { silent: true }).then(() => { generateDocs('aio/content/guide/architecture.md', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'guide/architecture.json')); expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
done(); done();
}); });
}, 4000); }, 4000);
@ -61,7 +60,7 @@ describe('authors-package', () => {
it('should generate guide doc if the "fileChanged" is a guide example', (done) => { 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(() => { generateDocs('aio/content/examples/architecture/src/app/app.module.ts', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); expect(fs.writeFile).toHaveBeenCalled();
expect(files).toContain(resolve(outputPath, 'guide/architecture.json')); expect(files).toContain(resolve(DOCS_OUTPUT_PATH, 'guide/architecture.json'));
done(); done();
}); });
}, 4000); }, 4000);
@ -69,16 +68,16 @@ describe('authors-package', () => {
it('should generate API doc if the "fileChanged" is an API doc', (done) => { it('should generate API doc if the "fileChanged" is an API doc', (done) => {
generateDocs('packages/forms/src/form_builder.ts', { silent: true }).then(() => { generateDocs('packages/forms/src/form_builder.ts', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); 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(); done();
}); });
}, 4000); }, 8000);
it('should generate API doc if the "fileChanged" is an API example', (done) => { 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(() => { generateDocs('packages/examples/forms/ts/formBuilder/form_builder_example.ts', { silent: true }).then(() => {
expect(fs.writeFile).toHaveBeenCalled(); 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(); done();
}); });
}, 4000); }, 8000);
}); });

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

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