angularjs入门

当前位置:首页>AngularJS>angularjs入门>使用ionic+angular+phonegap开发APP入门

使用ionic+angular+phonegap开发APP入门

时间:2015-06-12 14:49来源:网络整理 作者:KKWL 点击:
使用ionic+angular+phonegap开发APP入门 web代码网2014-12-13 6015 阅读 web 有时候朋友问我是做什么的?我说以前是用PHP写后台,最近是用H5写前台APP(俗称的Hybrid App); 在公司做了几个H5的项目之后

使用ionic+angular+phonegap开发APP入门

web代码网 2014-12-13 6015 阅读

web

有时候朋友问我是做什么的?我说以前是用PHP写后台,最近是用H5写前台APP(俗称的Hybrid App);
在公司做了几个H5的项目之后,有时候也想抽空研究下H5写一些APP;总觉得写APP的开发更加有底气。尽管我偶尔有空也会研究下android,swift(Objective-C实在是难懂,没兴趣深入研究),也希望H5能开发一些不错的APP;
国内有包括APPCan等公司慢慢在发力,是很不错的趋势;由于mac上面无法使用APPCAN,所以我就没继续研究了,就看国外是怎么的一个过程;偶尔的机会发现了有人用ionic+angularjs+phonegap,很不错的尝试;于是我也想摸索下;

结论:使用上述的方法开发app,是可行的,至少我再android+IOS上面打包是成功了,体验还可以,开发比较方便,基于一些现成的组件;能在1~2天开发一个简单的demo;效率比较高,不过你需要对angularjs有一定的熟悉和了解;H5也一样;所以我也是慢慢学习慢慢研究;

入门必须:
(1) 看一遍ionic的文档, ;
Ionic 是一个用HTML, CSS 跟JS 开发的一个用于移动设备的web app 开发框架,采用 Sass与AngularJS 开发。

(2) 看一遍phonegap的文档;目前phonegap又取名为cordova;有些常用的命令总结如下:

项目例子:
ionic:
Create hybrid mobile apps with the web technologies you love.
Free and open source, Ionic offers a library of mobile-optimized HTML,
CSS and JS components, gestures, and tools for building highly interactive apps.
Built with Sass and optimized for AngularJS.

Qunee有一个上海地铁图的例子,有客户希望转成mobile app,考察过android的webview,以及PhoneGap等多种Hybrid App方案后,最后选择使用ionic,准确的说是ionic + PhoneGap + Qunee ionic是一种基于HTML5创建Hybrid应用的前端框架,借助phoneGap + angularJS实现一套跨平台,轻量的移动UI方案,本文将介绍借助ionic实现移动版Qunee上海地图的示例
背景知识

安装ionic所需软件环境 – java, android sdk等

ionic实际上是集大成者,借助了多种技术,自身是一套UI框架,结合PhoneGap实现跨平台移动APP,需要先安装好依赖的程序,比如nodejs, java, ADT, ant, xcode等,并设置好java_home, 添加android sdk tool到环境变量

mac os x下安装ant

brew update
brew install ant
#mac osx 下,打开.bash_profile文件
cd ~
open .bash_profile
#设置相关的Path,mac os x下增加类似下面的内容
export JAVA_HOME= /usr/libexec/java_home -v 1.8

# android
export PATH=${PATH}:/Users/macbook/WorkSpace/android-sdk-macosx/platform-tools:/Users/macbook/WorkSpace/android-sdk-macosx/tools

安装ionic和cordova

需要首先安装好nodejs,然后通过npm来安装

npm install -g cordova ionic
更多请参考官方文档+google
创建ionic项目q-metro

使用下面的命令创建一个新的项目
ionic start q-metro
初始目录结构如下

codingless|使用ionic+angular+phonegap开发APP入门

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="http://www.webdoes.com/archives/lib/ionic/css/ionic.css"> <link href="http://www.webdoes.com/archives/css/style.css"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="http://www.webdoes.com/archives/css/ionic.app.css"> --> <!-- ionic/angularjs js --> <script src="http://www.webdoes.com/archives/lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="http://www.webdoes.com/archives/cordova.js"></script> <!-- your app's js --> <script src="http://www.webdoes.com/archives/js/app.js"></script> </head> <body ng-app="app" ng-controller="Metro" animation="slide-left-right-ios7"> <ion-header-bar> <h1>{{title}}</h1> </ion-header-bar> <ion-content scroll="false"> <div></div> </ion-content> </body> <script src="http://www.webdoes.com/archives/lib/qunee/qunee-min.js"></script> </html>

index.html结构

首先看index.html,是主页面,里面引入了angularjs, cordova等js支持,此外还有app.js, controllers.js, services.js三个文件,这三个文件构建了app的应用逻辑,app是主程序,包含一些设置和启动脚本,services是数据支持部分,也就是model部分,用于提供数据的增删改查操作,controllers用于控制,包含业务逻辑控制代码

------分隔线----------------------------