在 AngularJS 中保存创建的数据

Question

我有一个关于在 AngularJS 中保存数据的一般性问题。是否有机会将数据保存在 json 文件中并在您更改站点时保留它们？我的意思是当我将站点从“人员”更改为“家”并返回到“人员”时，创建的数据是否保留在人员列表中？我该如何解决这个问题？还是只能使用例如用 Java/C# 编写的 WebApi 来执行此操作？有人知道吗？

我目前的例子是在json数据列表中推送数据：

$scope.addItem = function (item) {
  $scope.list.push(item);
  $scope.item = null;
};

Answer 1

这取决于您希望将数据保留多长时间，但有几种选择。如果您想在您的应用程序之间共享数据，就在用户访问您的网站时，任何有角度的“服务”（工厂、服务、提供者）都可以工作，因为它们都是单例的。有关差异的更多信息，请查看此答案：AngularJS: Service vs provider vs factory

如果您希望在用户访问期间保留数据，则应考虑使用 LocalStorage。这里有一个很棒的 Angular 本地存储模块：https://github.com/grevory/angular-local-storage

Answer 2

我可以想到 3 种方法来获得这个

创建自定义服务

您可以利用专用的 Angular 服务在控制器之间存储和共享数据（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("PersonsController", function ($scope, commonService) {

    $scope.info = commonService.getInfo();

});

---

使用本地存储

您可以使用内置的浏览器本地存储并从任何地方存储您的数据

写作

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

阅读

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

• 看看这个很棒的项目： https://github.com/grevory/angular-local-storage

---

通过服务器 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 3

不知道这是否是你要找的东西，但你可以使用在页面之间共享的“$rootscope”（如果你愿意，有点像会话）。 您可以像在 $scope 中一样在其中存储数据，并且您的控制器必须在参数中采用 $rootscope

Answer 4

有很多方法可以做到这一点。

您要么使用$rootScope，要么创建一个service 来保存全局变量。

$rootScope 示例

// Angular
angular.module('app', [])
       .controller('PersonsController', function ($rootScope) {

            $rootScope.personsList = [
                {
                    name: 'Eve',
                    gender: 'Female'
                },
                {
                    name: 'John',
                    gender: 'Male'
                }
            ];

       })
       .controller('HomeController', function ($rootScope, $scope) {

            // You even don't need to store it in $scope
            // You just use $root.personsList directly in your HTML

       });

// HTML
<div ng-controller="HomeController">
    <ul>
        <li ng-repeat="person in $root.personsList">
            <p>{{ person.name }}</p>
            <p>{{ person.gender }}</p>
        </li>
    </ul>
</div>

服务示例

// Angular
angular.module('app', [])
       .service('SharedData', function() {

            var sharedData = {};
            var vm = this;
                vm.Set = Set;
                vm.Get = Get;

            /**
             * Set a shared data identified by its key.
             * 
             * @param {String} key - Unique key identifier
             * @param {Any} value - Value to be set
             */
            function Set(key, value) {
                sharedData[key] = value;
            }

            /**
             * Retrieve a shared data.
             * 
             * @param {String} key - The key identifier
             */
            function Get(key) {
                if (sharedData[key])
                    return sharedData[key];
                else
                    return null;
            }

       })
       .controller('PersonsController', function (SharedData) {

            var personsList = [
                {
                    name: 'Eve',
                    gender: 'Female'
                },
                {
                    name: 'John',
                    gender: 'Male'
                }
            ];

            SharedData.Set('personsList', personsList);

       })
       .controller('HomeController', function ($scope, SharedData) {

            $scope.personsList = SharedData.Get('personsList');

       });

// HTML
<div ng-controller="HomeController">
    <ul>
        <li ng-repeat="person in personsList">
            <p>{{ person.name }}</p>
            <p>{{ person.gender }}</p>
        </li>
    </ul>
</div>

我没有测试过代码，但我希望你能明白它们之间的关系。