Angular 基础教程: 路由概述及基本使用
文中尽量把 Router 叫做“路由”或者“路由机制”,而不叫“路由器”。因为我感觉“路由器”是一种网络设备,在前端开发领域叫“路由器”比较奇怪。
请特别注意:Angular 中的 Router 模块会负责模块的加载、组件的初始化、销毁等操作,它是整个乐队的总指挥。
前端为什么要路由?
我发现,很多开发者代码写得很溜,但是并不理解为什么要 Router 这个机制。
在目前的前端开发领域,无论你使用哪一种框架,“路由”都是一个绕不开的机制。那么,前端为什么一定要路由机制?举两个简单的例子来帮助理解:
- 如果没有 Router,浏览器的前进后退按钮没法用。做过后台管理系统的开发者应该遇到过这种场景,整个系统只有一个 login.jsp 和 index.jsp,用户从 login.jsp 登录完成之后,跳转到 index.jsp 上面,然后浏览器地址栏里面的 URL 就一直停留在 index.jsp 上面,页面内部的所有内容全部通过 Ajax 进行刷新。这种处理方式实际上把浏览器的 URL 机制给废掉了,整个系统只有一个 URL,用户完全无法通过浏览器的前进、后退按钮进行导航。
- 如果没有 Router,你将无法把 URL 拷贝并分享给你的朋友。比如:你在某段子网站上看到了一个很搞笑的内容,你把 URL 拷贝下来分享给了你的朋友。如果这个段子网站没有做好路由机制,你的朋友将无法顺利打开这个链接。
Router 的本质是记录当前页面的状态,它和当前页面上展示的内容一一对应。
在 Angular 里面,Router 是一个独立的模块,定义在 @angular/router 模块里面,它有以下重要的作用:
- Router 可以配合 NgModule 进行模块的懒加载、预加载操作;
- Router 会管理组件的生命周期,它会负责创建、销毁组件。
服务端的配置
很多开发者会遇到这个问题:代码在开发状态运行得好好的,但是部署到真实的环境上之后所有路由都 404。
这是一个非常典型的问题,你需要配置一下 Server 才能很好地支持前端路由。
你想啊,既然你启用了前端路由,也就意味着浏览器地址栏里面的那些 URL 在 Server 端并没有真正的资源和它对应,你直接访问过去当然 404 了。
以 Tomcat 为例,你需要在 web.xml 里面加一段配置:
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
这意思就是告诉 Tomcat,对于 404 这种事你别管了,直接扔回前端去。由于 Angular 已经在浏览器里面接管了路由机制,所以接下来就由 Angular 来负责了。
如果你正在使用其它的 WEB 容器,请从以下链接里面查找对应的配置方式:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
在 How to: Configure your server to work with html5Mode 这个小节里面把常见的 Web 容器的配置方式都列举出来了,包括:IIS、Apache、nginx、NodeJS、Tomcat 全部都有,你过去抄过来就行。
小结
Angular 新版本的路由机制极其强大,除了能支持无限嵌套之外,还能支持模块懒加载、预加载、路由守卫、辅助路由等高级功能,在接下来的几个小节里面我们就来写例子一一演示。
Angular Router 模块的作者是 Victor Savkin,这是他的个人 Blog:https://vsavkin.com/,他专门编写了一本小薄书来完整描述 Angular 路由模块的设计思路和运行原理,这本书只有 151 页,如果你有兴趣请点这里:https://leanpub.com/router。
路由的基本用法
我们从最简单的例子开始,第一个例子的运行效果如下: