在 AngularJS 中创建静态/全局集合

Question

我是一名Java/C++开发人员，正在做一个AngularJS项目。

在 AngularJS 中，我需要创建一个可以从各种控制器访问的集合(例如数组)，并且不需要在每次重新加载控制器时重新填充该集合。

在 Java 中，我会创建一个静态类来保存集合，并在第一次请求时懒惰地填充它。任何后续调用都将有权访问已创建的集合。(这是一个非常简单的例子)。

class MyCollectionClass {
private volatile static ArrayList<Items> s_items = null;    
public static synchronized List<Items> getItems() {
if (s_items == null)
s_items = Foo.getItemsFromNetwork(); // blocking call
return s_items;
}
}
// elsewhere in the code
List<Items> l = MyCollectionClass.getItems();

如何在 AngularJS 中做类似的事情？我发现文档对此不是很清楚。

Answer 1

在AngularJS中，您可以创建一个服务并遵循在Java中应用的相同原则(例如)。

在 AngularJS 中，服务是单例的，因此可以在注入服务的任何地方重用相同的集合。

请参阅下面的示例，其中创建了一个服务和两个控制器。这两个控制器使用相同的集合。(在那里可以找到许多其他好的解决方案，以及许多其他没有应用良好实践方法的解决方案)

流程如何：

1-该服务是使用null中的集合创建的。

2-创建控制器1(ctrl1)(service注入)并进行检查以查看服务中的集合是否null。如果是这样，请使用以下集合['element1-Controller1', 'element2-Controller1']对其进行初始化。随着集合的null此新集合已设置。

3-创建控制器2(ctrl2)(service注入)并进行检查以查看服务中的集合是否null。如果是这样，请使用以下集合['element1-Controller2', 'element2-Controller2']对其进行初始化。由于未null集合，因此未设置此新集合。

4-结论：service是单例的，可以根据需要重复使用相同的集合。

angular
.module('app', [])
// a singlenton instance of this will be created and shared accross all components of the application
.service('service', function() {
var self = this;
self.exp = {
collection: null,
setCollection: fnSetCollection,
getCollection: fnGetCollection
};
return self.exp;
function fnSetCollection(collection) {
self.exp.collection = collection;
}
function fnGetCollection() {
return self.exp.collection;
}
})
.controller('ctrl1', function(service) {
var vm = this;
vm.wizard = {
getCollection: fnGetCollection
};
init();
return vm.wizard;
function init() {
if (!fnGetCollection()) {
service.setCollection(['element1-Controller1', 'element2-Controller1'])
}
}
function fnGetCollection() {
return service.getCollection();
}
})
.controller('ctrl2', function(service) {
var vm = this;
vm.wizard = {
getCollection: fnGetCollection
};
init();
return vm.wizard;
function init() {
if (!fnGetCollection()) {
service.setCollection(['element1-Controller2', 'element2-Controller2'])
}
}
function fnGetCollection() {
return service.getCollection();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl1 as ctrl1">
<span> Collection in controller 1</span>
<br /><br /> {{ctrl1.getCollection()}}
<div>
<br /><br />
<div ng-controller="ctrl2 as ctrl2">
<span> Collection in controller 2</span>
<br /><br /> {{ctrl2.getCollection()}}
<div>
</div>

Answer 2

在angularjs中，服务和工厂是单打独奏，非常适合这种情况。创建一个服务，该服务在创建时将数据加载到数组，然后将该数组公开给使用者

angular.module('app').factory("exampleServ", function(){
var s_items = [];
var getItems = function(){
return s_items;
};
var loadData = function(){
//load your data here
s_items = data;
};
//invoke the method which will make sure the items is loaded to the array
loadData();
return {
getItems: getItems
}
});

然后在控制器中使用该服务exampleServ.getItems();