angularJs在多个控制器中共享服务数据的方法

2024-12-20 20:50:51

如下所示：

<div ng-app="module">
 <div ng-controller="ctrl1">
  <table border="1" width="600">
   <tr>
    <td>网站名称</td>
    <td>网址</td>
   </tr>
   <tr ng-repeat="v in data.webs">
    <td>{{v.name}}</td>
    <td>{{v.url}}</td>
   </tr>
  </table>
 </div>
 <hr>
 <div ng-controller="ctrl2">
  <table border="1" width="600">
   <tr>
    <td>网站名称</td>
    <td>网址</td>
   </tr>
   <tr ng-repeat="v in data.webs">
    <td>{{v.name}}</td>
    <td>{{v.url}}</td>
   </tr>
  </table>
  <h1>{{web.name}}</h1>
  <button ng-click="removeAll()">删除所有数据</button>
 </div>
</div>
<script>
 var m = angular.module('module', []);
 //定义服务
 m.factory('videoServer', ['$http', function ($http) {
  var obj = {
   data: {webs:[]},
   //所有数据
   all: function () {
    return $http({url: '1.php'}).then(function (response) {
     obj.data.webs = response.data;
     return obj.data;
    });
   },
   //获取一条数据
   find: function (id) {
    return this.all().then(function (data) {
     for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
       return data[i];
      }
     }
    });
   },
   //删除所有数据
   flush: function () {
    obj.data.webs=[];
   }
  };
  return obj;
 }]);
 //控制器ctrl1
 m.controller('ctrl1', ['$scope', 'videoServer', function ($scope, videoServer) {
  videoServer.all().then(function (data) {
   $scope.data = data;
  });
 }]);

  //控制器ctrl2
 m.controller('ctrl2', ['$scope', 'videoServer', function ($scope, videoServer) {
  videoServer.all().then(function (data) {
   $scope.data = data;
  });
  videoServer.find(1).then(function (data) {
   $scope.web = data;
  })
  $scope.removeAll=function(){
   videoServer.flush();
  }
 }]);
</script>

1.php

<?php
$data = [
 [ 'name' => '百度', 'url' => 'www.baidu.com' ],
 [ 'name' => '谷歌', 'url' => 'google.com' ],
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);

以上这篇angularJs在多个控制器中共享服务数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

AngularJS控制器之间的数据共享及通信详解

AngularJS 本身已经提供了像指令 Directive 和服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求. 单例服务单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据.比如,下面的 Service 便可以实现: angular .module('a
angular4 共享服务在多个组件中数据通信的示例

应用场景,不同组件中操作统一组数据,不论哪个组件对数据进行了操作,其他组件中立马看到效果.这样他们就要共用一个服务实例,是本次的重点,如果不同实例,那么操作的就不是同一组数据,那么就不会有这样的效果,想实现共用服务实例,就是在所有父组件中priviates:[]中引入这个组件,子组件中不需要再次引入,那么他们都是用的父组件中的服务实例. 1.公用服务 import {Injectable} from "@angular/core"; @Injectable() export class
AngularJS实现controller控制器间共享数据的方法示例

本文实例讲述了AngularJS实现controller控制器间共享数据的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myapp"> <head> <title>www.jb51.net 控制器间共享数据</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.co
AngularJS实现自定义指令与控制器数据交互的方法示例

本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3
AngularJS控制器controller给模型数据赋初始值的方法

本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法.分享给大家供大家参考,具体如下: 之前的文章<AngularJS入门示例之Hello World详解>,很简单的就实现了模型数据和页面显示的自动绑定.现在我们使用控制器,给模型赋初始值.如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target").attr("value",selfValue); 使用AngularJS代码如下: <!do
Angular.js中控制器之间的传值详解

前言每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.set
angularJs在多个控制器中共享服务数据的方法

如下所示: <div ng-app="module"> <div ng-controller="ctrl1"> <table border="1" width="600"> <tr> <td>网站名称</td> <td>网址</td> </tr> <tr ng-repeat="v in data.webs
Angularjs的ng-repeat中去除重复数据的方法

本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index
VirtualBox实现虚拟机中共享本地目录的方法

VirtualBox VirtualBox 是一款开源虚拟机软件.VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司出品的软件,使用Qt编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox.Innotek 以 GNU General Public License (GPL) 释出 VirtualBox,并提供二进制版本及 OSE 版本的代码.使用者可以在VirtualBox上安装并且执行Solaris.Win
Yii控制器中操作视图js的方法

本文实例讲述了Yii控制器中操作视图js的方法.分享给大家供大家参考,具体如下: //YII framework路径 Yii::getFrameworkPath(); //protected/runtime Yii::app()->getRuntimePath(); //protected/venders目录 Yii::import('application.venders.*'); //或在protected/config/main.php说明 'import'=>array( //....
python脚本当作Linux中的服务启动实现方法

脚本服务化目的: python 在文本处理中有着广泛的应用,为了满足文本数据的获取,会每天运行一些爬虫抓取数据.但是网上买的服务器会不定时进行维护,服务器会被重启.这样我们的爬虫服务就无法运行.这个时候我们可以把python脚本服务化,服务器重启后,脚本就会自动运行.解决服务器维护后需要手动运行python脚本. 实现方法: 1,给编写好的python脚本开头加上 #!/usr/bin/python 2,启动shell 脚本编写 vi pystock.sh #vim /etc/init.d/
AngularJS使用$http配置对象方式与服务端交互方法

如下所示: //$http函数的形参就是一个配置对象 $http({ //method属性表示HTTP请求时的方式,它是一个字符串,值是POST.GET.JSONP.DELETE.PUT和HEAD其中之一 method: //url表示向服务器请求的地址,是一个相对或者绝对的字符串形式 url: //data属性是一个对象,该对象将作为消息体的一部分发送给服务端,常用于POST或PUT数据时使用: data: //params属性是一个字符串对象,当发送HTTP请求时,如果是对象,将自动按jso
Laravel框架实现多个视图共享相同数据的方法详解

本文实例讲述了Laravel框架实现多个视图共享相同数据的方法.分享给大家供大家参考,具体如下: 最近在用Laravel写一个cms,还没有完成,但是也遇到了许多难点,比如cms后台每个视图都要展示相同的导航菜单数据. 环境: PHP 7.1 Apache 2.4 MySQL 5.7 Laravel 5.4 传统方法假设使用传统的方法,应该是在每个控制器中都调用数据,然后把数据都塞给视图. $menu = DB::table('menu')->get(); return view('xx',[
用PHP实现多服务器共享SESSION数据的方法

PHP 实现多服务器共享 SESSION 数据 /google 的广告条--> 一.问题起源稍大一些的网站,通常都会有好几个服务器,每个服务器运行着不同功能的模块,使用不同的二级域名,而一个整体性强的网站,用户系统是统一的,即一套用户名.密码在整个网站的各个模块中都是可以登录使用的.各个服务器共享用户数据是比较容易实现的,只需要在后端放个数据库服务器,各个服务器通过统一接口对用户数据进行访问即可.但还存在一个问题,就是用户在这个服务器登录之后,进入另一个服务器的别的模块时,仍然需要重新登录,这
Zend Framework实现多服务器共享SESSION数据的方法

本文实例讲述了Zend Framework实现多服务器共享SESSION数据的方法.分享给大家供大家参考,具体如下: 一.问题起源大型网站通常有多个服务器,并且使用多个二级域名.这样一台服务器产生的session就不能为所有服务器所共享.这样用户在一个地方登录就不能全部通行二.PHP SESSION 的工作原理在解决问题之前,先来了解一下 PHP SESSION 的工作原理.在客户端(如浏览器)登录网站时,被访问的 PHP 页面可以使用 session_start() 打开 SESSION
Mongodb中MapReduce实现数据聚合方法详解

Mongodb是针对大数据量环境下诞生的用于保存大数据量的非关系型数据库,针对大量的数据,如何进行统计操作至关重要,那么如何从Mongodb中统计一些数据呢? 在Mongodb中,给我们提供了三种用于数据聚合的方式: (1)简单的用户聚合函数: (2)使用aggregate进行统计: (3)使用mapReduce进行统计: 今天我们首先来讲讲mapReduce是如何统计,在后续的文章中,将另起文章进行相关说明. MapReduce是啥呢?以我的理解,其实就是对集合中的各个满足条件的文档进行预处理

angularJs在多个控制器中共享服务数据的方法

相关推荐

随机推荐