ionic的简介，安装环境配置和应用举例

ionic的简介，安装环境配置和应用举例

1.ionic介绍及特点
1.1.简介
(1).ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
(2).ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
(3).提供原生App质感的CSS样式模拟. Ionic这部分的实现使用了Ionicons图标样式库,JavaScript 框架- 提供移动 Web 应用开发框架. Ionic 基于 AngularJS 基础框架开发，因此，在遵循AngularJS的框架约束之外，Ionic还是用了AngularJS UI Router实现前端路由。
1.2.ionic 特点
(1).ionic 基于Angular语法，简单易学.
(2).ionic 是一个轻量级框架.
(3).ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护.
(4).ionic 提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用.
(5).ionic 专注原生，让你看不出混合应用和原生的区别.
(6).ionic 提供了强大的命令行工具.
(7).ionic 性能优越，运行速度快.

1.3.了解ionic之前要先了解以下相关基础知识
(1).HTML
(2).CSS
(3).Javascript
(4).Angular
1.4.ionic 相关知识请看官网
(1).官方网站：http://ionicframework.com/
(2).官方文档：http://ionicframework.com/docs/
(3).Github 地址：https://github.com/driftyco/ionic

2.ionic安装
2.1.ionic 下载地址：http://ionicframework.com/docs/overview/#download
2.2.通过命令行安装
2.2.1.首先安装Node.js 下载地址：https://nodejs.org/en/download/
2.2.2.终端安装Node.js 通过Homebrew安装node.js
(1).安装Homebrew $ ruby -e “$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master/install);
(2).$ brew install node
(3).检查是否安装成功：node -v
(4).测试：创建test.js文件：

[code lang="js"]
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3006, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3006/');
[/code]

(5).测试：node test.js 终端输出：Server running at http://127.0.0.1:3006/
(6).访问浏览器：http://127.0.0.1:3006/ 页面出现：Hello World 成功
2.2.3.安装Cordova和 ionic
(1).使用镜像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
(2).$ sudo cnpm install -g cordova ionic
(3).查看是否安装成功 ：$ ionic info

[code lang="psd"]
Your system information:
Cordova CLI: Not installed
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.3.1
Xcode version: Xcode 8.0 Build version 8A218a 
[/code]

(4).android需要环境请看：http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
(5).iOS需要环境：http://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html
3.ionic应用
(1).

[code lang="psd"]
     $ ionic start myApp tabs
    [/code]

(2).创建android项目

[code lang="psd"]
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
[/code]

运行成功后会弹出模拟器 运行效果如下：

(3).也可以用浏览器运行：

[code lang="psd"]
 $ ionic serve 
[/code]

(4).创建iOS项目

[code lang="psd"]
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
[/code]

(5). 如果出现"ios-sim was not found."错误 请输入：

[code lang="psd"]
npm install -g ios-sim
[/code]

(6).运行结果：

(7).打开刚才创建的项目目录：
android和iOS的项目在platforms下

(8).我们编辑项目主要在www目录下面

(8.1).css目录下存放css布局文件
(8.2).img目录下存放项目UI图
(8.3).js目录下创建js文件
(8.4).lib创建库文件和自定义的js文件
(8.5).templates 创建界面html文件 以上说明看个人习惯
(9).ionic常用命令：

[code lang="psd"]
npm install -g cnpm --registry=https://registry.npm.taobao.org（npm镜像源指向淘宝） 
cnpm install -g cordova ionic（安装cordova ionic） 
cnpm update -g cordova ionic（更新cordova ionic） 
ionic -help（查看帮助） 
ionic -v（查看版本） 
ionic start myApp blank（空项目） 
ionic start myApp tabs（带导航条） 
ionic start myApp sidemenu（带侧滑菜单） 
ionic platform add android（添加android平台） 
ionic platform remove android（移除android平台） 
ionic build android（编译项目apk） 
ionic emulate android（运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行） 
ionic run android （相当于build + emulate链接手机运行） 
ionic serve（开启服务调试） 
[/code]

完成ionic的配置和项目创建。