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

Question

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

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

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

谢谢！

Answer 1

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

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

如果你想跨不同的持久化数据routes，你将需要创建一个 shared 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
});

这是一个小提琴。