angularjs+ionic+cordova+Androidstudio的环境配置

AngularJs

各个 angular.js 版本下载
是一款优秀的前端JS框架&＃xff0c;已经被用于Google的多款产品当中。AngularJS有着诸多特性&＃xff0c;最为核心的是&＃xff1a;MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序&＃xff08;SPAs&＃xff1a;Single Page Applications&＃xff09;。
AngularJS 是一个 Javascript 框架。它可通过 script 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML&＃xff0c;且通过 表达式 绑定数据到 HTML。
AngularJS是建立在这样的信念上的&＃xff1a;即声明式编程应该用于构建用户界面以及编写软件构建&＃xff0c;而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML&＃xff0c;通过双向的数据绑定来适应动态内容&＃xff0c;双向的数据绑定允许模型和视图之间的自动同步。因此&＃xff0c;AngularJS使得对DOM的操作不再重要并提升了可测试性。

node.js

安装&＃xff1a;官网 https://nodejs.org
检测&＃xff08;命令行&＃xff09;&＃xff1a;npm -v

cordova

下载&＃xff08;命令行&＃xff09;&＃xff1a;npm install -g cordova
检测&＃xff08;命令行&＃xff09;&＃xff1a;cordova -v
介绍&＃xff1a;Cordova是一种Hybrid开发&＃xff0c;可以被部署到android&＃xff0c;ios等多个手机平台。Cordova就是一个中间件&＃xff0c;让我们把WebAPP打包成HybridAPP&＃xff0c;并且它提供了非常多的插件&＃xff0c;方便我们使用原生APP的功能。

Cordova是一款开放源代码的App开发框架&＃xff0c;旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台应用程序&＃xff0c;其原名称之为PhoneGap&＃xff0c;Adobe收购Nitobi公司后&＃xff0c;PhoneGap商标保留&＃xff0c;代码贡献给了Apache基金会&＃xff0c;而Apache将其命名为ApacheCallback&＃xff0c;其后发布新版本时&＃xff0c;定名为ApacheCordova。

Cordova是一个行动设备的API接口集&＃xff0c;利用Javascript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架&＃xff0c;如jQueryMobile、DojoMobile或SenchaTouch&＃xff0c;开发者得以快速地开发跨平台App而不需要编写任何的原生代码。

注意到因为Cordova本身仍是一个原生程式&＃xff0c;为App打包时依然需要用到这些系统平台的SDK。

以前叫PhoneGap&＃xff0c;是一个可以与手机原生代码交互的框架&＃xff0c;主要用于调用手机功能&＃xff0c;比如调用拍照功能&＃xff0c;定位功能等。
Cordova是贡献给Apache后的开源项目&＃xff0c;是从PhoneGap中抽出的核心代码&＃xff0c;是驱动PhoneGap的核心引擎。你可以把它们的关系想象成类似于Webkit和Google Chrome的关系
Cordova提供了一组设备相关的API&＃xff0c;通过这组API&＃xff0c;移动应用能够以Javascript访问原生的设备功能&＃xff0c;如摄像头、麦克风等。
Cordova还提供了一组统一的Javascript类库&＃xff0c;以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统&＃xff1a;iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

ionic

下载&＃xff08;命令行&＃xff09;&＃xff1a;npm install -g ionic
检测&＃xff08;命令行&＃xff09;&＃xff1a;ionic -v
介绍&＃xff1a;Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架&＃xff0c;它自称为是“本地与HTML5的结合”。强大的HTML5开发框架。该框架提供了很多基本的移动用户界面范例&＃xff0c;例如像列表&＃xff08;lists&＃xff09;、标签页栏&＃xff08;tabbars&＃xff09;和触发开关&＃xff08;toggleswitches&＃xff09;这样的简单条目。它还提供了更加复杂的可视化布局示例&＃xff0c;例如在下面显示内容的滑出式菜单。

Ionic宣称他们极度强调性能&＃xff0c;并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

Ionic同时它是基于 AngularJs的。Ionic是基于AngularJS框架开发的&＃xff0c;所以在使用Ionic之前需要对angularjs有一定的了解。

ionic是一个用来开发混合手机应用的&＃xff0c;开源的&＃xff0c;免费的代码库。可以优化html、css和js的性能&＃xff0c;构建高效的应用程序&＃xff0c;而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。

Android studio(Android SDK,需要配置SDK环境变量)

下载&＃xff1a;https://developer.android.google.cn/studio/intro/index.html
检测&＃xff08;命令行&＃xff09;&＃xff1a;android &＃xff08;打开SDK manager即可&＃xff09;

Ant

下载&＃xff1a;官网
http://ant.apache.org/bindownload.cgi
解压文件后配置环境&＃xff1a;
window中设置ant环境变量&＃xff1a;
ANT_HOME &＃xff1a; C:/ apache-ant-1.8.1
path &＃xff1a; C:/ apache-ant-1.8.1/bin
classpath &＃xff1a; C:/apache-ant-1.8.1/lib
检测&＃xff08;命令行&＃xff09;&＃xff1a;ant -version
介绍&＃xff1a;Ant是java平台下一个打包部署的工具&＃xff0c;使用cordova命令的时候需要借助这个工具。

jdk&＃xff08;需要配置环境变量&＃xff09;

下载&＃xff1a;http://java.oracle.com/
检测&＃xff08;命令行&＃xff09;&＃xff1a;java -version

参考&＃xff1a;

Cordova环境搭建 & HelloWorld
PhoneGap&＃43;Angularjs&＃43;ionic 环境搭建
Cordova&＃43;Angularjs&＃43;Ionic 混合开发入门讲解

创建Cordova的第一个应用 HelloWorld

1、在D:\test 目录下新建一个项目
2、打开命令行
3、进入D盘 &＃xff1a;d:
4、进入test文件夹&＃xff1a;cd test
5、cordova create hello com.example.hello HelloWorld
hello&＃xff1a;项目文件夹名
com.example.hello&＃xff1a;Java类的包名
HelloWorld&＃xff1a;app的名称
6、cd hello
7、cordova platform add android
add android&＃xff1a;应用到Android&＃xff0c;add iOS:应用到iOS
8、cordova build
(时间比较久&＃xff0c;我用了二十分钟…)

cordova构建的项目结构&＃xff1a;

9、运行到浏览器&＃xff1a;cordova serve android

将url粘贴复制到浏览器打开即可。

10、AndroidStudio导入Cordova项目
经过上一步的cordova项目build成功后&＃xff0c;我们打开D:\test\hello\platforms\android目录&＃xff0c;会看到一个build.gradle&＃xff0c;它就是我们项目的关键&＃xff0c;因为项目本身就是用gradle来构建的。

最后一步&＃xff0c;我们打开AndroidStudio来导入上面看到的.gradle文件&＃xff0c;就可以在AndroidStudio中来编写我们的应用了&＃xff0c;也可以很方便的在模拟器上预览。

初次导入的时候会从网络下载gradle相关的东西&＃xff0c;要等个10分钟。导入完成后我们运行模拟器&＃xff0c;效果&＃xff1a;

推荐&＃xff1a;

跨平台框架Cordova 命令行简介&＃xff08;CLI&＃xff09;