Angular 2 For JavaScript ES5 英雄编辑器教程-多个组件(4)
公西俊民
由于官网给出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
|
|---node_modules ...
|---package.json
|---systemjs.config.js
|---index.html
|---style.css
2.拆分AppComponent
组件的单一职责原则：Angular 坚持一个组件只做单独一个功能，这样保证了测试复杂性降低，复用性提高等。
3.拆分英雄类到app/hero.js
app/hero.js
var Hero = (function(){
function Hero(id,name){
this.id = id;
this.name = name;
}
return Hero;
}());
exports.Hero = Hero;
修改app/app.component.js将有关hero类申明移除。
4.拆分英雄详情到app/hero-detail.component.js
app/hero-detail.component.js
var ng_core = require('@angular/core');
var HeroDetailComponent = (function(){
var HeroDetailComponent = function(){
}
HeroDetailComponent = ng_core.Component({
selector: 'my-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>
`,
inputs:['hero'],
}).Class({
constructor:function(){
}
});
return HeroDetailComponent;
}());
exports.HeroDetailComponent = HeroDetailComponent;
其中，Angular Component中元数据inputs数组，表面外部输入的属性有hero，将该hero注入到了模板中。
修改app/app.component.js中模板，将hero-detail的模板代码删除，并加入代码
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
该模板表示调用hero-detail组件中的模板，并将selectedHero属性，传入hero-detail组件中。
4.将hero-detail.component在模块中申明
修改app/app.module.js
var ng_core = require('@angular/core');
var BrowserModule = require('@angular/platform-browser').BrowserModule;
var AppComponent = require('./app.component').AppComponent;
var FormsModule = require('@angular/forms').FormsModule;
var HeroDetailComponent = require('./hero-detail.component').HeroDetailComponent;
var AppModule = (function(){
function AppModule(){
};
AppModule = ng_core.NgModule({
imports: [ BrowserModule,FormsModule],
declarations: [ AppComponent,HeroDetailComponent ],
bootstrap: [ AppComponent ]
})
.Class({
constructor: function() {}
});
return AppModule;
}());
exports.AppModule = AppModule;
5.全部修改过的代码总览
app/app.module.js
var ng_core = require('@angular/core');
var BrowserModule = require('@angular/platform-browser').BrowserModule;
var AppComponent = require('./app.component').AppComponent;
var FormsModule = require('@angular/forms').FormsModule;
var HeroDetailComponent = require('./hero-detail.component').HeroDetailComponent;
var AppModule = (function(){
function AppModule(){
};
AppModule = ng_core.NgModule({
imports: [ BrowserModule,FormsModule],
declarations: [ AppComponent,HeroDetailComponent ],
bootstrap: [ AppComponent ]
})
.Class({
constructor: function() {}
});
return AppModule;
}());
exports.AppModule = AppModule;
app/hero.js
var Hero = (function(){
function Hero(id,name){
this.id = id;
this.name = name;
}
return Hero;
}());
exports.Hero = Hero;
app/app.component.js
var ng_core = require('@angular/core');
var Hero = require('./hero').Hero;
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;
var AppComponent = (function(){
function AppComponent (){
}
AppComponent = ng_core.Component({
selector: 'my-app',
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: function() {
this.title = 'Tour of Heroes';
this.hero = new Hero(1,'Windstorm');
this.heroes = HEROES;
this.selectedHero = null;
this.onSelect = function(hero){
this.selectedHero = hero;
};
}
});
return AppComponent;
}());
exports.AppComponent = AppComponent;
app/hero-detail.component.js
var ng_core = require('@angular/core');
var HeroDetailComponent = (function(){
var HeroDetailComponent = function(){
}
HeroDetailComponent = ng_core.Component({
selector: 'my-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>
`,
inputs:['hero'],
}).Class({
constructor:function(){
}
});
return HeroDetailComponent;
}());
exports.HeroDetailComponent = HeroDetailComponent;
本次只是将应用做了拆分，保证更好的重用，没有新的功能，所以此次最终的效果与上节效果一致。
备注：javascript初学，不懂太多。
类似资料：