Implemented "resolve" for books.

Author: tarlepp

app/bootstrap.ts

@@ -13,11 +13,11 @@ import {AppCmp} from './components/app/app';
 // Bootstrap application
 bootstrap(AppCmp, [
   ROUTER_PROVIDERS, HTTP_PROVIDERS,
+  AuthHttp,
   provide(LocationStrategy, { useClass: HashLocationStrategy }),
   provide(AuthConfig, {
     useFactory: () => {
       return new AuthConfig();
     }
-  }),
-  AuthHttp
+  })
 ]);

app/components/examples/book/book.ts

@@ -1,9 +1,12 @@
 // Angular2 specified stuff
-import {Component} from 'angular2/core';
-import {Headers} from 'angular2/http';
+import {Component, Injector, provide} from 'angular2/core';
+import {HTTP_PROVIDERS} from 'angular2/http';
+import {ComponentInstruction, CanActivate, OnActivate} from 'angular2/router';
 
 // 3rd party libraries
-import {AuthHttp} from 'angular2-jwt/angular2-jwt';
+import {AuthHttp, AuthConfig} from 'angular2-jwt/angular2-jwt';
+
+import {BookService} from './service';
 
 // Component setup
 @Component({
@@ -12,24 +15,32 @@ import {AuthHttp} from 'angular2-jwt/angular2-jwt';
   providers: [AuthHttp]
 })
 
-// Actual component class
-export class BookCmp {
-  books: any[];
+@CanActivate((next) => {
+  var injector = Injector.resolveAndCreate([
+    HTTP_PROVIDERS, BookService, AuthHttp,
+    provide(AuthConfig, {
+      useFactory: () => {
+        return new AuthConfig();
+      }
+    })
+  ]);
 
-  private apiUrl = '<%= BACKEND_URL %>';
+  var bookService = injector.get(BookService);
 
-  constructor(
-    private _authHttp: AuthHttp
-  ) {
-    let headers = new Headers();
+  return bookService.getBooks().then(
+    data => {
+      next.params.books = data;
 
-    headers.append('Content-Type', 'application/json');
+      return true;
+    }
+  );
+})
+
+// Actual component class
+export class BookCmp implements OnActivate {
+  books: any[];
 
-    this._authHttp.get(this.apiUrl + '/book?populate=author', {headers: headers})
-      .subscribe(
-        data => this.books = data.json(),
-        err => console.log(err),
-        () => console.log('Request Complete')
-      );
+  routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
+    this.books = nextInstruction.params.books;
   }
 }

app/components/examples/book/service.ts

@@ -0,0 +1,32 @@
+// Angular2 specified stuff
+import {Headers} from 'angular2/http';
+import {Injectable} from 'angular2/core';
+
+// 3rd party libraries
+import {AuthHttp} from 'angular2-jwt/angular2-jwt';
+
+@Injectable()
+export class BookService {
+  private apiUrl = '<%= BACKEND_URL %>';
+
+  constructor(private _authHttp: AuthHttp) {}
+
+  /**
+   *
+   * @returns {Promise|Promise<T>}
+   */
+  getBooks() {
+    return new Promise((resolve, reject) => {
+      let headers = new Headers();
+
+      headers.append('Content-Type', 'application/json');
+
+      this._authHttp.get(this.apiUrl + '/book?populate=author', {headers: headers})
+        .subscribe(
+          data => resolve(data.json()),
+          err => reject(err),
+          () => console.log('Request Complete')
+        );
+    });
+  }
+}

tools/config.ts

@@ -7,12 +7,12 @@ import {normalize, join} from 'path';
 export const PROJECT_ROOT         = normalize(join(__dirname, '..'));
 export const ENV                  = argv['env']         || 'dev';
 export const DEBUG                = argv['debug']       || false;
-export const PORT                 = argv['port']        || 5555;
-export const LIVE_RELOAD_PORT     = argv['reload-port'] || 4002;
+export const PORT                 = argv['port']        || 3000;
+export const LIVE_RELOAD_PORT     = argv['reload-port'] || 3001;
 export const DOCS_PORT            = argv['docs-port']   || 4003;
 export const APP_BASE             = argv['base']        || '/';
 
-export const BACKEND_URL          = argv['backend-url'] || 'http://10.1.1.177:1339';
+export const BACKEND_URL          = argv['backend-url'] || 'http://wunder.sytes.net:1339';
 
 export const ENABLE_HOT_LOADING   = !!argv['hot-loader'];
 export const HOT_LOADER_PORT      = 5578;