ionic

ionic 安装 ionic 创建 APP ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic toggle ionic checkbox ionic 单选框 ionic range ionic select ionic tab(选项卡) ionic 网格(Grid) ionic 颜色 ionic 上拉菜单 ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作 ionic 切换开关操作 ionic 手势事件 ionic 头部和底部 ionic 列表操作 ionic 加载动作 ionic 模型 ionic 导航 ionic 平台 ionic 浮动框 ionic 对话框 ionic 滚动条 ionic 侧栏菜单 ionic 滑动框 ionic 加载动画 ionic 选项卡栏操作

ionic 安装

ionic 最新版本下载地址：http://ionicframework.com/docs/overview/#download。

下载后解压压缩包，包含以下目录：

css/               =>     样式文件
fonts/             =>     字体文件
js/                =>     Javascript文件
version.json       =>     版本更新说明

你也可以在 Github 上下载以下资源文件：https://github.com/driftyco/ionic（在release 目录中）。

接下来，我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。

实例

<ion-header-bar class="bar-positive">
<h1 class="title">Hello World!</h1>
</ion-header-bar>

<ion-content>
<p>我的第一个 ionic 应用。</p>
</ion-content>

本教程着重讲解 ionic 框架的应用，大部分实例在浏览器中运行，移动设备上运行可以在接下来的命令行安装教程中详细了解。

注意：在移动应用如 phonegap 中我们只需将对应的 js 和 css 文件加入到资源库中即可。

命令行安装

首先您需要安装 Node.js，我们在接下来的安装中需要使用到其 NPM 工具，更多 NPM 介绍可以查看我们的NPM 使用介绍。

然后通过命令行工具安装最新版本的 cordova 和 ionic 。通过参考Android 和 iOS 官方文档来安装。

Window 和 Linux 上打开命令行工具执行以下命令：

$ npm install -g cordova ionic

Mac 系统上使用以下命令：

sudo npm install -g cordova ionic

提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。

如果你已经安装了以上环境，可以执行以下命令来更新版本:

npm update -g cordova ionic

或

sudo npm update -g cordova ionic

创建应用

使用ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个ionic应用：

$ ionic start myApp tabs

运行我们刚才创建的ionic项目

使用 ionic tool 创建，测试，运行你的apps(或者通过Cordova直接创建)。

创建android应用:

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

创建ios应用:

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios