javascript - Angular 创建数据持有者/存储库

Question

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

这是我的想法的一个 super 简单的例子

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

之后我可以将其注入(inject)到我的 Controller 中。在我尝试定义我自己的方法(例如 GetById)之前，它工作得很好。突然 Angular 返回 .GetById is not a function

那么我的问题是 - 是否可以按照我已经提到的方式创建存储库(能够定义自定义函数，例如 GetById)？如果是，如何正确执行？

在此问题上的任何帮助将不胜感激。

Answer 1

请查看使用 service 方法跨 Angular 项目共享数据的可能解决方案。

我已经模拟设置您的数据，并通过 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>

Controller 和服务

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

See Fiddle for demo