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

相关文章

来自专栏芋道源码1024

【消息队列 MQ 专栏】消息队列之 ActiveMQ

ActiveMQ 是由 Apache 出品的一款开源消息中间件,旨在为应用程序提供高效、可扩展、稳定、安全的企业级消息通信。它的设计目标是提供标准的、面向消息的...

510
来自专栏java 成神之路

java中设置网络代理

3926
来自专栏芋道源码1024

注册中心 Eureka 源码解析 —— 应用实例注册发现(六)之全量获取

本文主要分享 Eureka-Client 向 Eureka-Server 获取全量注册信息的过程。

970
来自专栏向治洪

android cookie持久化

在解析网页信息的时候,需要登录后才能访问,所以使用httpclient模拟登录,然后把cookie保存下来,以供下一次访问使用,这时就需要持久化cookie中的...

2479
来自专栏架构师之旅

【Java SE】Java NIO系列教程(十) DatagramChannel

Java NIO中的DatagramChannel是一个能收发UDP包的通道。因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入。它发送和接收的是数...

1675
来自专栏猿天地

Netty 实现简单的HTTP服务

本篇文章是Netty专题的第八篇,前面七篇文章如下: 高性能NIO框架Netty入门篇 高性能NIO框架Netty-对象传输 高性能NIO框架Netty-整合k...

2696
来自专栏智能大石头

NewLife.Net——开始网络编程

1143
来自专栏猿天地

高性能NIO框架Netty入门篇

Netty介绍 Netty是由JBOSS提供的一个java开源框架。Netty提供异步的、事件驱动的网络应用程序框架和工具,用以快速开发高性能、高可靠性的网络服...

35110
来自专栏静默虚空的博客

WebSocket 详解教程

概述 WebSocket 是什么? WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。 WebSocket 是 HTML5 开始提供的...

3007
来自专栏aoho求索

认证鉴权与API权限控制在微服务架构中的设计与实现(四)

引言: 本文系《认证鉴权与API权限控制在微服务架构中的设计与实现》系列的完结篇,前面三篇已经将认证鉴权与API权限控制的流程和主要细节讲解完。本文比较长,对这...

3978

扫描关注云+社区