AngularJS 异步解决实现方法

2024-09-28 10:18:38

AngularJS 异步解决实现方法

Angular 的异步处理的真的很不错。基于消息广播的方式，并且可以向上传递，基本上解决了不同模块，不同controller之间不方便异步的问题。

场景一：通过回调函数进行异步操作(该情况下不用消息广播的机制)

这种情况的特点是直接传递一个回调函数给异步操作就可以了，等异步操作完执行回调。

比如：controller通过server异步取数据，等取完数据进行一系列的操作，这个时候就可以把操作封装到函数中，传递给异步操作函数。

controller代码片段举例如下：

$scope.submit=function(){
  userService.login($scope.user.loginname.value,$scope.user.password.value,function(data){
    if(data.success){
      location.href = '../../views/main/index.html';
    }else{
      $scope.user.error.tip=data.msg;
    }
  });
};

最后一个参数即为回调函数

server代码片段举例如下：

return {
    http:$http,
  token:'',
  auth:[],
  loginname:'',
  login:function(loginname,password,fn){
     this.http({
    url:'../../scripts/loginModule/services/loginOKTest.js',
    method:'GET'
     })
     .success(function(data){
     if(data[0].success){
       ...
           //调用回调方法
           fn(data[0]);
     }
      })
     .error(function(data,header,config,status){
    alert("验证服务请求失败！");
     });
  }
}

场景二：没有传递回调函数的地方，这个时候就必须用到消息广播的机制。

比如：我的controller通过server异步获取数据，这个时候我用回调函数保证取到数据后做后续操作。但是我的后续操作需要通过指令进行DOM的生成。这个时候我们是没有办法直接调用指令的link或者compile的。这个时候我们需要用到广播$scope.$broadcast。发送广播以后，需要通过$scope.$on进行监听。

controller代码片段举例如下：

//通过categoryService异步取数据
categoryService.initCategory(loginname,token,function(category){
    $scope.category=category;
    $scope.$broadcast("categoryLoaded");
});

service代码片段举例如下：


initCategory:function(loginname,token,fn){
  this.http({
  url:'../../scripts/mainModule/services/mainCategory.js',
  method:'GET'
  }).success(function(data,header,config,status){
    fn(data);
    }).error(function(data,header,config,status){
    alert("验证服务请求失败！");
  });
}

directive代码片段举例如下：

 link:function ($scope, $elem, attrs) {
   $scope.$on("categoryLoaded", function (event, args) {
      //$scope.category即为异步获取的数据
   }
}

最后，如果我们在这个controller中需要调用另外一个模块的指令的link或者compile或者另一个模块的controller怎么办。我们需要通过依赖注入$rootScope服务，因为他是所有作用域的父，然后调用$emit这个服务进行广播。指令中通过$rootScope.$on进行接收即可。

模块1(app.video)中的controller代码片段举例如下：

$scope.replay=function(id){
  console.log("click replay id:"+id);
  clearReply();
  //通过$rootScope广播消息给app.dialog模块的controller
  $rootScope.$emit("openTemplate","reply.html");
};

模块2(app.dialog)中的controller代码片段举例如下：


$rootScope.$on('openTemplate',function(event, toState, toParams, fromState, fromParams){
    $scope.openTemplate(toState);
}); 

$scope.openTemplate = function (url) {
    if(!url)
      url="/ZVideo-MVC/dialog/defaultTemplate.html";
    $scope.value = true;
    ngDialog.open({
      template: url,
      className: 'ngdialog-theme-plain',
      scope: $scope
    });
};

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

angularjs 处理多个异步请求方法汇总

在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: 复制代码代码如下: $http.get('url1').success(function (d1) { $http.get('url2').success(function (d2) { //处理逻辑 }); }); 解决方法二: then中的方法会按顺序执行. 复制代码代码如下: var app = ang
详解angularjs利用ui-route异步加载组件

ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等.随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了wangeditor里面单独依赖的jquery就300多k.异步加载各个组件就很有必要.在这里我就以ui-route为框架来进行异步加载说明. 首先看一下路由加载文件 angular.module('webtrn-sns').config(['$stateProvider', function ($stateProvider) { $sta
AngularJS出现$http异步后台无法获取请求参数问题的解决方法

本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht
AngularJS 实现按需异步加载实例代码

AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了! 随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性加载,使用起来非常不便, 因此按需加载模块的需求会越来越强,不过,AngularJS 并没有实现按需加载. 习惯了 seajs 的异步加载方式,也想着 angular 也能同样使用异步加载,但是事实不随人愿. angularjs 和 requi
AngularJS 异步解决实现方法

AngularJS 异步解决实现方法 Angular 的异步处理的真的很不错.基于消息广播的方式,并且可以向上传递,基本上解决了不同模块,不同controller之间不方便异步的问题. 场景一:通过回调函数进行异步操作(该情况下不用消息广播的机制) 这种情况的特点是直接传递一个回调函数给异步操作就可以了,等异步操作完执行回调. 比如:controller通过server异步取数据,等取完数据进行一系列的操作,这个时候就可以把操作封装到函数中,传递给异步操作函数. controller代码片段举例
AngularJS动态绑定HTML的方法分析

本文实例讲述了AngularJS动态绑定HTML的方法.分享给大家供大家参考,具体如下: 在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml,对,angular为我们提供了这个指令来动态绑定HTML,它会将计算出来的表达式结果用innerHTML绑定到DOM.
详解微信小程序同步异步解决办法

详解微信小程序同步异步解决办法小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参.那是因为微信小程序函数是异步执行的.但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性. WxService.js import Tools from 'Tools' import es6 from '../assets/plugins/es6-promise' class Servic
PHP的Laravel框架中使用消息队列queue及异步队列的方法

queue配置首先说明一下我之前的项目中如何使用queue的. 我们现在的项目都是用的symfony,老一点的项目用的symfony1.4,新一点的项目用的都是symfony2.symfony用起来整体感觉还是很爽的,尤其symfony2,整体上来讲使用了很多java里面框架的设计思想.但是他不支持queue.在symfony,我们使用queue也经历了几个过程.最开始使用张堰同学的httpsqs.这个简单使用,但是存在单点.毕竟我们的项目还是正式对外服务的,所以我们研究了Apache旗下的开
AngularJS的$location使用方法详解

AngularJS的$location使用方法详解一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ //设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置<base href="&
AngularJS身份验证的方法

权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们需要额外多做一些事
AngularJS折叠菜单实现方法示例

本文实例讲述了AngularJS折叠菜单实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css&quo
PHP编程实现脚本异步执行的方法

本文实例讲述了PHP编程实现脚本异步执行的方法.分享给大家供大家参考,具体如下: php语言得用fsockopen()函数,实现脚本异步运行,代码如下异步请求函数(用debug参数若为true则为用为调试,开启调试可以看到异步的执行情况,但是失去异步的效果) main.php <?php function request_by_fsockopen($url,$post_data=array(),$debug=false){ $url_array = parse_url($url); $host
AngularJS路由切换实现方法分析

本文实例讲述了AngularJS路由切换实现方法.分享给大家供大家参考,具体如下: 之前有在服务器端接触到angular路由切换,今天想在本地实现路由,捣鼓半天终于成功了,特把步骤整理分享下,免得大家走弯路! 1.首先引入angular.min.js和angular-route.min.js 2.然后我们来写框架index.html,index里面装的是所有页面都有的nav导航和footer页脚(我这个demo里只有nav),模板文件page1.html,page2.html,也就是中间路由切换
angularjs中的$eval方法详解

在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的,在controller中使用的话,是这么使用:$scope.$eval() 以上这篇angularjs中的$eval方

AngularJS 异步解决实现方法

相关推荐

随机推荐