Javascript AngularJS使用$rootScope作为数据存储 我有一个想法,我的盎格鲁JS应用程序,我很好奇如果盎格鲁JS社区会认为它可以这样做。简而言之,我正在连接到一个数据API并在页面上显示我的结果
我已经创建了一个AngularJS服务,它在Javascript AngularJS使用$rootScope作为数据存储 我有一个想法,我的盎格鲁JS应用程序,我很好奇如果盎格鲁JS社区会认为它可以这样做。简而言之,我正在连接到一个数据API并在页面上显示我的结果,javascript,html,angularjs,angularjs-scope,Javascript,Html,Angularjs,Angularjs Scope,我已经创建了一个AngularJS服务,它在$rootScope.DataStore上创建了一个数据存储。我还有一个服务方法,它使用API端点返回的数据更新数据存储。如果我使用DataStore.update('products')从控制器内部请求“products”API端点,这将使用我的产品数据更新$rootScope.DataStore.products 现在,在view/partial中,我所需要做的就是说ng repeat=“DataStore.products中的product”来显
$rootScope.DataStore
上创建了一个数据存储。我还有一个服务方法,它使用API端点返回的数据更新数据存储。如果我使用DataStore.update('products')
从控制器内部请求“products”API端点,这将使用我的产品数据更新$rootScope.DataStore.products
现在,在view/partial中,我所需要做的就是说ng repeat=“DataStore.products中的product”
来显示我的数据,而不管我在哪个控制器范围内。因此,本质上,我的数据存储是我唯一的真相来源
我觉得我从这个方法中得到的是易于遵循的语义和最少的控制器编码。因此,每当数据存储更新时,绑定到数据存储的任何内容都会更新
这会不会给
$rootScope
摘要周期带来太多的负载,或者这只是一种奇怪的方式?或者这是一种非常棒的方式吗?:)欢迎发表任何意见。此问题在此处引用的
有时,您希望将某些数据片段全局化
整个应用程序。对于这些,您可以注入$rootScope并在上设置值
它和其他任何范围一样。由于作用域继承自根作用域,
这些值将可用于附加到的表达式
像ng这样的指令显示的值与本地$scope上的值一样
似乎团队确实鼓励以这种方式使用$rootScope
,但有以下警告:
当然,全局状态很糟糕,您应该节约使用$rootScope,
就像您(希望)在任何语言中使用全局变量一样。
特别是,不要将其用于代码,只用于数据。如果你想
将函数放在$rootScope上,将其放在
可以在需要的地方注入服务,而且更容易
测试
相反,不要创建一个服务,它在生活中的唯一目的就是
存储和返回数据位
这不会给$digest
周期(实现基本的脏检查以测试数据突变)带来太多的负载,而且这不是一种奇怪的方法
编辑:有关性能的更多详细信息,请参阅Misko(AngularJS开发人员)的回答,请特别注意性能部分 我想我不知道你为什么需要使用rootScope?服务实例的生命周期也是整个应用程序的生命周期,因此您正在使用的任何数据模式/语义都可以存储在服务本身中,并在控制器之间共享。然而,这两种方法中的任何一种都不能像使用本地存储那样在刷新后存活 其余部分听起来像是一种惰性加载方法。其中,服务是唯一“知道”数据是否已从远程加载并在已缓存时返回的东西,如果未缓存则缓存并返回?如果我理解正确的话,这是一个很好的模式 编辑: 在这里,我对延迟加载采取了类似的方法,注意缓存就在服务本身中:
angular.module('HN_Reddit_Mashup.Services', [])
.factory('HackerNews', function($http) {
var HackerNewsCache = {};
return {
get: function(url) {
return HackerNewsCache[url] ||
(HackerNewsCache[url] = $http.jsonp("http://api.thriftdb.com/api.hnsearch.com/items/_search?q=" + url + "&callback=JSON_CALLBACK"));
},
};
})
为了安抚各方,为什么不使用$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不是理想的地方
我刚刚对此进行了更多的研究,而不是将数据存储在$ROOTSCOPE上,您可以考虑使用“服务”来管理您的数据/单独的关注点,如这里所描述的(尤其是最后的代码示例):
然后,在使用该方法创建的“服务”中,无论您是将数据保存在内存、cacheFactory(如所述)和/或DB(如通过AJAX)中,都取决于适合您应用程序需要的内容。这还意味着可以根据需要独立更改数据的存储方式。我的经验是,使用$rootScope存储我的数据模型中所有NGView在我的应用程序中通用的部分是最方便的方式
<div>{{mymodel.property}}</div>
如果使用服务或cachefactory,则对html模板中模型的每次访问都将成为一个函数,其可读性不如访问rootScope属性的用户。使用$rootScope可以减少代码,从而减少错误和测试
当然,只有所有ngView的公共部分存储在$rootScope中。模型的其余部分存储在本地$scope中
函数上的监视也比对象属性上的监视慢。因此,性能方面,$rootScope也更好。因为他已经拥有了该服务,而且它的部分工作也是管理API(不仅仅是存储和返回),这似乎反对在这种情况下使用$rootScope。就我个人而言,我更喜欢将数据远离
$rootScope
,但这里是常见问题解答的认可。因此,既然这样使用$rootScope
没有什么真正的问题,那就取决于程序员的偏好以及在任何给定的应用程序中什么是最有意义的。谢谢大家的意见!感谢您指出使用$root更好的部分
<div>{{getPropertyModel()}}</div>
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;
};
}]);