Add ApolloModule

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### vNEXT
 
+- Added `ApolloModule` (with RC5 of Angular2 comes NgModules) ([PR #63](https://github.com/apollostack/angular2-apollo/pull/63))
+
 ### v0.4.2
 
 - Added `fetchMore` support ([PR #58](https://github.com/apollostack/angular2-apollo/pull/58))

examples/hello-world/.meteor/.finished-upgraders

@@ -11,3 +11,4 @@ notices-for-facebook-graph-api-2
 1.2.0-cordova-changes
 1.2.0-breaking-changes
 1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link

examples/hello-world/.meteor/packages

@@ -4,18 +4,18 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base             # Packages every Meteor app needs to have
-mobile-experience       # Packages for a great mobile UX
-mongo                   # The database Meteor supports right now
-reactive-var            # Reactive variable for tracker
-jquery                  # Helpful client-side library
-tracker                 # Meteor's client-side reactive programming library
+meteor-base@1.0.4             # Packages every Meteor app needs to have
+mobile-experience@1.0.4       # Packages for a great mobile UX
+mongo@1.1.10                   # The database Meteor supports right now
+reactive-var@1.0.10            # Reactive variable for tracker
+jquery@1.11.9                  # Helpful client-side library
+tracker@1.1.0                 # Meteor's client-side reactive programming library
 
-standard-minifier-css   # CSS minifier run for production mode
-standard-minifier-js    # JS minifier run for production mode
-es5-shim                # ECMAScript 5 compatibility for older browsers.
-ecmascript              # Enable ECMAScript2015+ syntax in app code
+standard-minifier-css@1.1.8   # CSS minifier run for production mode
+standard-minifier-js@1.1.8    # JS minifier run for production mode
+es5-shim@4.6.13                # ECMAScript 5 compatibility for older browsers.
+ecmascript@0.5.7              # Enable ECMAScript2015+ syntax in app code
 
-autopublish             # Publish all data to the clients (for prototyping)
-insecure                # Allow all DB writes from clients (for prototyping)
+autopublish@1.0.7             # Publish all data to the clients (for prototyping)
+insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
 angular2-compilers

examples/hello-world/.meteor/release

@@ -1 +1 @@
-METEOR@1.3.4.4
+METEOR@1.4.0.1

examples/hello-world/.meteor/versions

@@ -1,13 +1,13 @@
 allow-deny@1.0.5
-angular2-compilers@0.6.0
+angular2-compilers@0.6.1
 autopublish@1.0.7
 autoupdate@1.2.11
-babel-compiler@6.8.4
-babel-runtime@0.1.9_1
+babel-compiler@6.9.0
+babel-runtime@0.1.10
 barbatus:css-compiler@0.3.0
 barbatus:scss-compiler@3.8.1_1
-barbatus:typescript@0.3.3
-barbatus:typescript-compiler@0.6.1
+barbatus:typescript@0.4.1
+barbatus:typescript-compiler@0.7.1_1
 barbatus:typescript-runtime@0.1.2
 base64@1.0.9
 binary-heap@1.0.9
@@ -20,13 +20,13 @@ check@1.2.3
 ddp@1.2.5
 ddp-client@1.2.9
 ddp-common@1.2.6
-ddp-server@1.2.9
+ddp-server@1.2.10
 deps@1.0.12
 diff-sequence@1.0.6
-ecmascript@0.4.7
-ecmascript-runtime@0.2.12
+ecmascript@0.5.7
+ecmascript-runtime@0.3.13
 ejson@1.0.12
-es5-shim@4.5.13
+es5-shim@4.6.13
 fastclick@1.0.12
 geojson-utils@1.0.9
 hot-code-push@1.0.4
@@ -38,35 +38,35 @@ insecure@1.0.7
 jquery@1.11.9
 launch-screen@1.0.12
 livedata@1.0.18
-logging@1.0.14
-meteor@1.1.16
+logging@1.1.14
+meteor@1.2.16
 meteor-base@1.0.4
-minifier-css@1.1.13
-minifier-js@1.1.13
+minifier-css@1.2.13
+minifier-js@1.2.13
 minimongo@1.0.17
 mobile-experience@1.0.4
 mobile-status-bar@1.0.12
-modules@0.6.5
-modules-runtime@0.6.5
-mongo@1.1.9_1
+modules@0.7.5
+modules-runtime@0.7.5
+mongo@1.1.10
 mongo-id@1.0.5
-npm-mongo@1.4.45
+npm-mongo@1.5.45
 observe-sequence@1.0.12
 ordered-dict@1.0.8
-promise@0.7.3
+promise@0.8.3
 random@1.0.10
 reactive-var@1.0.10
 reload@1.1.10
 retry@1.0.8
 routepolicy@1.0.11
 spacebars@1.0.12
 spacebars-compiler@1.0.12
-standard-minifier-css@1.0.8
-standard-minifier-js@1.0.8
-tracker@1.0.14
+standard-minifier-css@1.1.8
+standard-minifier-js@1.1.8
+tracker@1.1.0
 ui@1.0.11
 underscore@1.0.9
-urigo:static-html-compiler@0.1.4
+urigo:static-html-compiler@0.1.8
 url@1.0.10
-webapp@1.2.10
+webapp@1.3.10
 webapp-hashing@1.0.9

examples/hello-world/client/main.html → examples/hello-world/client/imports/app.component.html

@@ -9,10 +9,8 @@ <h2>List</h2>
 
 <input type="search" placeholder="Type name..." [(ngModel)]="nameFilter" />
 
-<div *ngIf="data.loading">loading ...</div>
-
-<ul *ngIf="!data.loading">
-  <li *ngFor="let user of data.users">
-    {{ user.firstName }} {{ user.lastName }}
+<ul>
+  <li *ngFor="let user of data | async | apolloQuery: 'users'">
+    {{user.firstName}} {{user.lastName}}
   </li>
 </ul>

examples/hello-world/client/imports/app.component.ts

@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+import { Angular2Apollo, ApolloQueryPipe, ApolloQueryObservable } from 'angular2-apollo';
+import { ApolloQueryResult } from 'apollo-client';
+
+import { User } from './user.interface';
+
+import gql from 'graphql-tag';
+
+import template from './app.component.html';
+
+interface Data {
+  users: User[];
+}
+
+@Component({
+  selector: 'app',
+  template,
+  pipes: [ApolloQueryPipe],
+})
+export class AppComponent implements OnInit {
+  data: ApolloQueryObservable<Data>;
+  firstName: string;
+  lastName: string;
+  nameFilter: string;
+
+  constructor(private angular2Apollo: Angular2Apollo) {}
+
+  ngOnInit() {
+    this.data = this.angular2Apollo.watchQuery({
+      query: gql`
+        query getUsers($name: String) {
+          users(name: $name) {
+            firstName
+            lastName
+            emails {
+              address
+              verified
+            }
+          }
+        }
+      `,
+      variables: {
+        name: this.nameFilter,
+      },
+    });
+  }
+
+  newUser(firstName: string) {
+    this.angular2Apollo.mutate({
+      mutation: gql`
+        mutation addUser(
+          $firstName: String!
+          $lastName: String!
+        ) {
+          addUser(
+            firstName: $firstName
+            lastName: $lastName
+          ) {
+            firstName
+            lastName,
+            emails {
+              address
+              verified
+            }
+          }
+        }
+      `,
+      variables: {
+        firstName,
+        lastName: this.lastName,
+      },
+    })
+      .then(({ data }: ApolloQueryResult) => {
+        console.log('got data', data);
+
+        // get new data
+        this.data.refetch();
+      })
+      .catch((errors: any) => {
+        console.log('there was an error sending the query', errors);
+      });
+  }
+}

examples/hello-world/client/imports/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule  } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { ApolloModule } from 'angular2-apollo';
+
+import { AppComponent } from './app.component';
+import { client } from './client';
+
+@NgModule({
+  declarations: [ AppComponent ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ApolloModule.withClient(client),
+  ],
+  bootstrap: [ AppComponent ],
+})
+export class AppModule {}

examples/hello-world/client/imports/client.ts

@@ -0,0 +1,7 @@
+import { createNetworkInterface } from 'apollo-client';
+
+import ApolloClient from 'apollo-client';
+
+export const client = new ApolloClient({
+  networkInterface: createNetworkInterface('/graphql'),
+});

examples/hello-world/client/imports/email.interface.ts

@@ -0,0 +1,4 @@
+export interface Email {
+  address: string;
+  verified: boolean;
+};

examples/hello-world/client/imports/user.interface.ts

@@ -0,0 +1,7 @@
+import { Email } from './email.interface';
+
+export interface User {
+  firstName: string;
+  lastName: string;
+  emails: Email[];
+}

examples/hello-world/client/index.html

@@ -1,3 +1,6 @@
+<head>
+  <title>Hello World</title>
+</head>
 <body>
   <app></app>
-</body>
+</body>

examples/hello-world/client/index.ts

@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+import 'rxjs';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/long-stack-trace-zone';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './imports/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);