在 AngularJS 中，路由是一个非常重要的概念。它负责将不同的 URL 映射到不同的组件或页面，并使用户能够直接访问这些组件或页面。在 Single Page Application（SPA）中，路由的作用更加明显，因为它可以处理所有的页面切换和状态更新，提供更加流畅的用户体验。
本文将详细探讨 AngularJS SPA 中路由的实现。我们将介绍 AngularJS 路由的基本概念，讨论一些常见的路由实现方法以及它们的优缺点，最后给出一个完整的示例来展示如何使用 AngularJS 路由实现一个完整的 SPA。
AngularJS 路由基础知识
在 AngularJS 中，路由主要由两个核心组件实现：$routeProvider 和 $locationProvider。
$routeProvider 负责定义 URL 和对应的组件或页面之间的映射。它可以用来定义路由规则，重定向规则以及路由参数。以下是一些常见的 $routeProvider 方法：
when(path, route)：定义一个路由规则，将一个 URL 路径映射到一个路由配置对象（route）。该路由配置对象包括了需要加载的组件或页面以及其他参数信息。otherwise(route)：定义一个默认路由规则，为没有匹配到任何路由规则的 URL 提供一个默认的参数值或重定向到一个指定的 URL。
$locationProvider 负责控制浏览器地址栏中的 URL，它可以用来配置 URL 前缀、路径分隔符以及启用 HTML5 模式等。以下是 $locationProvider 的一些方法：
hashPrefix(prefix)：为 URL 的 hash 部分添加前缀。html5Mode(mode)：启用 HTML5 模式，将 URL 改为使用 HTML5 的history.pushState()API。requireBase(enabled)：启用 URL 基础设置，用于处理相对路径的情况。
路由实现方法及优缺点
在 AngularJS 中，路由的实现方法有很多，但大体上可以分为两大类：客户端路由和服务器端路由。
客户端路由
客户端路由是指路由的实现都在客户端浏览器进行，服务器只负责提供静态资源，如 HTML、CSS、JS 等文件。客户端路由的优点在于可以提供更好的 SPA 体验，缺点则是对 SEO 不友好。
在客户端路由中，一般需要使用 $routeProvider 和 $locationProvider 这两个核心服务，它们可以通过以下方式来配置路由规则：
----------------------------------- ------------------ -
--------------
-------------- -
------------ ------------------
----------- ----------------
--
--------------- -
------------ -------------------
----------- -----------------
--
----------------- -
------------ ---------------------
----------- -------------------
--
------------
----------- -------
---
-----------------------------
-------- -----
------------ -----
---
---在这个例子中，我们使用 $routeProvider 定义了三个路由规则来处理 /home、/about 和 /contact 三个 URL，使用 .otherwise() 方法定义了一个默认路由规则来重定向到 /home 页面。我们同样使用 $locationProvider 启用了 HTML5 模式，并设置了 requireBase 为 false，以便兼容旧版浏览器。
服务器端路由
服务器端路由是指将路由的实现推向服务器端，服务器通过解析 HTTP 请求中的 URL 路径，来确定需要返回的页面。服务器端路由优点在于对 SEO 友好，而缺点则是无法提供和客户端路由相同的 SPA 体验。
在服务器端路由中，我们需要使用 Node.js 或其他服务器端语言来实现路由，并使用模板引擎来渲染页面。以下是一个使用 Node.js 和 EJS 模板引擎的服务器端路由例子：
--- ------- - ------------------- --- --- - ---------- ------------- -------- ------- ------------ ------------- ---- - ------------------------- --- ----------------- ------------- ---- - -------------------------- --- ------------------- ------------- ---- - ---------------------------- --- ---------------- ---------- - ------------------- --------- -- ---- -------- ---
在这个例子中，我们使用 Express 框架来实现路由，并使用 EJS 模板引擎渲染页面。使用模板引擎可以将路由和页面模板分离，方便维护和扩展。
示例代码
让我们来看一个完整的 SPA，它使用客户端路由来创建一个简单的博客应用。这个应用会根据路由规则显示不同的页面，包括首页、文章列表页以及文章详情页。我们将使用 AngularJS 和 Bootstrap 来构建这个应用。
首页
首页显示文章列表，我们将使用 ng-repeat 指令来循环显示文章列表。我们需要使用一个控制器来获取文章列表并将其传递给模板。以下是首页的 HTML 和控制器代码：
---- ---------- ---
---- ------------------
----------- -- -- ---------
---- ----------------------------- -- ------
---- ------------
---- --------------- -----------------
---- ------------ -------------- --------------- -- ------------
---- ------------------------ ---------- --------
---- --------------------- --------- --------
---- ---------------------
-- -------------- ------- -------- -----------
------
------
------
------
------
-------- -----------------
-------------------------------- --------- --------------- -
--- -- - -----
-------- - ---
----------------------------------------------- -
-------- - --------------
---
----在控制器中，我们使用 $http 服务来获取文章列表，并将其存储在 vm.posts 中，这样我们就可以在模板中通过 home.posts 来访问这个列表。
文章列表页
文章列表页会显示每篇文章的标题和摘要。我们需要一个类似于首页的控制器来获取文章列表，但此控制器需要额外传递一个 URL 参数来过滤文章列表。以下是文章列表页的 HTML 和控制器代码：
---- ---------- ---
---- ------------------
-------- ----------
---- ------------------------------ -- -------
---- ------------
---- --------------- -----------------
---- ------------ -------------- --------------- -- -------------
---- ------------------------ ---------- --------
---- --------------------- --------- --------
---- ---------------------
-- -------------- ------- -------- -----------
------
------
------
------
------
-------- ------------------
--------------------------------- --------- --------------- --------------- ------------- -
--- -- - -----
-------- - ---
--- ---------- - ------------------------
--- --- - -------------
-- ------------ -
--- -- ------------ - -----------
-
-------------------------------------- -
-------- - --------------
---
----在控制器中，我们首先获取路由参数 $routeParams.categoryId，并根据该参数来决定需要获取的文章列表。然后我们通过 $http 服务来获取文章列表，并将其存储在 vm.posts 中。
文章详情页
文章详情页会显示一篇文章的详细内容。我们需要使用一个类似于 ng-view 的指令来在 HTML 中包含文章详情视图，使用一个控制器来获取文章详情。以下是文章详情页的 HTML 和控制器代码：
---- --------- ---
---- ------------------
------ ---------- -------
---- ----------------------------- -- ------
---- ------------
---- --------------- -----------------
---- ------------ ---------------
---- --------------------- -------------- --------
------
------
------
------
-------- -----------------
-------------------------------- --------- --------------- --------------- ------------- -
--- -- - -----
------- - ---
----------------------- - -------------------------------------------- -
------- - --------------
---
----在控制器中，我们使用 $http 服务来获取文章详情，并将其存储在 vm.post 中。
路由配置
我们需要使用 $routeProvider 来定义路由规则，并添加 HTML5 模式支持。以下是路由配置代码：
----------------------------- -------------------- ------------------------ ------------------ -
--------------
---------- -
------------ -------------------
----------- -----------------
------------- ------
--
--------------- -
------------ -------------------
----------- ------------------
------------- -------
--
----------------------- -
------------ ------------------
----------- -----------------
------------- ------
--
------------
----------- ---
---
-----------------------------
-------- -----
------------ -----
---
----在这个例子中，我们定义了三个路由规则和一个默认规则，这些规则分别映射到首页、文章列表页和文章详情页。我们同样使用 $locationProvider 启用了 HTML5 模式，并设置了 requireBase 为 false。
总结
本文详细探讨了 AngularJS SPA 中路由的实现。从路由的基础知识开始，我们讨论了客户端路由和服务器端路由的优缺点，最后给出了一个完整的示例来展示如何使用 AngularJS 路由实现一个完整的 SPA。使用 AngularJS 的路由模块，可以帮助我们更加轻松地创建流畅的单页应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b89ca7add4f0e0ff12f77a