From 15036913bb102b561a376d36164ca8a9054dc96f Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Fri, 24 Mar 2017 17:58:36 +0000 Subject: [PATCH] docs: followup amends for 4.0 release (#3431) --- .../docs/_examples/animations/ts/src/app/app.module.ts | 4 ++++ public/docs/_examples/package.json | 2 +- public/docs/_examples/router/ts/src/app/app.module.ts | 9 ++++++++- public/docs/ts/latest/guide/animations.jade | 7 ++++--- public/docs/ts/latest/guide/dependency-injection.jade | 2 +- public/docs/ts/latest/guide/router.jade | 4 ++++ 6 files changed, 22 insertions(+), 6 deletions(-) diff --git a/public/docs/_examples/animations/ts/src/app/app.module.ts b/public/docs/_examples/animations/ts/src/app/app.module.ts index 42c00a07a1..0773357c58 100644 --- a/public/docs/_examples/animations/ts/src/app/app.module.ts +++ b/public/docs/_examples/animations/ts/src/app/app.module.ts @@ -1,6 +1,8 @@ +// #docregion animations-module import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +// #enddocregion animations-module import { HeroTeamBuilderComponent } from './hero-team-builder.component'; import { HeroListBasicComponent } from './hero-list-basic.component'; @@ -14,8 +16,10 @@ import { HeroListGroupsComponent } from './hero-list-groups.component'; import { HeroListMultistepComponent } from './hero-list-multistep.component'; import { HeroListTimingsComponent } from './hero-list-timings.component'; +// #docregion animation-module @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], + // #enddocregion animation-module declarations: [ HeroTeamBuilderComponent, HeroListBasicComponent, diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 6220cba22c..155a738fe3 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -32,7 +32,7 @@ "zone.js": "^0.8.4" }, "devDependencies": { - "@angular/cli": "^1.0.0-rc.4", + "@angular/cli": "^1.0.0", "@types/angular": "^1.5.16", "@types/angular-animate": "^1.5.5", "@types/angular-cookies": "^1.4.2", diff --git a/public/docs/_examples/router/ts/src/app/app.module.ts b/public/docs/_examples/router/ts/src/app/app.module.ts index d6153158c9..dcf3401ded 100644 --- a/public/docs/_examples/router/ts/src/app/app.module.ts +++ b/public/docs/_examples/router/ts/src/app/app.module.ts @@ -3,9 +3,12 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; +// #docregion animations-module +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +// #enddocregion animations-module // #docregion inspect-config import { Router } from '@angular/router'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // #enddocregion inspect-config import { AppComponent } from './app.component'; @@ -19,14 +22,18 @@ import { PageNotFoundComponent } from './not-found.component'; import { DialogService } from './dialog.service'; +// #docregion animations-module @NgModule({ imports: [ + // #enddocregion animations-module BrowserModule, FormsModule, HeroesModule, LoginRoutingModule, AppRoutingModule, + // #docregion animations-module BrowserAnimationsModule + // #enddocregion animations-module ], declarations: [ AppComponent, diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index 342932bb1a..2077bf87b6 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/public/docs/ts/latest/guide/animations.jade @@ -49,8 +49,9 @@ figure driven by a model attribute. Animations are defined inside `@Component` metadata. Before you can add animations, you need - to import a few animation-specific functions: + to import a few animation-specific imports and functions: ++makeExample('animations/ts/src/app/app.module.ts', 'animations-module', 'app.module.ts (@NgModule imports excerpt)')(format=".") +makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports', 'hero-list-basic.component.ts')(format=".") :marked @@ -353,7 +354,7 @@ figure +makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template', 'hero-list-multistep.component.ts (excerpt)')(format=".") :marked - The callbacks receive an `AnimationTransitionEvent` which contains useful properties such as `fromState`, - `toState` and `totalTime`. + The callbacks receive an `AnimationEvent` that contains contains useful properties such as + `fromState`, `toState` and `totalTime`. Those callbacks will fire whether or not an animation is picked up. diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade index 52bb0fa061..7a7ea2dbb2 100644 --- a/public/docs/ts/latest/guide/dependency-injection.jade +++ b/public/docs/ts/latest/guide/dependency-injection.jade @@ -890,7 +890,7 @@ block dart-map-alternative An `Injector` is itself an injectable service. In this example, Angular injects the component's own `Injector` into the component's constructor. - The component then asks the injected injector for the services it wants. + The component then asks the injected injector for the services it wants in `ngOnInit()`. Note that the services themselves are not injected into the component. They are retrieved by calling `injector.get()`. diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index bcecaf3f7d..20f0792662 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -1430,6 +1430,10 @@ a#route-animation This section shows you how to add some [animations](../guide/animations.html) to the `HeroDetailComponent`. + First import `BrowserAnimationsModule`: ++makeExcerpt('src/app/app.module.ts', 'animations-module', 'src/app/app.module.ts (@NgModule imports excerpt)') + +:marked Create an `animations.ts` file in the root `src/app/` folder. The contents look like this: +makeExcerpt('src/app/animations.ts', '', 'src/app/animations.ts') :marked