精华 Ionic 2 - 10分钟Hello Word教程
发布于 8个月前 作者 laoyipay 5247 次浏览 来自 分享

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

5 回复

留个联系方式吧,可以交流一下。

@ichengweb 好啊, wechat:laoyiusa, 对ionic感兴趣的朋友也可以加一下,希望大家可以一起努力把ionic中国社区越做越好

2.0正式版已出

社区也开始 宣传2.0 了啊

回到顶部