Initial code push.

+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+# Indentation override
+#[lib/**.js]
+#[{package.json,.travis.yml}]
+#[**/**.js]

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.vscode

+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}

+{
+  "name": "angular-quickstart",
+  "version": "1.0.0",
+  "description": "QuickStart package.json from the documentation, supplemented with testing support",
+  "scripts": {
+    "build": "tsc -p src/",
+    "build:watch": "tsc -p src/ -w",
+    "build:e2e": "tsc -p e2e/",
+    "serve": "lite-server -c=bs-config.json",
+    "serve:e2e": "lite-server -c=bs-config.e2e.json",
+    "prestart": "npm run build",
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
+    "pree2e": "npm run build:e2e",
+    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
+    "preprotractor": "webdriver-manager update",
+    "protractor": "protractor protractor.config.js",
+    "pretest": "npm run build",
+    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
+    "pretest:once": "npm run build",
+    "test:once": "karma start karma.conf.js --single-run",
+    "lint": "tslint ./src/**/*.ts -t verbose"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+
+    "angular-in-memory-web-api": "~0.3.0",
+    "systemjs": "0.19.40",
+    "core-js": "^2.4.1",
+    "rxjs": "5.0.1",
+    "zone.js": "^0.8.4"
+  },
+  "devDependencies": {
+    "concurrently": "^3.2.0",
+    "lite-server": "^2.2.2",
+    "typescript": "~2.1.0",
+
+    "canonical-path": "0.0.2",
+    "tslint": "^3.15.1",
+    "lodash": "^4.16.4",
+    "jasmine-core": "~2.4.1",
+    "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~4.0.14",
+    "rimraf": "^2.5.4",
+
+    "@types/node": "^6.0.46",
+    "@types/jasmine": "2.5.36"
+  },
+  "repository": {}
+}

+h1 {
+    font-size: 1.2em;
+    color:red;
+    margin-bottom: 0;
+    }
+    .heroes {
+    margin: 0 0 2em 0;
+    list-style-type: none;
+    padding: 0;
+    width: 15em;
+  }
+  .selected {
+    background-color: #CFD8DC !important;
+    color: white;
+  }
+  .heroes {
+    margin: 0 0 2em 0;
+    list-style-type: none;
+    padding: 0;
+    width: 15em;
+  }
+  .heroes li {
+    cursor: pointer;
+    position: relative;
+    left: 0;
+    background-color: #EEE;
+    margin: .5em;
+    padding: .3em 0;
+    height: 1.6em;
+    border-radius: 4px;
+  }
+  .heroes li.selected:hover {
+    background-color: #BBD8DC !important;
+    color: white;
+  }
+  .heroes li:hover {
+    color: #607D8B;
+    background-color: #DDD;
+    left: .1em;
+  }
+  .heroes .text {
+    position: relative;
+    top: -3px;
+  }
+  .heroes .badge {
+    display: inline-block;
+    font-size: small;
+    color: white;
+    padding: 0.8em 0.7em 0 0.7em;
+    background-color: #607D8B;
+    line-height: 1em;
+    position: relative;
+    left: -1px;
+    top: -4px;
+    height: 1.8em;
+    margin-right: .8em;
+    border-radius: 4px 0 0 4px;
+  }

+<h1>{{title}}</h1>
+<div><label>Id: </label>{{hero.id}}</div>
+<div><label>Name: </label>{{hero.name}}</div>
+
+<!--One-way binding-->
+<h1>One-way binding</h1>
+<div>
+<input [value]="hero.name">
+</div>
+
+<!--Two-way binding-->
+<h1>Two-way binding</h1>
+<div>
+  <label>name: </label>
+  <input [(ngModel)]="hero.name" placeholder="name">
+  
+</div>
+
+<!--ngFor Example-->
+<!--<h1>ngFor</h1>
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>-->
+
+<!--Handling Events-->
+<h1>ngFor with Event handling</h1>
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+
+<!--ngIf-->
+<!--<div  *ngIf="selectedHero">
+  <label>name: </label>
+  <input [(ngModel)]="selectedHero.name" placeholder="name">
+</div>-->
+
+<!--Multiple Components-->
+<hero-detail [hero]="selectedHero"></hero-detail>

+"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

+{"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"}

+import { Component,OnInit } from '@angular/core';
+import {Hero} from './models/hero'
+import {HeroService} from './services/hero.service'
+import { HttpModule } from '@angular/http';
+
+
+@Component({
+  selector: 'my-app',
+  // template: `<h1>Hello1 {{name}}</h1>`,
+  templateUrl: 'app/app.component.html',
+
+  styleUrls:['app/app.component.css'],
+   providers: [HeroService]
+})
+export class AppComponent  { 
+  name = 'Angular1'; 
+  hero: Hero ={id:1, name:'Anderson'};
+// heroes: Hero[];
+
+// constructor(){
+//     var heroService = new HeroService();
+//     this.heroes=heroService.getHeroes();
+//   }
+
+//Service Demo with DI
+  heroes: Hero[];
+
+//   constructor(private heroService: HeroService){
+//     //  this.heroes=heroService.getHeroes();
+
+//     // Async services and Promises 
+//     this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
+//   }
+
+// //ngOnInit
+  constructor(private heroService: HeroService) {
+  }
+  
+  ngOnInit(): void {
+     this.getHeroes();
+  }
+ getHeroes(): void {
+    // this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+
+    //Simulate server latency
+    // this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
+
+    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+  }
+ // Event Handling
+  selectedHero: Hero;
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+    // alert(this.selectedHero.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 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

+{"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"}

+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+//Http Service
+import { HttpModule }    from '@angular/http';
+
+import { AppComponent }  from './app.component';
+import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
+
+// Imports for loading & configuring the in-memory web api
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService }  from './services/mocks/in-memory-data.service';
+
+@NgModule({
+  imports:      [ BrowserModule ,
+  //Http Service
+  HttpModule,
+  FormsModule,
+  InMemoryWebApiModule.forRoot(InMemoryDataService)],
+  declarations: [ AppComponent,
+        HeroDetailComponent ],
+  bootstrap:    [ AppComponent ]
+  
+})
+export class AppModule { }

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

+"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

+{"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"}

+import { Component,Input } from '@angular/core';
+import {Hero } from '../models/hero';
+
+@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']
+})
+export class HeroDetailComponent  {
+  @Input() hero: Hero;
+ }

+//# sourceMappingURL=hero-detail.component.js.map

+{"version":3,"file":"hero-detail.component.js","sourceRoot":"","sources":["hero-detail.component.ts"],"names":[],"mappings":""}

+"use strict";
+var Hero = (function () {
+    function Hero() {
+    }
+    return Hero;
+}());
+exports.Hero = Hero;
+//# sourceMappingURL=hero.js.map

+{"version":3,"file":"hero.js","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":";AAAA;IAAA;IAGA,CAAC;IAAD,WAAC;AAAD,CAAC,AAHD,IAGC;AAHY,oBAAI"}

+export class Hero {
+  id: number;
+  name: string;
+}
+

+"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

+{"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"}

+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 HeroService {
+//   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
+private heroesUrl = 'api/heroes';  // URL to web api
+  constructor(private http: Http) { }
+  getHeroes(): Promise<Hero[]> {
+    return this.http.get(this.heroesUrl)
+               .toPromise()
+               .then(response => response.json().data as Hero[])
+               .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);
+  }
+}
+

+"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

+{"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"}

+import { InMemoryDbService } from 'angular-in-memory-web-api';
+export class InMemoryDataService implements InMemoryDbService {
+  createDb() {
+    let 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};
+  }
+}

+"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

+{"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"}

+import {Hero} from '../../models/hero'
+
+export const HEROES: Hero[] = [
+  { 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' }
+];

+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Angular QuickStart</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading AppComponent content here ...</my-app>
+  </body>
+</html>

+"use strict";
+var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+var app_module_1 = require("./app/app.module");
+platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);
+//# sourceMappingURL=main.js.map

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

+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}

+var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
+var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
+var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
+
+module.exports.translate = function(load){
+  var url = document.createElement('a');
+  url.href = load.address;
+
+  var basePathParts = url.pathname.split('/');
+
+  basePathParts.pop();
+  var basePath = basePathParts.join('/');
+
+  var baseHref = document.createElement('a');
+  baseHref.href = this.baseURL;
+  baseHref = baseHref.pathname;
+
+  basePath = basePath.replace(baseHref, '');
+
+  load.source = load.source
+    .replace(templateUrlRegex, function(match, quote, url){
+      let resolvedUrl = url;
+
+      if (url.startsWith('.')) {
+        resolvedUrl = basePath + url.substr(1);
+      }
+
+      return 'templateUrl: "' + resolvedUrl + '"';
+    })
+    .replace(stylesRegex, function(match, relativeUrls) {
+      var urls = [];
+
+      while ((match = stringRegex.exec(relativeUrls)) !== null) {
+        if (match[2].startsWith('.')) {
+          urls.push('"' + basePath + match[2].substr(1) + '"');
+        } else {
+          urls.push('"' + match[2] + '"');
+        }
+      }
+
+      return "styleUrls: [" + urls.join(', ') + "]";
+    });
+
+  return load;
+};

+/**
+ * Add barrels and stuff
+ * Adjust as necessary for your application needs.
+ */
+// (function (global) {
+//   System.config({
+//     packages: {
+//       // add packages here
+//     }
+//   });
+// })(this);

+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      'app': 'app',
+
+      // angular bundles
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+
+      // other libraries
+      'rxjs':                      'npm:rxjs',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+})(this);

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}

+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}