Angularjs數據存儲的最佳實踐

Question

我的角應用程序有2個控制器。 我的問題是，當用戶離開頁面時，控制器不會保留數據。

如何將控制器上的選定數據存儲到數據存儲中，以便在其他控制器之間使用？

Answer 1

選項1 - 定制service

您可以利用專用的角度服務在控制器之間存儲和共享數據（ 服務是單實例對象）

服務定義

 app.service('commonService', function ($http) {

        var info;

        return {
            getInfo: getInfo,
            setInfo: setInfo
        };

        // .................

        function getInfo() {
            return info;
        }

        function setInfo(value) {
            info = value;
        }
});

用於多個控制器

app.controller("HomeController", function ($scope, commonService) {

    $scope.setInfo = function(value){
        commonService.setInfo(value);
    };

});


app.controller("MyController", function ($scope, commonService) {

    $scope.info = commonService.getInfo();

});

---

選項2 - html5 localStorage

您可以使用內置瀏覽器本地存儲並從任何地方存儲數據

寫作

$window.localStorage['my-data'] = 'hello world';

讀

var data = $window.localStorage['my-data']
// ...

• 看看這個很棒的項目： https ： //github.com/grevory/angular-local-storage

---

選項3 - 通過Web服務器API

如果需要在不同用戶之間保存數據，則應將其保存在服務器端的某個位置（db / cache）

function getProfile() {
    return $http.get(commonService.baseApi + '/api/profile/');
}

function updateProfile(data) {
    var json = angular.toJson(data);
    return $http.post(commonService.baseApi + '/api/profile/', json);
}

Answer 2

編輯請參閱Jossef Harush的回答，他寫了深入的回復，其中包括其他方法，包括這一方法。

我建議使用localStorage或sessionStorage - http://www.w3schools.com/html/html5_webstorage.asp 。

HTML本地存儲提供了兩個用於在客戶端上存儲數據的對象：

• window.localStorage - 存儲沒有過期日期的數據
• window.sessionStorage - 存儲一個會話的數據（瀏覽器選項卡關閉時數據丟失）

這假設您不希望將數據POST / PUT到您的Web服務（在您的問題中提到Windows服務）。

如果您的數據是數組或某種類型，您可以將其轉換為JSON以存儲為字符串，然后在需要時您可以按如下方式將其解析 - 如何在localStorage中存儲數組？ ：

var names = [];
names[0] = prompt("New member name?");
localStorage["names"] = JSON.stringify(names);

//...
var storedNames = JSON.parse(localStorage["names"]);

Answer 3

在其他答案（AFAIK）中沒有提到選項。

活動

• 您可以使用事件在控制器之間進行通信。

• 這是一種簡單的通信，不需要中介（如服務），也不能被用戶擦除（如HTML存儲）。

• 所有代碼都寫在您嘗試與之通信的控制器中，因此非常透明。

下面將介紹如何利用事件在控制器之間進行通信的一個很好的示例。

出版商是想要發布的范圍（換句話說，讓別人知道發生了什么）。 大多數人並不關心發生了什么，也不是這個故事的一部分。

訂閱者是關心某個事件已經發布的用戶（換句話說，當它被通知時，嘿，這發生了，它會做出反應）。

我們將使用$ rootScope作為發布者和訂閱者之間的中介 。 這總是有效的，因為無論范圍發出什么事件，$ rootScope都是該范圍的父級或父級父級的父級。當$ rootScope廣播（告訴所有繼承的人）關於某個事件時，每個人都會聽到（因為$ rootScope只是那個，范圍繼承樹的根）所以app中的每個其他范圍都是它的孩子或孩子的孩子的孩子。

// publisher
angular.module('test', []).controller('CtrlPublish', ['$rootScope','$scope',
    function ($rootScope, $scope) {

      $scope.send = function() {
        $rootScope.$broadcast('eventName', 'message');
      };

}]);

// subscriber
angular.module('test').controller('ctrlSubscribe', ['$scope',
    function ($scope) {

      $scope.$on('eventName', function (event, arg) { 
        $scope.receiver = 'got your ' + arg;
      });

}]);

上面我們看到兩個控制器使用事件向對方傳達消息。 該事件具有名稱，它必須是唯一的，否則，訂戶不區分事件。 事件參數保存自動生成但有時有用的數據，消息是有效負載。 在這個例子中，它是一個字符串，但它可以是任何對象。 因此，只需將您希望在對象內部傳遞的所有數據放入對象中，然后通過事件發送即可。

注意：

為了這個目的， 您可以避免使用根作用域 （並限制獲得事件通知的控制器的數量） ，以防兩個作用域在彼此的直接繼承行中。 進一步說明如下：

$ rootScope。$ emit只允許其他$ rootScope偵聽器捕獲它。 當你不希望每個$ scope獲得它時，這很好。 主要是高級別的溝通。 可以把它想象成成年人在一個房間里互相交談，這樣孩子們就聽不到了。

$ rootScope。$ broadcast是一種幾乎可以聽到它的方法。 這相當於父母大喊大叫，晚餐准備就緒，所以房子里的每個人都聽到了。

$ scope。$ emit是你希望$ scope及其所有父項和$ rootScope聽到事件的時間。 這是一個在家里向父母抱怨的孩子（但不是在其他孩子可以聽到的雜貨店）。 當您想要從作為訂閱者的子或第n個孩子的發布者進行通信時，這是一種快捷方式。

$ scope。$ broadcast用於$ scope本身及其子節點。 這是一個孩子對它的毛絨動物竊竊私語，所以他們的父母聽不到。

編輯：我認為有一個更詳細的例子的plunker就足夠了所以我決定在這里保持簡單。 這個精心解釋應該更好。

Answer 4

要在同一頁面上的兩個控制器之間共享數據，您可以使用工廠/服務。 例如，查看AngularJS控制器之間的共享數據 。

但是，如果這是跨頁面重新加載/刷新，則需要將數據存儲在本地存儲中，然后在重新加載時讀取它。 這方面的一個例子是： 如何使用Angularjs將數據存儲在本地存儲中？

Answer 5

查看此庫https://www.npmjs.com/package/angularjs-store

這可以幫助您更輕松地管理應用程序狀態，因為它會迫使您在應用程序上擁有單向數據流。