AngularJS 是一款流行的前端框架，具有强大的路由功能，可以实现单页面应用（SPA）的开发和优化。本篇文章将详细介绍 AngularJS 的路由功能，帮助开发者深入理解和应用。
概述
路由可以理解为控制浏览器地址栏和页面内容之间的映射。在传统的多页面应用中，每个页面都有一个独立的 URL，用户通过点击链接或输入 URL 来跳转。而在单页面应用中，只有一个 HTML 页面，通过更改路由参数来控制页面的内容。
AngularJS 的路由功能通过 $routeProvider 服务来实现，可以在配置文件中指定路由的参数和对应的模板文件。
路由参数
常见的路由参数包括：
templateUrl
指定路由对应的 HTML 模板文件的路径。
例如：
$routeProvider.when('/home', { templateUrl: 'views/home.html' })
controller
指定路由对应的控制器。
例如：
$routeProvider.when('/home', { templateUrl: 'views/home.html', controller: 'HomeController' })
resolve
指定路由所需的异步数据。
例如：
-- -------------------- ---- ------- ---------------------------- - ------------ ------------------ ----------- ----------------- -------- - ----- --------------------- - ------ ---------------------- - - --展开代码
其他参数
还有一些其他的路由参数，例如 redirectTo、reloadOnSearch 等，具体可参考官方文档。
路由事件
在路由发生变化时，AngularJS 提供了一些事件供开发者监听。
$routeChangeStart
路由即将发生变化时触发，通常用于进行权限判断。
$scope.$on('$routeChangeStart', function(event, next, current) { if (!AuthService.isAuthenticated() && next.$$route.originalPath !== '/login') { $location.path('/login'); } })
$routeChangeSuccess
路由变化成功后触发，通常用于数据加载和页面渲染。
$scope.$on('$routeChangeSuccess', function(event, next, current) { // 加载数据并渲染页面 })
$routeChangeError
路由变化失败后触发，通常用于进行错误处理。
$scope.$on('$routeChangeError', function(event, current, previous, rejection) { // 处理错误信息 })
示例代码
下面是一个示例代码，通过路由功能实现一个简单的单页面应用。
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ---------------- ------------ ------- --------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------- -------- --------------------- ------------ ----------------------------- ---------------- - -------------- - --------- -- ------------------------------ ---------------- - -------------- - ------------- -- -------------------------------- - -------------- ---------- - ------------ ------------------ ----------- ---------------- -- --------------- - ------------ ------------------- ----------- ----------------- -- ------------ ----------- --- --- --- --------- ------- ------ ----- -- ---------------- -- ----------------------- ------ ---- -------------- ------- ----------------------- --------------------- -------------------- --------- ------- ----------------------- ---------------------- -------------------- --------- ------- -------展开代码
在以上代码中，我们定义了两个控制器 HomeController 和 AboutController，以及两个 HTML 模板文件 home.html 和 about.html。在路由配置中，我们指定了首页和关于我们页面对应的参数，并设置了默认路由。
通过 $routeProvider 这个服务，我们可以轻松配置路由，实现单页面应用。当用户点击不同的链接或手动输入不同的 URL 时，AngularJS 将自动切换路由参数，并加载对应的 HTML 模板文件和控制器，最终将页面内容渲染出来。同时，我们还可以通过路由事件来监听路由变化，并进行相应的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf1ea90c976d473a38c22b
