如何在角度JS中保持数据和模型 [英] How to persist data and model in angular JS

问题描述

我有一个搜索页面，用户输入搜索条件并显示搜索结果，当用户导航到另一个页面并返回此页面时，结果应该保持不变。

I have one search page where user enters search criteria and search results will be displayed and when the user navigates to another page and comes back to this page the results should be persist.

每个子模块都有自己的app.js和控制器，以及如何跨页面保存数据。我不太确定如何使用$ localStorage

Each submodule has it's own app.js and controller and how to persist data across pages. I am not pretty sure how to go with $localStorage

推荐答案

正如评论所说，服务和工厂都具备这种能力。我通常使用像你建议的localStorageService来处理它。首先，在index.html AFTER angularJS中加载本地存储模块，但在你的app.js之前。

As comments have said, services and factories are both capable of this. I generally handle this using localStorageService like you have suggested. First, load the local storage module in your index.html AFTER angularJS, but BEFORE your app.js.

<script src="/angular/angular.js"></script>
<script src="/lib/angular-local-storage.js"></script>
<script src="/app.js"></script>

接下来，在主模块的声明中包含LocalStorageModule作为依赖项。

Next, include LocalStorageModule as a dependency in your main module's declaration.

angular.module('test',['LocalStorageModule']);

现在，使用以下命令在相关模块的声明文件中配置locaStorageService：

Now, configure locaStorageService in the relevant module's declaration file using:

localStorageServiceProvider
  .setStorageType('localStorage');

总之，你的app.js文件应该类似于：

All together, your app.js file should resemble this:

angular.module('test',['LocalStorageModule']);

  config.$inject = ['localStorageServiceProvider'];
  function config (localStorageServiceProvider) {
  localStorageServiceProvider
      .setStorageType('localStorage');
  }

  angular
  .module('test')
  .config(['localStorageServiceProvider', config]);
  })();

我在编写脚本之前将其缩小，所以我使用依赖注入，特别是使用$ inject语法。

I minify my scripts before they go into production, so I use dependency injection, specifically with the $inject syntax.

一个示例控制器在页面加载时从cookie加载您的查询，并在执行搜索时将查询保存到cookie（$ scope.doSearch）：

An example controller that loads your query from a cookie on page load, and saves your query to a cookie when you execute a search ($scope.doSearch):

(function () {

angular.module("pstat")
       .controller("homeCtrl", homeCtrl);

  homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
   function homeCtrl ($log, dataService, localStorageService, $http) { {
     if (localStorageService.get("query")) { //Returns null for missing 'query' cookie
        //Or store the results directly if they aren't too large
        //Do something with your saved query on page load, probably get data
        //Example:
        dataService.getData(query)
        .success( function (data) {})
        .error( function (err) {})
     }
     $scope.doSearch = function (query) {
       vm.token = localStorageService.set("query", query);
       //Then actually do your search
     }
   })
}()

只要您的根URL没有更改，您就可以通过localStorageService在任何页面上使用您的查询或结果访问此cookie。如果您需要更多详细信息请告诉我。

As long as your root URL does not change, you can access this cookie with either your query or your results on any page through localStorageService. If you need more details on anything just let me know.

注意如果您想在页面加载时自动执行此操作，则需要将控制器包装在立即调用函数表达式。祝好运！ AngularJS具有相当高的学习曲线，但却是最强大的前端软件套件之一。

Note if you want to do this automatically on page load, you need to wrap your controller in an Immediately Invoked Function Expression. Good luck! AngularJS has a fairly high learning curve, but is one of the most powerful front end software suites available.

这篇关于如何在角度JS中保持数据和模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！