Ionic 2 - 10分钟Hello Word教程

对于有任何web开发经验的人来说，利用Ionic CLI运行一个Ionic 2 app是非常简单是事情，在这个教程里，你会在10分钟之内构建一个“Hello World”程序

仅仅几行命令，你就可以快速通过模板，走在通往Shark Tank(美国的一个创业选秀节目 )的道路上了

###安装ionic首先你要先安装Ionic 2 CLI，如果木有请运行以下命令安装Ionic 2 CLI

npm install -g ionic

然后用NPM安装 ionic@beta

npm install -g ionic[@beta](/user/beta)

运行以下命令来创建一个空白的模板

‘ionic start helloWorld blank --v2’
‘ionic start’

这几个命令会帮你设置好一些东西, 包括在 app/pages/home的第一个@Page , 包括了以下的文件:

home.html: 页面的模板home.js: JavaScript代码，@Page 组件在此定义home.scss: SASS样式文件结构

###修改页面我们修改模板 (hello.html) 来在navbar(导航栏)显示 “Hello World”，在内容里面显示 “Hello Andrew,” “Andrew” 会是一个从 @Page 模块传过来的变量. 原始代码如下

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <ion-card>
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      Hello World
    </ion-card-content>
  </ion-card>
</ion-content>

首先我们修改 ion-title 成 “Hello World”.

  <ion-title>
    Hello World
  </ion-title>

然后我们修改 ion-content 来包括 hello text然后绑定一个来自@Page的name变量

<ion-content class="home">
  <ion-card>
    <ion-card-content>
      Hello {{name}}
    </ion-card-content>
  </ion-card>
</ion-content>

最后我们修改@Page (home.js) 来给name赋予一个值. 原始的代码如下：

import {Page} from 'ionic-angular';

[@Page](/user/Page)({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {}

我们加入一个constructor然后把 this.name赋予一个值，这个值将会绑定到我们的模板中

import {Page} from 'ionic-angular';

[@Page](/user/Page)({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    constructor(){
        this.name = "Andrew";
    }
}

###运行在命令行里面我们运行ionic serve来查看我们的app

ionic serve

最后你将看到这样的界面

总结在10分钟之内，利用ionic的命令行工具，你就可以建立起一个简单的Hello World app!