Single Page Application（SPA），即单页面应用，是一种越来越流行的前端应用类型。作为其中的一种框架，AngularJS 根据传统的多页面结构，将各个页面转化为组成单个页面的代码片段，然后深化概念，实现了高性能、可扩展的 SPA。而在这个过程中，路由就扮演了非常关键的角色，负责展示不同的模块和页面，帮助用户更高效地访问及管理内容。本篇技术文章便会介绍关于 AngularJS SPA 路由的实现和使用方式，帮助开发者更好地掌握这一技术。
路由概述
路由在前端开发中的作用与后端开发中的路由类似，它们的核心功能都是将请求转发到合适的处理程序或者页面，并返回相应的结果。在开发中，只要页面出现刷新或者跳转，就会伴随着浏览器的请求发送。这个请求会通过 URL 来表示，路由就可以通过解析 URL 跳转到相应的页面。因此，将路由加入到单页面应用中，可把浏览器页面的刷新和跳转效果转化成单页应用内的切换效果，体现出 SPA 在页面切换快速、反应迅速方面的优势。
路由可以大致分为两种：客户端（前端）路由和服务端（后端）路由。前者是在 Web 浏览器上处理路由的，由客户端脚本负责跳转路由，前端开发人员需要注意控制路由的应用以及进行相应的 URL 转换等操作。而后者则是在服务器上处理路由，由服务端应用程序负责跳转路由，更多的是用于帮助前后端分离来进行运作。
本篇文章所要介绍的 AngularJS 路由是一种客户端路由，适用于 SPA 中，我们将使用 AngularJS 内置的模块ngRoute进行实现。
实现路由的 AngularJS 模块
基础模块
要实现路由，首先需要给 AngularJS 添加一个模块来接收路由的相关设定。在 AngularJS 中内置了一个名为ngRoute的模块，这个模块也就是我们要使用的路由模块。
首先，需要在 html 页面中的<head>标签内加载 ngRoute 路由模块：
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular-route.min.js"></script>
然后，请将该模块添加到主应用程序模块中，可以按照以下方式编写应用程序模块：
var app = angular.module('myApp', ['ngRoute']);在这个模块中，我们用到了一个叫做$routeProvider的服务（service）。$routeProvider负责管理所有的路由，并在 $route 服务中提供路由。
定义一条路由规则
在 AngularJS 的路由中，可以通过定义路由规则来匹配 URL。例如，我们可以通过指定 URL 和相关的控制链接来定义路由规则。我们使用 when() 函数来定义路由规则，例如：
-- -------------------- ---- ------- -- ------ -- ------------------------ - ------------ ---------------------- --- -- ------ -- ----------------------------- - ------------ ----------------------- ----------- ------------------ --- -- -------- -- -------------------------------- - ------------ -------------------------- ----------- --------------------- ---
在上述代码中，我们定义了三种不同的路由规则。此处需要注意，当 URL 中不含参数时，使用when()函数；当 URL 中含有参数时，使用path() 函数定义路由参数。
映射控制器到路由
控制器是一种 MVC 模式中的视图模型。在 AngularJS 的路由模块中，可以将控制器映射到模板，这也是为什么以上示例代码中会用到控制器的原因。通过控制器，我们会相应地处理相关的业务逻辑。例如：
-- -------------------- ---- -------
--------------------------------- -------- -------- -
------------- - -
-
-------- -----------------
----------- -------------
------- ------
--
-
-------- -----------------
----------- -------------
------- ------
--
--
---
------------------------------------ -------- -------- -
------------ - -
- ----- ---------- ------ -------------------------- --
- ----- ------ ------ ---------------------- --
--
---使用控制器时，需要将它映射到相应的路由规则中。例如：
/* 订单路由规则 */
$routeProvider.when('/order', {
templateUrl: '/template/order.html',
controller: 'OrderController',
});缺省路由
缺省路由表示当 URL 不属于上述路由规则时，会跳转到本路由。一般来说，缺省路由是让全站跳转到一个默认页面，如登录页面。
/* 缺省路由 */
$routeProvider.otherwise({
redirectTo: '/',
});路由示例
下面是一个完整的示例码，该示例中展示了一个基础的 AngularJS SPA 应用程序，使用 AngularJS 路由来控制不同的页面：
-- -------------------- ---- -------
--- --- - ----------------------- -------------
------------------- ---------------- -
-- ------ --
------------------------ -
------------ -----------------------
----------- -----------------
---
-- ------ --
----------------------------- -
------------ ------------------------
----------- ------------------
---
-- -------- --
-------------------------------- -
------------ ---------------------------
----------- ---------------------
---
-- ---- --
--------------------------
----------- ----
---
---
-------------------------------- -------- -------- -
-------------- - ----- --------- --- -------
---
--------------------------------- -------- -------- -
------------- - -
-
-------- -----------------
----------- -------------
------- ------
--
-
-------- -----------------
----------- -------------
------- ------
--
--
---
------------------------------------ -------- -------- -
------------ - -
- ----- ---------- ------ -------------------------- --
- ----- ------ ------ ---------------------- --
--
---在这个例子中，我们已经学习了基础的 AngularJS 路由的使用方式，能够达到根据 URL 来切换页面的效果。通过这个例子，你也可以更深入地理解 SPA 技术、AngularJS 路由技术以及如何将路由添加到 AngularJS 应用程序中。
总结
路由是一种关键的技术，它可以改变前端应用程序的方式，为用户提供更好的用户体验和更加便捷的操作流程。通过本篇文章，你已经学会了在 AngularJS 中实现后端路由，定义路由规则，映射控制器以及使用缺省路由等基础知识点。通过具体实例的分析，你能够更加深入地了解 SPA 应用程序、AngularJS 路由以及如何将路由模块添加到你的应用程序中。这些都是前端开发人员需要深入了解的核心知识点，相信本篇文章能够帮助到你，更好地掌握这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1c4d3f6b2d6eab3cfae5f