对于有任何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!