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 = re
4000
quire('@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初学，不懂太多。