【Ionic】ionic安装和项目的创建

说来惭愧，都说隔行如隔山，没想到自己对同行的了解都微乎其微，还成天称是程序猿，直到前几天自己才听到Ionic,上度娘一问，瞬间就泪崩了，竟然在我身边有PhoneGap、cordova、Angularjs、nodejs、npm等等等等（此处省略三万等）这么多“赫赫有名”的专有名词我以前竟然听都没听到过，可想自己是有多无知，以下是我这几天科普来的，错误之处还望指出，谢谢！

What is theIonic
？

度娘：Ionic 是一个强大的 HTML5 应用程序开发框架，号称Advanced HTML5 Hybrid Mobile AppFramework 是 AngularJS 移动端解决方案 可以帮助您使用 Web 技术，比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。 Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于
Hybird 模式的 HTML5 移动应用程序开发..….（其实我也不知道说的是啥）

说白了Ionic就是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题而存在的。

What is thePhoneGap?

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。

PhoneGap是一个跨平台的移动app开发框架，可以把html css js写的页面打包成跨平台的可以安装的移动app，并且可以调用原生的几乎所有的功能，比如摄像头，联系人，加速度等。

What is the
Cordova ?

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

Cordova是PhoneGap贡献给Apache后的开源项目，是从PhoneGap中抽离出的核心代码，是驱动PhoneGap的核心引擎。有点类似Webkit和Google Chrome的关系。渊源就是：早在2011年10月，Adobe收购了Nitobi Software和它的PhoneGap产品，然后宣布这个移动Web开发框架将会继续开源，并把它提交到Apache Incubator，以便完全接受ASF的管治。当然，由于Adobe拥有了PhoneGap商标，所以开源组织的这个PhoneGap
v2.0版产品就更名为Apache Cordova。

What is the
AngularJS?


AngularJS 是一个JavaScript 框架。它是一个以JavaScript 编写的库。
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

What is the NodeJs?

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
其实吧，可以认为 Node.js 就是运行在服务端的 JavaScript。

What is the
NPM ?

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

新版的nodejs已经集成了npm，所以装了nodejs的话npm也一并安装好了。可以通过输入"npm -v"来测试是否成功安装。
What is the ... ?

不整那些没用的了，直接安装Ionic:
1) 需要有JDK和SDK环境，这是Android开发必有的平台，我就不多说了；
2) 下载Node.js，安装

NodeJs下载地址：https://nodejs.org/



安装都选默认的就行

装好之后，nodejs会默认配好环境变量，你可以去path路径查看，我们可以去命令行查看nodejs是否安装成功：



当然，装好nodejs也默认把npm给装好了，你可以通过npm –v来查看

3) 安装ionic和cordova

a) 在命令行窗口（Ctrl+R之后输入cmd进入）使用npminstall –g cordova ionic进行安装cordova和ionic（可以分开安装，npm install –g cordova 和 npm install –g -ionic）,很明显，在天朝使用这种方法安装有点行不通。



b) 不用急，咱天朝子民有天朝子民的方法，使用淘宝镜像是网上很多人用的方式

输入npm install –g cnpm –registry=https//registry.npm.taobao.org,
安装完成之后，以后的插件都可以使用cnpm来替代npm来安装
cnpm install –g ionic cordova





c) 如果上面方法还不行，就看这里吧
i. npm config –globalset registryhttp://registry.cnpmjs.org
ii. npm install –g cordovaionic

d) 查看ionic和cordova是否安装

成功

ionic –v
cordova –v



4) 创建项目

a) 去你喜欢的目录下创建项目

ionic start myApptabs



b) 添加Android平台

Ionic platform add android



c) 生成Android的apk: ionic build android

在模拟器或真机中运行：ionic emulate android

（或直接使用ionic run andorid）

d) 我们可以直接使用Eclipse导入项目（上面两步可以不用）



我的已经导入进去了，所以不能再次导入

e) 然后和Android项目一样运行就行



会多出CordovaLib（Library库）和MainActivity，运行MainActivity项目就行