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 条评论
登录 后参与评论

相关文章

来自专栏Java架构解析

微服务网关Zuul迁移到Spring Cloud Gateway

本文将会介绍将微服务网关由Zuul迁移到Spring Cloud Gateway。

2.7K0
来自专栏运维技术迷

解决Sublime在LinuxMint下无法输入中文的问题

环境说明: 操作系统: Linux Mint 18 MATE 输入法管理:fcitx 一、创建sublime_imfix.c文件 进入sublime安装目录...

4387
来自专栏乐沙弥的世界

基于Linux (RHEL 5.5) 安装Oracle 10g RAC

    本文所描述的是在Red Hat 5.5下使用vmware server 来安装Oracle 10g RAC(OCFS + ASM),本文假定你的RHEL...

1263
来自专栏java、Spring、技术分享

java 日志处理

  common-logging是 apache提供的一个通用的日志接口。用户可以自由选择第三方的日志组件作为具体实现,像log4j,或者jdk自带的loggi...

2233
来自专栏java工会

推荐几个自己写的Java后端相关的范例项目

2375
来自专栏Flutter&Dart

DartVM服务器开发(第十九天)--jaguar_reflect使用Controller

上面有一个ReflectedController(UserController()).routes,就是把UserController里面的接口反射出来,添加到...

1053
来自专栏aoho求索

微服务网关Zuul迁移到Spring Cloud Gateway

在之前的文章中,我们介绍过微服务网关Spring Cloud Netflix Zuul,前段时间有两篇文章专门介绍了Spring Cloud的全新项目Sprin...

2403
来自专栏青青天空树

springboot配置读写分离

  近日工作任务较轻,有空学习学习技术,遂来研究如果实现读写分离。这里用博客记录下过程,一方面可备日后查看,同时也能分享给大家(网上的资料真的大都是抄来抄去,,...

1583
来自专栏Ceph对象存储方案

Ceph的磁盘管理tips

换盘的时候一定要验明正身,原生的ceph-disk方式对磁盘分区的信息标记实在是太粗糙,很容易看花眼,比如下面这个例子,虽然通过PARTLABEL可以区分jou...

2157
来自专栏木木玲

Netty in action ——— 事件循环 和 线程模式

2103

扫码关注云+社区