Angularjs 如何使用angular.js在SPA中跨页面维护状态_Angularjs

Angularjs 如何使用angular.js在SPA中跨页面维护状态

angularjs

Angularjs 如何使用angular.js在SPA中跨页面维护状态,angularjs,Angularjs,使用单页架构，每次使用转到特定页面时，该页面的控制器都会运行。我需要在各个SPA页面上维护很多状态问题：在不污染$rootScope的情况下，跨控制器（SPA页面）维护状态的正确方法是什么出于某种原因，使用服务来管理状态似乎并不“合适” 谢谢， -安德烈斯答案是使用服务。服务是可注入多个控制器的单例对象，可用于存储状态在您的州内，您可以使用某种缓存机制，如localStorage，或sessionStorage来维护持久存储 app.config(function($routeProvid

使用单页架构，每次使用转到特定页面时，该页面的控制器都会运行。我需要在各个SPA页面上维护很多状态

问题：在不污染$rootScope的情况下，跨控制器（SPA页面）维护状态的正确方法是什么

出于某种原因，使用服务来管理状态似乎并不“合适”

谢谢，

-安德烈斯

答案是使用服务。服务是可注入多个控制器的单例对象，可用于存储状态

在您的州内，您可以使用某种缓存机制，如

localStorage

，或

sessionStorage

来维护持久存储

app.config(function($routeProvider){
 $routeProvider.when('/', {
   controller: 'MainCtrl'
 }).when('/another', {
   controller: 'SideCtrl'
 });
});

app.controller('MainCtrl', function($scope, State){
  $scope.formData = State.formData;   

  $scope./* other scope stuff that deal with with your current page*/
});

app.controller('SideCtrl', function($scope, State){
  $scope.formData = State.formData; // same state from MainCtrl

});

app.directive('myDirective', function(State){
  return {
    controller: function(){
      State.formData; // same state!
    }
  };
});

代码

答案是使用服务。服务是可注入多个控制器的单例对象，可用于存储状态

在您的州内，您可以使用某种缓存机制，如

localStorage

，或

sessionStorage

来维护持久存储

app.config(function($routeProvider){
 $routeProvider.when('/', {
   controller: 'MainCtrl'
 }).when('/another', {
   controller: 'SideCtrl'
 });
});

app.controller('MainCtrl', function($scope, State){
  $scope.formData = State.formData;   

  $scope./* other scope stuff that deal with with your current page*/
});

app.controller('SideCtrl', function($scope, State){
  $scope.formData = State.formData; // same state from MainCtrl

});

app.directive('myDirective', function(State){
  return {
    controller: function(){
      State.formData; // same state!
    }
  };
});

代码

将状态直接存储在$rootScope中不是一种好的做法

为什么?

因为在angular（脏检查）的摘要周期中，rootScope将检查应用程序的每个作用域观察器是否“稳定”，这意味着DOM中有许多、许多、许多循环来检查修改，这真的很繁重

但是，您可以做得更好，并且您有多种解决方案：

解决方案1-您的组件/指令树适合您的状态树

使用保存状态并通过子组件/指令传递数据的高阶指令/组件。这样，所有内容都在父级中管理，您不必在任何其他地方存储任何内容，从而为您提供无状态组件。当组件树与状态树匹配时，解决方案非常简单

解决方案2-您的组件/指令树不适合您的状态树

您可以使用angular服务直接在其内部存储某种信息，并在任何需要的地方重用状态。我真的不喜欢这个解决方案，因为angularjs中的每个服务（工厂/提供商/服务）都是单例的，这是一种反模式

解决方案3-重复使用

Reactjs社区已经介绍（并几乎使用）了Redux，但它不仅仅针对React

您可以将其与Angularjs、Angular2等一起使用。。。如果您的组件树不适合您的状态树，我建议您关注一下这个库，它在任何前端javascript项目/fw中都能很好地工作。

将您的状态直接存储在$rootScope中不是一个好的做法