Day 2 training code

In-memory service
calling restful service
Routing Intro
Angular CLI Basics

@@ -37,6 +37,10 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
+# .map and .js files
+**/*.map 
+**/app/**/*.js
+
 # System Files
 .DS_Store
 Thumbs.db

@@ -41,4 +41,7 @@
 </div>-->
 
 <!--Multiple Components-->
-<hero-detail [hero]="selectedHero"></hero-detail>
+<!--<hero-detail [hero]="selectedHero"></hero-detail>-->
+
+<router-outlet></router-outlet>
+<!--Routed view go here-->
\ No newline at end of file

-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var core_1 = require("@angular/core");
-var hero_service_1 = require("./services/hero.service");
-var AppComponent = (function () {
-    //   constructor(private heroService: HeroService){
-    //     //  this.heroes=heroService.getHeroes();
-    //     // Async services and Promises 
-    //     this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
-    //   }
-    // //ngOnInit
-    function AppComponent(heroService) {
-        this.heroService = heroService;
-        this.name = 'Angular1';
-        this.hero = { id: 1, name: 'Anderson' };
-    }
-    AppComponent.prototype.ngOnInit = function () {
-        this.getHeroes();
-    };
-    AppComponent.prototype.getHeroes = function () {
-        // this.heroService.getHeroes().then(heroes => this.heroes = heroes);
-        var _this = this;
-        //Simulate server latency
-        // this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
-        this.heroService.getHeroes().then(function (heroes) { return _this.heroes = heroes; });
-    };
-    AppComponent.prototype.onSelect = function (hero) {
-        this.selectedHero = hero;
-        // alert(this.selectedHero.name);
-    };
-    return AppComponent;
-}());
-AppComponent = __decorate([
-    core_1.Component({
-        selector: 'my-app',
-        // template: `<h1>Hello1 {{name}}</h1>`,
-        templateUrl: 'app/app.component.html',
-        styleUrls: ['app/app.component.css'],
-        providers: [hero_service_1.HeroService]
-    }),
-    __metadata("design:paramtypes", [hero_service_1.HeroService])
-], AppComponent);
-exports.AppComponent = AppComponent;
-//# sourceMappingURL=app.component.js.map
\ No newline at end of file

-{"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAAiD;AAEjD,wDAAmD;AAYnD,IAAa,YAAY;IAazB,mDAAmD;IACnD,+CAA+C;IAE/C,sCAAsC;IACtC,+EAA+E;IAC/E,MAAM;IAEN,aAAa;IACX,sBAAoB,WAAwB;QAAxB,gBAAW,GAAX,WAAW,CAAa;QApB5C,SAAI,GAAG,UAAU,CAAC;QAClB,SAAI,GAAQ,EAAC,EAAE,EAAC,CAAC,EAAE,IAAI,EAAC,UAAU,EAAC,CAAC;IAoBpC,CAAC;IAED,+BAAQ,GAAR;QACG,IAAI,CAAC,SAAS,EAAE,CAAC;IACpB,CAAC;IACF,gCAAS,GAAT;QACG,qEAAqE;QADxE,iBAOE;QAJC,yBAAyB;QACzB,2EAA2E;QAE3E,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,UAAA,MAAM,IAAI,OAAA,KAAI,CAAC,MAAM,GAAG,MAAM,EAApB,CAAoB,CAAC,CAAC;IACpE,CAAC;IAGD,+BAAQ,GAAR,UAAS,IAAU;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,iCAAiC;IACnC,CAAC;IACH,mBAAC;AAAD,CAAC,AAzCD,IAyCC;AAzCY,YAAY;IARxB,gBAAS,CAAC;QACT,QAAQ,EAAE,QAAQ;QAClB,wCAAwC;QACxC,WAAW,EAAE,wBAAwB;QAErC,SAAS,EAAC,CAAC,uBAAuB,CAAC;QAClC,SAAS,EAAE,CAAC,0BAAW,CAAC;KAC1B,CAAC;qCAsBiC,0BAAW;GArBjC,YAAY,CAyCxB;AAzCY,oCAAY"}
\ No newline at end of file

 import { Component,OnInit } from '@angular/core';
 import {Hero} from './models/hero'
 import {HeroService} from './services/hero.service'
+import {TokenService} from './services/token.service'
+
 import { HttpModule } from '@angular/http';
 
 
@@ -10,7 +12,7 @@ import { HttpModule } from '@angular/http';
   templateUrl: 'app/app.component.html',
 
   styleUrls:['app/app.component.css'],
-   providers: [HeroService]
+   providers: [HeroService,TokenService]
 })
 export class AppComponent  { 
   name = 'Angular1'; 
@@ -33,7 +35,7 @@ export class AppComponent  {
 //   }
 
 // //ngOnInit
-  constructor(private heroService: HeroService) {
+  constructor(private heroService: HeroService, private tokenService: TokenService) {
   }
   
   ngOnInit(): void {
@@ -46,6 +48,8 @@ export class AppComponent  {
     // this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
 
     this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+    //token service call
+    //  this.tokenService.token().then(t=> alert('Auth pass'));
   }
  // Event Handling
   selectedHero: Hero;

-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var core_1 = require("@angular/core");
-var platform_browser_1 = require("@angular/platform-browser");
-var forms_1 = require("@angular/forms");
-//Http Service
-var http_1 = require("@angular/http");
-var app_component_1 = require("./app.component");
-var hero_detail_component_1 = require("./hero-detail/hero-detail.component");
-// Imports for loading & configuring the in-memory web api
-var angular_in_memory_web_api_1 = require("angular-in-memory-web-api");
-var in_memory_data_service_1 = require("./services/mocks/in-memory-data.service");
-var AppModule = (function () {
-    function AppModule() {
-    }
-    return AppModule;
-}());
-AppModule = __decorate([
-    core_1.NgModule({
-        imports: [platform_browser_1.BrowserModule,
-            //Http Service
-            http_1.HttpModule,
-            forms_1.FormsModule,
-            angular_in_memory_web_api_1.InMemoryWebApiModule.forRoot(in_memory_data_service_1.InMemoryDataService)],
-        declarations: [app_component_1.AppComponent,
-            hero_detail_component_1.HeroDetailComponent],
-        bootstrap: [app_component_1.AppComponent]
-    })
-], AppModule);
-exports.AppModule = AppModule;
-//# sourceMappingURL=app.module.js.map
\ No newline at end of file

-{"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;AAAA,sCAA8C;AAC9C,8DAA0D;AAC1D,wCAA6C;AAE7C,cAAc;AACd,sCAA8C;AAE9C,iDAAgD;AAChD,6EAA2E;AAE3E,0DAA0D;AAC1D,uEAAiE;AACjE,kFAA+E;AAa/E,IAAa,SAAS;IAAtB;IAAyB,CAAC;IAAD,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,SAAS;IAXrB,eAAQ,CAAC;QACR,OAAO,EAAO,CAAE,gCAAa;YAC7B,cAAc;YACd,iBAAU;YACV,mBAAW;YACX,gDAAoB,CAAC,OAAO,CAAC,4CAAmB,CAAC,CAAC;QAClD,YAAY,EAAE,CAAE,4BAAY;YACtB,2CAAmB,CAAE;QAC3B,SAAS,EAAK,CAAE,4BAAY,CAAE;KAE/B,CAAC;GACW,SAAS,CAAI;AAAb,8BAAS"}
\ No newline at end of file

@@ -12,12 +12,23 @@ import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService }  from './services/mocks/in-memory-data.service';
 
+//Routing
+import { RouterModule }   from '@angular/router';
+
 @NgModule({
   imports:      [ BrowserModule ,
   //Http Service
   HttpModule,
   FormsModule,
-  InMemoryWebApiModule.forRoot(InMemoryDataService)],
+  RouterModule.forRoot([
+                      { path: 'home', component: AppComponent},
+                      // { path: 'detail', component: HeroDetailComponent} ,
+                      { path: 'detail/:id', component: HeroDetailComponent} //Parameterized route
+                    ]),
+   InMemoryWebApiModule.forRoot(
+                    InMemoryDataService
+                    ,{ passThruUnknownUrl: true} //this will use the normal XHRBackend if the collection in the mock data can't be found
+                  )],
   declarations: [ AppComponent,
         HeroDetailComponent ],
   bootstrap:    [ AppComponent ]

+Details view
 <div  *ngIf="hero">
   <label>name: </label>
   <input [(ngModel)]="hero.name" placeholder="name">

-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var core_1 = require("@angular/core");
-var hero_1 = require("../models/hero");
-var HeroDetailComponent = (function () {
-    function HeroDetailComponent() {
-    }
-    return HeroDetailComponent;
-}());
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", hero_1.Hero)
-], HeroDetailComponent.prototype, "hero", void 0);
-HeroDetailComponent = __decorate([
-    core_1.Component({
-        selector: 'hero-detail',
-        //   template: `
-        //     <div *ngIf="hero">
-        //       <h2>{{hero.name}} details!</h2>
-        //       <div><label>id: </label>{{hero.id}}</div>
-        //       <div>
-        //         <label>name: </label>
-        //         <input [(ngModel)]="hero.name" placeholder="name"/>
-        //       </div>
-        //     </div>
-        //   `,
-        templateUrl: './hero-detail.component.html',
-        styleUrls: ['./hero-detail.component.css']
-    })
-], HeroDetailComponent);
-exports.HeroDetailComponent = HeroDetailComponent;
-//# sourceMappingURL=hero-detail.component.js.map
\ No newline at end of file

-{"version":3,"file":"hero-detail.component.js","sourceRoot":"","sources":["hero-detail.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAAgD;AAChD,uCAAqC;AAkBrC,IAAa,mBAAmB;IAAhC;IAEC,CAAC;IAAD,0BAAC;AAAD,CAAC,AAFF,IAEE;AADS;IAAR,YAAK,EAAE;8BAAO,WAAI;iDAAC;AADT,mBAAmB;IAhB/B,gBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACzB,gBAAgB;QAChB,yBAAyB;QACzB,wCAAwC;QACxC,kDAAkD;QAClD,cAAc;QACd,gCAAgC;QAChC,8DAA8D;QAC9D,eAAe;QACf,aAAa;QACb,OAAO;QACJ,WAAW,EAAC,8BAA8B;QAE3C,SAAS,EAAC,CAAC,6BAA6B,CAAC;KAC1C,CAAC;GACW,mBAAmB,CAE9B;AAFW,kDAAmB"}
\ No newline at end of file

 import { Component,Input  } from '@angular/core';
 import {Hero } from '../models/hero';
 
+import { Location } from '@angular/common';
+import { ActivatedRoute, Params }   from '@angular/router';
+
+//ngOnInit
+import { OnInit } from '@angular/core';
+
+import 'rxjs/add/operator/switchMap';
+
+import { HeroService } from '../services/hero.service';
+
 @Component({
   selector: 'hero-detail',
-//   template: `
-//     <div *ngIf="hero">
-//       <h2>{{hero.name}} details!</h2>
-//       <div><label>id: </label>{{hero.id}}</div>
-//       <div>
-//         <label>name: </label>
-//         <input [(ngModel)]="hero.name" placeholder="name"/>
-//       </div>
-//     </div>
-//   `,
+  // template: `
+  //   <div *ngIf="hero">
+  //     <h2>{{hero.name}} details!</h2>
+  //     <div><label>id: </label>{{hero.id}}</div>
+  //     <div>
+  //       <label>name: </label>
+  //       <input [(ngModel)]="hero.name" placeholder="name"/>
+  //     </div>
+  //   </div>
+  // `
    templateUrl:'./hero-detail.component.html',
   
   styleUrls:['./hero-detail.component.css']
 })
-export class HeroDetailComponent  {
+export class HeroDetailComponent implements OnInit {
   @Input() hero: Hero;
+  
+    constructor(
+      private route: ActivatedRoute,
+      private location: Location,
+      private heroService: HeroService
+    ) {}
+
+ngOnInit(): void {
+  this.route.params
+    .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+    .subscribe(hero => this.hero = hero);
+}
+  goBack(): void {
+  this.location.back();
+}
  }

-//# sourceMappingURL=hero-detail.component.js.map
\ No newline at end of file

-{"version":3,"file":"hero-detail.component.js","sourceRoot":"","sources":["hero-detail.component.ts"],"names":[],"mappings":""}
\ No newline at end of file

-"use strict";
-var Hero = (function () {
-    function Hero() {
-    }
-    return Hero;
-}());
-exports.Hero = Hero;
-//# sourceMappingURL=hero.js.map
\ No newline at end of file

-{"version":3,"file":"hero.js","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":";AAAA;IAAA;IAGA,CAAC;IAAD,WAAC;AAAD,CAAC,AAHD,IAGC;AAHY,oBAAI"}
\ No newline at end of file

-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var core_1 = require("@angular/core");
-//HTTP Service
-var http_1 = require("@angular/http");
-require("rxjs/add/operator/toPromise");
-// @Injectable()
-// export class HeroService {
-//   getHeroes(): Hero[] {
-//     return HEROES;
-//   }
-// }
-// Async services and Promises 
-var HeroService = (function () {
-    function HeroService(http) {
-        this.http = http;
-        //   getHeroes(): Promise<Hero[]> {
-        //     return Promise.resolve(HEROES);
-        //   }
-        //   getHeroesSlowly(): Promise<Hero[]> {
-        //   return new Promise(resolve => {
-        //     // Simulate server latency with 2 second delay
-        //     setTimeout(() => resolve(this.getHeroes()), 2000);
-        //   });
-        // }
-        //HTTP service
-        // private heroesUrl = './mocks/in-memory-data.service';  // URL to web api
-        this.heroesUrl = 'api/heroes'; // URL to web api
-    }
-    HeroService.prototype.getHeroes = function () {
-        return this.http.get(this.heroesUrl)
-            .toPromise()
-            .then(function (response) { return response.json().data; })
-            .catch(this.handleError);
-    };
-    HeroService.prototype.handleError = function (error) {
-        console.error('An error occurred', error); // for demo purposes only
-        return Promise.reject(error.message || error);
-    };
-    return HeroService;
-}());
-HeroService = __decorate([
-    core_1.Injectable(),
-    __metadata("design:paramtypes", [http_1.Http])
-], HeroService);
-exports.HeroService = HeroService;
-//# sourceMappingURL=hero.service.js.map
\ No newline at end of file

-{"version":3,"file":"hero.service.js","sourceRoot":"","sources":["hero.service.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAA2C;AAE3C,cAAc;AACd,sCAA8C;AAC9C,uCAAqC;AAKrC,gBAAgB;AAChB,6BAA6B;AAC7B,0BAA0B;AAC1B,qBAAqB;AACrB,MAAM;AACN,IAAI;AAEJ,+BAA+B;AAE/B,IAAa,WAAW;IAetB,qBAAoB,IAAU;QAAV,SAAI,GAAJ,IAAI,CAAM;QAdhC,mCAAmC;QACnC,sCAAsC;QACtC,MAAM;QAEN,yCAAyC;QACzC,oCAAoC;QACpC,qDAAqD;QACrD,yDAAyD;QACzD,QAAQ;QACR,IAAI;QAEJ,cAAc;QACd,2EAA2E;QACnE,cAAS,GAAG,YAAY,CAAC,CAAE,iBAAiB;IAChB,CAAC;IACnC,+BAAS,GAAT;QACE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;aACxB,SAAS,EAAE;aACX,IAAI,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,IAAI,EAAE,CAAC,IAAc,EAA9B,CAA8B,CAAC;aAChD,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACtC,CAAC;IACO,iCAAW,GAAnB,UAAoB,KAAU;QAC5B,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC,yBAAyB;QACpE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IAChD,CAAC;IACH,kBAAC;AAAD,CAAC,AA1BD,IA0BC;AA1BY,WAAW;IADvB,iBAAU,EAAE;qCAgBe,WAAI;GAfnB,WAAW,CA0BvB;AA1BY,kCAAW"}
\ No newline at end of file

@@ -38,6 +38,12 @@ private heroesUrl = 'api/heroes';  // URL to web api
                .then(response => response.json().data as Hero[])
                .catch(this.handleError);
   }
+ 
+  getHero(id: number): Promise<Hero> {
+  return this.getHeroes()
+             .then(heroes => heroes.find(hero => hero.id === id));
+  }
+
   private handleError(error: any): Promise<any> {
     console.error('An error occurred', error); // for demo purposes only
     return Promise.reject(error.message || error);

-"use strict";
-var InMemoryDataService = (function () {
-    function InMemoryDataService() {
-    }
-    InMemoryDataService.prototype.createDb = function () {
-        var heroes = [
-            { id: 11, name: 'Mr. Nice' },
-            { id: 12, name: 'Narco' },
-            { id: 13, name: 'Bombasto' },
-            { id: 14, name: 'Celeritas' },
-            { id: 15, name: 'Magneta' },
-            { id: 16, name: 'RubberMan' },
-            { id: 17, name: 'Dynama' },
-            { id: 18, name: 'Dr IQ' },
-            { id: 19, name: 'Magma' },
-            { id: 20, name: 'Tornado' }
-        ];
-        return { heroes: heroes };
-    };
-    return InMemoryDataService;
-}());
-exports.InMemoryDataService = InMemoryDataService;
-//# sourceMappingURL=in-memory-data.service.js.map
\ No newline at end of file

-{"version":3,"file":"in-memory-data.service.js","sourceRoot":"","sources":["in-memory-data.service.ts"],"names":[],"mappings":";AACA;IAAA;IAgBA,CAAC;IAfC,sCAAQ,GAAR;QACE,IAAI,MAAM,GAAG;YACX,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAC;YAC1B,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAC;YACvB,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAC;YAC1B,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAC;YAC3B,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAC;YACzB,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAC;YAC3B,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAC;YACxB,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAC;YACvB,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAC;YACvB,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAC;SAC1B,CAAC;QACF,MAAM,CAAC,EAAC,MAAM,QAAA,EAAC,CAAC;IAClB,CAAC;IACH,0BAAC;AAAD,CAAC,AAhBD,IAgBC;AAhBY,kDAAmB"}
\ No newline at end of file

@@ -13,6 +13,8 @@ export class InMemoryDataService implements InMemoryDbService {
       {id: 19, name: 'Magma'},
       {id: 20, name: 'Tornado'}
     ];
+    // let user=[{id:1, email:'a@a.com'}];
+
     return {heroes};
   }
 }
\ No newline at end of file

-"use strict";
-exports.HEROES = [
-    { id: 11, name: 'Mr. Nicest' },
-    { id: 12, name: 'Narco' },
-    { id: 13, name: 'Bombasto' },
-    { id: 14, name: 'Celeritas' },
-    { id: 15, name: 'Magneta' },
-    { id: 16, name: 'RubberMan' },
-    { id: 17, name: 'Dynama' },
-    { id: 18, name: 'Dr IQ' },
-    { id: 19, name: 'Magma' },
-    { id: 20, name: 'Tornado' }
-];
-//# sourceMappingURL=mock-heroes.js.map
\ No newline at end of file

-{"version":3,"file":"mock-heroes.js","sourceRoot":"","sources":["mock-heroes.ts"],"names":[],"mappings":";AAEa,QAAA,MAAM,GAAW;IAC5B,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;IAC9B,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;IACzB,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;IAC5B,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7B,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;IAC3B,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7B,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;IAC1B,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;IACzB,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;IACzB,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;CAC5B,CAAC"}
\ No newline at end of file

+import { Injectable } from '@angular/core';
+
+//HTTP Service
+import { Headers, Http } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+
+import { Hero } from '../models/hero';
+import { HEROES } from './mocks/mock-heroes';
+
+// @Injectable()
+// export class HeroService {
+//   getHeroes(): Hero[] {
+//     return HEROES;
+//   }
+// }
+
+// Async services and Promises 
+@Injectable() 
+export class TokenService {
+//   getHeroes(): Promise<Hero[]> {
+//     return Promise.resolve(HEROES);
+//   }
+
+//   getHeroesSlowly(): Promise<Hero[]> {
+//   return new Promise(resolve => {
+//     // Simulate server latency with 2 second delay
+//     setTimeout(() => resolve(this.getHeroes()), 2000);
+//   });
+// }
+
+//HTTP service
+// private heroesUrl = './mocks/in-memory-data.service';  // URL to web api
+  constructor(private http: Http) { }
+  private tokenUrl = 'http://uatb2bservices.crimsoni.com/csapis/token';  // URL to web api
+  private headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
+  
+  token(): Promise<string> {
+        return this.http
+            .post(this.tokenUrl, 'Password=123456&grant_type=password&UserName=b8a9df77-9d3d-4574-96a1-1baae377257b', { headers: this.headers })
+            .toPromise()
+            .then(res => res.json().data as string)
+            .catch(this.handleError);
+    }
+
+  private handleError(error: any): Promise<any> {
+    console.error('An error occurred', error); // for demo purposes only
+    return Promise.reject(error.message || error);
+  }
+}
+

-{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";AAAA,8EAA2E;AAE3E,+CAA6C;AAE7C,iDAAsB,EAAE,CAAC,eAAe,CAAC,sBAAS,CAAC,CAAC"}
\ No newline at end of file