Angular 2 For JavaScript ES5 英雄编辑器教程-服务(5)

由于官网给出JavaScript例子不是很完整，此文主要简单的记录用JavaScript写Angular 2 的Hello World程序。

用javascript实现官网英雄指南教程

本文参照官网实例地址：TypeScript实现的英雄编辑器教程-服务

保持项目运行：在项目目录下执行npm start

1.本章结束后项目文件目录

angular-quickstart
|---app
|    |
|    |---app.component.js
|    |---app.module.js
|    |---hero.js
|    |---hero-detail.component.js
|    |---main.js
|    |---hero.service.js
|    |---mock-heroes.js
|
|---node_modules ...
|---package.json
|---systemjs.config.js
|---index.html
|---style.css

2.创建HeroService服务

创建服务，可以将数据提供给不同的组件，让不同的组件之间可以共享数据。

将AppComponent中HEROES数据转移到单独的文件，模拟数据提供

新建app/mock-heroes.js

var HEROES = (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;
}());
exports.HEROES = HEROES;

新建app/hero.service.js

var ng_core  = require('@angular/core');
var Hero = require('./hero').Hero;
var HEROES = require('./mock-heroes').HEROES;
var HeroService = (function(){
    var HeroService = function(){

    };
    HeroService.prototype.getHeroes = function(){
        return HEROES;
    }
    HeroService.annotations = [new ng_core.Injectable()];
    return HeroService;
}());
exports.HeroService = HeroService;

@Injectable()装饰器，可以用于angular将其他依赖注入该服务。

3.在APPComponent中调用服务

app/app.component.js 部分代码

var ng_core = require('@angular/core');
var Hero = require('./hero').Hero;
var HeroService = require('./hero.service').HeroService;

var AppComponent = (function(){
    function AppComponent (){
    }
    AppComponent = ng_core.Component({
      selector: 'my-app',
      providers:[HeroService] //add
    }).Class({
       //modify
        constructor:[HeroService,function(heroService) {
            this.title = 'Tour of Heroes';
            this.hero = new Hero(1,'Windstorm');
            this.heroes = heroService.getHeroes();//HEROES;
            this.selectedHero = null; 
            this.onSelect = function(hero){
                this.selectedHero = hero;
            };
        }]
    });
    return AppComponent;
}());
exports.AppComponent = AppComponent;

HeroService 并没有通过new来实例化，而是通过Angular 2的注入器来实现的。

4.在AppComponent初始化的时候来获取数据

var ng_core = require('@angular/core');
var Hero = require('./hero').Hero;
var HeroService = require('./hero.service').HeroService;

var AppComponent = (function(){
    function AppComponent (){
    }
    AppComponent = ng_core.Component({
      selector: 'my-app',
      providers:[HeroService],
    }).Class({
        constructor:[HeroService,function(heroService) {
            this.title = 'Tour of Heroes';
            this.hero = new Hero(1,'Windstorm');
            this.heroService = heroService;//add
            //this.heroes = heroService.getHeroes();//HEROES; //modify
            this.selectedHero = null; 
            this.onSelect = function(hero){
                this.selectedHero = hero;
            };
        }]
    });
    AppComponent.prototype.getHeroes = function(){
        return this.heroService.getHeroes();
    };
    AppComponent.prototype.ngOnInit = function(){
        this.heroes = this.getHeroes();
    };
    return AppComponent;
}());
exports.AppComponent = AppComponent;

其中，实现了ngOnInit接口，当AppComponent初始化时，将heroes初始化。

4.全部修改过的代码总览

app/app.component.js

var ng_core = require('@angular/core');
var Hero = require('./hero').Hero;
var HeroService = require('./hero.service').HeroService;

var AppComponent = (function(){
    function AppComponent (){
    }
    AppComponent = ng_core.Component({
      selector: 'my-app',
      providers:[HeroService],
      template:`
            <h1>{{title}}</h1>
            <h2>My Heroes</h2>
            <ul class="heroes">
                <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
                    <span class="badge">{{hero.id}}</span> {{hero.name}}
                </li>
            </ul>
            <my-hero-detail [hero]="selectedHero"></my-hero-detail>
          `,
    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;
              }
            `]

    }).Class({
        constructor:[HeroService,function(heroService) {
            this.title = 'Tour of Heroes';
            this.hero = new Hero(1,'Windstorm');
            this.heroService = heroService;
            //this.heroes = heroService.getHeroes();//HEROES;
            this.selectedHero = null; 
            this.onSelect = function(hero){
                this.selectedHero = hero;
            };
        }]
    });
    AppComponent.prototype.getHeroes = function(){
        return this.heroService.getHeroes();
    };
    AppComponent.prototype.ngOnInit = function(){
        this.heroes = this.getHeroes();
    };
    return AppComponent;
}());
exports.AppComponent = AppComponent;

app/hero.service.js

var ng_core  = require('@angular/core');
var Hero = require('./hero').Hero;
var HEROES = require('./mock-heroes').HEROES;
var HeroService = (function(){
    var HeroService = function(){

    };
    HeroService.prototype.getHeroes = function(){
        return HEROES;
    }
    HeroService.annotations = [new ng_core.Injectable()];
    return HeroService;
}());
exports.HeroService = HeroService;

app/app.component.js

var HEROES = (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;
}());
exports.HEROES = HEROES;

备注：javascript初学，不懂太多。