第六课：模块

模板，个人认为是Ionic 2中最有趣的东西。也是框架能力闪耀的地方。看看下面的代码：

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
            My Friends
        </ion-title>
        <ion-buttons end>
        <button ion-button icon-only (click)="doSomethingCool()"><ion-icon name="add-circle"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-searchbar (input)="getItems($event)"></ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of items">
            <ion-avatar item-left>
            <img [src]="item.picture">
            </ion-avatar>
            <h2>{{item.name}}</h2>
            <p>{{item.description}}</p>
        </ion-item>
    </ion-list>
</ion-content>

上面代码在没有额外样式的情况下，看起来将会是这样的：

看起来没那么惊艳，但是我们就已经用简单的几行代码设置好了一个复杂的布局，加点自定义样式的话，我们就可以得到一个非常时尚的界面了。稍后我们会从各个方面彻底的了解在Ionic 2中创建模板，但是目前我需要给你找找一个完整的页面模板看起来是什么感觉，以及使用Ionic提供的组件是多么的简单。

Ionic 2中的模板语法有很多知识需要学习，如果你之前有使用过Ionic 1的话，你会发现他有一些重大的变更 —— 所以我们需要具体的学习一下模板。

此后也会涉及到其他的一些知识，但是这个是我认为这开始使用Ionic 2之前最后学要学习的‘核心’知识 —— 一旦你拿下了类和模板，那么你就可以直接可以开始制作一些东西。所以，我们先转入一些基础理论知识的学习，然后在做学一些练习示例吧。

* 语法

*可能是Ionic 2里面最让人困惑的语法之一了。你会经常遇到一些这样的代码：

<ion-item *ngFor="let item of items">

或者

<p *ngIf="someBoolean"><p>

诸如此类。在Angular 2中 语法用与创建一个嵌入模板的快捷方式，所以，当我们使用 ngIf的时候，上面的代码展开来就是：

<template [ngIf]="someBoolean">
    <p></p>
</template>

使用模板的原因是Angular 2将模板看作是DOM块，这样一来就可以动态操作他了。所以，在上面的 *ngIf 范例中我们不会只按照字面意思将他渲染到DOM，

<p *ngIf="someBoolean"></p>

如果 someBoolean 等于true的话，会显示：

<p></p>

false的话就不显示。同理，当我们使用 *ngFor的时候，我们不只是按照字面上去渲染：

<p *ngFor="let item of items">{{item.name}}</p>

我们会针对每个条目分别以段落的方式渲染出来：

<p>Bananas</p>
<p>More Bananas</p>
<p>Pancakes</p>

要使用这个功能的话，我们需要使用