360SDN.COM

Hybrid移动APP开发(一):Cordova+Ionic+Angularjs环境配置

来源:  2017-06-24 16:36:41    评论:0点击:

来源:http://blog.csdn.net/fluency_love/article/details/50326469
首先,PhoneGap应该都不陌生,这是一款开源的跨平台的移动App框架,使用Html,JavaScript,CSS语言。PhoneGap是Cordova的前身,Adobe收购Nitobi之后保留了PhoneGap的商标,代码则贡献给了Apache,Apache则将此框架命名为Cordova。

其次,Ionic是一个界面框架,它使用HTML5来构建UI,并且这个框架非常注重性能。

最后,Angularjs是一个解决HTML在开发web应用时局限性很大的框架,它能更快捷、高效的开发CURD应用,它封装了一些常用的类库、框架甚至在你构建CURD应用时需要用到的所有东西。你可能觉得它臃肿或者不够灵活,不过官方坚称这些缺点只会出现在开发初始阶段,俗话说有得必有失,现在我们还是使用AngularJS来开发吧。

下面介绍环境配置。

首先,第一步需要下载node.js,node.js是一个可以使用JavaScript语言编写服务器端代码的框架,安装之后可以使用npm命令下载安装其他各种库和软件。我是windows环境,下载完node-v5.2.0-x64.msi之后安装即可。

node.js下载地址:https://nodejs.org/en/ 
安装完成后打开cmd命令行输入npm -version查看是否安装成功。 
 

第二步安装Cordova,同样在命令行中输入npm install -g cordova回车执行。安装完成之后输入cordova -version查看安装是否成功。

 

第三步安装Ionic,在命令行输入npm install -g ionic回车执行。安装完成之后输入ionic -version查看是否安装成功。

 
之后可以进入想创建应用的文件夹内, 
执行创建应用:ionic start myApp tabs//slidemenu blank 
最后应用创建完成时会提示注册。 
然后进入创建的应用文件夹, 
cmd安装bower,执行:npm install -g bower 
cmd添加Android SDK执行:cordova platforms add android 
build项目,执行:ionic build 
然后将platforms文件夹下android项目导入eclipse即可执行。 
这里注意,第四步第五步是为了学习AngularJS,第三步完成之后其实android项目中已经打好angularjs的库,直接使用即可。

第四步配置Git环境,首先安装Git。

Git下载地址:http://git-scm.com/download/ 
安装完成后配置好用户名:Git config –global user.name “xxx” 
配置好邮箱:git config –global user.email “xxx” 
进入一个文件夹A,创建一个版本库:git init 
fork AngularJS demo:git clone –depth=14 https://github.com/angular/angular-phonecat.git

第五步配置AngularJS环境,进入文件夹A中fork的项目目录下。

cmd命令安装系统构建工具Grunt:npm install -g grunt-cli 
安装本地包管理器Bower:npm install -g bower 
安装轻量级服务器Http-Server:npm install -g http-server 
安装单元测试工具Karma:npm install -g karma 
安装完毕后cmd运行:npm start 
chrome打开:http://localhost:8000/app/index.html 访问此web应用。

遇到的问题总结:

1.安装Cordova或者安装Ionic失败。这个问题可以通过taobao镜像解决。 
首先设置镜像: 
npm config set registry https://registry.npm.taobao.org npm info underscore 
然后执行npm install -g cordova//ionic 
2.Ionic创建应用卡住不动,可以关闭命令行重新创建,一般创建过程都很慢,如果长时间不动的话可以重新创建了。 
3.注意AngularJS环境搭好之后要进入fork下来的项目中执行一系列npm操作。

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权