前言
单页应用（SPA）之所以非常流行，是因为它有多种优点，包括速度快、用户体验好、代码可维护性高等等。然而，由于 SPA 类应用的本质，当 URL 变化时，页面应该对应着一组新的数据和视图。这通常会导致一些问题。本文介绍如何利用 AngularJS 以及其路由机制来实现 SPA 应用在链接方式变化时不变化数据的方法。
路由
路由机制是 AngularJS 框架的核心。路由是将 URL 映射到 MVC 模式的控制器和一系列视图的过程。当 URL 改变时，路由拦截浏览器的请求，为当前 URL 对应的视图呈现控制器和模型。
在 AngularJS 中，通过 $route 服务可以让你使用 URL 内容来加载不同的视图。所以，当用户访问时，AngularJS 将在 URL 处理器中寻找 URL 符合的路由，并为该 URL 渲染相应视图。
例如，当 URL 为 example.com/#/users/1 时，路由中的模式如下：
------------------ -
------------ -------------------
----------- -----------------------
---这个路由会创建一个控制器和一个模板，分别用来呈现用户的详细信息和一堆列表数据。这时，AngularJS 将会获取这些数据并使用模板来渲染视图。你可以通过 $routeParams.id 来获取路由中 id 参数的值，该参数的值为 1。
因此，路由机制可以有效解决 URL 改变时数据重复加载的问题。只要使用路由机制来控制视图和 URL，就可以释放开发人员的时间和工作量。
使用 ngRoute
ngRoute 是 AngularJS 的一部分，它通过提供一些指令和服务，使你轻松地添加路由功能到 AngularJS 的应用中去。下面，我们就来演示如何使用 ngRoute。
引用 ngRoute
ngRoute 模块默认不包含在 AngularJS 中，它是一个单独的文件。因此，首先需要将 angular-route.js 添加到 HTML 页面中。例如：
------- ------------------------------------------------------------------------------------ ------- --------------------------------------------------------------------------------------------
定义路由
通过 ngRoute，你可以在 AngularJS 应用中定义路由。定义路由的最基本要素是路由规则，以及每个规则所对应的模板和控制器。假设我们的 AngularJS 应用的 URL 是这样的：
------------------------------
要在该 URL 上输出 AngularJS 视图，可以在定义路由规则的 JavaScript 代码上添加以下语句：
--------------
--------------- -
------------ -------------
----------- -----------
--在以上例子中，when() 方法传入路由路径和对象。对象里有两个属性：模板和控制器。templateUrl 属性是指向包含在 AngularJS 视图中的 HTML 的路径。controller 属性是对应控制器的名称。
然后，那些奇妙的路由
现在，我们将会演示如何使用 $routeProvider 服务来定义路由对象。首先，在 HTML 中创建一个简单的 Angular 应用：
--------- -----
----- -------------
------
---------------- -----------
------- ------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
------- ----------------------
-------
------
-- ------------------------
-- ------------------------------
-- ----------------------
---- --------------
-------
-------这里，我们用了 AngularJS、AngularJS 路由、和一个叫做 app.js 的 JavaScript 文件。由于需求是在 URL 变换的同时保持页面不变，多个链接都是使用 href 锚点形式。在浏览器中，使用上述 HTML，会得到这样的效果：
当点击不同的链接时，URL 发生变化，但页面却不改变。否则，每一个页面都需一次数据查询和加载。现在，我们假设需要获取并呈现有关消息的数据。为此，我们需要定义一个消息控制器和消息服务。
----------------------------------- -------- -------------- --------------- -
--- ---------- - -----
--- ----- - -------------------
--- -------- - ----------------------
--- -------- - -------- -- -
----------------------------- ----------------------- -------- -
--------------- - ------------
---
--
-----------
---
----------------------------- -------- ------- -
--- ------- - ---
--------------- - -------- ------- --------- -
------ -------------------------- - ----- - --- - ----------
--
------ --------
---我们定义了一个名为 MessageController 的控制器，并使用 MessageService.getData 方法在控制器内加载数据。这种方法更灵活，控制器只在视图切换时执行一次。在 MessageService 中，我们使用 $http 服务获取数据并返回一个 Promise。
最后，我们使用路由规则将消息控制器与视图绑定：
---------------------------------------- -
------------ ---------------
----------- --------------------
------------- -------------
---不会数据更新的我们，仅使用变化后的 URL，不管具体轨迹是如何，始终只获取数据一次。
结论
发掘所谓的单页应用最重要的是路由，好的路由可以有效解决 URL 改变时数据重复加载的问题，也能节省大量工作时间和工作量。AngularJS 中的路由功能让实现单页应用变得简单易行，通过本文的引导，相信已经通透了其中的奥秘，可以更好地应用 AngularJS 实现自己的项目。
参考链接
- AngularJS Developer Guide: Routing
- ngRoute API Reference
- Single-Page Applications: Building a Backbone.js App with Ember.js
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67177e81ad1e889fe221ccd6