使用ionic+angular+phonegap开发APP入门 - 为程序员服务
使用ionic+angular+phonegap开发APP入门
64940 阅读
有时候朋友问我是做什么的？我说以前是用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；有些常用的命令总结如下：
项目例子：http://my.oschina.net/nosand/blog/294011
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文件
open .bash_profile
#设置相关的Path，mac os x下增加类似下面的内容
export JAVA_HOME=
/usr/libexec/java_home -v 1.8
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 /getting-started/
创建ionic项目q-metro
使用下面的命令创建一个新的项目
ionic start q-metro
初始目录结构如下
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&
&title&&/title&
&link href="/archives/lib/ionic/css/ionic.css" rel="stylesheet"&
&link href="/archives/css/style.css" rel="stylesheet"&
&!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
&link href="/archives/css/ionic.app.css" rel="stylesheet"&
&!-- ionic/angularjs js --&
&script src="/archives/lib/ionic/js/ionic.bundle.js"&&/script&
&!-- cordova script (this will be a 404 during development) --&
&script src="/archives/cordova.js"&&/script&
&!-- your app's js --&
&script src="/archives/js/app.js"&&/script&
&body ng-app="app" ng-controller="Metro" animation="slide-left-right-ios7"&
&ion-header-bar class="bar-dark"&
&h1 class="title"&{{title}}&/h1&
&/ion-header-bar&
&ion-content scroll="false"&
&div id="canvas" style="width: 100%; height: 100%;"&&/div&
&/ion-content&
&script src="/archives/lib/qunee/qunee-min.js"&&/script&
index.html结构
首先看index.html，是主页面，里面引入了angularjs， cordova等js支持，此外还有app.js, controllers.js, services.js三个文件，这三个文件构建了app的应用逻辑，app是主程序，包含一些设置和启动脚本，services是数据支持部分，也就是model部分，用于提供数据的增删改查操作，controllers用于控制，包含业务逻辑控制代码
先在桌面环境下测试，Chrome运行正常，然后编译成各种移动平台版本，这里以android版本为例
ionic start q-metro
cd q-metro
ionic platform add android
ionic build android
ionic run android
如果要在虚拟机中测试，可以改用
ionic emulate android
ionic支持多种移动平台，如果希望创建ios可以将”android”改成”ios” 下面是android设备上真机运行界面如下：
给大家看看一个简单的demo的效果：
源码如下也很简单，供大家学习：
index.html如下：
&!DOCTYPE html&
&html ng-app="ionicApp"&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&
&title&Ionic-AngularJS Kitchen Sink&/title&
&!--&link href="/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet"&--&
&!--&script src="/1.0.0-beta.1/js/ionic.bundle.min.js"&&/script&--&
&link href="/archives/lib/ionic/css/ionic.beta.min.css" rel="stylesheet"&
&script src="/archives/lib/ionic/js/ionic.bundle.beta.min.js"&&/script&
&script src="/archives/js/app.js"&&/script&
.box {height:300padding: 10px}
&body ng-controller="AppCtrl"&
&ion-nav-bar class="nav-title-slide-ios7 bar-positive"&
&ion-nav-back-button class="button-icon ion-arrow-left-c"&
&/ion-nav-back-button&
&/ion-nav-bar&
&ion-nav-view animation="slide-left-right"&&/ion-nav-view&
&script id="menu.html" type="text/ng-template"&
&ion-side-menus&
&ion-side-menu side="left"&
&ion-header-bar class="bar-positive"&
&h1 class="title"&Side Menu&/h1&
&/ion-header-bar&
&ion-content&
&ul class="list"&
&a href="/archives/609.html#/menu/tab/buttons" class="item" menu-toggle="left"&问答服务&/a&
&!--&a href="/archives/609.html#/menu/keyboard" class="item" menu-toggle="left"&Keyboard Input Types&/a&--&
&!--&a href="/archives/609.html#/menu/slidebox" class="item" menu-toggle="left"&Slide Box&/a&--&
&a href="/archives/609.html#/menu/about" class="item" menu-toggle="left"&About&/a&
&/ion-content&
&/ion-side-menu&
&ion-side-menu-content&
&ion-nav-view name="menuContent"&&/ion-nav-view&
&/ion-side-menu-content&
&/ion-side-menus&
&script id="tabs.html" type="text/ng-template"&
&ion-nav-bar class="bar-positive"&
&ion-nav-back-button class="button-icon ion-arrow-left-c"&
&/ion-nav-back-button&
&ion-nav-buttons side="left"&
&button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"&&/button&
&/ion-nav-buttons&
&ion-nav-buttons side="right"&
&button class="button button-icon button-clear ion-compose" ng-click="modal.show()"&&/button&
&/ion-nav-buttons&
&/ion-nav-bar&
&ion-tabs class="tabs-icon-top tabs-positive"&
&ion-tab title="问答" icon="ion-pricetag" href="/archives/609.html#/menu/tab/buttons"&
&ion-nav-view name="buttons-tab"&&/ion-nav-view&
&/ion-tab&
&ion-tab title="日记" icon="ion-clipboard" href="/archives/609.html#/menu/tab/list"&
&ion-nav-view name="list-tab"&&/ion-nav-view&
&/ion-tab&
&ion-tab title="健康汇" icon="ion-settings" href="/archives/609.html#/menu/tab/form"&
&ion-nav-view name="form-tab"&&/ion-nav-view&
&/ion-tab&
&/ion-tabs&
&script id="buttons.html" type="text/ng-template"&
&ion-view title="大咖问答"&
&ion-content class="padding"&
&div class="head" style="background-image: url(img/headImg.jpg);background-size:position:height: 120"&
&div class="item item-divider"&
&ion-list&
&ion-item ng-repeat="testItem in testItems" item="testItem" href="/archives/609.html#/menu/tab/testItem" data-id="{{testItem.id}}"&
问题标题： {{ testItem.title }}
&/ion-item&
&/ion-list&
&/ion-content&
&/ion-view&
&script id="item.html" type="text/ng-template"&
&ion-view title="Item"&
&ion-content class="padding"&
&p&内容暂时没提供&/p&
&/ion-content&
&/ion-view&
&script id="testItem.html" type="text/ng-template"&
&ion-view title="testItem"&
&ion-content class="padding"&
&p&内容暂时没提供&/p&
&/ion-content&
&/ion-view&
&script id="list.html" type="text/ng-template"&
&ion-view title="日记列表"&
&ion-content&
&ion-list show-delete="data.showDelete" on-delete="onItemDelete(item)" option-buttons="itemButtons"&
&div class="list"&
&!--&div class="item item-divider"&--&
&ion-item ng-repeat="item in items" item="item" href="/archives/609.html#/menu/tab/item"&
Item {{ item.id }}
&/ion-item&
&/ion-list&
&/ion-content&
&/ion-view&
&script id="form.html" type="text/ng-template"&
&ion-view title="健康专栏"&
&ion-content class="padding"&
开发中，尽请期待...
&/ion-content&
&/ion-view&
&script id="slidebox.html" type="text/ng-template"&
&ion-view&
&ion-header-bar class="bar-positive"&
&button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"&&/button&
&h1 class="title"&Slide Box&/h1&
&/ion-header-bar&
&ion-content&
&ion-slide-box&
&ion-slide&
&div class="box"&
&h2&Box #1&/h2&
&p&Content goes here&/p&
&/ion-slide&
&ion-slide&
&div class="box"&
&h2&Box #2&/h2&
&p&Content goes here&/p&
&/ion-slide&
&ion-slide&
&div class="box"&
&h2&Box #3&/h2&
&p&Content goes here&/p&
&/ion-slide&
&/ion-slide-box&
&/ion-content&
&/ion-view&
&script id="keyboard.html" type="text/ng-template"&
&ion-view&
&ion-header-bar class="bar-positive"&
&button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"&&/button&
&h1 class="title"&Keyboard Input&/h1&
&/ion-header-bar&
&ion-content class="padding"&
&div class="list"&
&label class="item item-divider"&
Input types for popup keyboard
&label class="item item-input"&
&span class="input-label"&Text&/span&
&input type="text" ng-model="user.username"&
&label class="item item-input"&
&span class="input-label"&Password&/span&
&input type="password" ng-model="user.password"&
&label class="item item-input"&
&span class="input-label"&Email&/span&
&input type="email"&
&label class="item item-input"&
&span class="input-label"&Tel&/span&
&input type="tel"&
&label class="item item-input"&
&span class="input-label"&Number&/span&
&input type="number"&
&label class="item item-input"&
&span class="input-label"&Date&/span&
&input type="date"&
&label class="item item-input"&
&span class="input-label"&Month&/span&
&input type="month"&
&/ion-content&
&/ion-view&
&script id="about.html" type="text/ng-template"&
&ion-view&
&ion-header-bar class="bar-positive"&
&button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"&&/button&
&h1 class="title"&About&/h1&
&/ion-header-bar&
&ion-content class="padding"&
&div class="card"&
&div class="item"&
&h3&本测试demo由徐杰开发设计，仅供参考&/h3&
&p&&a href="" target="_blank"&联系他&/a&&/p&
&/ion-content&
&/ion-view&
&script id="modal.html" type="text/ng-template"&
&div class="modal"&
&ion-header-bar class="bar bar-header bar-positive"&
&h1 class="title"&咨询&/h1&
&button class="button button-clear button-primary" ng-click="modal.hide()"&取消&/button&
&/ion-header-bar&
&ion-content class="padding"&
&div class="list"&
&label class="item item-input"&
&span class="input-label"&标题&/span&
&input type="text"&
&label class="item item-input"&
&span class="input-label"&内容&/span&
&textarea rows="4"&&/textarea&
&button class="button icon icon-right ion-arrow-right-c button-balanced button-block"&提交&/button&
&/ion-content&
核心代码app.js如下：
angular.module('ionicApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu', {
url: "/menu",
abstract: true,
templateUrl: "menu.html",
controller: 'MenuCtrl'
.state('menu.tabs', {
url: "/tab",
'menuContent' :{
templateUrl: "tabs.html"
.state('menu.tabs.buttons', {
url: "/buttons",
'buttons-tab': {
templateUrl: "buttons.html",
controller: 'ButtonsTabCtrl'
.state('menu.tabs.list', {
url: "/list",
'list-tab': {
templateUrl: "list.html",
controller: 'ListCtrl'
.state('menu.tabs.item', {
url: "/item",
'list-tab': {
templateUrl: "item.html"
.state('menu.tabs.testItem', {
url: "/testItem",
'buttons-tab': {
templateUrl: "testItem.html"
.state('menu.tabs.form', {
url: "/form",
'form-tab': {
templateUrl: "form.html"
.state('menu.keyboard', {
url: "/keyboard",
'menuContent': {
templateUrl: "keyboard.html"
.state('menu.slidebox', {
url: "/slidebox",
'menuContent': {
templateUrl: "slidebox.html",
controller: 'SlideboxCtrl'
.state('menu.about', {
url: "/about",
'menuContent': {
templateUrl: "about.html"
$urlRouterProvider.otherwise("menu/tab/buttons");
.controller('ListCtrl', function ($scope) {
$scope.data = {
showDelete: false
$scope.itemButtons = [
text: 'Delete',
type: 'button-assertive',
onTap: function (item) {
alert('Delete Item: ' + item.id + ' ?');
$scope.onItemDelete = function (item) {
$scope.items.splice($scope.items.indexOf(item), 1);
$scope.items = [
title:'慢性鼻炎怎么预防？'
title:'高血压如何预防？'
title:'冠心病如何有效治疗？'
title:'高血压如何预防？'
.controller('ButtonsTabCtrl', function ($scope, $ionicPopup, $ionicActionSheet, $ionicModal) {
$scope.showPopup = function () {
$ionicPopup.alert({
title: 'Popup',
content: 'This is ionic popup alert!'
$scope.showActionsheet = function () {
$ionicActionSheet.show({
titleText: 'Ionic ActionSheet',
buttons: [
text: 'Facebook'
text: 'Twitter'
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function () {
console.log('CANCELLED');
buttonClicked: function (index) {
console.log('BUTTON CLICKED', index);
destructiveButtonClicked: function () {
console.log('DESTRUCT');
$scope.testItems = [
title:'慢性鼻炎怎么预防？'
title:'高血压如何预防？'
title:'冠心病如何有效治疗？'
title:'高血压如何预防？'
$ionicModal.fromTemplateUrl('modal.html', function (modal) {
$scope.modal =
animation: 'slide-in-up'
.controller('SlideboxCtrl', function($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
.controller('MenuCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
$ionicModal.fromTemplateUrl('modal.html', function (modal) {
$scope.modal =
animation: 'slide-in-up'
.controller('AppCtrl', function() {
ionic.Platform.ready(function() {
Now we can tell cordova to generate our release build:
$ cordova build --release android
在IOS中也是一样，不过IOS要打包成ipa，需要开发者账号，有兴趣朋友求提供下，谢谢！
Del.icio.us
StumbleUpon
You might be interested in this:
Copyright (C)
], All Right Reserved. 2015.
紧随web潮流
原文地址：, 感谢原作者分享。
您可能感兴趣的代码2990人阅读
Ionic（7）
一些常识与技巧
list&有延迟，可以在ion-content处使用&overflow-scroll=&true&尝试在&i&上用ng-click上是没效果的&label&标签内的事件会在整个label内被触发，点哪都触发快捷修改背景色style=&background-color: #212326;&能用ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div可以用ng-class=&{'important': post.important}&配合css 根据列表元素显示不同的效果获取日期用$filter，var
postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');列表中的元素不能写成&id : 4，应写成&id
: &4&,注意在创建id变量的时候也需要转成string,如var id = InfoListService.getListLength()+1+&&;使用$log进行log输出,为什么用$log而不是console.log呢？可以看看在安卓上的体验比较差，动画有延迟？可以试试controllers和services&的文件名可能会重合，但是他们意义差不多，可以将controllers中的文件名小写，对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService安装cordova插件的时候用ionic plugin add ...的方式添加，这样会在package.json中添加这个插件的条目，如果有人clone了你的项目想在本地运行，可以用ionic
state restore它会根据cordovaPlugins条目安装对应的插件。如果直接用cordova
plugin add&安装则不会更新package.json。
上传base64编码的时候如果提示413错误，是因为文件过大导致的，可以在nodejs中设置bodyparser的文件限制:
var bodyParser = require('body-parser');
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
img 中 base64编码的图片无法显示？在源码中发现angular添加了unsafe标签？需要在白名单中添加data:image
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):|data:image\//);
有时候pm2运行有问题，重启一下即可
在ios设备上运行ionic run ios --device
如何在某个界面中去掉导航栏?
如果某个界面上不想要导航栏，可以简单地在最顶端的标签中添加hide-nav-bar=&true&
如何在ionic中加载本地图片?
对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如www/css/style.css要加../,否则在浏览器中可以正常显示，在设备上不行，结构如下所示：
.login-page {
background:url(../img/signup_bg.png);
background-size:
background-repeat: no-
但是对于在页面中定义的图片路径，从www路径开始算,否则浏览器中可显示，但设备上不行,img文件夹和index.html在一级,如：
&img src=&img/commander.jpg&&
如何在ionic中嵌入网页代码?
使用ng-bind-html这个类,不过它会过滤原始html的标签，我们可以引入$sce模块，用$sce.trustAsHtml()方法信任我们获取的网页
&ion-nav-view name=&menuContent&&&可以指定name，然后在子状态中使用该name，ionic就知道该把该状态的template渲染到哪边了。例如：
// signup page
.state('auth.signup', {
url: '/signup',
'auth-signup': {
templateUrl: 'templates/auth-signup.html',
controller: 'SignUpCtrl'
另有一个tabs中声明该auth-signup:
&ion-tab title=&Sign Up& icon-on=&ion-ios-personadd&
icon-off=&ion-ios-personadd-outline& href=&#/auth/signup&&
&ion-nav-view name=&auth-signup&&&/ion-nav-view&
&/ion-tab&
运行serve命令时ionic报错?
ionic $ An uncaught exception occured and has been reported to Ionic
看看你是不还有一个终端在运行着serve呢？
用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?
可以用ionic serve -all的方法解决
加载页面的时候会看到双括号一闪而过？
angularjs&在使用双括号的时候，第一个加载的页面，也就是应用中的index.html,其未被渲染好的模版可能会被用户看到。用ng-bind就不会遇到这个问题。造成这种现象的原因是，浏览器需要首先加载HTML页面，渲染它，然后Angular才有机会把它解释成你期望看到的内容。不过好消息是，在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作，建议使用ng-bind。
ng-bind使用方式如下:&&p
ng-bind=&greeting&&&/p&
更新了数据，如何让界面更新呢？
可以用广播，注意
如何实现IonicView中card上面有一列分割线的效果?
在css里定义
#info-up {
border-top: 4px solid #f06336;
controller.js和service.js文件越来越大怎么办?
所有的控制器不必都放在controllers.js这一个文件中，可以新建controllers文件夹，
然后把每个controller都建一个.js文件，同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖，第一个加载的js中模块中要加[…],其他都不需要。如：
// File : /js/directives/mainDirective.js
angular.module('app.directives',[]);
// File : /js/directives/myGreatDirective.js
angular.module('app.directives')
.directive('myGreatDirective', function(){
// File : /js/directives/myBetterDirective.js
angular.module('app.directives')
.directive('myBetterDirective', function(){
看了解更多,嗯这篇文章写的还不是best practice，因为你还得记着自己把[]写到那个模块里了，统一地写在app.js中即可，在app.js最下面加上类似：
angular.module('fcws.controllers',['ionic', 'fcws.services']);
angular.module('fcws.services', []);
可以达到和上面一样的效果，而且可以统一管理.
如何寻找优秀的范例代码?
目前有些ionic 的app没有进行代码混淆，至少ionic官方的ionic view没有进行代码混淆，下载他们的app，文件名改成zip，解压，所有的 www文件都在assets文件夹中，相当于开源了有木有，看看那些最优秀的practice。看中哪些优秀的app，下下来,如何在googleplay上下载？把googleplay应用的地址贴到中。
如何显示相对时间？
如几分钟前，几天前等,，看
发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?
暂时的解决方法是，不进行翻译校正, 在 /platforms/android/build.gradle 中的android {}节中加入:
lintOptions {
disable 'MissingTranslation'
disable 'ExtraTranslation'
如何在列表右下方添加时间等信息?
span&可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:
&ion-item class=&item item-avatar-left & ng-repeat=&message in messages&&
&img src=&../../img/commander.jpg&&
&span class=&item-note&&{{message.create_at}}&/span&
&h2 &{{message.name}}&/h2&
{{message.content}}&/p&
&/ion-item &
如何回到上一页面?
用$ionicHistory这个模块,引入该模块后使用goBack([backCount])，backCount指定回去多少个页面（-1代表回去一个页面），默认为-1
如何关闭应用?
ionic.Platform.exitApp();
在安卓设备上如何让title居中?
在headerbar中添加align-title=&center&,如:
&ion-header-bar class=&bar-positive& align-title=&center&&
&h1 class=&title&&{{username}}&/h1&
&/ion-header-bar&
不过这个设置对ion-view无效，亲测，如果要统一让所有navbar上的title居中(包括上面的headerbar)，可以在config里设置,如:
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center');
如果要让某一个view title居中，可以用$ionicNavBarDelegate，参考
解决方案是去掉headerbar,添加一个avatar到sidemenu content中，如:
&ion-side-menu side=&left&&
&ion-content class=&bar-positive&&
&ion-list&
&ion-item class=&item item-avatar item-positive& href=&#&&
&img src=&img/commander.jpg&&
&h2 class=& light&&
&i class=&icon ion-ios-star&&&/i&{{title}}
&a&{{username}}&/a&
&/ion-item&
解决方案是给&ion-content&加类has-subheader,同理也可以加has-header。如下:
&ion-content class=&has-header has-subheader&&
对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?
可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖
ionic如何处理回退按钮？例如询问用户是否真的要退出应用
可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件，除去有二级历史页面的我单独判断了下，注意增加依赖。
$ionicPlatform.registerBackButtonAction(function(e) {
var current_state_name = $state.current.
if(current_state_name !== 'sidemenu.post'
&& current_state_name !== 'sidemenu.contact_town' &&
current_state_name !== 'sidemenu.contact_people'){
$ionicPopup.confirm({
title: '退出应用',
template: '您确定要退出xxxx吗?'
}).then(function (res) {
if (res) {
//ionic.Platform.exitApp();
navigator.app.exitApp();
console.log('You are not sure');
e.preventDefault();
navigator.app.backHistory();
ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
在应用的注册或者登录部分，不记名token响应了这个请求并且这个token被存储到本地存储中。当你向后端请求一个服务时，你需要把这个token放在头部中。你可以在app.js的.config方法中使用AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应401或403，跳转到重新登录页面.
$httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
'request': function (config) {
config.headers = config.headers || {};
if (User.getToken()) {
config.headers.Authorization = 'Bearer ' + User.getToken();
'responseError': function (response) {
if (response.status === 401 || response.status === 403) {
//如果之前登陆过
if (User.getToken()) {
$rootScope.$broadcast('unAuthenticed');
return $q.reject(response);
ionic如何实现搜索框内的全部清除按钮?
在label中的input不能嵌入按钮，因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框，注意ng-model需要是一个对象才能置空,变量不行:
&span class=&item-input-wrapper&&
&i class=&icon ion-ios-search placeholder-icon&&&/i&
&input type=&search& placeholder=&请输入姓名前缀& ng-model=&search.key&&
&i class=&icon ion-close-circled placeholder-icon& style=&vertical-align:&
on-tap=&clearSearch()& ng-if=&search.key.length&&&/i&
源引：http://blog.csdn.net/taohai123/article/details/
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：340565次
积分：3243
积分：3243
排名：第10150名
转载：432篇
(3)(25)(26)(50)(11)(1)(7)(3)(22)(42)(27)(64)(6)(3)(11)(62)(32)(1)(1)(18)(23)