docs: followup amends for 4.0 release (#3431)
This commit is contained in:
parent
4cf2a09671
commit
15036913bb
|
@ -1,6 +1,8 @@
|
||||||
|
// #docregion animations-module
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
// #enddocregion animations-module
|
||||||
|
|
||||||
import { HeroTeamBuilderComponent } from './hero-team-builder.component';
|
import { HeroTeamBuilderComponent } from './hero-team-builder.component';
|
||||||
import { HeroListBasicComponent } from './hero-list-basic.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 { HeroListMultistepComponent } from './hero-list-multistep.component';
|
||||||
import { HeroListTimingsComponent } from './hero-list-timings.component';
|
import { HeroListTimingsComponent } from './hero-list-timings.component';
|
||||||
|
|
||||||
|
// #docregion animation-module
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [ BrowserModule, BrowserAnimationsModule ],
|
imports: [ BrowserModule, BrowserAnimationsModule ],
|
||||||
|
// #enddocregion animation-module
|
||||||
declarations: [
|
declarations: [
|
||||||
HeroTeamBuilderComponent,
|
HeroTeamBuilderComponent,
|
||||||
HeroListBasicComponent,
|
HeroListBasicComponent,
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
"zone.js": "^0.8.4"
|
"zone.js": "^0.8.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular/cli": "^1.0.0-rc.4",
|
"@angular/cli": "^1.0.0",
|
||||||
"@types/angular": "^1.5.16",
|
"@types/angular": "^1.5.16",
|
||||||
"@types/angular-animate": "^1.5.5",
|
"@types/angular-animate": "^1.5.5",
|
||||||
"@types/angular-cookies": "^1.4.2",
|
"@types/angular-cookies": "^1.4.2",
|
||||||
|
|
|
@ -3,9 +3,12 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
|
// #docregion animations-module
|
||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
|
||||||
|
// #enddocregion animations-module
|
||||||
// #docregion inspect-config
|
// #docregion inspect-config
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
||||||
|
|
||||||
// #enddocregion inspect-config
|
// #enddocregion inspect-config
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
|
@ -19,14 +22,18 @@ import { PageNotFoundComponent } from './not-found.component';
|
||||||
|
|
||||||
import { DialogService } from './dialog.service';
|
import { DialogService } from './dialog.service';
|
||||||
|
|
||||||
|
// #docregion animations-module
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
// #enddocregion animations-module
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
HeroesModule,
|
HeroesModule,
|
||||||
LoginRoutingModule,
|
LoginRoutingModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
|
// #docregion animations-module
|
||||||
BrowserAnimationsModule
|
BrowserAnimationsModule
|
||||||
|
// #enddocregion animations-module
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
|
|
|
@ -49,8 +49,9 @@ figure
|
||||||
driven by a model attribute.
|
driven by a model attribute.
|
||||||
|
|
||||||
Animations are defined inside `@Component` metadata. Before you can add animations, you need
|
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=".")
|
+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports', 'hero-list-basic.component.ts')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -353,7 +354,7 @@ figure
|
||||||
+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template', 'hero-list-multistep.component.ts (excerpt)')(format=".")
|
+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template', 'hero-list-multistep.component.ts (excerpt)')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The callbacks receive an `AnimationTransitionEvent` which contains useful properties such as `fromState`,
|
The callbacks receive an `AnimationEvent` that contains contains useful properties such as
|
||||||
`toState` and `totalTime`.
|
`fromState`, `toState` and `totalTime`.
|
||||||
|
|
||||||
Those callbacks will fire whether or not an animation is picked up.
|
Those callbacks will fire whether or not an animation is picked up.
|
||||||
|
|
|
@ -890,7 +890,7 @@ block dart-map-alternative
|
||||||
An `Injector` is itself an injectable service.
|
An `Injector` is itself an injectable service.
|
||||||
|
|
||||||
In this example, Angular injects the component's own `Injector` into the component's constructor.
|
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.
|
Note that the services themselves are not injected into the component.
|
||||||
They are retrieved by calling `injector.get()`.
|
They are retrieved by calling `injector.get()`.
|
||||||
|
|
|
@ -1430,6 +1430,10 @@ a#route-animation
|
||||||
This section shows you how to add some [animations](../guide/animations.html)
|
This section shows you how to add some [animations](../guide/animations.html)
|
||||||
to the `HeroDetailComponent`.
|
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:
|
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')
|
+makeExcerpt('src/app/animations.ts', '', 'src/app/animations.ts')
|
||||||
:marked
|
:marked
|
||||||
|
|
Loading…
Reference in New Issue