什么是 AngularJS 路由？
在使用 AngularJS 开发前端应用的时候，路由是不可少的一部分。路由用于处理页面之间的导航和管理，同时也负责根据当前 URL 显示不同的内容。为此，AngularJS 提供了一个内置的路由系统，可以将 URL 与相应的视图和控制器进行绑定，实现单页面应用程序（SPA）的功能。
AngularJS 路由的基础
AngularJS 路由的基本用法非常简单，可以通过以下代码实现：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
------- -----------------------------------------------------------------------
------- -----------------------------------------------------------------------------
-------
----- ---------------
-- ----------------
-- -----------------------
---- --------------
--------
--- --- - ----------------------- -------------
----------------------------- -------- ---------------- -
--------------
---------- -
--------- ------------------
--
--------------- -
--------- ---------------
--
------------
----------- ---
---
----
---------
-------
-------上面的代码主要做了以下几件事情：
- 引入 AngularJS 和 AngularJS 路由的依赖项
- 定义了两个链接，分别指向首页和关于我们的页面
- 定义了一个 ng-view 指令，用于显示当前路由对应的视图
- 在 JavaScript 中，定义了一个名为 myApp 的模块，并在其中配置了路由规则
从上面的代码可以看出，路由规则是通过 $routeProvider 来配置的。$routeProvider 提供了一系列的方法，用于指定 URL 与视图之间的映射关系。当用户点击某个链接时，浏览器的 URL 就会发生变化，AngularJS 会根据这个变化来自动加载对应的模板，并将其渲染到 ng-view 中。
关于路由规则的详细用法，可以参考 AngularJS 的官方文档：https://docs.angularjs.org/api/ngRoute/service/$routeProvider
AngularJS 高级路由技术
除了基本的路由规则外，AngularJS 还提供了一些高级的路由技术，可以帮助我们更加灵活地管理路由。下面，我们来看一些常用的高级路由技术。
嵌套路由
在 AngularJS 中，可以实现嵌套视图，也就是将一个视图作为另外一个视图的一部分进行显示。类似于在 HTML 中使用 iframe 标签嵌套网页。
为了实现嵌套路由，我们需要使用 AngularJS 的 ui-router 模块。ui-router 是基于 AngularJS 内置路由的扩展，提供了诸如嵌套路由、命名视图、状态机等高级功能。
下面是一个简单的嵌套路由的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
------- -----------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
----- ---------------
---- --------------
--------
--- --- - ----------------------- ---------------
----------------------------- --------------------- -------- ---------------- ------------------- -
----------------------------------
--------------
-------------- -
---- ----
--------- -----------------
--
--------------- -
---- ---------
--------- ------------------ ---------------
--
----------------------- -
---- -----------
--------- ---------------
--
----------------------- -
---- -----------
--------- ---------------
---
----
---------
-------
-------在上面的代码中，我们首先配置了一个名为 home 的状态，用于显示首页视图。接着，我们配置了一个名为 about 的状态，用于显示关于我们的页面。该页面中有一个名为 ui-view 的占位符，用于显示嵌套的子视图。最后，我们配置了两个子状态，分别用于显示公司历史和联系我们的内容。
通过上面的代码，我们就可以实现嵌套路由的功能了。当用户访问 /about/history 或 /about/contact 时，就可以显示对应的子视图。
命名视图
命名视图是 ui-router 提供的另外一种高级路由技术。通过命名视图，我们可以将一个视图分割成多个区域，然后分别根据需要进行填充和切换。
下面是一个命名视图的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
------- -----------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
----- ---------------
---- -----------------------
---- ---------------------
---- -----------------------
--------
--- --- - ----------------------- ---------------
----------------------------- --------------------- -------- ---------------- ------------------- -
----------------------------------
--------------
-------------- -
---- ----
------ -
--------- -
--------- ---------------
--
------- -
--------- --------- --------- --------
--
--------- -
--------- ---------------
-
-
--
--------------- -
---- ---------
------ -
--------- -
--------- -----------------
--
------- -
--------- ---------------
--
--------- -
--------- -----------------
-
-
---
----
---------
-------
-------在上面的代码中，我们定义了三个命名视图：header、main 和 footer。在状态配置中，我们通过 views 属性来指定每个视图对应的 HTML 内容。当用户访问某个状态时，ui-router 会自动加载对应的视图，并将它们填充到相应的命名视图区域中。
状态机
状态机是 ui-router 提供的另外一种高级路由技术，可以帮助我们更加灵活地管理应用程序状态。
状态机由多个状态组成，每个状态都对应着一个唯一的 URL，并指定了一个命名视图。当用户访问某个 URL 时，ui-router会自动加载状态对应的 HTML 内容，并将它填充到相应的命名视图中。同时，ui-router也会自动管理状态之间的跳转和参数传递。
下面是一个简单的状态机示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- -----------
------- -----------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
----- ---------------
---- --------------
--------
--- --- - ----------------------- ---------------
----------------------------- --------------------- -------- ---------------- ------------------- -
----------------------------------
--------------
-------------- -
---- ----
--------- -------------------
----------- -------- -------- -
----------- - ------------
-
--
--------------- -
---- ---------
--------- ------- -------- -------
----------- -------- -------- -
----------- - ------------
-
--
----------------- -
---- -----------
--------- ---------------
---
----
---------
-------
-------在上面的代码中，我们定义了三个状态：home、about 和 contact。每个状态都指定了一个 URL 和一个命名视图，同时也可以指定对应的控制器。当用户访问某个 URL 时，ui-router 就会自动加载对应的 HTML 内容，并将它填充到相应的命名视图中，同时也会自动调用控制器中的代码。
总结
AngularJS 路由是前端开发中非常重要的一部分，通过路由规则和状态管理，我们可以实现单页面应用程序（SPA）的功能。除了基础的路由规则外，AngularJS 还提供了一些高级路由技术，包括嵌套路由、命名视图和状态机等。这些技术可以帮助我们更加灵活地管理应用程序，实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e722adf6b2d6eab3284013