跳到主要内容

AngularJS 的路由、控制器和 digest 循环要一起理解

· 阅读需 3 分钟
一介布衣
全栈开发者 / 技术写作者

AngularJS 真正用到多页面切换时,很多新问题会一起冒出来。为什么切个路由控制器就重新执行了?为什么某个值明明变了,页面却没有马上更新?为什么 watch 一多以后页面开始变慢?这些问题如果分开看,很容易越学越乱。

路由决定当前该挂哪套模板和控制器

在单页应用里,URL 变化不再只是跳到另一张完整网页,而是告诉框架现在应该把哪块模板、哪段控制器逻辑装进主视图。理解了这一点,就比较容易接受“页面看起来换了,实际上应用还在同一个壳里跑”。

所以路由配置不只是地址映射,它还在决定视图组织方式。哪个页面需要独立控制器,哪个页面只是同一数据流下的不同展示,都应该在这里想清楚。

控制器最好只负责当前视图的协调

AngularJS 新手常见的写法,是把请求、状态缓存、页面事件、跨页面共享数据都塞进控制器。短期看很直接,长期就会发现控制器越来越臃肿,而且一换路由就要重新初始化很多本不该重复的东西。

比较稳的方式,还是让控制器站在“当前视图协调者”的位置上:接 service 给的数据,处理当前页面交互,把结果交给模板展示。这样路由切换时,职责边界会清楚很多。

digest 循环提醒你:页面更新不是魔法

AngularJS 最让人印象深刻的是数据变了,视图跟着变。但这背后并不是自动魔法,而是框架在 digest 循环里不断检查数据变化,再决定哪些绑定需要刷新。理解这一层之后,很多“为什么页面没更新”或者“为什么会变慢”的疑问才有解释入口。

watch 太多、嵌套层级太深、在不合适的时机频繁改值,都会让 digest 成本变高。知道这一点,不是要你立刻去做极端优化,而是提醒自己:双向绑定虽然方便,也不是没有代价。

小结

AngularJS 学到路由阶段时,最值得建立的是一整套关系感,而不是记更多指令名字。路由决定页面怎么切,控制器决定当前视图怎么协调,digest 决定数据变化如何被看见。把这三件事串起来,框架的运行方式才真正开始清楚。