角度創建數據存儲器/存儲庫

我想在我的控制器之間共享數據。我來自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）之前，這一切都很好。突然角返回.GetById is not a function

然後我的問題是 - 是否有可能以我已經提到的方式創建一個存儲庫（能夠定義自定義函數，如GetById）？如果是，如何正確執行？

在這個問題上的任何幫助將不勝感激。

來源

2016-07-29 Robert J.

請參閱使用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

來源

2016-07-29 13:58:44

謝謝您的回答！您的礦山解決方案有什麼區別？我使用工廠，而您使用服務 –

所有服務都是單身;他們會在每個應用程序中實例化一次。它們可以是任何類型的，不管它是原始的，對象文字，函數還是自定義類型的實例。價值，工廠，服務，常量和提供者方法都是提供者。他們教噴油器如何實例化服務。除了這個區別之外，還要注意'getById'的不同之處。使用數組時，您可以使用該鍵。如果id不存在，請務必添加正確的處理。 –

除此之外，我還沒有看到您的更新答案，因爲我正忙於爲您發佈的問題提供解決方案。也許它派上用場:) –

在閱讀了幾篇文章後，我意識到，我錯過了最後的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？

來源

2016-07-29 13:55:38

角度創建數據存儲器/存儲庫

回答

相關問題