如何使用angular.js维护SPA中的页面状态

时间:2016-10-03 15:16:47

标签: angularjs

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

问题:在不污染$ rootScope的情况下,跨控制器(SPA页面)维护状态的正确方法是什么?

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

谢谢, -Andres

2 个答案:

答案 0 :(得分:4)

将状态直接存储在$ rootScope中并不是一个好习惯。

为什么?

因为在角度(脏检查)的摘要循环期间,rootScope将检查应用程序的每个范围观察者是否稳定",这意味着在DOM内部有许多很多循环来检查修改这真的很重......

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

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

使用保存状态的高阶指令/组件,并通过子组件/指令传递数据。这样一切都在父母中管理,你不必在其他地方存储任何东西,为你提供无状态组件。 组件树与状态树匹配时非常简单的解决方案。

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

您可以使用角度服务直接在其中存储某种信息,并在您需要的任何地方重用该状态。我不太喜欢这个解决方案,因为angularjs中的每个服务(工厂/提供商/服务)都是单身,而且它是反模式......

解决方案3 - Redux

Redact已被Reactjs社区展示(并且几乎被使用),但它不仅仅适用于React。

你可以将它与Angularjs,Angular 2等一起使用......如果你的组件树不适合你的状态树,我建议你去关注这个在任何前端javascript项目中工作得很好的库/ FW。

答案 1 :(得分:1)

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

在您所在的州内,您可以使用某种缓存机制,例如DRIVER=SQL Server Native Client 11.0;SERVER=***;DATABASE=***;UID=***;PWD=***;regional=no;Application Name=xxx;MARS_Connection=yes; localStorage来维护持久存储空间

sessionStorage

代码courtesy