Angularjs数据存储最佳实践

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

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


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

    编辑参见Jossef Harush的回答,他写了一篇深入的回应,其中包括其中的其他方法。

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

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

  • window.localStorage - 存储没有过期日期的数据
  • window.sessionStorage - 存储一个会话的数据(关闭浏览器选项卡时数据丢失)
  • 这假定您不想将数据发布/发布到您的web服务(在您的问题中提及windows服务)。

    如果你的数据是一个数组或者某种类型的数据,你可以将它转换为JSON来存储为一个字符串,然后当你需要它时,可以按如下方式解析它 - 如何在localStorage中存储一个数组?

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

    其他答案中没有提及的选项(AFAIK)。

    活动

  • 您可以使用事件进行控制器之间的通信。

  • 这是一个直接的沟通,不需要中介(如服务),不能被用户(如HTML存储)擦除。

  • 所有的代码都是用您想要与之通信的控制器编写的,因此非常透明。

  • 下面是一个很好的例子,说明如何利用事件在控制器之间进行通信。

    发布者是想要发布的范围(换句话说,让别人知道发生了什么)。 大多数人不关心发生了什么,也不是这个故事的一部分。

    用户是关心某个事件已经发布的用户(换句话说,当它得到通知时嘿,这发生了,它会起反应)。

    我们将使用$ rootScope作为发布者和订阅者之间的中介。 这总是起作用的,因为无论任何作用域发出的事件,$ rootScope都是该作用域的父对象,或父对象的父对象的父对象。当$ rootScope广播(告诉所有继承的)每个人都会听到(因为$ rootScope只是即范围继承树的根),所以应用中的每个其他范围都是它的孩子或孩子的孩子的孩子。

    // 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侦听器捕获它。 当你不希望每个范围都能得到它时,这很好。 主要是高层次的沟通。 把它想象成大人们在一个房间里互相交谈,这样孩子们就听不到他们。

    $ rootScope。$ broadcast是一种让所有东西都能听到的方法。 这相当于家长大吼大叫晚餐已准备就绪,所以家中的每个人都能听到它。

    $ scope。$ emit是你希望$ scope和它的所有父母和$ rootScope能够听到的事件。 这是一个在家里抱怨父母的孩子(但不是在其他孩子可以听到的杂货店里)。 当您想要从订阅者的子女或第n个孩子的发布者进行通信时,这是一种快捷方式。

    $ scope。$ broadcast用于$ scope本身及其子节点。 这是一个小孩对它的毛绒动物窃窃私语,所以他们的父母听不到。

    编辑:我认为与更复杂的例子plunker就足够了,所以我决定保持简单。 这个详尽的解释应该会更好。

    链接地址: http://www.djcxy.com/p/77891.html

    上一篇: Angularjs Best Practice for Data Store

    下一篇: Use underscore inside Angular controllers