diff --git a/public/docs/_examples/server-communication/dart/.docsync.json b/public/docs/_examples/server-communication/dart/.docsync.json new file mode 100644 index 0000000000..09097599c8 --- /dev/null +++ b/public/docs/_examples/server-communication/dart/.docsync.json @@ -0,0 +1,4 @@ +{ + "name": "HTTP client (server communication)" + "docHref": "https://angular.io/docs/dart/latest/guide/server-communication.html" +} diff --git a/public/docs/_examples/server-communication/dart/lib/app_component.dart b/public/docs/_examples/server-communication/dart/lib/app_component.dart index 55c91e6e4d..cd52ca413f 100644 --- a/public/docs/_examples/server-communication/dart/lib/app_component.dart +++ b/public/docs/_examples/server-communication/dart/lib/app_component.dart @@ -1,13 +1,13 @@ // #docplaster // #docregion -import "package:angular2/core.dart" show Component; +import 'package:angular2/core.dart'; -import "toh/hero_list_component.dart" show HeroListComponent; -import "wiki/wiki_component.dart" show WikiComponent; -import "wiki/wiki_smart_component.dart" show WikiSmartComponent; +import 'toh/hero_list_component.dart'; +import 'wiki/wiki_component.dart'; +import 'wiki/wiki_smart_component.dart'; @Component( - selector: "my-app", + selector: 'my-app', template: ''' diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero.dart index 6e788437c7..a990373a72 100644 --- a/public/docs/_examples/server-communication/dart/lib/toh/hero.dart +++ b/public/docs/_examples/server-communication/dart/lib/toh/hero.dart @@ -1,4 +1,6 @@ // #docregion +int _toInt(id) => id is int ? id : int.parse(id); + class Hero { final int id; final String name; @@ -9,6 +11,4 @@ class Hero { new Hero(_toInt(hero['id']), hero['name']); Map toJson() => {'id': id, 'name': name}; - - static int _toInt(id) => id is int ? id : int.parse(id); } diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart index d8d602d2e7..5da269fff7 100644 --- a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart +++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart @@ -6,12 +6,12 @@ import 'dart:convert'; import 'hero.dart'; import 'package:angular2/core.dart'; import 'package:http/browser_client.dart'; -import 'package:http/http.dart' show Response; +import 'package:http/http.dart'; @Injectable() class HeroService { // #docregion endpoint, http-get - final String _heroesUrl = 'app/heroes'; // URL to web API + static const _heroesUrl = 'app/heroes'; // URL to web API // #enddocregion endpoint, http-get final BrowserClient _http; @@ -35,7 +35,7 @@ class HeroService { // #docregion addhero, addhero-sig Future addHero(String name) async { - // #enddocregion addhero-sig + // #enddocregion addhero-sig try { final response = await _http.post(_heroesUrl, headers: {'Content-Type': 'application/json'}, @@ -50,8 +50,8 @@ class HeroService { // #docregion extract-data dynamic _extractData(Response res) { var body = JSON.decode(res.body); - // TODO: once fixed, https://github.com/adaojunior/http-in-memory-web-api/issues/1 - // Drop the `?? body` term + // TODO: https://github.com/adaojunior/http-in-memory-web-api/issues/1 + // Once #1 is fixed, drop the `?? body` term: return body['data'] ?? body; } // #enddocregion extract-data @@ -69,6 +69,6 @@ class HeroService { /* // #docregion endpoint-json - private _heroesUrl = 'heroes.json'; // URL to JSON file + static const _heroesUrl = 'heroes.json'; // URL to JSON file // #enddocregion endpoint-json */ diff --git a/public/docs/_examples/server-communication/dart/pubspec.yaml b/public/docs/_examples/server-communication/dart/pubspec.yaml index 60e431bf51..6b1e961d75 100644 --- a/public/docs/_examples/server-communication/dart/pubspec.yaml +++ b/public/docs/_examples/server-communication/dart/pubspec.yaml @@ -23,4 +23,3 @@ transformers: resolved_identifiers: BrowserClient: 'package:http/browser_client.dart' - dart_to_js_script_rewriter -# #enddocregion transformers diff --git a/public/docs/_examples/server-communication/dart/web/main.dart b/public/docs/_examples/server-communication/dart/web/main.dart index a66ddb454b..ca055c9d10 100644 --- a/public/docs/_examples/server-communication/dart/web/main.dart +++ b/public/docs/_examples/server-communication/dart/web/main.dart @@ -1,10 +1,10 @@ // #docplaster // #docregion final -import 'package:angular2/core.dart' show Provider; +import 'package:angular2/core.dart'; // #docregion v1 -import 'package:angular2/platform/browser.dart' show bootstrap; +import 'package:angular2/platform/browser.dart'; // #docregion http-providers -import 'package:http/browser_client.dart' show BrowserClient; +import 'package:http/browser_client.dart'; // #enddocregion http-providers import 'package:server_communication/app_component.dart'; diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json index fe30a34965..4b6553b64d 100644 --- a/public/docs/dart/latest/guide/_data.json +++ b/public/docs/dart/latest/guide/_data.json @@ -80,8 +80,8 @@ }, "server-communication": { - "title": "Http Client", - "intro": "Talk to a remote server with the Angular Http Client." + "title": "HTTP Client", + "intro": "Talk to a remote server with an HTTP Client." }, "lifecycle-hooks": { diff --git a/public/docs/dart/latest/guide/server-communication.jade b/public/docs/dart/latest/guide/server-communication.jade index 0195d5cb88..51bd3a63db 100644 --- a/public/docs/dart/latest/guide/server-communication.jade +++ b/public/docs/dart/latest/guide/server-communication.jade @@ -5,11 +5,11 @@ block includes - var _Http = 'BrowserClient'; - var _Angular_Http = 'Dart BrowserClient' - var _httpUrl = 'https://pub.dartlang.org/packages/http' - - var _Angular_http_library = 'Dart http library' + - var _Angular_http_library = 'Dart http library' block demos-list - li HTTP client: Tour of Heroes - li JSONP client: Wikipedia to fetch data from a service that doesn't support CORS (under development) + li #[a(href="#http-client") HTTP client: Tour of Heroes] + li #[a(href="#cors") JSONP client: Wikipedia to fetch data from a service that does not support CORS] #[b (under development)] block rxjs-import //- N/A diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 62a168eae5..59ba8dfd01 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -80,8 +80,8 @@ }, "server-communication": { - "title": "Http Client", - "intro": "Talk to a remote server with the Angular Http Client." + "title": "HTTP Client", + "intro": "Talk to a remote server with an HTTP Client." }, "lifecycle-hooks": { diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index f1f32bbbc6..9fae3fe5be 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -80,8 +80,8 @@ }, "server-communication": { - "title": "Http Client", - "intro": "Talk to a remote server with the Angular Http Client." + "title": "HTTP Client", + "intro": "Talk to a remote server with an HTTP Client." }, "lifecycle-hooks": { diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index b41274113c..fb9257d9f0 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/public/docs/ts/latest/guide/server-communication.jade @@ -16,7 +16,7 @@ block includes [JSONP](https://en.wikipedia.org/wiki/JSONP). A few browsers also support [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). - The Angular HTTP client library simplifies application programming of the **XHR** and **JSONP** APIs + The !{_Angular_http_library} simplifies application programming of the **XHR** and **JSONP** APIs as we'll learn in this chapter covering: ul @@ -30,7 +30,7 @@ ul li #[a(href="#update") Send data to the server] +ifDocsFor('ts') li #[a(href="#promises") Promises instead of observables] - li #[a(href="#cross-origin-requests") Cross-origin requests: Wikipedia example] + li #[a(href="#cors") Cross-origin requests: Wikipedia example] +ifDocsFor('ts') ul li #[a(href="#search-parameters") Set query string parameters] @@ -45,10 +45,10 @@ h1 Demos p This chapter describes server communication with the help of the following demos ul block demos-list - li HTTP client: Tour of Heroes with Observables - li HTTP client: Tour of Heroes with #{_Promise}s - li JSONP client: Wikipedia to fetch data from a service that doesn't support CORS - li JSONP client: Wikipedia using observable operators to reduce server calls + li #[a(href="#http-client") HTTP client: Tour of Heroes with Observables] + li #[a(href="#promises") HTTP client: Tour of Heroes with #{_Promise}s] + li #[a(href="#cors") JSONP client: Wikipedia to fetch data from a service that does not support CORS] + li #[a(href="#more-observables") JSONP client: Wikipedia using observable operators to reduce server calls] :marked These demos are orchestrated by the root `AppComponent` +makeExample('server-communication/ts/app/app.component.ts', null, 'app/app.component.ts') @@ -58,7 +58,7 @@ block rxjs-import There is nothing remarkable here _except_ for the import of RxJS operators. +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs')(format='.') :marked - We'll talk about that [below](#rxjs) when we're ready to explore observables. + We'll talk about that [below](#rxjs) when we're ready to explore observables. :marked First, we have to configure our application to use server communication facilities. @@ -66,14 +66,14 @@ block rxjs-import h1#http-providers Providing HTTP Services :marked We use the !{_Angular_Http} client to communicate with a server using a familiar HTTP request/response protocol. - The `!{_Http}` client is one of a family of services in the !{_Angular_http_library}. + The `#{_Http}` client is one of a family of services in the !{_Angular_http_library}. block system-config-of-http .l-sub-section :marked SystemJS knows how to load services from the !{_Angular_http_library} when we import from the `@angular/http` module because we registered that module name in the `system.config` file. :marked - Before we can use the `!{_Http}` client , we'll have to register it as a service provider with the Dependency Injection system. + Before we can use the `#{_Http}` client , we'll have to register it as a service provider with the Dependency Injection system. .l-sub-section :marked Learn about providers in the [Dependency Injection](dependency-injection.html) chapter. @@ -84,7 +84,7 @@ p In this demo, we register providers in the #[code bootstrap] method of #[code block http-providers :marked We begin by importing the symbols we need, most of them familiar by now. The newcomer is `HTTP_PROVIDERS`, - a collection of service providers from the Angular HTTP library. + a collection of service providers from the !{_Angular_http_library}. We register HTTP providers in the bootstrap method by passing them in an array as the second parameter after the root component. @@ -105,10 +105,8 @@ block http-providers For this reason, and this reason *only*, we hide it *above* the `AppComponent` in `main.ts`. .l-main-section -a#http-client +h1#http-client The Tour of Heroes #[i HTTP] Client Demo :marked - # The Tour of Heroes *HTTP* Client Demo - Our first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application. This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server. We use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`. @@ -182,7 +180,7 @@ h2#fetch-data Fetch data with the #[b HeroService] +makeExample('server-communication/ts/app/toh/hero.service.ts', 'v1', 'app/toh/hero.service.ts (revised)') :marked - Notice that the Angular `!{_Http}` client service is + Notice that the !{_Angular_Http} client service is [injected](dependency-injection.html) into the `HeroService` constructor. +makeExample('server-communication/ts/app/toh/hero.service.ts', 'ctor') :marked @@ -412,10 +410,8 @@ block hero-list-comp-add-hero +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".") block promises - a#promises + h2#promises Fall back to Promises :marked - ## Fall back to Promises - Although the Angular `http` client API returns an `Observable` we can turn it into a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) if we prefer. It's easy to do and a promise-based version looks much like the observable-based version in simple cases. @@ -461,11 +457,9 @@ block promises Learn more about observables to understand the implications and consequences of subscriptions. -a#cross-origin-requests +h2#cors Cross-origin requests: Wikipedia example :marked - ## Cross-origin requests: Wikipedia example - - We just learned how to make `XMLHttpRequests` using Angular's built-in `Http` service. + We just learned how to make `XMLHttpRequests` using the !{_Angular_Http} service. This is the most common approach for server communication. It doesn't work in all scenarios. @@ -496,7 +490,7 @@ figure.image-display block wikipedia-jsonp+ :marked Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API. Let's use the latter for this example. - The Angular `Jsonp` service both extends the `Http` service for JSONP and restricts us to `GET` requests. + The Angular `Jsonp` service both extends the `#{_Http}` service for JSONP and restricts us to `GET` requests. All other HTTP methods throw an error because JSONP is a read-only facility. As always, we wrap our interaction with an Angular data access client service inside a dedicated service, here called `WikipediaService`.