angular+ionic前后端分离开发项目中的使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Ionic基于AngularJS构建而成，所以学习一些AngularJS的知识很有必要。Ionic并没有独立开发一套完整的Web应用框架，而是对AngularJS进行了扩展，给它添加了大量界面组件和其他的移动端友好的特性。

版本angularjs1.6.X，ionic1.6.7

1.index.html

首先会进入index页面，里面引入了angularjs， cordova等js支持，此外还有app.js, controllers.js, services.js等文件。ng-app=" "，是入口相当于java中的main方法，ng-init进行初始化。

ionic标签：

<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>

导航栏 : ion-nav-bar

回退按钮 : ion-nav-back-button

<ion-nav-view></ion-nav-view>

导航视图 : ion-nav-view路由对应的页面，用来替代angular中的ui-view 指令导航中的模板内容将被插入此处

angular模板加载：type="text/ng-template"是指明这是ng模板，id属性是指实际使用模板时的一个引用，标签之间的内容才是实际的模板内容。而且，需要注意，id绝对不是URL，这个script标签绝对不会发出HTTP请求。参考：https://blog.csdn.net/yczz/article/details/48316167

ionic 模态窗口：ion-modal-view在service.js中注入了$ionicModal，进行初始化操作：fromTemplate(templateString, options) ，templateString可以是id的值"browser.html"

效果类似于点击“用户协议”之后，会弹出用户协议具体内容

参考：http://www.runoob.com/ionic/ionic-ion-modal.html

https://www.cnblogs.com/CheeseZH/p/4522264.html

2.app.js是主程序，包含一些设置和启动脚本angular.module('ePolicy', ['ionic', 'ePolicy.controllers', 'ePolicy.services', 'ePolicy.directives', 'ePolicy.filters', 'ionic-datepicker','ionic-datepickerg', 'jm.i18next'])

.run(function($ionicPlatform, $rootScope, $state, $ionicHistory,HttpRequest, $i18next, DeviceInfo, Authorization, LocalStorage, Prompt, HotPush,$location, NoticeCenter, UserAgent, $ionicActionSheet,JPush) {
$ionicPlatform.ready(function() {
// splash 放在最前面热更新才会起作用
// lang
//状态栏(StatusBar)
//... ...
}
//全局变量
$rootScope.
// 返回键退出
$ionicPlatform.registerBackButtonAction(function(e) {}
// 状态监听
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, lionShow) {}
}

解释：

angular中一切是基于模块的angular.module

run方法初始化全局数据，只对全局作用域起作用，如$rootScope.多个控制器之间可以共享数据angular.run和angular.config的区别

$ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件，相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理

$ionicPlatform.registerBackButtonAction

$rootScope.$on('$stateChangeStart')：监听状态的改变

$ionicPlatform文档:http://www.ionic.wang/js_doc-index-id-56.html

.config(function($ionicConfigProvider,$compileProvider, $sceDelegateProvider, $httpProvider, $stateProvider, $urlRouterProvider, $i18nextProvider) {

// 国际化标签翻译
$i18nextProvider.options = {
lng: 'zh', // If not given, i18n will detect the browser language.
fallbackLng: 'zh', // Default is dev
useCookie: false,
useLocalStorage: false,
resGetPath: 'locales/__lng__/__ns__.json'
};

//路由
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabsCtrl'
}) .state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home/tab-home.html?version=20170917',
controller: 'HomeCtrl'
}
}
})
//... ...
;
$urlRouterProvider.otherwise('/tab/home');
}

解释：

ui-Router文档：https://blog.csdn.net/mcpang/article/details/55101566

$state / $stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的 url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。
ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。
$urlRouter / $urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。
state(name,stateConfig);

参数：

name：状态的名称。
stateConfig：状态配置对象。配置具有以下各项属性：
template： string/function，html模板字符串，或者一个返回html模板字符串的函数。
templateUrl：string/function，模板路径的字符串，或者返回模板路径字符串的函数。
templateProvider：function，返回html模板字符串或模板路径的服务。
controller：string/function，新注册一个控制器函数或者一个已注册的控制器的名称字符串。
controllerProvider：function，返回控制器或者控制器名称的服务
controllerAs：string，控制器别名。
parent：string/object，手动指定该状态的父级。
resolve：object，将会被注入controller去执行的函数，<string,function>形式。
url：string，当前状态的对应url。
views：object，视图展示的配置。<string,object>形式。
abstract：boolean，一个永远不会被激活的抽象的状态，但可以给其子级提供特性的继承。默认是true。
onEnter：function，当进入一个状态后的回调函数。
onExit：function，当退出一个状态后的回调函数。
reloadOnSearch：boolean，如果为false，那么当一个search/query参数改变时不会触发相同的状态，用于当你修改$location.search()的时候不想重新加载页面。默认为true。
data：object，任意对象数据，用于自定义配置。继承父级状态的data属性。换句话说，通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
params：url里的参数值，通过它可以实现页面间的参数传递。

name必须是唯一，相当于id，跳转可以通过$state.go(name);

地址栏跳转或a标签的href通过url跳转。

项目中views有三个tabs

tab-home、tab-my、tab-policy，每个tab下面有templateUrl和controller对应，（多个页面可共用一个controller，但一个页面不能有多个controller）

ionic tab(选项卡)：在tabs.html页面

<ion-tabs class="tabs-icon-top tabs-color-active-assertive" ng-class="hideTabs"> 
<ion-tab title="{{'tabs.home' | i18next}}" icon-off="ion-ios-home-outline-custom" icon-on="ion-ios-home-custom" ng-click="click()">
<ion-nav-view name="tab-home">
</ion-nav-view>
</ion-tab>

<ion-tab title="{{'tabs.policy' | i18next}}" icon-off="ion-ios-paper-outline-custom" icon-on="ion-ios-paper-custom" ng-click="turn('policy')">
<ion-nav-view name="tab-policy"></ion-nav-view>
</ion-tab> 
<ion-tab title="{{'tabs.my' | i18next}}" icon-off="ion-ios-person-outline-custom" badge="badges.carts" badge-style="badge-assertive"icon-on="ion-ios-person-custom" ng-click="clickMy()">
<ion-nav-view name="tab-my"></ion-nav-view>
</ion-tab>
</ion-tabs>

api：http://www.runoob.com/ionic/ionic-tab.html

其他模板页面： （一般一个template页面对应一个controller）

模板视图 : ion-view

ionContent易用的内容区域，该区域可以用Ionic的自定义滚动视图进行配置，或浏览器内置的溢出滚动。

指令：directive

.directive('timerbutton', function($interval, $i18next, Items, $timeout, HttpRequest, Authorization, Prompt) {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
scope.timer = false;
scope.timeout = 60000;
scope.timerCount = scope.timeout / 1000;
scope.text = "获取验证码";
scope.onClick = function() {
if(scope.mobileTel.mobileTel == undefined || scope.mobileTel.mobileTel == "") {
Prompt.showOnce($i18next("lamessage.APP00015"));
return false;
};
var temp = scope.mobileTel.mobileTel.substring(0, 1);
var temp2 = scope.mobileTel.mobileTel.length;
if(temp != "1" || temp2 != 11) {
Prompt.showOnce($i18next("lamessage.APP00016"));
return false;
};
HttpRequest.query('Policy/getUserInfo/' + Authorization.getLoginVO().userid, true)
.success(function(data) {
var userInfo = angular.fromJson(data.policyBeanVO.pipBenfRec);
var mobileTel = userInfo.clientEnqRec.mobileTel;
if(mobileTel==scope.mobileTel.mobileTel){
scope.showTimer = true;
scope.timer = true;
scope.text = "秒后重新获取";
var counter = $interval(function() {
scope.timerCount = scope.timerCount - 1;
}, 1000);
$timeout(function() {
scope.text = "获取验证码";
scope.timer = false;
$interval.cancel(counter);
scope.showTimer = false;
scope.timerCount = scope.timeout / 1000;
}, scope.timeout);
HttpRequest.query("Policy/Sms/" + Authorization.getLoginVO().userid + "/" + Authorization.getLoginVO().user.sevrbrh + "/" + scope.mobileTel.mobileTel, true)
.success(function(data) {
var policyBeanVO = data.policyBeanVO;
if(policyBeanVO.message.code != 0) {
Prompt.showOnce(policyBeanVO.message.message);
return false;
} else {
scope.validCode = policyBeanVO.message.message;
Items.removeAll();
Items.add(scope.validCode);
};
});
}else{
Prompt.showOnce("手机号与系统预留不一致，请核对后重新输入");
return false;
}
});
}
},
template: '<button on-tap="onClick()" class="button button-small button-assertive" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
};
})