[英]AngularJS: Call a particular function before any partial page controllers
我想在我的应用程序加载开始时调用一个特定的函数: GetSession()
。 此函数进行$http
调用并从服务器获取会话令牌: GlobalSessionToken
。 然后,此会话令牌将用于其他控制器逻辑,并从服务器获取数据。 我在主控制器中调用了这个GetSession()
: $routeChangeStart
事件中的MasterController
但是作为一个异步调用,我的代码在$http
响应之前向前移动到CustomerController
。
这是我的代码:
var GlobalSessionToken = ''; //will get from server later
//Define an angular module for our app
var myApp = angular.module('myApp', ['ngRoute']);
//Define Routing for app
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/customer', {
templateUrl: 'partials/customer.html',
controller: 'CustomerController',
resolve: {
loadData: function($q){
return LoadData2($q,'home');
}
}
}).
otherwise({
redirectTo: '/home'
});
}]);
//controllers start here and are defined in their each JS file
var controllers = {};
//only master controller is defined in app.js, rest are in separate js files
controllers.MasterController = function($rootScope, $http){
$rootScope.$on('$routeChangeStart', function(){
if(GlobalSessionToken == ''){
GetSession();
}
console.log('START');
$rootScope.loadingView = true;
});
$rootScope.$on('$routeChangeError', function(){
console.log('ERROR');
$rootScope.loadingView = false;
});
};
controllers.CustomerController = function ($scope) {
if(GlobalSessionToken != ''){
//do something
}
}
//adding the controllers to myApp angularjs app
myApp.controller(controllers);
//controllers end here
function GetSession(){
$http({
url: GetSessionTokenWebMethod,
method: "POST",
data: "{}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
GlobalSessionToken = data;
}).error(function (data, status, headers, config) {
console.log(data);
});
}
我的HTML有以下部分:
<body ng-app="myApp" ng-controller="MasterController">
<!--Placeholder for views-->
<div ng-view="">
</div>
</body>
我怎样才能确保在应用程序启动的最开始和任何其他控制器调用之前始终调用此GetSession()
,并且只调用一次。
编辑:这是我根据Maxim的答案添加run
方法的方法。 在继续使用控制器之前,还需要找出等待$http
调用返回的方法。
//Some initializing code before Angular invokes controllers
myApp.run(['$rootScope','$http', '$q', function($rootScope, $http, $q) {
return GetSession($http, $q);
}]);
function GetSession($http, $q){
var defer = $q.defer();
$http({
url: GetSessionTokenWebMethod,
method: "POST",
data: "{}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
GlobalSessionToken = data;
defer.resolve('done');
}).error(function (data, status, headers, config) {
console.log(data);
defer.reject();
});
return defer.promise;
}
虽然这里的一些解决方案完全有效,但在我看来,路由定义的resolve
属性是可行的方法。 在session.then
中编写你的应用程序逻辑在每个控制器中有点太多了,我们在其中一个项目中也使用了这样的方法,但是我没有那么好用。
最有效的方法是使用resolve
来延迟控制器的实例化,因为它是一个内置的解决方案。 唯一的问题是你必须为每个路由定义添加类似代码的resolve
属性,这会导致代码重复。
要解决此问题,您可以在辅助函数中修改路由定义对象,如下所示:
function withSession(routeConfig) {
routeConfig.resolve = routeConfig.resolve || {};
routeConfig.resolve.session = ['getSessionPromise', function(getSessionPromise) {
return getSessionPromise();
}]
return routeConfig;
}
然后,在这里定义你的路线:
$routeProvider.when('/example', withSession({
templateUrl: 'views/example.html',
controller: 'ExampleCtrl'
}));
这是我尝试过并且最喜欢的众多解决方案之一,因为它干净且干燥。
你不能推迟控制器的初始化。
您可以将控制器代码放在Session promise回调中:
myApp.factory( 'session', function GetSession($http, $q){
var defer = $q.defer();
$http({
url: GetSessionTokenWebMethod,
method: "POST",
data: "{}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
GlobalSessionToken = data;
defer.resolve('done');
}).error(function (data, status, headers, config) {
console.log(data);
defer.reject();
});
return defer.promise;
} );
myApp.controller( 'ctrl', function($scope,session) {
session.then( function() {
//$scope.whatever ...
} );
} );
替代方案 :如果您不想使用此类回调,则可以使您的会话请求同步,但这将是一件非常糟糕的事情。
您尚未提供与GetSession相关的任何详细信息。 对于这样的场景,您应该在$routeProvider
定义路由时使用resolve
属性。 我看到你已经使用了resolve
。
您现在可以做的是将GlobalSessionToken
包装到像GlobalSessionTokenService
这样的Angular服务中,并在解析中调用它以在路由加载之前获取令牌。 喜欢
resolve: {
loadData: function($q){
return LoadData2($q,'home');
},
GlobalSessionToken: function(GlobalSessionTokenService) {
return GlobalSessionTokenService.getToken() //This should return promise
}
}
然后可以在控制器中注入
controllers.MasterController = function($rootScope, $http,GlobalSessionToken){
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.