Question

我是一名正在开展AngularJS项目的Java / C ++开发人员。

在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是单身，同一集合可以根据需要重复使用。

＆＃13;

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();
    }
  });

＆＃13;

<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>

＆＃13;

Answer 2

在angularjs服务和工厂是singeltons适合这种情况。创建一个服务，在创建时将数据加载到数组，然后将该数组公开给消费者

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();

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

2 个答案: