AngularJS中使用service,并同步数据

service是单例对象,在应用中不同代码块之间共享数据。

对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码:

1.创建一个模块:

var module = angular.module( "my.new.module", [] );

2.创建一个service服务:

module.service( 'Book', [ '$rootScope', function( $rootScope ) {
      var service = {
      books: [
        { title: "Magician", author: "Raymond E. Feist" },
        { title: "The Hobbit", author: "J.R.R Tolkien" }
      ],

      addBook: function ( book ) {
        service.books.push( book );
        $rootScope.$broadcast( 'books.update' );
      }
   }
   return service;
}]);

3.在Controller中调用:

1 var ctrl = [ '$scope', 'Book', function( scope, Book ) {
2    scope.$on( 'books.update', function( event ) {
3      scope.books = Book.books;
4      scope.$apply();
5    }); 
6    scope.books = Book.books;
7  }];
8 
9  module.controller( "books.list", ctrl );


但是,当涉及到异步请求的时候,service的数据就可能会在controller调用的时候不同步,比如:

定义一个service,用来请求json数据:

 1 module.service('VService',['$http',function($http){
 2     var service={
 3         getCode:function(mobile){
 4      var msg={}; 
           $http({method:'get',url:'请求URI',params:{mobile:mobile}}).success(function(data){
 5               console.log("data=="+JSON.stringify(data));
 6               msg=data;
 7         });
 9         return msg;
10         }
12     }
13 
14     return service;
15 }]);

在controller中调用:

module.controller("myCtrl",["$scope",$routeParams","VService",function($scope,$http,$routeParams,VService){
    $scope.mobile=$routeParams.mobile;
    $scope.getCapt = function(){
            var s=VService.getCode($scope.mobile);
            console.log(s);
    };
}]);    

这时候,控制台打印显示:data有数据,但是s为undefined。

具体原因我没去深究,大概猜测是异步请求数据的原因,因为第二次调用getCapt方法的时候s有数据了,所以通过内置服务$q来进行数据的同步调用:

service这样写:

var service={
        getCode:function(mobile){
            var deferred = $q.defer();//声明延后执行,表示要去监控后面的执行
            $http({method:'get',url:'请求URI',params:{mobile:mobile}}).success(function(data){
                    console.log("data=="+JSON.stringify(data));
                    deferred.resolve(data);//声明执行成功,即http请求数据成功,可以返回数据了
                }
            );
            return deferred.promise;//返回承诺,这里并不是最终数据,而是访问最终数据的API
        }}

controller这样调用:

VService.getCode($scope.mobile).then(function(data){
     $scope.s=data;
     console.log("s==="+JSON.stringify($scope.s));
})

如此实现了数据同步调用。  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏社区的朋友们

在共享内存实现 Redis(下)

从实现方式入手,设计了一种综合二者优点的方案:将 Redis 做成数据逻辑分离,数据存放共享内存,进程只负责存储逻辑,同时解决 Redis 长命令卡顿和 for...

2640
来自专栏技术专栏

慕课网Flask高级编程实战-3.蓝图、模型与CodeFirst

应该讲一些初始化工作,放在对应层级的包的初始化文件 __init__.py 中。比如Flask核心应用app对象初始化应该放在应用层级app包的 __init_...

942
来自专栏丑胖侠

《Drools7.0.0.Final规则引擎教程》第4章 4.2 lock-on-active

lock-on-active 当在规则上使用ruleflow-group属性或agenda-group属性的时候,将lock-on-active 属性的值设置为...

17310
来自专栏idba

MySQL 5.7新特性之五

本系列文章基于 5.7.12 版本讲述MySQL的新特性。从安装,文件结构,SQL ,优化 ,运维层面 复制,GITD等几个方面展开介绍 5.7 的新特性和功能...

902
来自专栏yang0range

深入探究Glide的缓存机制

Glide的缓存设计可以说是非常先进的,考虑的场景也很周全。在缓存这一功能上,Glide又将它分成了两个模块一个是内存缓存,一个是硬盘缓存。 这两个缓存模块的...

911
来自专栏大内老A

通过一个模拟程序让你明白WCF大致的执行流程

在《通过一个模拟程序让你明白ASP.NET MVC是如何运行的》一文中我通过一个普通的ASP.NET Web程序模拟了ASP.NET MVC的执行流程,现在我们...

1896
来自专栏IMWeb前端团队

使用 JavaScript 自动化你的 Mac

在Apple发布的Yosemite系统(OSX10.10+)中有一个被大家忽略的特性:使用 JavaScript编写自动化脚本。在这之前只能通过AppleSc...

2599
来自专栏IT进修之路

原 JAVA的那些事儿

1906
来自专栏Phoenix的Android之旅

死锁的四个必备条件

今天来总结一下发生死锁的四个必备条件,他们分别是 · 互斥 · 不可剥夺 · 循环等待 · 请求和保持

681
来自专栏友弟技术工作室

Beego Controllercontroller 逻辑控制器介绍Controller中数据参数处理获取参数

controller就是处理具体的逻辑的,router将请求分发到指定的controlller,controller处理请求,然后返回。 首先我们还是从源码分...

912

扫码关注云+社区