角度作成データホルダー/リポジトリ

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

} 

に持っているものの超簡単な例である今、戻っ角度に来て、私はいくつかの研究を行なったし、データを共有することができるようにするために（上記を作成することが判明しました私は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); 
}) 

See Fiddle for demo

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

は私の角アプリケーションにaddoptするために、このアプローチは正しいですか？