ionic2-angular2入门实践:tour-of-hero

这是一个ionic2-angular2的入门实践。
github:
https://github.com/escawn/ionic2-angular2-tour-of-heroes

在学习angular2的时候，官网用了一个demo：tour-of-heroes来作为例子来讲解一个angular2单页面的结构。地址：（中文版）
https://angular.cn/docs/ts/latest/tutorial/

作为以开发ionic2 app为目标的初学者，在反复看了几遍教程之后，决定自己改写一下这个demo，使他成为一个ionic2的简单demo。

改写步骤

1. 新建空白ionic2应用

ionic start tour-of-heroes blank --v2 --ts

<code>blank</code>表示不使用任何模板
<code>--v2</code>表示这是一个ionic2应用（而不是ionic）
<code>--ts</code>表示以typescript为语言基础进行编写

2. 按照教程，进行基本的内容填写
   找到<code>./app/page/home</code>,其中ionic2的应用代码都是以页（page）为单位进行编写。home表示一页，虽然名字为home，但实际上app打开的主页面是我们自己定义的，在<code>./app/app.ts</code>中：

rootPage: any = HomePage;

<code>HomePage</code>可以改为定义的任何一个page
</br>将<code>home.ts</code>的内容改为如下：

export class HomePage {
     constructor(private navController: NavController) {
  }
     public title = 'Tour of Heroes';
     public hero: Hero = {
     id: 1,
     name: 'Windstorm',
     }
}
export class Hero {
      constructor(id: number,
              name: string) {
      }
}

效果图

<code>home.html</code>改为如下：

<ion-content padding>
  <h1>{{ title }}</h1>
  <h2>{{ hero.name }} details!</h2>
  <div padding>
    <ion-lable>id:</ion-lable>
    {{ hero.id }}
  </div>
  <div padding>
    <ion-lable>name:</ion-lable>
    <ion-input [(ngModel)] = "hero.name" type = "text" placeholder = "name"></ion-input>
  </div>
</ion-content>

效果是这样的：

效果图

</br>

---

3. 创建英雄，添加数据
   在<code>home.ts</code>最后加

const HEROES: Hero[] = [
  { 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' }
];

在<code>export class HomePage</code>内加

public heroes = HEROES;

<code>home.html</code>部分变成

<ion-header>
  <ion-navbar>
    <ion-title>
      {{ title }}
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h2>My Heroes</h2>
  <ion-list class="heroes">
    <ion-item *ngFor="let hero of heroes">
      <ion-badge class="badge">{{ hero.id }}</ion-badge>
      {{ hero.name }}
    </ion-item>
  </ion-list>
</ion-content>

<code>title</code>，<code>hero.id</code>，<code>hero.name</code>都是我们从<code>hero.ts</code>中导出，或者说绑定的。
<code>*ngFor</code>表循环。
<code><ion-list><ion-item></code>ionic2中固定的列表用法。
</br><code>home.scss</code>变成（样式调整）

.selected {
  background-color: #CFD8DC !important;
  color: white;
}
.heroes {
  margin: 0 0 2em;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes ion-item {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: 0.5em;
  padding: 0;
  height: 1.6em;
  border-radius: 4px;
}
.heroes ion-item.selected:hover {
  background-color: #BBD8DC !important;
  color: white;
}
.heroes ion-item:hover {
  color: #607D8B;
  background-color: #DDD;
  left: 0.1em;
}
.heroes .text {
  position: relative;
  top: -3px;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0;
  background-color: #607D8B;
  line-height: 5em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 5em;
  margin-right: 0.8em;
  border-radius: 4px 0 0 4px;
}

【注】：此处部分代码与angular2官方给出的不同，为了达到效果进行了调整。</br>

效果图

</br>

---

4. 添加click事件
   <code>home.ts</code>里，删除

public hero: Hero = {
    id: 1,
    name: 'Windstorm',
  }

<code>export class HomePage</code>里增加

public selectedHero: Hero;
onSelect(hero: Hero)
{ this.selectedHero = hero; }

此时<code>home.html</code>:

<ion-content padding>
  <h2>My Heroes</h2>
  <ion-list class="heroes">
    <ion-item *ngFor="let hero of heroes"  (click)="onSelect(hero)"  [class.selected]="hero === selectedHero">
      <ion-badge class="badge">{{ hero.id }}</ion-badge>
      {{ hero.name }}
    </ion-item>
  </ion-list>
  <div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div padding>
      <ion-lable>id:</ion-lable>
      {{selectedHero.id}}
    </div>
    <div padding>
      <ion-lable>name:</ion-lable>
      <ion-input [(ngModel)] = "selectedHero.name" type = "text" placeholder = "name"></ion-input>
    </div>
  </div>
</ion-content>

效果图

</br>

---