AngularJS:我如何在SPA的所有页面和控制器之间共享数据?

时间:2016-10-17 13:06:15

标签: angularjs angularjs-scope controllers data-sharing

在我的单页面应用程序的所有控制器和范围内共享某些数据的最佳方法是什么?

假设我有一小部分数据我希望能够随处访问,而且我不想在每次需要时查询数据库。

4 个答案:

答案 0 :(得分:3)

要存储在$ rootscope变量

中的数据

(或)

要存储在服务中的数据

答案 1 :(得分:3)

共享数据服务似乎是您案例的最佳方式。 $rootScope作为全局范围,但由于性能问题,$rootScope不应该用于此类事情。 $rootscope是角度摘要周期的一部分,因此当您向其添加内容时,您还要添加更多内容以进行检查。因此,除非非常必要,否则不建议使用。

例如,对于简单服务:

app.service('SharedDataService', function () {
     var Data = {
        field1: 'qweqwe',
        field2: '12312'
    };

    return Data;
});

对于具有异步操作的复杂服务:

app.service('SharedDataService', function () {
    var self = this; 
    this.getData = function () {
        if(self.cachedData){
            return $q.resolve(self.cachedData);
        }

        return $http.get('my-data-url').then(function (response) {
            self.cachedData = response.data;
            return self.cachedData;
        });
    };
});

控制器:

app.controller('MyController', function ($scope, SharedDataService) {
    SharedDataService.getData().then(function (data) {
        $scope.data = data;
    });
});

答案 2 :(得分:2)

最好使用服务说commonService并从服务器内的变量获取数据库存储中的数据之后

this.dbDataSearch = function(parameters){
  // Search record from database
  this.resultData = data;
}

在控制器1中:

$scope.data = commonService.resultData;

在控制器2中:

$scope.data = commonService.resultData;

在控制器n:

$scope.data = commonService.resultData;

答案 3 :(得分:1)

在angularJS中,您可以通过不同方式执行此操作。您可以使用$ rootscope,也可以广播数据,也可以使用服务或工厂。

但赌注的首选方式是使用服务。首先,它很容易。您可以在每个控制器上使用相同的服务来访问数据。

如果您想了解有关angularjs服务的更多信息,请查看以下链接。

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/