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