toh-pt6.jade

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')