From e045598de39d78eacf89595150d7a230244a768f Mon Sep 17 00:00:00 2001
From: Uri Goldshtein <uri.goldshtein@gmail.com>
Date: Tue, 19 Apr 2016 19:15:58 +0300
Subject: [PATCH] Feature/angular2 docs (#26)

* chore(docs): Angular2 docs

* fix(layout): Fix too many underlines...
---
 docs/_config.yml                      |   1 +
 docs/source/apollo-client/angular2.md | 206 ++++++++++++++++++++++++++
 2 files changed, 207 insertions(+)
 create mode 100644 docs/source/apollo-client/angular2.md

diff --git a/docs/_config.yml b/docs/_config.yml
index 6bf99c018e2..dcbb435060f 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -18,6 +18,7 @@ sidebar_categories:
     - apollo-client/index
     - apollo-client/core
     - apollo-client/react
+    - apollo-client/angular2
     - apollo-client/meteor
     - apollo-client/redux
     - apollo-client/network
diff --git a/docs/source/apollo-client/angular2.md b/docs/source/apollo-client/angular2.md
new file mode 100644
index 00000000000..d4139c49713
--- /dev/null
+++ b/docs/source/apollo-client/angular2.md
@@ -0,0 +1,206 @@
+---
+title: Angular 2.0 integration
+order: 112
+description: How to use the Apollo Client to fetch GraphQL data in your Angular 2.0 application.
+---
+
+<h2 id="install">Install</h2>
+
+```bash
+npm install angular2-apollo --save
+```
+
+<h2 id="bootstrap">Bootstrap</h2>
+
+```ts
+import {
+  bootstrap
+} from 'angular2/platform/browser';
+
+import {
+  defaultApolloClient,
+  APOLLO_PROVIDERS
+} from 'angular2-apollo';
+
+import ApolloClient, {
+  createNetworkInterface
+} from 'apollo-client';
+
+import {
+  MyAppClass
+} from './app/<my-app-class>';
+
+const client = new ApolloClient({
+  networkInterface: createNetworkInterface('http://localhost:8080')
+});
+
+bootstrap(<MyAppClass>, [
+  APOLLO_PROVIDERS,
+  defaultApolloClient(client)
+  ]);
+```
+
+<h2 id="inject-angular2apollo">Inject Angular2Apollo</h2>
+
+```ts
+import {
+  Component,
+  Injectable
+} from 'angular2/core';
+
+import {
+  Angular2Apollo
+} from 'angular2-apollo';
+
+@Component({
+  selector: 'postsList',
+  templateUrl: 'client/postsList.html'
+})
+@Injectable()
+class postsList {
+  constructor(private angularApollo : Angular2Apollo) {
+  }
+}
+```
+
+<h2 id="bind-to-query">Bind to query</h2>
+
+```ts
+import {
+  Component, Injectable
+} from 'angular2/core';
+import {
+  Angular2Apollo
+} from 'angular2-apollo';
+import {
+  Observable
+} from 'rxjs/Observable';
+
+@Component({
+  selector: 'postsList',
+  templateUrl: 'client/postsList.html'
+})
+@Injectable()
+class postsList {
+  posts: Observable<any[]>;
+
+  constructor(private angularApollo : Angular2Apollo) {
+    this.posts = angularApollo.watchQuery({
+      query: `
+        query getPosts($tag: String) {
+          posts(tag: $tag) {
+            title
+          }
+        }
+      `,
+      variables: {
+        tag: "1234"
+      }
+    });
+  }
+}
+```
+
+<h2 id="apolloquerypipe">ApolloQueryPipe</h2>
+
+Apollo client exposes queries as observables, but each Apollo query can include few queries.
+
+So inside an Apollo observable the data comes in the following form: `obs.data.queryName`
+
+To handle that more easily we've created the `ApolloQueryPipe`. here is how it works:
+
+template:
+```html
+<ul>
+  <li *ngFor="#post of posts | async | apolloQuery:'posts'">
+      {{ post.title }}
+  </li>
+</ul>
+```
+
+We are pondering about a solution that will return an observable per single query and then we won't need that pipe anymore.
+
+<h2 id="mutations">Mutations</h2>
+
+```ts
+import {
+  Component, Injectable
+} from 'angular2/core';
+
+import {
+  Angular2Apollo
+} from 'angular2-apollo';
+
+import {
+  graphQLResult
+} from 'graphql';
+
+@Component({
+  selector: 'postsList',
+  templateUrl: 'client/postsList.html'
+})
+@Injectable()
+class postsList {
+  constructor(private angularApollo : Angular2Apollo) {
+
+  }
+
+  postReply({
+    token,
+    topicId,
+    categoryId,
+    raw
+  }) {
+    angularApollo.mutate({
+      mutation: `
+        mutation postReply(
+          $token: String!
+          $topic_id: ID!
+          $category_id: ID!
+          $raw: String!
+        ) {
+          createPost(
+            token: $token
+            topic_id: $topic_id
+            category: $category_id
+            raw: $raw
+          ) {
+            id
+            cooked
+          }
+        }
+      `,
+      variables: {
+        token: token,
+        topic_id: topicId,
+        category_id: categoryId,
+        raw: raw,
+      }
+    }).then((graphQLResult) => {
+      const { errors, data } = graphQLResult;
+
+      if (data) {
+        console.log('got data', data);
+      }
+
+      if (errors) {
+        console.log('got some GraphQL execution errors', errors);
+      }
+    }).catch((error) => {
+      console.log('there was an error sending the query', error);
+    });
+  }
+}
+```
+
+<h2 id="development">Development</h2>
+
+Running tests locally:
+
+```
+# nvm use node
+npm install
+npm test
+```
+
+This project uses TypeScript for static typing and TSLint for linting. You can get both of these built into your editor with no configuration by opening this project in [Visual Studio Code](https://code.visualstudio.com/), an open source IDE which is available for free on all platforms.