angularjs 中使用 service 在controller 之间 share 对象和数据

在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是使用创建一个service, 在service 中存储公共的数据,然后把service 注入到controller中来达到share 数据的目的。

下面是最简单的一个sample 列子

angularjs 模板页面, 有userContoller 和 customerController,我们将在这两个controller 之间共享数据, 具体定义如下:

<div ng-app="APP">
    <h2>angularjs sample</h2>
    <div ng-controller="userController">
        <div>{{golbal_sitename}}</div>
        <div>{{controllerName}}</div>
        <div><button ng-click="sayHello()">sayHello</button></div>
    </div>
    <hr />
     <div ng-controller="customerController">
        <div>{{golbal_sitename}}</div>
         <div>{{controllerName}}</div>
         <div><button ng-click="sayHello()">sayHello</button></div>
    </div>
</div>

angularjs js 页面, 在这个代码中我们定义了 module APP, userController 和customerController, 另外我们还定义了一个service, dataService,这个service 包含需要共享的数据和方法,在这里我们返回了一个属性golbal_sitename, 和 一个sayHello 方法。

然后,在声明controller 的时候,我们把dataservice 这个对象分别注入到userController 和customerController,注入完成后,我们就可以在controller 的代码中访问dataService共享的数据了。

var APP = angular.module(‘APP‘,[]).
controller(‘userController‘, [‘$scope‘,‘dataService‘,function($scope,dataService) {
       $scope.controllerName=‘userController‘;
       $scope.golbal_sitename=dataService.golbal_sitename;
       $scope.sayHello =function(){
           dataService.sayHello($scope.controllerName);
       }
}]).
controller(‘customerController‘,[‘$scope‘,‘dataService‘, function($scope,dataService) {
       $scope.controllerName=‘customerController‘;
       $scope.golbal_sitename=dataService.golbal_sitename;
       $scope.sayHello =function(){
           dataService.sayHello($scope.controllerName);
       }
}]).
factory(‘dataService‘,function(){
    return {
        golbal_sitename:"this is the shared value",
        sayHello:function(msg){
            alert(msg);
        }
    }
});

最后的结果截图如下:

从图中我们可以看到

”this is the shared value“ 值来自dataService

sayHello 的具体实现也是在dataService中定义的。

这样我们就实现了在controller 之间共享对象。

时间: 2024-11-05 11:33:30

angularjs 中使用 service 在controller 之间 share 对象和数据的相关文章

angularjs 中 Factory,Service,Provider 之间的区别

本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行演示 Factory,Service,Provider 之间的区别 1. Factory factory('dataService',function(){ return { golbal_sitename:"this is the shared value", sayHello:func

赵雅智:service与访问者之间进行通信,数据交换

服务类 中间人:service服务中的bind对象 创建中间人并通过onBinder方法的return暴露出去 在服务类创建一个服务 创建中间人继承Binder MainActivity类 声明服务的中间人 private ServiceTese.MyBinder myBinder; 链接成功的时候赋值service 设置按钮点击事件 输出结果: 赵雅智:service与访问者之间进行通信,数据交换

AngularJS中使用service,并同步数据

service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module = angular.module( "my.new.module", [] ); 2.创建一个service服务: module.service( 'Book', [ '$rootScope', function( $rootScope ) { var service = { books:

理解AngularJS中的Service类型

Angular中有几种不同类型的services.每一种都有自己的独特用法. 需要记住的非常重要的一点是service总是一个单体,无论是哪种类型的service. 注释:单体是一种设计模式,它限制了每一个类仅能够实例化为一个对象.无论我们在什么地方注入我们的service,将永远使用同一个实例. Constant 例子: app.constant('fooConfig',{ config1: true, config2: "Default config2" }); Constant是

AngularJS 中 Provider 的用法及区别

在一个分层良好的 Angular 应用中,Controller 这一层应该很薄.也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里. 为此,理解 AngularJS 中的几个 Provider 之间的区别很有必要. Provider 创建的新服务都可以用来注入.包括: provider factory service constant value 另外,内建的服务 $controller 和 $filter 也可以被注入,同时也可以使用这些服务来获得新的过滤器和控制器.

AngularJS中Scope间通讯Demo

在AngularJS中,每一个controller都有对应的Scope,而Scope间有时候需要通讯.比如有如下的一个controller嵌套: <body ng-controller="AppCtrl"> <table ng-controller = "ProductCtrl"> ... <tr ng-repeat="product in products"> <td>{{$index + 1}}

Angularjs1.x 中的 service,factory,provider,constant,value

了解 Angularjs1.x 中的 service,factory,provider,constant,value 的应用场景及区别 不管 service , factory 还是 provider 都属于 service 关于 service service 一旦被定义后就可以在任何地方通过依赖的方式调用且可以保存数据,直到应用结束,比如 controller(['service', function(service){}]); 而 controller 则一旦路由发生变化 controll

AngularJS 中 Controller 之间的通信

用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利用子 Controller 控制父 Controller 上的数据.(父 Controller 中的数据要为引用类型,不能是基本类型,原因参见 AngularJS中的作用域 一文) 2)注入服务.把需要共享的数据注册为一个 service,在需要的 Controller 中注入. 3)基于事件.利用

angularJS中directive与controller之间的通信

当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的指令. 1.指令作用域中的"@" 作用:把当前属性作为字符串传递实现指令与html页面元素关联. 1 <!DOCTYPE html> 2 <html ng-app="demoapp"> 3 <head lang="en"