AngularJS中使用service,并同步数据

简介: service是单例对象,在应用中不同代码块之间共享数据。 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module = angular.

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));
})

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

  

 





唯有不断学习方能改变! -- Ryan Miao
目录
相关文章
|
JavaScript API
vue插槽slot、slot-scope、v-slot的区别以及嵌套插槽的使用
可以将 slot 理解成一个占位的东西,我们提前在模板中放置一个占位的标记,当其他地方要使用模板时就可以通过标记再传进来具体的内容,这样就可以实现更强的复用能力。
|
移动开发 资源调度 JavaScript
Vue 3.0 && Nginx 项目打包部署知识都在这了~
Vue 3.0 && Nginx 项目打包部署知识都在这了~
7736 1
Vue 3.0 && Nginx 项目打包部署知识都在这了~
|
定位技术
阿里架构总监一次讲透中台架构,13页PPT精华详解,建议收藏!
本文整理了阿里几位技术专家,如架构总监 谢纯良,中间件技术专家 玄难等几位大牛,关于中台架构的几次分享内容,将业务中台形态、中台全局架构、业务中台化、中台架构图、中台建设方法论、中台组织架构、企业中台建设实施步骤等总共13页PPT精华的浓缩,供大家学习借鉴。
37253 116
|
9月前
|
存储
计算机基础(4)——原码、补码、反码
计算机为了区分数值的正负提出了符号位的设定,计算机用最高位存放符号,这个被称为符号位。正数的符号位为0, 负数的符号位为1。 例如,1的二进制表示形式为`0000 0001`,而-1的二进制表示形式为`1000 0001`。在计算机中,一个字节为8个位,最大值为0111 1111,十进制为127。最小值为1000 0000,十进制为-128。因此一个字节的取值范围为-128~127之间。
2394 3
|
11月前
|
XML 缓存 安全
PUT 请求和 POST 请求有什么区别?
【10月更文挑战第25天】PUT请求和POST请求在HTTP协议中有着不同的功能和应用场景,开发者需要根据具体的业务需求和资源操作的性质来选择合适的请求方法,以确保客户端与服务器之间的交互准确、安全且符合预期。
|
存储 物联网 Serverless
什么是Serverless
Serverless是一种云计算架构模式,让开发者通过第三方服务直接构建和部署应用。在此模式下,应用被分解为无状态函数,由云平台统一管理。开发者仅需关注业务逻辑编写,无需管理底层服务器及基础设施。这种方式具有诸多优点:无需管理服务器,可专注业务逻辑;能够根据负载自动调整资源,实现按需计费;具备高可用性和灵活性,并支持多种编程语言。此外,Serverless应用按需启动和停止,无请求时不消耗资源,进一步提高了效率和成本效益。已被广泛应用于Web应用、移动应用、数据分析和物联网等领域。
859 3
|
JSON 前端开发 JavaScript
vite中静态资源(css、img、svg等)的加载机制及其相关配置
【8月更文挑战第3天】vite中静态资源(css、img、svg等)的加载机制及其相关配置
1433 1
|
程序员 Linux KVM
【qemu虚拟化】将img镜像文件转换为VMware虚拟机
QEMU是一个开源的硬件虚拟化器,能在多种平台如x86、ARM、PowerPC上运行,支持虚拟化不同体系结构的操作系统。它具有硬件仿真、虚拟化支持、磁盘和网络仿真、快照回滚及可扩展性等特点。要使用QEMU,首先从[官网](https://www.qemu.org/download/)下载,然后通过命令行运行进行转换。转换后的vMDK文件可在VMware中导入,创建新的虚拟机进行使用。
5334 3
【qemu虚拟化】将img镜像文件转换为VMware虚拟机
|
Unix Linux iOS开发
如何一次拷贝出mac电脑的所有照片
如何一次拷贝出mac电脑的所有照片
434 1
|
KVM 虚拟化 Android开发
DP读书:鲲鹏处理器 架构与编程(十二)鲲鹏软件实战案例Docker+KVM的部署
DP读书:鲲鹏处理器 架构与编程(十二)鲲鹏软件实战案例Docker+KVM的部署
356 1