Angular JS / 数据处理 / 概览页面

Question

我正在开发一个 Angular 应用程序。用户必须在不同的页面上输入数据，而可以在页面之间切换。此外，还有一个“概览页面”，用户可以在其中查看输入的数据。

所以现在我正在考虑如何在概览页面上显示输入的数据。我应该只使用 $rootScope 来获取数据还是将其存储在 JSON 对象中更好，或者 - 但 Angular 不建议这样做 - 将数据存储在服务中？

那么从不同的页面到哪里获取输入的数据呢？

谢谢！

Answer 1

如果您想在实际 HTML 页面之间而不是 routes 在单个页面中保留数据，您可以使用 LocalStorage。 Here is a service 这样会更容易一些。

另一种方法是使用 cookie。您可以阅读有关在 Angular here 中使用 cookie 的更多信息。

如果您想跨不同的routes 持久保存数据，您需要创建一个共享的service。以下是这种方法的一个示例：

<div ng-app="myApp">
    <a href="#one">one</a> | <a href="#two">two</a>
    <div ng-view></div>
    <script id="one.html" type="text/ng-template"><div><h1>Template One</h1>foo = {{shared.foo}}</div></script>
    <script id="two.html" type="text/ng-template"><div><h1>Template Two</h1>foo = {{shared.foo}}</div></script>
</div>

angular.module('myApp', []).
config(function($routeProvider){
    $routeProvider.
    when('/one', {templateUrl: 'one.html', controller: 'OneCrtl'}).
    when('/two', {templateUrl: 'two.html', controller: 'TwoCrtl'}).
    otherwise({redirectTo: '/one'});
}).
service('sharedService', [function() {
  this.foo = 'bar';
}]).
controller('OneCrtl', function($scope, sharedService){
    $scope.shared = sharedService
}).
controller('TwoCrtl', function($scope, sharedService){
    $scope.shared = sharedService
});

Here's a fiddle.