Angular 2 For JavaScript ES5 英雄编辑器教程-主从结构(3)

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

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

本文参照官网实例地址：TypeScript实现的英雄编辑器教程-主从结构

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

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

angular-quickstart|---app|    ||    |---app.component.js|    |---app.module.js|    |---main.js||---node_modules ...|---package.json|---systemjs.config.js|---index.html|---style.css

2.创建英雄数组

修改app/app.component.js

var ng_core = require('@angular/core');var Hero = (function(){    function Hero(id,name){        this.id = id;        this.name = name;    }    return Hero;}());exports.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>{{hero.name}} details!</h2>          <div><label>id: </label>{{hero.id}}</div>          <div>            <label>name: </label>            <input [(ngModel)]="hero.name" placeholder="name">          </div>          `,    }).Class({        constructor: function() {            this.title = 'Tour of Heroes';            this.hero = new Hero(1,'Windstorm');        }    });    return AppComponent;}());exports.AppComponent = AppComponent;

HEROES包含10个模拟的英雄数据。

4.将数组绑定到AppComponent属性

修改app/app.component.js

var ng_core = require('@angular/core');var Hero = (function(){    function Hero(id,name){        this.id = id;        this.name = name;    }    return Hero;}());exports.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>{{hero.name}} details!</h2>          <div><label>id: </label>{{hero.id}}</div>          <div>            <label>name: </label>            <input [(ngModel)]="hero.name" placeholder="name">          </div>          `,    }).Class({        constructor: function() {            this.title = 'Tour of Heroes';            this.hero = new Hero(1,'Windstorm');            this.heroes = HEROES; //add        }    });    return AppComponent;}());exports.AppComponent = AppComponent;

将HEROES模拟英雄数组数据，绑定到AppComponent的heroes属性上

5.将数组绑定到AppComponent模板上显示

修改app/app.component.js的模板，模板修改后代码如下。

template:`            <h1>{{title}}</h1>            <h2>My Heroes</h2>            <ul class="heroes">                <li *ngFor="let hero of heroes">                    <span class="badge">{{hero.id}}</span> {{hero.name}}                </li>            </ul>            <h2>{{hero.name}} details!</h2>            <div><label>id: </label>{{hero.id}}</div>            <div>                <label>name: </label>                <input [(ngModel)]="hero.name" placeholder="name">            </div>          `,

*ngFor为Angular内在指令，表示，迭代heroes数组，并将每个hero在li标签内显示。

修改app/app.component.js，想AppComponent添加styles的属性，让显示更好看，以下为AppComponent的Styles属性

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;              }            `]

6.绑定事件

给显示的英雄列表绑定点击事件。

修改app/app.component.js模板。在li上绑定点击事件onSelect并传入点击的hero对象

<ul class="heroes">  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">    <span class="badge">{{hero.id}}</span> {{hero.name}}  </li></ul>

接下来在AppComponent内添加添加onSelect方法和selectedHero属性。

constructor: function() {            this.title = 'Tour of Heroes';            this.hero = new Hero(1,'Windstorm');            this.heroes = HEROES;              //add            this.selectedHero  = {};             this.onSelect = function(hero){                this.selectedHero = hero;            };        }

selectedHero属性存放从英雄列表内点击选中的英雄。

修改AppComponent的template，将选中的英雄，显示到模板上。

template:`            <h1>{{title}}</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>            <h2>{{selectedHero.name}} details!</h2>            <div><label>id: </label>{{selectedHero.id}}</div>            <div>                <label>name: </label>                <input [(ngModel)]="selectedHero.name" placeholder="name">            </div>          `

这样，点击英雄后，就会显示显示在details模板上。

7.再未点击前隐藏details模板、并增加点击后的样式显示。

修改app/app.component.js 模板

template:`            <h1>{{title}}</h1>            <h2>My Heroes</h2>            <ul class="heroes">                <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero"> <!-- add -->                    <span class="badge">{{hero.id}}</span> {{hero.name}}                </li>            </ul>            <div *ngIf="selectedHero"> <!-- add -->                <h2>{{selectedHero.name}} details!</h2>                <div><label>id: </label>{{selectedHero.id}}</div>                <div>                    <label>name: </label>                    <input [(ngModel)]="selectedHero.name" placeholder="name">                </div>            </div>          `,

修改初始化属性

.Class({

    constructor: function() {        this.title = 'Tour of Heroes';        this.hero = new Hero(1,'Windstorm');        this.heroes = HEROES;        this.selectedHero = null;  // modified        this.onSelect = function(hero){            this.selectedHero = hero;        };    }});

将已选中的英雄属性设置为null。将details模板外围包裹div