Angularjs数据存储的最佳实践

时间:2015-07-25 12:18:04

标签: javascript angularjs

我的角度应用程序有2个控制器。我的问题是,当用户离开页面时,控制器不会保留数据。

如何将控制器上的选定数据存储到数据存储中,以便在其他控制器之间使用?

5 个答案:

答案 0 :(得分:27)

选项1 - 自定义service

您可以利用专用的角度服务在控制器之间存储和共享数据(services是单实例对象)

服务定义

 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']
// ...

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

答案 1 :(得分:5)

编辑请参阅Jossef Harush's回答,他已撰写深入回复,其中包含其他方法,包括此方法。

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

  

HTML本地存储提供了两个用于在客户端上存储数据的对象:

     
      
  • window.localStorage - 存储没有过期日期的数据
  •   
  • window.sessionStorage - 存储一个会话的数据(浏览器选项卡关闭时数据丢失)
  •   

这假设您不希望将数据POST / PUT到您的Web服务(在您的问题中提及Windows服务)。

如果您的数据是数组或某种类型,您可以将其转换为JSON以存储为字符串,然后在需要时可以按如下方式将其解析 - How do I store an array in localStorage?

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

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

答案 2 :(得分: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就足够了所以我决定在这里保持简单。这个精心解释应该更好。

答案 3 :(得分:1)

要在同一页面上的两个控制器之间共享数据,您可以使用工厂/服务。例如,查看Share data between AngularJS controllers

但是,如果这是跨页重新加载/刷新,则需要将数据存储在本地存储中,然后在重新加载时读取它。这方面的一个例子是:How do I store data in local storage using Angularjs?

答案 4 :(得分:0)

检出此库https://www.npmjs.com/package/angularjs-store

这可以帮助您更轻松地管理应用程序状态,因为它将迫使您在应用程序上进行单一方式的数据流。