在现代 Web 应用中，前端路由成为了一个非常重要的概念，而 AngularJS 则是一个非常流行的前端框架，它提供了非常便利的路由功能。在本文中，我们将深入介绍 AngularJS 路由的基本概念，以及在 Web 应用开发中的应用。
什么是路由
路由是指根据 URL 地址的不同，加载不同的页面或者组件。在传统的 Web 应用中，路由一般是服务器负责处理，每次切换页面都会向服务器发送请求，服务器返回新的页面。而在单页应用中，路由则是通过前端框架实现的，每次跳转页面只会改变 URL，而不会向服务器请求新页面。
AngularJS 路由的基本概念
在 AngularJS 中，我们通过 $routeProvider 和 $route 这两个服务实现路由功能。其中，$routeProvider 用于定义路由规则，而 $route 则负责匹配当前 URL 并显示相应的视图。
定义路由规则
在 app.js 中，我们可以使用 $routeProvider 来定义路由规则。例如：
-- -------------------- ---- -------
----------------------------- -------- ---------------- -
--------------
---------- - -- --------
------------ ------------------
----------- ----------------
--
--------------- - -- ----------
------------ -------------------
----------- -----------------
--
------------ -- ------- --- --
------------ -----------------
----------- -----------------
---
----在这个例子中，我们定义了两个路由规则，一个是访问 / 路径时显示首页，一个是访问 /about 路径时显示关于页面。如果用户访问的是其他路径，就会跳转到 404 页面。
显示视图
在 index.html 中，我们可以将路由的视图部分定义为：
<div ng-view></div>
这个 div 的作用是用于显示路由的视图部分。当用户访问某个路由时，AngularJS 会自动从对应的模板文件中加载视图，并将其渲染在这个 div 中。
在 Web 应用开发中的应用
路由在 Web 应用开发中非常常见，特别是单页应用中。通过路由，我们可以实现无需重新加载整个页面，只改变部分视图的效果，从而提升了 Web 应用的用户体验。下面通过一个示例，来演示 AngularJS 路由的应用。
示例
假设我们正在开发一个动物园网站，需要实现以下几个页面：
- 首页：列举出所有的动物，并提供搜索功能。
- 动物详情页：展示某个动物的详细信息，包括名字、描述、照片等。
- 关于我们页：介绍动物园的历史和团队成员。
定义路由规则
我们可以在 app.js 中定义路由规则：
-- -------------------- ---- -------
----------------------------- -------- ---------------- -
--------------
---------- - -- --
------------ ------------------
----------- ----------------
--
--------------------- - -- -----
------------ --------------------
----------- ------------------
--
--------------- - -- -----
------------ -------------------
----------- -----------------
--
-- ------- --- --
------------
------------ -----------------
----------- -----------------
---
----在这个例子中，我们定义了三个路由规则，分别对应着首页、动物详情页和关于我们页。注意到其中的 '/animals/:id' 路径，我们通过 : 来定义了一个参数 id，在后面的控制器中可以通过 $routeParams.id 获取该参数的值。
显示视图
在 index.html 中，我们将路由的视图部分定义为：
<div ng-view></div>
这样，每当用户访问不同的路由时，AngularJS 就会自动从相应的模板文件中加载视图，并将其渲染在这个 div 中。
我们也可以在路由规则中定义页面所对应的控制器，例如对于动物详情页：
.when('/animals/:id', {
templateUrl: 'views/animal.html',
controller: 'AnimalController'
})然后就可以在 AnimalController 中获取参数 id 的值，并根据其值请求动物数据，示例代码如下：
app.controller('AnimalController', ['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
var animalId = $routeParams.id; // 获取参数 id 的值
$http.get('/api/animal/' + animalId)
.then(function (response) {
$scope.animal = response.data; // 将动物数据存入作用域中
});
}]);这段代码中，我们通过 $routeParams 服务获取参数 id 的值，然后通过 $http 服务向服务器请求数据，并将其存入 AngularJS 的作用域中，从而在动物详情页中显示相应的内容。
总结
通过本文，我们深入介绍了 AngularJS 路由的基本概念，并通过一个具体的示例演示了路由在 Web 应用开发中的应用。值得注意的是，路由除了可以实现页面的切换和局部渲染外，还可以通过各种插件和中间件扩展更丰富和功能和体验。希望本文能够对 AngularJS 开发者理解路由有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450855e980a9b385b988b5d