chore(Typings): refactored typings to follow a similar pattern suggested by @gdi2290 here: auth0-blog#27 ... Fixed Http api to match latest change in alpha.31

closes auth0-blog#27

Author: Nathan Walker

src/app/LoggedInOutlet.ts

@@ -1,6 +1,6 @@
-import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
+/// <reference path="../typings/custom.d.ts" />
+import {Directive, Attribute, ElementRef, DynamicComponentLoader, Injector} from 'angular2/angular2';
 import {Router, RouterOutlet} from 'angular2/router';
-import {Injector} from 'angular2/di';
 import {Login} from '../login/login';
 
 @Directive({
@@ -19,11 +19,11 @@ export class LoggedInRouterOutlet extends RouterOutlet {
 
   }
 
-  activate(instruction) {
+  commit(instruction) {
     var url = this._parentRouter.lastNavigationAttempt;
     if (!this.publicRoutes[url] && !localStorage.getItem('jwt')) {
       instruction.component = Login;
     }
-    return super.activate(instruction);
+    return super.commit(instruction);
   }
 }

src/common/BrowserDomAdapter.ts

@@ -1,3 +1,3 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
 BrowserDomAdapter.makeCurrent();

src/common/jitInjectables.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 import {ChangeDetection, JitChangeDetection} from 'angular2/change_detection';
 import {bind} from 'angular2/di';
 

src/home/home.ts

@@ -1,9 +1,7 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
-import {Component, View} from 'angular2/angular2';
-import {coreDirectives} from 'angular2/directives';
+import {Component, View, coreDirectives, Http, Headers} from 'angular2/angular2';
 import {status, text} from '../utils/fetch';
-import {Http} from 'angular2/http';
 import { Router} from 'angular2/router';
 
 let styles   = require('./home.css');
@@ -44,13 +42,11 @@ export class Home {
   _callApi(type, url) {
     this.response = null;
     this.api = type;
-    this.http.get(url, {
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-        'Authorization': 'bearer ' + this.jwt
-      }
-    })
+    var headers = new Headers();
+    headers.append('Accept', 'application/json');
+    headers.append('Content-Type', 'application/json');
+    headers.append('Authorization', 'bearer ' + this.jwt);
+    this.http.get(url, {headers: headers})
     .toRx()
     .map(status)
     .map(text)

src/index.ts

@@ -1,10 +1,7 @@
-/// <reference path="../typings/tsd.d.ts" />
+/// <reference path="typings/custom.d.ts" />
 
-import { bootstrap } from 'angular2/angular2';
-import { bind } from 'angular2/di';
+import { bootstrap, bind, formInjectables, httpInjectables } from 'angular2/angular2';
 import { routerInjectables } from 'angular2/router';
-import { formInjectables } from 'angular2/forms';
-import { httpInjectables } from 'angular2/http';
 
 import { App } from './app/app';
 

src/login/login.ts

@@ -1,8 +1,7 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
-import {Component, View} from 'angular2/angular2';
+import {Component, View, Http, Headers} from 'angular2/angular2';
 import {status, json} from '../utils/fetch';
-import {Http} from 'angular2/http';
 import { Router, RouterLink } from 'angular2/router';
 
 
@@ -24,15 +23,17 @@ export class Login {
 
   login(event, username, password) {
     event.preventDefault();
-    this.http.post('http://localhost:3001/sessions/create', {
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
+    var headers = new Headers();
+    headers.append('Accept', 'application/json');
+    headers.append('Content-Type', 'application/json');
+    this.http.post('http://localhost:3001/sessions/create',
+      JSON.stringify({
         username, password
-      })
-    })
+      }),
+      { 
+        headers: headers
+      }
+    )
     .toRx()
     .map(status)
     .map(json)

src/signup/signup.ts

@@ -1,9 +1,7 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
-import {coreDirectives} from 'angular2/directives';
-import {Component, View} from 'angular2/angular2';
+import {Component, View, coreDirectives, Http, Headers} from 'angular2/angular2';
 import {status, json} from '../utils/fetch';
-import {Http} from 'angular2/http';
 import { Router, RouterLink } from 'angular2/router';
 
 let styles   = require('./signup.css');
@@ -23,15 +21,17 @@ export class Signup {
 
   signup(event, username, password) {
     event.preventDefault();
-    this.http.post('http://localhost:3001/users', {
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
+    var headers = new Headers();
+    headers.append('Accept', 'application/json');
+    headers.append('Content-Type', 'application/json');
+    this.http.post('http://localhost:3001/users',
+      JSON.stringify({
         username, password
-      })
-    })
+      }),
+      {
+        headers: headers
+      }
+    )
     .toRx()
     .map(status)
     .map(json)

src/typings/browser.d.ts

@@ -0,0 +1,95 @@
+interface ObjectConstructor {
+    assign(target: any, ...sources: any[]): any;
+    observe(target: any, callback: Function, acceptList?: Array<any>): void;
+}
+
+declare module "angular2/src/dom/browser_adapter" {
+  class BrowserDomAdapter {
+    static makeCurrent(): void;
+    logError(error: any): void;
+    attrToPropMap: any;
+    query(selector: string): any;
+    querySelector(el: any, selector: string): Node;
+    querySelectorAll(el: any, selector: string): List<any>;
+    on(el: any, evt: any, listener: any): void;
+    onAndCancel(el: any, evt: any, listener: any): Function;
+    dispatchEvent(el: any, evt: any): void;
+    createMouseEvent(eventType: string): MouseEvent;
+    createEvent(eventType: any): Event;
+    getInnerHTML(el: any): any;
+    getOuterHTML(el: any): any;
+    nodeName(node: Node): string;
+    nodeValue(node: Node): string;
+    type(node: HTMLInputElement): string;
+    content(node: Node): Node;
+    firstChild(el: any): Node;
+    nextSibling(el: any): Node;
+    parentElement(el: any): any;
+    childNodes(el: any): List<Node>;
+    childNodesAsList(el: any): List<any>;
+    clearNodes(el: any): void;
+    appendChild(el: any, node: any): void;
+    removeChild(el: any, node: any): void;
+    replaceChild(el: Node, newChild: any, oldChild: any): void;
+    remove(el: any): any;
+    insertBefore(el: any, node: any): void;
+    insertAllBefore(el: any, nodes: any): void;
+    insertAfter(el: any, node: any): void;
+    setInnerHTML(el: any, value: any): void;
+    getText(el: any): any;
+    setText(el: any, value: string): void;
+    getValue(el: any): any;
+    setValue(el: any, value: string): void;
+    getChecked(el: any): any;
+    setChecked(el: any, value: boolean): void;
+    createTemplate(html: any): HTMLElement;
+    createElement(tagName: any, doc?: Document): HTMLElement;
+    createTextNode(text: string, doc?: Document): Text;
+    createScriptTag(attrName: string, attrValue: string, doc?: Document): HTMLScriptElement;
+    createStyleElement(css: string, doc?: Document): HTMLStyleElement;
+    createShadowRoot(el: HTMLElement): DocumentFragment;
+    getShadowRoot(el: HTMLElement): DocumentFragment;
+    getHost(el: HTMLElement): HTMLElement;
+    clone(node: Node): Node;
+    hasProperty(element: any, name: string): boolean;
+    getElementsByClassName(element: any, name: string): any;
+    getElementsByTagName(element: any, name: string): any;
+    classList(element: any): List<any>;
+    addClass(element: any, classname: string): void;
+    removeClass(element: any, classname: string): void;
+    hasClass(element: any, classname: string): any;
+    setStyle(element: any, stylename: string, stylevalue: string): void;
+    removeStyle(element: any, stylename: string): void;
+    getStyle(element: any, stylename: string): any;
+    tagName(element: any): string;
+    attributeMap(element: any): any;
+    hasAttribute(element: any, attribute: string): any;
+    getAttribute(element: any, attribute: string): any;
+    setAttribute(element: any, name: string, value: string): void;
+    removeAttribute(element: any, attribute: string): any;
+    templateAwareRoot(el: any): any;
+    createHtmlDocument(): Document;
+    defaultDoc(): Document;
+    getBoundingClientRect(el: any): any;
+    getTitle(): string;
+    setTitle(newTitle: string): void;
+    elementMatches(n: any, selector: string): boolean;
+    isTemplateElement(el: any): boolean;
+    isTextNode(node: Node): boolean;
+    isCommentNode(node: Node): boolean;
+    isElementNode(node: Node): boolean;
+    hasShadowRoot(node: any): boolean;
+    isShadowRoot(node: any): boolean;
+    importIntoDoc(node: Node): Node;
+    isPageRule(rule: any): boolean;
+    isStyleRule(rule: any): boolean;
+    isMediaRule(rule: any): boolean;
+    isKeyframesRule(rule: any): boolean;
+    getHref(el: Element): string;
+    getEventKey(event: any): string;
+    getGlobalEventTarget(target: string): EventTarget;
+    getHistory(): History;
+    getLocation(): Location;
+    getBaseHref(): any;
+  }
+}

typings/_custom/custom.d.ts src/typings/custom.d.ts

@@ -1,4 +1,11 @@
+/*
+ * Our custom types
+ */
 /// <reference path="browser.d.ts" />
-/// <reference path="ng2.d.ts" />
 /// <reference path="webpack.d.ts" />
 /// <reference path="jwt_decode.d.ts" />
+
+/*
+ * tsd generated types
+ */
+/// <reference path="../../typings/tsd.d.ts" />

typings/_custom/jwt_decode.d.ts src/typings/jwt_decode.d.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../typings/custom.d.ts" />
 
 export function status(response) {
   if (response.status >= 200 && response.status < 300) {

typings/_custom/webpack.d.ts src/typings/webpack.d.ts

@@ -6,7 +6,10 @@
   "bundle": "typings/tsd.d.ts",
   "installed": {
     "angular2/angular2.d.ts": {
-      "commit": "2a5858c16563634453533009242b8e0b18521370"
+      "commit": "212793c4be051977f73675fa9bb125d891df037a"
+    },
+    "angular2/router.d.ts": {
+      "commit": "212793c4be051977f73675fa9bb125d891df037a"
     },
     "rx/rx.d.ts": {
       "commit": "8c7444882a2bc2ab87387f8f736a7d97e89b9c90"