docs(toh-6): post-RC5 Dart resync and TS fixes (#2095)
* toh-6: trim spaces from cache file to simplify diff * toh-6: copy latest over cache before editing latest * docs(toh-6): post-RC5 Dart resync and TS fixes Contributes to #2077. TS-side changes include: - Merged three versions of `app/app.module{,1,2}.ts` into a single file and used docregions instead. - Misnamed files: - `rxjs-operators.ts` -> `rxjs-extensions.ts` - `hero-search.service.html` -> `hero-search.component.html` - Fixed BAD FILENAME error. Lint reports no errors and toh-6 e2e tests pass.
This commit is contained in:
Patrice Chalin
Kathy Walrath
parent
ea457825b8
commit
dfd46af604
|
|
@ -1,4 +1,4 @@
|
|||
// #docregion , search
|
||||
// #docregion
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
|
@ -6,6 +6,7 @@ import 'package:angular2/router.dart';
|
|||
|
||||
import 'hero.dart';
|
||||
import 'hero_service.dart';
|
||||
// #docregion search
|
||||
import 'hero_search_component.dart';
|
||||
|
||||
@Component(
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// #docplaster
|
||||
// #docregion final
|
||||
// #docregion v1
|
||||
// #docregion , v1, v2
|
||||
import 'package:angular2/core.dart';
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
||||
|
|
@ -15,7 +14,7 @@ void main() {
|
|||
// [provide(Client, useFactory: () => new BrowserClient(), deps: [])]
|
||||
);
|
||||
}
|
||||
// #enddocregion final
|
||||
// #enddocregion v2,
|
||||
/*
|
||||
// #docregion v1
|
||||
import 'package:http/browser_client.dart';
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
// Imports for loading & configuring the in-memory web api
|
||||
import { HttpModule, XHRBackend } from '@angular/http';
|
||||
|
||||
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
|
||||
import { InMemoryDataService } from './in-memory-data.service';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { routing } from './app.routing';
|
||||
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
routing,
|
||||
HttpModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroesComponent,
|
||||
DashboardComponent,
|
||||
HeroDetailComponent
|
||||
],
|
||||
providers: [
|
||||
HeroService,
|
||||
{ provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
|
||||
{ provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
// #enddocregion final
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { routing } from './app.routing';
|
||||
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
// #docregion hero-search-declaration
|
||||
import { HeroSearchComponent } from './hero-search.component';
|
||||
// #enddocregion hero-search-declaration
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
routing,
|
||||
HttpModule
|
||||
],
|
||||
// #docregion hero-search-declaration
|
||||
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroesComponent,
|
||||
DashboardComponent,
|
||||
HeroDetailComponent,
|
||||
HeroSearchComponent
|
||||
],
|
||||
// #enddocregion hero-search-declaration
|
||||
providers: [
|
||||
HeroService
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -1,24 +1,31 @@
|
|||
// #docregion
|
||||
// #docplaster
|
||||
// #docregion , v1, v2
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
|
||||
// #enddocregion v1
|
||||
// Imports for loading & configuring the in-memory web api
|
||||
import { HttpModule, XHRBackend } from '@angular/http';
|
||||
import { XHRBackend } from '@angular/http';
|
||||
|
||||
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
|
||||
import { InMemoryDataService } from './in-memory-data.service';
|
||||
|
||||
// #docregion v1
|
||||
import { AppComponent } from './app.component';
|
||||
import { routing } from './app.routing';
|
||||
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroSearchComponent } from './hero-search.component';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
// #enddocregion v1, v2
|
||||
// #docregion search
|
||||
import { HeroSearchComponent } from './hero-search.component';
|
||||
// #docregion v1, v2
|
||||
|
||||
// #enddocregion search
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
@ -26,20 +33,25 @@ import { HeroService } from './hero.service';
|
|||
routing,
|
||||
HttpModule
|
||||
],
|
||||
// #docregion search
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroesComponent,
|
||||
DashboardComponent,
|
||||
HeroDetailComponent,
|
||||
// #enddocregion v1, v2
|
||||
HeroSearchComponent
|
||||
// #docregion v1, v2
|
||||
],
|
||||
// #enddocregion search
|
||||
providers: [
|
||||
HeroService,
|
||||
// #enddocregion v1
|
||||
{ provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
|
||||
{ provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
|
||||
// #docregion v1
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ block includes
|
|||
- var _Angular_Http = 'Dart <code>BrowserClient</code>'
|
||||
- var _httpUrl = 'https://pub.dartlang.org/packages/http'
|
||||
- var _Angular_http_library = 'Dart <a href="' + _httpUrl + '"><b>http</b></a> package'
|
||||
- var _HTTP_PROVIDERS = 'BrowserClient'
|
||||
- var _HttpModule = 'BrowserClient'
|
||||
- var _JSON_stringify = 'JSON.encode'
|
||||
|
||||
block start-server-and-watch
|
||||
|
|
@ -45,6 +45,17 @@ block http-providers
|
|||
:marked
|
||||
Before our app can use `#{_Http}`, we have to register it as a service provider.
|
||||
|
||||
We should be able to access `!{_Http}` services from anywhere in the application.
|
||||
So we register it in the `bootstrap` call where we
|
||||
launch the application and its root `AppComponent`.
|
||||
|
||||
+makeExcerpt('app/main.ts','v1')
|
||||
|
||||
:marked
|
||||
Notice that we supply `!{_HttpModule}` in a list, as the second parameter to
|
||||
the `bootstrap` method. This has the same effect as the `providers` list in
|
||||
`@Component` annotation.
|
||||
|
||||
block backend
|
||||
:marked
|
||||
We want to replace `BrowserClient`, the service that talks to the remote server,
|
||||
|
|
@ -87,9 +98,6 @@ block hero-detail-comp-save-and-goback
|
|||
block add-new-hero-via-detail-comp
|
||||
//- N/A
|
||||
|
||||
block heroes-comp-directives
|
||||
//- N/A
|
||||
|
||||
block heroes-comp-add
|
||||
//- N/A
|
||||
|
||||
|
|
@ -198,6 +206,6 @@ block file-summary
|
|||
+makeTabs(
|
||||
`toh-6/dart/pubspec.yaml,
|
||||
toh-6/dart/web/main.dart`,
|
||||
`,final`,
|
||||
null,
|
||||
`pubspec.yaml,
|
||||
web/main.dart`)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ block includes
|
|||
- var _Http = 'Http'; // Angular `Http` library name.
|
||||
- var _Angular_Http = 'Angular <code>Http</code>'
|
||||
- var _Angular_http_library = 'Angular HTTP library'
|
||||
- var _HTTP_PROVIDERS = 'HTTP_PROVIDERS'
|
||||
- var _HttpModule = 'HttpModule'
|
||||
- var _JSON_stringify = 'JSON.stringify'
|
||||
|
||||
:marked
|
||||
|
|
@ -53,25 +53,24 @@ block http-library
|
|||
block http-providers
|
||||
:marked
|
||||
Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
|
||||
The `HTTP_PROVIDERS` array from `@angular/http` library holds providers for the complete set of http services.
|
||||
The `HttpModule` from `@angular/http` library holds providers for the complete set of `http` services.
|
||||
|
||||
:marked
|
||||
We should be able to access `!{_Http}` services from anywhere in the application.
|
||||
So we register them in the `bootstrap` call of <span ngio-ex>main.ts</span> where we
|
||||
launch the application and its root `AppComponent`.
|
||||
We should be able to access `http` services from anywhere in the application.
|
||||
So we register them in the `imports` array of `app.module.ts` where we
|
||||
bootstrap the application and its root `AppComponent`.
|
||||
|
||||
+makeExcerpt('app/main.ts','v1')
|
||||
+makeExcerpt('app/app.module.ts (v1)')
|
||||
|
||||
:marked
|
||||
Notice that we supply `!{_HTTP_PROVIDERS}` in !{_an} !{_array} as the second parameter to the `bootstrap` method.
|
||||
This has the same effect as the `providers` !{_array} in `@Component` !{_decorator}.
|
||||
:marked
|
||||
Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Simulating the web API
|
||||
|
||||
We generally recommend registering application-wide services in the root `AppComponent` *providers*.
|
||||
Here we're registering in `main` for a special reason.
|
||||
We recommend registering application-wide services in the root
|
||||
`!{_AppModuleVsAppComp}` *providers*. <span if-docs="dart">Here we're
|
||||
registering in `main` for a special reason.</span>
|
||||
|
||||
Our application is in the early stages of development and far from ready for production.
|
||||
We don't even have a web server that can handle requests for heroes.
|
||||
|
|
@ -79,12 +78,13 @@ block http-providers
|
|||
|
||||
We're going to *trick* the HTTP client into fetching and saving data from
|
||||
a mock service, the *in-memory web API*.
|
||||
<span if-docs="dart"> The application itself doesn't need to know and
|
||||
shouldn't know about this. So we'll slip the in-memory web API into the
|
||||
configuration *above* the `AppComponent`.</span>
|
||||
|
||||
The application itself doesn't need to know and shouldn't know about this.
|
||||
So we'll slip the in-memory web API into the configuration *above* the `AppComponent`.
|
||||
Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick:
|
||||
|
||||
Here is a version of `main` that performs this trick
|
||||
+makeExcerpt('app/main.ts', 'final')
|
||||
+makeExcerpt(_appModuleTsVsMainTs, 'v2')
|
||||
|
||||
block backend
|
||||
:marked
|
||||
|
|
@ -326,19 +326,6 @@ block add-new-hero-via-detail-comp
|
|||
Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions used in the template.
|
||||
Let's start with *add*.
|
||||
|
||||
block heroes-comp-directives
|
||||
:marked
|
||||
We're using the `HeroDetailComponent` to capture the new hero information.
|
||||
We have to tell Angular about that by importing the `HeroDetailComponent` and referencing it in the component metadata `directives` array.
|
||||
+makeExcerpt('app/heroes.component.ts (HeroDetailComponent)', 'hero-detail-component')
|
||||
.l-sub-section
|
||||
:marked
|
||||
These are the same lines that we removed in the previous [Routing](toh-pt5.html) chapter.
|
||||
We didn't know at the time that we'd need the *HeroDetailComponent* again. So we tidied up.
|
||||
|
||||
Now we *must* put these lines back. If we don't, Angular will ignore the `<my-hero-detail>`
|
||||
tag and pushing the *Add New Hero* button will have no visible effect.
|
||||
:marked
|
||||
Implement the click handler for the *Add New Hero* button.
|
||||
|
||||
+makeExcerpt('app/heroes.component.ts', 'addHero')
|
||||
|
|
@ -527,10 +514,12 @@ block observable-transformers
|
|||
|
||||
+makeExample('app/dashboard.component.html')
|
||||
|
||||
- var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
|
||||
- var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
|
||||
:marked
|
||||
And finally, we import the `HeroSearchComponent` and add it to the `directives` !{_array}.
|
||||
And finally, we import the `HeroSearchComponent` and add it to the `!{_declarations}` !{_array}:
|
||||
|
||||
+makeExcerpt('app/dashboard.component.ts', 'search')
|
||||
+makeExcerpt(declFile, 'search')
|
||||
|
||||
:marked
|
||||
Run the app again, go to the *Dashboard*, and enter some text in the search box.
|
||||
|
|
@ -554,7 +543,8 @@ block filetree
|
|||
.children
|
||||
.file app.component.ts
|
||||
.file app.component.css
|
||||
.file app.routes.ts
|
||||
.file app.module.ts
|
||||
.file app.routing.ts
|
||||
.file dashboard.component.css
|
||||
.file dashboard.component.html
|
||||
.file dashboard.component.ts
|
||||
|
|
@ -566,7 +556,7 @@ block filetree
|
|||
.file hero-search.component.css (new)
|
||||
.file hero-search.component.ts (new)
|
||||
.file hero-search.service.ts (new)
|
||||
.file rxjs-operators.ts
|
||||
.file rxjs-extensions.ts
|
||||
.file hero.service.ts
|
||||
.file heroes.component.css
|
||||
.file heroes.component.html
|
||||
|
|
@ -599,6 +589,7 @@ block filetree
|
|||
block file-summary
|
||||
+makeTabs(
|
||||
`toh-6/ts/app/app.component.ts,
|
||||
toh-6/ts/app/app.module.ts,
|
||||
toh-6/ts/app/heroes.component.ts,
|
||||
toh-6/ts/app/heroes.component.html,
|
||||
toh-6/ts/app/heroes.component.css,
|
||||
|
|
@ -606,8 +597,9 @@ block file-summary
|
|||
toh-6/ts/app/hero-detail.component.html,
|
||||
toh-6/ts/app/hero.service.ts,
|
||||
toh-6/ts/app/in-memory-data.service.ts`,
|
||||
null,
|
||||
',,,,,,,,',
|
||||
`app.comp...ts,
|
||||
app.mod...ts,
|
||||
heroes.comp...ts,
|
||||
heroes.comp...html,
|
||||
heroes.comp...css,
|
||||
|
|
@ -622,11 +614,11 @@ block file-summary
|
|||
toh-6/ts/app/hero-search.component.ts,
|
||||
toh-6/ts/app/hero-search.component.html,
|
||||
toh-6/ts/app/hero-search.component.css,
|
||||
toh-6/ts/app/rxjs-operators.ts`,
|
||||
toh-6/ts/app/rxjs-extensions.ts`,
|
||||
null,
|
||||
`hero-search.service.ts,
|
||||
hero-search.component.ts,
|
||||
hero-search.service.html,
|
||||
hero-search.component.html,
|
||||
hero-search.component.css,
|
||||
rxjs-operators.ts`
|
||||
rxjs-extensions.ts`
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ block includes
|
|||
- var _Http = 'Http'; // Angular `Http` library name.
|
||||
- var _Angular_Http = 'Angular <code>Http</code>'
|
||||
- var _Angular_http_library = 'Angular HTTP library'
|
||||
- var _HTTP_PROVIDERS = 'HTTP_PROVIDERS'
|
||||
- var _HttpModule = 'HttpModule'
|
||||
- var _JSON_stringify = 'JSON.stringify'
|
||||
|
||||
|
|
@ -54,23 +53,24 @@ block http-library
|
|||
block http-providers
|
||||
:marked
|
||||
Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
|
||||
The `HttpModule` from `@angular/http` library holds providers for the complete set of http services.
|
||||
The `HttpModule` from `@angular/http` library holds providers for the complete set of `http` services.
|
||||
|
||||
:marked
|
||||
We should be able to access `!{_Http}` services from anywhere in the application.
|
||||
So we register them in the `imports` array of <span ngio-ex>app.module.ts</span> where we
|
||||
We should be able to access `http` services from anywhere in the application.
|
||||
So we register them in the `imports` array of `app.module.ts` where we
|
||||
bootstrap the application and its root `AppComponent`.
|
||||
|
||||
+makeExample('app/app.module.2.ts','', 'app.module.ts (v.1)')
|
||||
+makeExcerpt('app/app.module.ts (v1)')
|
||||
|
||||
:marked
|
||||
:marked
|
||||
Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Simulating the web API
|
||||
|
||||
We recommend registering application-wide services in the root `NgModule` *providers*.
|
||||
We recommend registering application-wide services in the root
|
||||
`!{_AppModuleVsAppComp}` *providers*. <span if-docs="dart">Here we're
|
||||
registering in `main` for a special reason.</span>
|
||||
|
||||
Our application is in the early stages of development and far from ready for production.
|
||||
We don't even have a web server that can handle requests for heroes.
|
||||
|
|
@ -78,9 +78,13 @@ block http-providers
|
|||
|
||||
We're going to *trick* the HTTP client into fetching and saving data from
|
||||
a mock service, the *in-memory web API*.
|
||||
<span if-docs="dart"> The application itself doesn't need to know and
|
||||
shouldn't know about this. So we'll slip the in-memory web API into the
|
||||
configuration *above* the `AppComponent`.</span>
|
||||
|
||||
Here is a version of `app.module.ts` that performs this trick
|
||||
+makeExample('app/app.module.1.ts', '', 'app.module.ts (final)')
|
||||
Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick:
|
||||
|
||||
+makeExcerpt(_appModuleTsVsMainTs, 'v2')
|
||||
|
||||
block backend
|
||||
:marked
|
||||
|
|
@ -510,11 +514,12 @@ block observable-transformers
|
|||
|
||||
+makeExample('app/dashboard.component.html')
|
||||
|
||||
- var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
|
||||
- var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
|
||||
:marked
|
||||
And finally, we import the `HeroSearchComponent` and add it to the `declarations` !{_array} in
|
||||
`app.module.ts`.
|
||||
And finally, we import the `HeroSearchComponent` and add it to the `!{_declarations}` !{_array}:
|
||||
|
||||
+makeExcerpt('app/app.module.2.ts', 'hero-search-declaration')
|
||||
+makeExcerpt(declFile, 'search')
|
||||
|
||||
:marked
|
||||
Run the app again, go to the *Dashboard*, and enter some text in the search box.
|
||||
|
|
@ -551,7 +556,7 @@ block filetree
|
|||
.file hero-search.component.css (new)
|
||||
.file hero-search.component.ts (new)
|
||||
.file hero-search.service.ts (new)
|
||||
.file rxjs-operators.ts
|
||||
.file rxjs-extensions.ts
|
||||
.file hero.service.ts
|
||||
.file heroes.component.css
|
||||
.file heroes.component.html
|
||||
|
|
@ -609,12 +614,11 @@ block file-summary
|
|||
toh-6/ts/app/hero-search.component.ts,
|
||||
toh-6/ts/app/hero-search.component.html,
|
||||
toh-6/ts/app/hero-search.component.css,
|
||||
toh-6/ts/app/rxjs-operators.ts`,
|
||||
toh-6/ts/app/rxjs-extensions.ts`,
|
||||
null,
|
||||
`hero-search.service.ts,
|
||||
hero-search.component.ts,
|
||||
hero-search.service.html,
|
||||
hero-search.component.html,
|
||||
hero-search.component.css,
|
||||
hero-search.component.css,
|
||||
rxjs-operators.ts`
|
||||
rxjs-extensions.ts`
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue