angular创建数据持有者/存储库

Question

我正在尝试在控制器之间共享数据。我来自C#环境，我习惯于创建一个类，其中包含一个私有成员和一些检索、操作/存储数据的方法。

以下是我心目中的一个超级简单的例子

public class MyRepository
{
    private List<string> Items { get; set; }
    public MyRepository()
    {
        Items = new List<string>();
    }
    public List<string> Get()
    {
        return Items;
    }
    public string GetById(int Id)
    {
        return Items[Id];
    }
    public void AddItem(string sNewItem)
    {
        Items.Add(sNewItem);
    }
    public void DeleteItems()
    {
        Items.Clear();
    }
}

现在回到Angular，我做了一些研究，发现为了能够共享数据（创建上面提到的存储库），我必须创建一个名为Service的东西。好吧，没问题，我遵循了一个指南，想出了这样的东西：

angular.module("IP-APP", ["ngRoute"])
    .factory("Item", function () {
        var savedItem = {};
        function set(newItem) {
            savedItem = newItem;
        };
        function get() {
            return savedItem;
        };
        return {
            set: set,
            get: get
        };
    })

之后我可以将其注入到我的控制器中。在我尝试定义自己的方法（如GetById）之前，这种方法非常有效。Angular突然返回.GetById is not a function

那么我的问题是——是否有可能以我已经提到的方式创建一个存储库（能够定义自定义函数，如GetById）？如果是，如何正确操作？

在这件事上如有任何帮助，我们将不胜感激。

Answer 1

请查看使用service方法在角度项目中共享数据的可能解决方案。

我模拟设置了您的数据，并通过id返回所有或特定项目。查看代码或JSFiddle

查看

<div ng-app="myApp">
 <div ng-controller="testCtrl">
    <b>Get all Service data</b><br/>
    <div ng-repeat="bot in data">
      {{bot.name}}   {{bot.id}}
    </div>
    <br/><br/>
    <b>Get 1 item with id from service</b><br/>
    {{bot.name}} - {{bot.id}}
  </div>
</div>

控制器&服务

var myApp = angular.module('myApp', []);
// Service (singleton)
myApp.service('userService', function() {
    // data
  var savedItems = [];
  function setItem(newItem) {
    if(angular.isUndefined(newItem)) return;
    savedItems[newItem.id] = newItem;
  };
  function getAll() {
    return savedItems;
  };
  function getById(id) {
    if(angular.isUndefined(id)) return;
    return savedItems[id];
  };
  return {
    set: setItem,
    getAll: getAll,
    getById: getById
  };

});
// controller
myApp.controller("testCtrl", function($scope, userService) {
    // set data
  userService.set({'name' : 'bot1', 'id':1});
  userService.set({'name' : 'bot2', 'id':2});
  userService.set({'name' : 'bot3', 'id':3});
  userService.set({'name' : 'bot4', 'id':4});
    // get all
  $scope.data = userService.getAll();
  // get bot1 by id 1
  $scope.bot = userService.getById(1);
})

请参阅Fiddle了解演示

Answer 2

在阅读了几篇文章后，我意识到我错过了最后的return语句。以下是我如何编辑我的代码：

angular.module("IP-APP", ["ngRoute"])
    .factory("Items", function () {
        this.savedItems = [];
        function set(newItem) {
            this.savedItems = newItem;
        };
        function get() {
            return this.savedItems;
        };
        function GetById(id)
        {
            var returnedItem = {};
            angular.forEach(this.savedItems, function (value, key) {
                if (value.id == id)
                    returnedItem = value;
            });
            return returnedItem;
        }
        return {
            set: set,
            get: get,
            GetById: GetById
        };
    })

然后在我的控制器中：

(function () {
    "use strict";
    angular.module("IP-APP").controller("detailController", detailController);
    function detailController ($routeParams, Item, Items) {
        var vm = this;
        vm.selectedItem = Items.GetById($routeParams.itemId);
    };
})();

这种方法在我的Angular应用程序中添加opt是否正确？