{
+ return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id));
+ }
+}
\ No newline at end of file
diff --git a/src/app/hero.ts b/src/app/hero.ts
new file mode 100644
index 000000000..67dad7403
--- /dev/null
+++ b/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+ id: number;
+ name: string;
+}
\ No newline at end of file
diff --git a/src/app/heroes.component.ts b/src/app/heroes.component.ts
new file mode 100644
index 000000000..fa5c237ac
--- /dev/null
+++ b/src/app/heroes.component.ts
@@ -0,0 +1,92 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from "./hero";
+import { HeroService } from "./hero.service";
+
+@Component({
+ selector: 'my-heroes',
+ template: `
+ My Heroes
+
+ -
+ {{hero.id}} {{hero.name}}
+
+
+
+
+
+ {{selectedHero.name | uppercase}} is my hero
+
+
+
+ `,
+ styles: [`
+ .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;
+ }
+ `],
+
+})
+
+
+
+export class HeroesComponent implements OnInit {
+ constructor(private heroService: HeroService) { };
+
+ selectedHero: Hero;
+ heroes: Hero[];
+ onSelect(hero: Hero): void {
+ this.selectedHero = hero;
+ };
+ getHeroes(): void {
+ this.heroService.getHeroes().then(heroes => {this.heroes = heroes});
+ };
+ ngOnInit(): void {
+ this.getHeroes();
+ }
+}
+
+
diff --git a/src/app/mock-heroes.ts b/src/app/mock-heroes.ts
new file mode 100644
index 000000000..7075ec042
--- /dev/null
+++ b/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+import { Hero } from "./hero";
+
+export const HEROES: Hero[] = [
+ { 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' }
+];
\ No newline at end of file
diff --git a/src/favicon.ico b/src/favicon.ico
deleted file mode 100644
index 8081c7cea..000000000
Binary files a/src/favicon.ico and /dev/null differ
diff --git a/src/systemjs-angular-loader.js b/src/systemjs-angular-loader.js
deleted file mode 100644
index 8b1005444..000000000
--- a/src/systemjs-angular-loader.js
+++ /dev/null
@@ -1,49 +0,0 @@
-var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
-var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
-var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
-
-module.exports.translate = function(load){
- if (load.source.indexOf('moduleId') != -1) return 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;
-
- if (!baseHref.startsWith('/base/')) { // it is not karma
- basePath = basePath.replace(baseHref, '');
- }
-
- load.source = load.source
- .replace(templateUrlRegex, function(match, quote, url){
- var 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;
-};
diff --git a/src/systemjs.config.extras.js b/src/systemjs.config.extras.js
deleted file mode 100644
index 027dfe58c..000000000
--- a/src/systemjs.config.extras.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Add barrels and stuff
- * Adjust as necessary for your application needs.
- */
-// (function (global) {
-// System.config({
-// packages: {
-// // add packages here
-// }
-// });
-// })(this);
diff --git a/src/systemjs.config.js b/src/systemjs.config.js
deleted file mode 100644
index 129704a37..000000000
--- a/src/systemjs.config.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * 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);