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

本文介绍了Ionic、PhoneGap、Cordova、AngularJS、NodeJS和NPM等相关技术,详细阐述了它们的定义和用途。重点讲解了在天朝如何安装Ionic和Cordova,包括使用npm和淘宝镜像,以及创建项目的步骤,如添加Android平台和生成APK。
摘要由CSDN通过智能技术生成

 

     说来惭愧,都说隔行如隔山,没想到自己对同行的了解都微乎其微,还成天称是程序猿,直到前几天自己才听到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项目就行









 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值