這是一個ionic2-angular2的入門實踐。
github:
https://github.com/escawn/ionic2-angular2-tour-of-heroes
在學習angular2的時候土铺，官網(wǎng)用了一個demo：tour-of-heroes來作為例子來講解一個angular2單頁面的結構。地址：（中文版）
https://angular.cn/docs/ts/latest/tutorial/
作為以開發(fā)ionic2 app為目標的初學者损拢，在反復看了幾遍教程之后，決定自己改寫一下這個demo，使他成為一個ionic2的簡單demo。
改寫步驟
- 新建空白ionic2應用
ionic start tour-of-heroes blank --v2 --ts
<code>blank</code>表示不使用任何模板
<code>--v2</code>表示這是一個ionic2應用（而不是ionic）
<code>--ts</code>表示以typescript為語言基礎進行編寫
- 按照教程妓美，進行基本的內容填寫
找到<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>
- 創(chuàng)建英雄普监，添加數(shù)據(jù)
在<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>表循環(huán)。
<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>
- 添加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>
