angular.run 妙用
**1.浏览器判断**
在angular做微信应用的时候,有时候我们也想把相同一份代码运行在非微信的浏览器上,这时候我们可以在angular的run上写点东西实现~
例如asw.run函数里执行定义一个$rootScope.isWeiXinLogin的函数
.run(['$rootScope', '$route', '$window', '$location', 'Position', '$cookies', 'Request', '$cookieStore',
function($rootScope, $route, $window, $location, position, $cookies, request, $cookieStore) {
//非微信的登陆
$rootScope.isWeiXinLogin = function() {
//判断是否微信登陆
var ua = window.navigator.userAgent.toLowerCase();
//console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko) version/9.0 mobile/13b143 safari/601.1
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
console.log(" 是来自微信内置浏览器");
return true;
} else {
console.log("不是来自微信内置浏览器");
return false;
}
};
]);
这样它能在应用的其他部分之前提前被执行,然后根据$rootScope.isWeiXinLogin的返回我们可以在不同的视图或者控制器有效的进行判断是否为微信浏览器
- angular.module('autumnswind').controller('OrderCtrl', ['$rootScope', '$scope', 'Request', '$cookies', '$window', '$routeParams', '$location', 'Tool',
- function($rootScope, $scope, request, $cookies, $window, $routeParams, $location, tool) {
- if ($rootScope.isWeiXinLogin()) {
- ...
- }
- }
- ]);
**2.登陆判断**
在run里面写登陆判断是一种不错的方案,例如下面我写的这段,配合cookie和我上面的浏览器判断,当我加载页面的时候我就可以调用$rootScope.goLogin方案来判断是否这个路由所在的视图为登陆,如果有这个合法cookie就让它继续运行,不然则返回login页面进行登陆~
$rootScope.goLogin = function(replace) {
if ($rootScope.isWeiXinLogin()) {
if (!replace) {
$cookieStore.remove('loginBack');
delete $cookies.loginBack;
$location.path('login');
} else {
$cookies.loginBack = $location.path();
$location.path('login').replace();
}
} else {
$cookieStore.remove('loginBack');
delete $cookies.loginBack;
$location.path('loginWebapp');
}
};
**3.白名单设置**
var getParam = function(name) {
var search = document.location.search;
var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
var matcher = pattern.exec(search);
var items = null;
if (null != matcher) {
try {
items = decodeURIComponent(decodeURIComponent(matcher[1]));
} catch (e) {
try {
items = decodeURIComponent(matcher[1]);
} catch (e) {
items = matcher[1];
}
}
}
return items;
};
//这个是根据路由name来决定进入那个parts
window.cats = getParam('AutumnsWind');
后来改进了下面这个简单的例子,就可以不用用上面那句代码来实现了
$rootScope.$on('$routeChangeSuccess',
function() {
var route = window.location.href;
if (route.indexOf('/hello/') != -1 && route.indexOf('/autumnswind/') != -1) {
window.AutumnsWindShareUrl = window.location.href;
} else if (route.indexOf('#/index') != -1) {
window.AutumnsWindShareUrl = window.location.href;
} else if (route.indexOf('#/asw'scat/') != -1) {
window.AutumnsWindShareUrl = window.location.href;
} else {
//跳转下载页面
window.AutumnsWindShareUrl = '~autumns~.cn';
}
);
上面我们根据路由发生的变化进行白名单的设置,复杂点的话可以运用一下正则,这样就能很好的过滤我们禁止的url,由于例子就不写这么复杂啦~
**4.设置公共参数**
这个其实就不用写例子了,因为上面的例子也算是这个的一部分吧~
后面有时间慢慢补充~
状态改变事件
$scope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams), {
// 如果需要阻止事件的完成
event
.preventDefault();
});
我先说说这里面的这些参数
event:该事件的基本信息
toState:我们可以得到当前路由的信息,比如路由名称,url,视图的控制器,模板路径等等
toParams:
我们可以得到当前路由的参数
fromState:
我们可以得到上一个路由的信息,比如路由名称,url,视图的控制器,模板路径等等
fromParams:
我们可以得到上一个路由的参数
可以触发的事件包括:
stateChangeStart
当状态改变开始的时候被触发
$stateChangeSuccess
当状态改变成功后被触发
$stateChangeError
当状态改变遇到错误时被触发,错误通常是目标无法载入,需要预载入的数据无法被载入等
曾经写过一个这样的函数来实现路由的参数判断,来设置白名单,那时候这个函数还放在全局变量里面~其实回头想想算是不大好的方法
var ydCreditApp = angular
.module('ydCreditApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'ui.bootstrap',
'datatablesDirectives',
'ngTable',
'ncy-angular-breadcrumb',
// 'angularFileUpload',
// 'smart-table',
'ngFileUpload',
'MessageCenterModule',
'angular-loading-bar',
'toggle-switch',
'invalidModule'
])
.run(
['$rootScope', '$state', '$stateParams', 'AppSession',
function($rootScope, $state, $stateParams, AppSession) {
$rootScope.$state = $state;
console.log($rootScope.$state)
$rootScope.$stateParams = $stateParams; $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
$state.previous = fromState;
$state.previousParams = fromParams;
if (toState.data.requiredLogin && !AppSession.getLogin()) {
$state.go('loginByMobile', {}, {
reload: true
});
event.preventDefault();
}
}); $rootScope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams) {
$rootScope.previousState_name = fromState.name;
$rootScope.previousState_params = fromParams;
}); }
]
).directive('repeatFinish',function(){
return {
link: function($scope,element,attr){
if($scope.$last === true){
//为了防止页面中的值还没有渲染出来,所以添加Timeout来解决
setTimeout(function(){ $scope.$eval( attr.repeatFinish );},1000);
}
}
};
}).config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
cfpLoadingBarProvider.latencyThreshold = 0;
cfpLoadingBarProvider.spinnerTemplate = '<div class="loading-bar-background"><div class="center" id="loading-bar-spinner"><div class="padding"></div><div class="spinner-icon"></div><div class="text">正在执行中,请稍后......</div></div>';
}])
.config(
['$stateProvider', '$urlRouterProvider', '$breadcrumbProvider', '$httpProvider',
function($stateProvider, $urlRouterProvider, $breadcrumbProvider, $httpProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
// if(!IsPC){
// alert("请在PC端登录!");
// return;
// } $urlRouterProvider.otherwise('/');
$stateProvider
.state('loginByMobile', {
url: '/',
templateUrl: 'views/login/loginByMobile.html',
controller: 'loginCtrl',
data: {
requiredLogin: false
}
})
$state.go
$state.go('main.approvedList', {
'type': '所有',
'page':$scope.page,
'ros':$scope.ros,
'mobile':$scope.mobile,
'name':$scope.name ,
'sendCity':$scope.sendCity ,
'arriveCity':$scope.arriveCity ,
'approvedStatus':$scope.approvedStatus ,
'minCreateTime':$scope.minCreateTime ,
'maxCreateTime':$scope.maxCreateTime ,
'minApproveTime':$scope.minApproveTime ,
'maxApproveTime':$scope.maxApproveTime }, {reload: true});
angular.run 妙用的更多相关文章
- angular run()运行块
和配置块不同,运行块在注入器创建之后被执行,它是所有AngularJS应用中第一个被执行的方法. 运行块是AngularJS中与main方法最接近的概念.运行块中的代码块通常很难进行单元测试,它是和应 ...
- angular.run和angular.config的区别
ng的运行机制: config阶段是给了ng上下文一个针对constant与provider修改其内部属性的一个阶段 而run阶段是在config之后的在运行独立的代码块,通常写法runBlock 简 ...
- angular+ionic前后端分离开发项目中的使用
Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要.Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其 ...
- Angular入门到精通系列教程(6)- Angular的升级
1. 摘要 2. https://update.angular.io/ 3. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 Node: 12.18.3 npm ...
- angular1.x + ES6开发风格记录
angular1.x和ES6开发风格 一.Module ES6有自己的模块机制,所以我们要通过使用ES6的模块机制来淡化ng的框架,使得各业务逻辑层的看不出框架的痕迹,具体的做法是: 把各功能模块的具 ...
- ionic准备之angular基础——run方法(4)
可以看到整个angular.module对象具有以下各种属性和方法 <!DOCTYPE html> <html lang="en"> <head> ...
- angular 子路由跳转出现Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 的问题修复
angular 路由功能非常强大,同时angular的路由也非常脆弱,非常容易出现错误. 那么在我们遇到异常时,首先要做的是什么? 第一步:检查代码,对比官方文档,发现代码中不一致的地方进行改正. 第 ...
- Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...
- 快速的熟悉一个angular的项目从run看起
config之类的都会注入到controller或者run里边
随机推荐
- 【HackerRank】Ice Cream Parlor
Sunny and Johnny together have M dollars which they intend to use at the ice cream parlour. Among N ...
- 仿Facebook登录表单
在线演示 本地下载
- 20145230《java学习笔记》第九周学习总结
20145230 <Java程序设计>第9周学习总结 教材学习内容 JDBC JDBC简介 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作, ...
- 【bzoj1232】[Usaco2008Nov]安慰奶牛cheer(最小生成树)
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1232 这道题要保留的道路肯定是原图的一棵生成树,因为要保留n-1条边,且使删边后的图连 ...
- mac下查看占用端口的进程及杀死进程
mac lsof -i :9000 kill -9 716
- SolrCloud 5.5.5 + Zookeeper + HDFS使用
安装sol r 三个节点192.168.1.231,192.168.1.234,192.168.1.235 下载安装包solr.tar.gz 解压 tar -zxvf solr.tar.gz 配置ZK ...
- hdu 4737 A Bit Fun 尺取法
A Bit Fun Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Proble ...
- php提前输出响应及注意问题
1.浏览器和服务器之间是通过HTTP进行通信的,浏览器发送请求给服务器,服务器处理完请求后,发送响应结果给浏览器,浏览器展示给用户.如果服务器处理请求时间比较长,那么浏览器就需要等待服务器的处理结果. ...
- Overlay网络与物理网络的关系
编者按:无论是云计算还是SDN都把注意力集中在数据中心网络的建设上,各种解决方案层出不穷,其中以VMware为代表的软件厂商提出Overlay网络方案后,为数据中心网络的发展提出了新的思路.那么Ove ...
- 批量反编译class文件
首先得进入jad的路径中,一般都放在jdk的安装目录的bin中 进入到该目录中,否则无法使用jad命令. jad -o -r -d F:\src -s java F:\classes\**\*.cla ...