AngularJS使用$ rootScope作为数据存储

我对我的AngularJS应用程序有了一个想法，我很好奇AngularJS社区是否会认为可以这样做...

总之，我连接到一个数据API并在页面上显示我的结果。 我创建了一个在$ rootScope.DataStore上创建数据存储的角度服务。 我也有一个服务方法，用从API端点返回的数据更新DataStore。 如果我使用DataStore.update（'products'）从控制器请求“products”API端点，则会使用我的产品数据更新$ rootScope.DataStore.products。 现在，在视图/部分中，我需要做的就是说ng-repeat =“DataStore.products中的产品”来显示我的数据，并且它与我所处的控制器范围无关。因此，本质上，我的DataStore是我真实的唯一来源。

我觉得从这个方法中获得的东西很容易遵循语义和最小的控制器编码。 因此，无论何时更新DataStore，绑定到DataStore的任何内容都会得到更新。

这会给$ rootScope digest循环带来太多的负担吗？或者这只是一个奇怪的方式来做到这一点？ 或者这是一个完全真棒的方式？ :)欢迎任何评论。

---

这个问题在这里引用的AngularJS FAQ中得到解决：

偶尔会有一些数据希望让整个应用程序成为全局数据。 对于这些，您可以注入$ rootScope并像其他任何作用域一样设置值。 由于作用域继承自根作用域，因此这些值可用于附加到像ng-show这样的指令的表达式，就像本地$ scope中的值一样。

看起来，团队鼓励用这种方式使用$rootScope ，这样做需要注意：

当然，全局状态很糟糕，你应该谨慎使用$ rootScope，就像你希望用任何语言的全局变量一样。 特别是，不要将它用于代码，只用于数据。 如果您试图在$ rootScope上放置一个函数，那么将它放入一个可以注入需要的服务中并且更容易测试的服务几乎总是更好。

相反，不要创建一个服务，其唯一目的是存储和返回数据。

这不会在$digest周期（它实现基本的脏检查以测试数据变异）上施加太多负载，这并不是一种奇怪的做事方式。

编辑：有关性能的更多详细信息，请参阅Misko（AngularJS dev）的这个答案：在AngularJS中数据绑定是如何工作的？ 特别注意性能部分。

---

为了安抚各方，为什么不使用$ cacheFactory。 这允许数据请求服务是无状态的，基本上只是一个getter和setter。 我会承认将数据保存在$ rootScope中，或者作为服务中的一个属性很方便，但感觉不对。 使用$ cacheFactory也很容易。

首先创建一个缓存服务：

angular.module('CacheService', ['ng'])
    .factory('CacheService', function($cacheFactory) {
    return $cacheFactory('CacheService');
});

将js文件包含在app.js中，然后将其注入到应用程序声明中：

var MyApp = angular.module('MyApp', ['CacheService']);

将其注入到服务中，像这样使用它：

'use strict'

MyApp.factory('HackerNewsService', function(CacheService) {
    return {
        getNews: function(key) {
            var news = CacheService.get(key);

            if(news) {
                return news;
            }

            return null;
        },
        setNews: function(key, value) {
            CacheService.put(key, value);
        },
        clearNews: function(key) {
            CacheService.put(key, '');
        }
    };
});

现在你所要做的就是将HackerNewsService注入到你的控制器中，并通过调用我们创建的方法来使用它。 例如：

HackerNewsService.setNews('myArticle', {headline: 'My Article', body: 'This is the body'});
$scope.article = HackerNewsService.getNews('myArticle');

---

我的经验是，使用$ rootScope存储我的应用程序中所有ngViews通用的数据模型的一部分是最方便的方法。

<div>{{mymodel.property}}</div>

对我来说更可读，更短

<div>{{getPropertyModel()}}</div>

与JavaScript

app.factory('MyModel', function(){
    return {
        getModel: function() { ... },
        setModel: function(m) { ... },
    }
});

app.controller('ctrl', ['$scope', 'MyModel', function($scope, MyModel){
    $scope.getPropertModel = function() {
        return MyModel.getModel().property;
    };
}]);

如果使用服务或者cachefactory，那么html模板中的每个对模型的访问都会成为一个函数，这会降低访问rootScope属性的可读性。 使用$ rootScope可以减少代码，从而减少错误和减少测试。

当然，只有所有ngView的公共部分存储在$ rootScope中。 模型的其余部分存储在本地$ scope中。

函数上的手表也比对象属性慢。 因此，性能方面，$ rootScope也更好。

链接地址: http://www.djcxy.com/p/23125.html

上一篇: AngularJS using $rootScope as a data store

下一篇: Angular vs Angular 2