AngularJS:在任何部分页面控制器之前调用特定函数

2024-05-07

我想调用一个特定的函数:GetSession()在我的应用程序加载开始时。这个函数使$http调用并获取会话令牌:GlobalSessionToken从服务器。然后,该会话令牌用于其他控制器逻辑并从服务器获取数据。我已经打电话给这个GetSession()在主控制器中:MasterController in $routeChangeStart事件,但作为异步调用,我的代码前进到CustomerController之前$http回复。

这是我的代码:

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()总是在我的应用程序启动之初和任何其他控制器调用之前调用,并且仅调用一次。

编辑:这就是我添加的方式run方法按照Maxim的回答。还是得想办法等到$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'
}));

这是我尝试过并且最喜欢的众多解决方案之一,因为它干净干燥。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:在任何部分页面控制器之前调用特定函数 的相关文章

  • Mat select - 获取selectionChange的旧值

    我有一个项目 其中有一个包含以下内容的表单mat select选择器 每当用户更改输入时 我都会向用户显示一个对话框来确认此操作 现在 The selectionChange 通知值何时更改并将新值传递为 event 当用户取消对话框时 有
  • 该脚本在 IE 中不起作用。我该如何修复它?

    有一个脚本可以根据用户的显示器屏幕分辨率更改页面模板 但是 它在 IE 中不起作用 请告知如何修复它 table align center tr td head td tr tr td nbsp td td nbsp td td nbsp
  • 使用 ng-if 内容短暂呈现然后消失

    我的页面上有一些内容包含在 ng if 中 如下所示 div class text danger p strong Message displayed to User strong p div 然后在我的 Angular js 控制器中我有
  • ng-repeat 仅具有特定属性值的对象 - 自定义过滤器?

    假设我有一个 JSON 对象 用户 其中包含一些基本属性 例如 名称 地址 角色 等 我希望 ng repeat 只吐出属性 角色 等于 管理员 的对象 我该怎么做呢 我正在考虑类似自定义过滤器的东西 或者可能创建一个范围变量 将匹配的对象
  • 如何访问 Angularjs 模板中的常量

    如何将公共js文件中定义的常量访问到不同模块的模板中 如果我在 MainModule js 中定义了一个这样的常量 该常量包含在主 html 文件的开头 gt var myApp angular module AC gt myApp con
  • 如何在 Angular 中实现全局加载器

    我有一个全局加载器 其实现如下 核心模块 router events pipe filter x gt x instanceof NavigationStart subscribe gt loaderService show router
  • Nightmare.js 截图缓冲区长度 0

    我正在运行一个 night js 脚本 我试图在其中截取页面上多个元素的屏幕截图 The first元素被捕获得很好 但折叠下方的所有其他元素都以零长度捕获 我正在努力调试这个问题 任何帮助将非常感激 基本上这个脚本会遍历一个页面并选择al
  • 动画和过渡的组合无法正常工作

    我一直在尝试添加一些基本的 CSS3 动画 目标是在按钮的单击事件上切换类 并根据添加的类对 div 进行动画处理 该代码对于 Firefox 中切换的第一次迭代完美运行 但对于 Chrome 等其他浏览器以及 Firefox 中的下一次迭
  • Xml、xsl Javascript 排序

    我正在寻找一种使用 javascript 对 xml 数据进行排序的方法 并希望最终过滤掉数据 我知道这一切都可以在 xsl 文件中实现 但我想在客户端进行 我已经搜索了多个使用 javascript 进行排序的地方 但其中大部分要么太特定
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • Vue: vue-i18n: 无法翻译 keypath 的值,使用 keypath 的值作为默认值

    我正在使用 Vue 我想展示三种语言 英语 他加禄语和宿务语 现在我有错误 无法转换键路径 NavbarMobile home 的值 使用 keypath 的值作为默认值 我通过 console log this i18n locale 检
  • 禁用 HTML 验证。如何为全局每个表单设置“novalidate”?

    我想知道是否可以做一些事情来禁用应用程序中每个表单的 HTML 验证 有什么办法可以做到这一点或者我应该添加novalidate每个表单标签的属性 看来唯一的方法是添加novalidate使用 JavaScript jQuery 为每个表单
  • ajax调用后如何停止刷新页面?

    ajax 调用后我无法停止刷新页面 我尝试过放置 e preventDefault 并返回 false 但我的页面又刷新了 我不知道代码有什么问题或者什么 请帮助我在ajax调用后停止刷新页面 解决这个问题对我来说会有很大的帮助 提前致谢
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 电子节点集成不起作用,也普遍奇怪的电子行为[重复]

    这个问题在这里已经有答案了 我是 Electron 的新手 我一直在努力让它工作 我遇到了无法解释的行为 所以这里有一个总结 我无法让 Electron 和 html 之间的通信正常工作 即使我有nodeIntegration true 网
  • 如何在不接受焦点的元素上捕获键盘事件?

    我知道要处理输入字段中的键盘事件 您可以使用 input keyup function e var code e keyCode and 13 is the keyCode for Enter 但是 现在 我有一些div and li元素
  • Tizen SDK:找不到变量:tizen

    我正在尝试使用 Tizen SDK 创建一个 Web 应用程序 当我启动应用程序时 一切都很好 但是当我在模拟器上按 后退 按钮时 没有任何反应 并且我看到一条消息 55435 js main js 9 ReferenceError 找不到
  • iOS 上 Safari 中的 shift 键

    有没有办法在javascript中判断手机键盘上是否按下了shift键 并将其与大写锁定 按两次shift键 区分开来 一些事实 首先 让我们看一下有关 iOS 键盘的一些事实 我假设您已经知道了 当您进入键盘模式时 shift键始终处于激
  • 使用 ASP.Net 和 Ajax 的登录页面

    我正在尝试使用 html ajax 和 ASP NET 制作登录页面 数据确实传递给 ajax 函数 但是当我调试 asp 页面时 用户名和密码以 NULL 发送 该代码应该获取用户名和密码 然后返回用户 ID html页面 div Use

随机推荐