angularJs在多个控制器中共享服务数据_angularjs 公共的数据放在哪里-优快云博客

本文链接：https://blog.youkuaiyun.com/u012396955/article/details/73130737

本文介绍了一个使用AngularJS实现的网页应用案例，该应用通过两个不同的控制器展示从服务器获取的网站信息，并提供了删除所有数据的功能。文章展示了如何定义服务、控制器及其实现数据展示与删除的具体代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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' => '网址1', 'url' => 'www.w1.com' ],
    [ 'name' => '网址2', 'url' => 'www.w2.com' ],
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);