142 lines
4.4 KiB
Plaintext
142 lines
4.4 KiB
Plaintext
extends ../../../ts/latest/tutorial/toh-pt6.jade
|
|
|
|
block includes
|
|
include ../_util-fns
|
|
- var _Http = 'BrowserClient';
|
|
- 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 _JSON_stringify = 'JSON.encode'
|
|
|
|
block start-server-and-watch
|
|
:marked
|
|
### Keep the app compiling and running
|
|
Open a terminal/console window.
|
|
Start the Dart compiler, watch for changes, and start our server by entering the command:
|
|
|
|
code-example(language="bash").
|
|
pub serve
|
|
|
|
block http-library
|
|
:marked
|
|
We'll be using the !{_Angular_http_library}'s
|
|
`BrowserClient` class to communicate with a server.
|
|
|
|
### Pubspec updates
|
|
|
|
We need to add a package dependency for the !{_Angular_http_library}.
|
|
|
|
We also need to add a `resolved_identifiers` entry, to inform the [angular2
|
|
transformer][ng2x] that we'll be using `BrowserClient`. (For an explanation of why
|
|
this extra configuration is needed, see the [HTTP client chapter][guide-http].) We'll
|
|
also need to use `Client` from http, so let's add that now as well.
|
|
|
|
Update `pubspec.yaml` to look like this (additions are highlighted):
|
|
|
|
[guide-http]: ../guide/server-communication.html#!#http-providers
|
|
[ng2x]: https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer
|
|
|
|
- var stylePattern = { pnk: /(http.*|resolved_identifiers:|Browser.*|Client.*)/gm };
|
|
+makeExcerpt('pubspec.yaml', 'additions', null, stylePattern)
|
|
|
|
block http-providers
|
|
:marked
|
|
Before our app can use `#{_Http}`, we have to register it as a service provider.
|
|
|
|
block backend
|
|
:marked
|
|
We want to replace `BrowserClient`, the service that talks to the remote server,
|
|
with the in-memory web API service.
|
|
Our in-memory web API service, shown below, is implemented using the
|
|
`http` library `MockClient` class.
|
|
All `http` client implementations share a common `Client` interface, so
|
|
we'll have our app use the `Client` type so that we can freely switch between
|
|
implementations.
|
|
|
|
block dont-be-distracted-by-backend-subst
|
|
//- N/A
|
|
|
|
block get-heroes-details
|
|
:marked
|
|
To get the list of heroes, we first make an asynchronous call to
|
|
`http.get()`. Then we use the `_extractData` helper method to decode the
|
|
response payload (`body`).
|
|
|
|
block hero-detail-comp-extra-imports-and-vars
|
|
//- N/A
|
|
|
|
block hero-detail-comp-updates
|
|
:marked
|
|
### Edit in the *HeroDetailComponent*
|
|
|
|
We already have `HeroDetailComponent` for viewing details about a specific hero.
|
|
Supporting edit functionality is a natural extension of the detail view,
|
|
so we are able to reuse `HeroDetailComponent` with a few tweaks.
|
|
|
|
block hero-detail-comp-save-and-goback
|
|
//- N/A
|
|
|
|
block add-new-hero-via-detail-comp
|
|
//- N/A
|
|
|
|
block heroes-comp-directives
|
|
//- N/A
|
|
|
|
block heroes-comp-add
|
|
//- N/A
|
|
|
|
block review
|
|
//- Not showing animated gif due to differences between TS and Dart implementations.
|
|
|
|
block filetree
|
|
.filetree
|
|
.file angular2-tour-of-heroes
|
|
.children
|
|
.file lib
|
|
.children
|
|
.file app_component.dart
|
|
.file app_component.css
|
|
.file dashboard_component.css
|
|
.file dashboard_component.html
|
|
.file dashboard_component.dart
|
|
.file hero.dart
|
|
.file hero_detail_component.css
|
|
.file hero_detail_component.html
|
|
.file hero_detail_component.dart
|
|
.file hero_service.dart
|
|
.file heroes_component.css
|
|
.file heroes_component.html
|
|
.file heroes_component.dart
|
|
.file main.dart
|
|
.file in_memory_data_service.dart (new)
|
|
.file web
|
|
.children
|
|
.file main.dart
|
|
.file index.html
|
|
.file sample.css (new)
|
|
.file styles.css
|
|
.file pubspec.yaml
|
|
|
|
block file-summary
|
|
+makeTabs(
|
|
`toh-6/dart/lib/hero.dart,
|
|
toh-6/dart/lib/hero_detail_component.dart,
|
|
toh-6/dart/lib/hero_detail_component.html,
|
|
toh-6/dart/lib/hero_service.dart,
|
|
toh-6/dart/lib/heroes_component.dart,
|
|
toh-6/dart/web/index.html,
|
|
toh-6/dart/web/main.dart,
|
|
toh-6/dart/web/sample.css`,
|
|
`,,,,,,final,`,
|
|
`lib/hero.dart,
|
|
lib/hero_detail_component.dart,
|
|
lib/hero_detail_component.html,
|
|
lib/hero_service.dart,
|
|
lib/heroes_component.dart,
|
|
web/index.html,
|
|
web/main.dart,
|
|
web/sample.css`)
|
|
|
|
+makeExample('pubspec.yaml')
|