AngularJS 是一个非常流行的前端框架，它提供了丰富的功能，其中路由功能是其中的重要组成部分。路由功能是指将不同的 URL 映射到不同的视图和控制器上，从而实现单页应用程序的导航和切换。本文将深入掌握 AngularJS 的路由功能，包括路由的配置、参数传递、嵌套路由、路由保护等方面。
路由的配置
AngularJS 的路由功能需要通过 ngRoute 模块来实现，因此需要在应用程序中引入该模块。首先，我们需要在 HTML 文件中引入 AngularJS 和 ngRoute 模块：
------- ------------------------------------------------------------------------------------ ------- ------------------------------------------------------------------------------------------
然后，我们需要在应用程序中定义路由规则。路由规则可以通过 $routeProvider 服务来配置，例如：
----------------------- ------------
-------------------------------- -
--------------
---------- -
------------ ------------
----------- ----------------
--
--------------- -
------------ -------------
----------- -----------------
--
------------
----------- ---
---
---在上面的代码中，我们定义了两个路由规则：/ 对应 home.html 视图和 HomeController 控制器，/about 对应 about.html 视图和 AboutController 控制器。当用户访问 / 或 /about 时，路由器会自动加载相应的 HTML 文件和控制器，并将它们渲染到页面上。如果用户访问了其他未定义的 URL，路由器会自动重定向到 /。
参数传递
有时候我们需要在两个视图之间传递一些参数，例如用户在列表页中点击某一项后跳转到详情页，并将该项的 ID 传递给详情页。AngularJS 的路由功能可以很方便地实现这一目的。
首先，我们需要在路由规则中定义参数：
-------------------- - ------------ -------------- ----------- ------------------ --
在上面的代码中，我们定义了一个参数 :id，表示用户可以在 URL 中传递一个名为 id 的参数。接下来，我们可以在控制器中通过 $routeParams 服务来获取该参数：
-----------------------
------------------------------- ---------------- ------------- -
--------- - ----------------
---在上面的代码中，我们通过 $routeParams 服务获取了 URL 中传递的 id 参数，并将其赋值给了 $scope.id 变量。这样，在 detail.html 视图中就可以使用 {{id}} 来显示该参数了。
嵌套路由
有时候我们需要在应用程序中实现嵌套路由，即一个视图中包含另一个视图，例如用户在主页中点击某个菜单项后可以展开一个子菜单，子菜单中的选项会在同一个视图中切换。AngularJS 的路由功能也可以很方便地实现这一目的。
首先，我们需要在父视图中定义一个 ng-view 指令，用于显示子视图：
---- --------------
然后，我们可以在父视图的控制器中定义子路由规则：
-----------------------
-------------------------------- -
--------------
-------------- -
------------ ------------
----------- ----------------
--
-------------------- -
------------ -------------
----------- -----------------
--
-------------------- -
------------ -------------
----------- -----------------
---
---在上面的代码中，我们定义了三个路由规则：/menu 对应 menu.html 视图和 MenuController 控制器，/menu/item1 对应 item1.html 视图和 Item1Controller 控制器，/menu/item2 对应 item2.html 视图和 Item2Controller 控制器。当用户访问 /menu 时，路由器会自动加载 menu.html 视图和 MenuController 控制器，并在 ng-view 中显示它们。当用户点击子菜单中的选项时，路由器会自动切换到相应的视图和控制器。
路由保护
有时候我们需要在应用程序中实现路由保护，即某些视图只能在用户登录之后才能访问。AngularJS 的路由功能也可以很方便地实现这一目的。
首先，我们需要在应用程序中定义一个服务来管理用户的登录状态：
-----------------------
----------------------- ---------- -
--- ---------- - ------
------ -
------ ---------- -
---------- - -----
--
------- ---------- -
---------- - ------
--
----------- ---------- -
------ -----------
-
--
---在上面的代码中，我们定义了一个名为 AuthService 的服务，用于管理用户的登录状态。该服务包含三个方法：login、logout 和 isLoggedIn。当用户登录时，我们调用 login 方法来设置 isLoggedIn 变量为 true；当用户注销时，我们调用 logout 方法来设置 isLoggedIn 变量为 false；当需要检查用户是否已经登录时，我们调用 isLoggedIn 方法来获取 isLoggedIn 变量的值。
然后，我们可以在路由规则中定义路由保护：
-----------------------
-------------------------------- -
--------------
----------------- -
------------ ---------------
----------- --------------------
-------- -
----- --------------------- ---------- -
-- --------------------------- -
-------------------------
-
-
-
---
---在上面的代码中，我们定义了一个路由规则：/profile 对应 profile.html 视图和 ProfileController 控制器。该规则还包含一个名为 resolve 的属性，用于在路由加载之前检查用户是否已经登录。我们在 resolve 中定义了一个名为 auth 的依赖项，该依赖项调用 AuthService 的 isLoggedIn 方法来检查用户是否已经登录。如果用户未登录，我们使用 $location 服务将用户重定向到登录页面。
示例代码
下面是一个完整的示例代码，包括路由的配置、参数传递、嵌套路由和路由保护：
--------- -----
----- ---------------
------
---------------- -----------------
------- ------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
--------
----------------------- ------------
-------------------------------- -
--------------
---------- -
------------ ------------
----------- ----------------
--
--------------- -
------------ -------------
----------- -----------------
--
-------------------- -
------------ --------------
----------- ------------------
--
-------------- -
------------ ------------
----------- -----------------
-------- -
----- --------------------- ---------- -
-- --------------------------- -
-------------------------
-
-
-
--
-------------------- -
------------ -------------
----------- ------------------
-------- -
----- --------------------- ---------- -
-- --------------------------- -
-------------------------
-
-
-
--
-------------------- -
------------ -------------
----------- ------------------
-------- -
----- --------------------- ---------- -
-- --------------------------- -
-------------------------
-
-
-
--
--------------- -
------------ -------------
----------- -----------------
--
----------------- -
------------ ---------------
----------- --------------------
-------- -
----- --------------------- ---------- -
-- --------------------------- -
-------------------------
-
-
-
--
------------
----------- ---
---
--
----------------------- ---------- -
--- ---------- - ------
------ -
------ ---------- -
---------- - -----
--
------- ---------- -
---------- - ------
--
----------- ---------- -
------ -----------
-
--
--
----------------------------- ---------------- -
-------------- - -------- -- --- ---- -------
--
------------------------------ ---------------- -
-------------- - ------ ---- ----- -----
--
------------------------------- ---------------- ------------- -
--------- - ----------------
--
----------------------------- ---------------- -
------------ - -
- ----- ----- --- ---- -------------- --
- ----- ----- --- ---- -------------- -
--
--
------------------------------ ---------------- -
-------------- - ----- -- ---- ----
--
------------------------------ ---------------- -
-------------- - ----- -- ---- ----
--
------------------------------ ---------------- ------------ -
------------ - ---------- -
--------------------
--
--
-------------------------------- ---------------- ------------ -
------------- - ---------- -
---------------------
--
---
---------
-------
------
----
------ -----------------------
------ -----------------------------
------ ------------------------ ----------
------ ------------------------ ----------
------ ---------------------------
------ -----------------------------
------ ---------------------------------
-----
---- --------------
-------
-------结论
AngularJS 的路由功能是实现单页应用程序导航和切换的重要组成部分。本文深入掌握了 AngularJS 的路由功能，包括路由的配置、参数传递、嵌套路由、路由保护等方面，并提供了示例代码，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673aeb3539d6d08e88b0823a