ionic+angularjs开发hybrid App(环境配置+创建测试项目)
本文使用的系统是win10
因为后期需要使用nodejs 所以先把node装好

下载JDK并配置Java运行环境
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
安装后配置环境变量 如下:
新增JAVA_HOME:(自己的安装路径和版本)
C:\Program Files\Java\jdk1.8.0_73
(注意:JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路径,此路径下包括lib,bin,jre等文件夹。)配置如图

编辑path环境变量:
%JAVA_HOME%\bin;
在系统变量Path的值的最前面加入。否则可能在运行时,系统选择部署在前面的jre环境。(注意:Path使得系统可以在任何路径下识别java命令)

新增CLASSPATH:
.;%JAVA_HOME%\lib
注意: 点号表示当前目录,不能省略( CLASSPATH为java加载类(class or lib)路径,只有类在classpath中,java命令才能识别)
测试环境是否配置成功:“开始”->“运行”,键入“cmd”,键入命令“java -version”,出现下图画面,说明环境变量配置成功。 (win键+R–>cmd –>回车)

配置Apache-ant:(在path变量里编辑)
下载Apache Ant 并将其bin目录路径添加进Path路径
http://mirror.tcpdiag.net/apache/ant/binaries/
下载完成后解压 ,如存放在C盘 Program Files目录下则Path中添加如下值 C:\Program Files\apache-ant-1.9.4\bin;并添加path环境变量(添加方法和java配置path变量是一样的,注意以 ; 隔开每个环境变量的值,如上图path值)
C:\Program Files\apache-ant-1.9.4\bin
测试Apache-ant是否配置好

下载、配置Android Studio
推荐:http://rj.baidu.com/soft/detail/27390.html?ald
下载后进行安装,会提示选择SDK安装路径,我们主要使用的就是这个SDK。
完成安装后
增加ANDROID_HOME环境变量:
C:\Users\Administrator\AppData\Local\Android\sdk
在path变量中添加:
%ANDROID_HOME%\platform-tools;
%ANDROID_HOME%\tools;
如上 环境就配置好了
创建一个ionic项目
安装Ionic 和 Cordova(将cordova和ionic包安装到全局环境中)
win+R–>cmd(管理员)
根据网络环境,安装的时间有所不同
npm install -g cordova ionic
安装完成后,就可以创建一个Ionic项目(官方提供的)
ionic start myApp tabs(底部导航)
ionic start myApp blank(空白项目)
ionic start myApp sidemenu(侧边导航菜单)
启动ionic项目
cd myApp(myApp为项目名称)
ionic serve
键入ionic server后,会自动在浏览器打开项目。
编译成Android apk
ionic build android
ionic+angularjs开发hybrid App(环境配置+创建测试项目)的更多相关文章
- webstorm前端开发工具vue环境配置及运行项目
1:webstorm的安装:2:node.js的安装3:安装Git4:vue-cli 安装前面两步就可以把项目启动了,安装Git主要是打开命令窗口,这样就可以用liunx命令了,原理跟cmd差不多 V ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
- Ionic开发Hybrid App问题总结
http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_buil ...
- 【转载】用Ionic开发hybrid APP
使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动 ...
- 第一篇 Windows 8 开发Windows Metro style app环境配置
半 饱问 题 到 我 这 里 为 止! 第一篇 Windows 8 开发Windows Metro style app环境配置 2012-09-24 08:24 by 半饱, 1289 阅读, 3 ...
- 实践分享:开始用Cordova+Ionic+AngularJS开发App
http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...
- 详解LUA开发工具及其环境配置
LUA开发工具及其环境配置是本文要介绍的内容,主要是来了解并学习lua开发工具的使用和环境的配置,第一次接触LUA的话,就跟本人一起学习吧.看我能不能忽悠到你. LUA是语言,那么一定有编写的工具.第 ...
- eclipse弃坑记第一篇之在idea上配置Tomcat环境并创建Javaweb项目的详细步骤原创
IntelliJ IDEA是一款功能强大的开发工具,在代码自动提示.重构.J2EE支持.各类版本工具(如git.svn.github).maven等方面都有很好的应用. IntelliJ IDEA有免 ...
- Windows下OpenFOAM开发及使用环境配置指南 (2)【转载】
转载自:http://openfoam.blog.sohu.com/158751915.html *************************************************** ...
随机推荐
- jquery数组删除指定元素的方法:grep()
jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...
- JVM之方法区
基本特性: 线程共享区域,存储被JVM加载的类信息.常量.静态变量.即时编译器编译的代码等 堆的逻辑部分,不限定方法去内的内存位置和编译代码的管理策略,不限定实现垃圾回收 容量可不定也可动态扩展,不 ...
- Resize Instance 操作详解 - 每天5分钟玩转 OpenStack(41)
Resize 的作用是调整 instance 的 vCPU.内存和磁盘资源. Instance 需要多少资源是定义在 flavor 中的,resize 操作是通过为 instance 选择新的 fla ...
- Javascript 中的严格模式
原文:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 一.概述 除了正常运行模式,ECMAscript 5添加了第 ...
- 烂泥:openvpn tun模式下客户端与内网机器通信
本文由秀依林枫提供友情赞助,首发于烂泥行天下 前两篇文章我们介绍了有关openvpn的搭建与配置文件的讲解,这篇文章我们再聊介绍下,在tun模式下openvpn客户端如何与内网机器通信的问题. 一.实 ...
- 更改CentOS7的yum更新源
1. 备份现有源: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.下载163源 wget h ...
- [WPF系列-高级TemplateBinding vs RelativeSource TemplatedParent]
What is the difference between these 2 bindings: <ControlTemplate TargetType="{x:Type Button ...
- Winform菜单和工具栏控件
1.ContextMenuStrip--右键菜单 可以绑定在任何一个控件上,添加操作快捷键,并可以设置多层 每行相当于一个按钮,输入-可添加分割线 2.MenuStrip--菜单 优先级最高,一定会出 ...
- 总结javascript中的全局变量和局部变量的区别以及声明函数和调用函数的区别
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8&quo ...
- java线程跟多线程
java创建线程两种方式: 1.继承Thread创建线程 /** * Created by lsf on 16/4/18. */ class NewThread extends Thread { Ne ...