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

 

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

 

What is the Ionic？

    

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

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

What is the PhoneGap ?

    

     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项目就行