Angular 教程 - 第 7 部分： 理解单页应用程序和 Angular 路由
4.97/5 (27投票s)
Angular 中的路由以及如何使用 Angular 路由模块创建单页应用程序。
引言
在本文中，我们将讨论 Angular 中的路由，以及如何使用 Angular 路由模块创建单页应用程序。
完整系列链接
- AngularJS 教程 - 第一部分：AngularJS 简介
- Angular 教程 -
第 2 部分： 理解模块和控制器 - Angular 教程 -
第 3 部分： 理解和使用指令 - Angular 教程 -
第 4 部分： 理解和实现过滤器 - Angular 教程 - 第 5 部分：
理解和实现服务 - Angular 教程 -
第 6 部分： 构建和验证数据录入表单 - Angular 教程 -
第 7 部分： 理解单页应用程序和 Angular 路由
背景
很少有应用程序只有一个页面。当我第一次听到“单页应用程序”这个词时，我感到很困惑，不知道如何将所有内容都放在一个页面中（是的，我曾经这么菜）。所以，假设可能有一些读者和四年前的我一样，在讨论 Angular 路由之前，我会再次尝试解释这个概念。
从传统的 Web 开发角度来看，页面是单个 HTML 文件。所以，如果我们有一个静态网站，实际上就是一组相互链接的 HTML 页面。当用户从一个页面导航到另一个页面时，会向服务器发送新页面的请求，然后服务器会将请求的新 HTML 页面发送回客户端。
当我们从服务器端技术（如 ASP.NET Web Forms 和 PHP）的角度来看待同一个概念时，我们仍然会发现这些框架都有页面的概念，即 .ASPX、.PHP。当用户请求一个页面时，服务器会从这些服务器页面生成 HTML，并将响应 HTML 发送回浏览器。此外，如果我们考虑 MVC Web 框架（如 ASP.NET MVC 和 Ruby on Rails），这些框架没有物理页面的概念，而是会在用户请求页面时调用一个操作，然后将适当的响应 HTML 发送回浏览器。但从浏览器的角度来看，它收到的是一个新的 HTML 页面。
因此，可以说所有这些技术都包含多个页面或多页 Web 应用程序。这些应用程序在每次用户请求时都会向服务器提交回发，并获取一个新的 HTML 页面。现在，如果我们尝试理解什么是单页应用程序，它可以简单地定义为一种在浏览器中加载单个 HTML 页面的应用程序，并且在每次后续请求时，使用 AJAX 从服务器拉取新的数据和新的 HTML。这会给用户留下应用程序只加载了一个页面的印象，而应用程序所需的区域会根据用户的请求进行刷新/重新加载。
有了对单页应用程序的理解，让我们来看看 Angular 路由为我们提供了什么。如果我们使用 Angular 路由模块，我们可以拥有多个 HTML 视图/模板，每个视图都用于特定的功能。路由模块将能够异步加载这些视图，而不会导致整个页面回发。路由模块会查找 URL 中的路由，然后捕获 URL 并检查哪个视图/模板配置为处理该路由，最后，它会在浏览器中渲染该视图。
Using the Code
现在让我们看看如何在我们的应用程序中配置和使用路由模块。首先需要注意的重要一点是，路由引擎存在于一个单独的模块中，并且也包含在一个单独的 JavaScript 文件中。所以，我们需要做的第一件事就是将该文件包含在我们的应用程序中。
接下来，我们需要将 `ngRoute` 的依赖注入到我们的应用程序中。
myModule = angular.module('myAngularApplication', ['ngRoute']);
接下来我们需要做的是使用 `$routeProvidor` 配置路由规则。假设我们想创建一个具有三个视图的应用程序：`Home`、`About` 和 `Contact`。我们将在页面顶部显示一个简单的菜单栏和三个导航链接来导航到这些链接。所以，让我们首先使用 `$routeProvidor` 配置三个路由 `home`、`about` 和 `contact`。
myModule = angular.module('myAngularApplication', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "homeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "aboutController"
})
.when("/contact", {
templateUrl: "contact.html",
controller: "contactController"
}).
otherwise({
redirect: '/home'
});
}]);
上面的代码的作用是配置三个路由，并将指定的视图和控制器与该路由关联起来。每当请求匹配的路由时，就会加载指定的视图。需要注意的重要一点是，我还将控制器附加到了路由。这意味着指定的控制器将自动与指定的视图关联，而我无需在视图本身中放置 `ng-controller`。我们还指定了一个 `otherwise` 条件，以便在 URL 中出现任何未知路由时，我们将用户重定向到我们的默认路由。
现在让我们创建这三个视图 HTML 文件。这些文件将只包含页面本身的内容。所以，让我们有一个简单的标题标签在这些视图中打印视图本身的名称。
完成此操作后，让我们为相应的视图创建控制器。目前，控制器将是空的。在现实世界中，它们将包含渲染视图的逻辑。
(function () {
var homeController = function ($scope) {
}
angular.module('myAngularApplication').controller('homeController', ["$scope", homeController]);
}());
(function () {
var contactController = function ($scope) {
}
angular.module('myAngularApplication').controller
('contactController', ["$scope", contactController]);
}());
(function () {
var aboutController = function ($scope) {
}
angular.module('myAngularApplication').controller('aboutController', ["$scope", aboutController]);
}());
所以我们已经准备好了三个虚拟视图和三个虚拟控制器。现在，在我们能够使用这些视图之前，我们需要定义应用程序的布局视图。布局视图就像 ASP.NET 类的母版页。它定义了我应用程序的骨架以及应该存在于所有页面上的通用 UI 元素。所有其他视图将根据所选路由由路由引擎注入到此布局视图中。
为了解释这个布局视图，我将使用我在微软网站上找到的这张图片。
在这张图片中，Angular 布局视图就像母版页。我们在上一节中创建的视图只是内容页面。根据路由，视图将被注入到布局视图中，然后完整的定制视图将呈现给用户。所以，对于我们的应用程序，布局视图只包含顶层菜单。子视图将被注入布局视图的区域将由 `ng-view` 指令创建。让我们看看我们的布局视图是什么样子。
现在我们已经具备了所有必需的组件，让我们运行应用程序并看看路由是如何工作的。
我们已经有了一个示例应用程序来演示 Angular 中路由的工作方式。路由模块使我们能够创建单页应用程序并为应用程序定义一些基本的路由，但对于更复杂的场景，它并不太推荐。Angular 还有一个名为 UI Router 的模块，其路由是基于状态的，而不是基于 URL 的。对于复杂的路由场景，我强烈建议使用 UI Router 而不是这个基础路由引擎。但有了这个基本的路由知识，也许理解 UI Router 会更容易。
关注点
在本文中，我们了解了 Angular 路由的基础知识，以及如何配置和使用 Angular 路由。本文的主要目的是让大家熟悉路由的工作方式。本文是从初学者的角度编写的。希望它具有启发性。
历史
- 2015年7月17日：初版