AngularJS ui-router（嵌套路由）
4.92/5 (5投票s)
AngularJS 路由与嵌套状态
引言
AngularJS 嵌套路由：好的，这是我关于同一主题（ui-router）的第二篇文章。如果您有兴趣看我的第一篇文章，可以点击这里。好了，我们继续，讲 ui-router 嵌套状态。与 AngularJS 框架自带的 ng-route 相比，ui-router 非常强大。Ui-router 提供了我们可以进行嵌套路由和命名视图的功能。好吧，我们将看到 ui-router 中所有类型的示例。
背景
参考我之前的文章，了解 ui-router 框架的简单路由。假设我们根据收到的需求有不同类型的导航。像从一页跳到另一页的常见导航非常普遍。但也有一些典型情况，想象一下，你有一个主页面，里面有标签页或菜单，点击菜单项时，我们需要显示相应的页面。
好了，让我们来看一个典型的导航……
关于这个导航，我们在我之前的文章中已经看到过了。现在，根据主题，我们将看到嵌套视图的导航。
根据上面的屏幕设计，我们将设计我们的页面，从一个页面导航到另一个页面。点击page-1时，我们将显示 page-1 的内容，其他页面也是如此。希望这个过程很直接。让我们开始编写代码。
实际应用
根据要求，我们将使用 AngularJS 框架创建简单的 HTML 和 JavaScript 页面来完成此操作。我们将创建三个 HTML 页面和一个 JavaScript 文件。
开始时，创建一个空的 Web 应用程序并添加三个 HTML 页面。如下图所示。这些页面是部分视图，将在导航过程中显示。此外，为了显示应用程序选项卡，我们将再创建一个页面，称其为 PageTab.html。
所以，我们需要创建的文件如下：
1. Page1.html
2. Page2.html
3. Page3.html
4. PageTab.html
注意：我写这篇文章时使用的是 AngularJS 1.2 版本，此时 AngularJS 1.3 已经发布。
Page1.html
创建带有如下内容的 HTML 页面。
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
Page2.html
创建带有如下内容的 HTML 页面。
<div>
<div>
<h1>Page 2 content goes here...</h1>
</div>
</div>
Page3.html
创建带有如下内容的 HTML 页面。
<div>
<div>
<h1>Page 3 content goes here...</h1>
</div>
</div>
现在，我们将创建导航选项卡，
PageTab.html
创建带有如下内容的 HTML 页面。
<div>
<div>
<span style="width:100px">Page-1</span>
<span style="width:100px">Page-2</span>
<span style="width:100px">Page-3</span>
</div>
</div>
这将使页面文本并排显示，哎呀，我忘记在用户将鼠标悬停在文本上时添加超链接了。我们现在来做。
<div>
<div>
<span style="width:100px"><a href="">Page-1</a></span>
<span style="width:100px"><a href="">Page-2</a></span>
<span style="width:100px"><a href="">Page-3</a></span>
</div>
</div>
关键是我们不会指向任何超链接，只是为了获取链接我才放了 href，实际上这只是一个获取 URL 的变通方法。
注意，到目前为止，我们还没有接入任何 angularjs 路由或任何框架。关键是我们目前创建的所有内容都只是部分页面，我们需要一个占位符/父页面来承载它们。我们将该页面称为 Main.html。
我们现在就来创建它。
Main.html
创建带有如下内容的 HTML 页面。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<script src="App.js"></script>
</head>
<body data-ng-app="myApp">
<h1>AngularJS Home Page (Ui-router Demonstration)</h1>
<div data-ui-view=""></div>
</body>
<html>
我们在主页面中做了几件事：（i）我们引用了 angularjs 框架；（ii）我们引用了 ui-router 框架；（iii）然后是 angularjs 文件 App.js（我稍后会谈到）；（iv）第四个是主页面内容，如主内容将显示，然后是承载页面的占位符。
现在，让我们看看 App.JS 文件和内容。我们将在这里声明 angularjs 模块和路由配置。页面加载时，我们将显示 Main.html 和 PageTab.html 页面。让我们来编写代码。
App.js
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/PageTab");
$stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "PageTab.html"
})
.state("PageTab.Page1", {
url:"/Page1",
templateUrl: "Page-1.html"
})
.state("PageTab.Page2", {
url:"/Page2",
templateUrl: "Page-2.html"
})
.state("PageTab.Page3", {
url:"/Page3",
templateUrl: "Page3.html"
});
});
好的，我们一步步来看它。
第 1 行：第一行声明了 angularjs 模块，并将 ui-router 注入到 angularjs 主模块中，总而言之，我们得到了 angular 模块。
var myApp = angular.module("myApp", ['ui.router']);
这叫做 app 模块，它将告诉 HTML 页面这是一个启用了 angularjs 的页面，内容将被 angularjs 引擎解析。
第 2 行：这一行将 $stateProvider 和 $urlRouteProvider 路由引擎声明为函数参数，我们可以在其中为此应用程序配置路由。
myApp.config(function ($stateProvider, $urlRouterProvider) {
第 3 行：好的，这一行的作用是，如果没有任何路由引擎匹配声明的状态，它将采用默认路由路径到 PageTab.html，这就是在那里声明的状态名称。为了理解，可以将其视为 switch case 语句中的 default 选项。
$urlRouterProvider.when("", "/PageTab");
StateSection-1：这一行定义了第一个状态，它将在 main.html 页面上作为第一个路由显示，当页面加载时。
$stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "PageTab.html"
})
这就像主页面的子页面，当应用程序加载 main.html 页面时。
StateSection-2：现在，这一行定义了一个页面，但是，等等，有一个区别，我们为上面的状态名称加了前缀，并用（点）“.”将其分开。这是这里的关键，它告诉路由引擎，我们在这里声明的页面/路由是子页面/嵌套页面/嵌套状态。
.state("PageTab.Page1", {
url:"/Page1",
templateUrl: "Page-1.html"
})
它将显示在 "PageTab.html" 页面内，所以它的意思是。想象一下，当我们想在主页面中托管任何页面时，我们需要一个名为 "ui-view" 的占位符，因为我们现在将 PageTab.html 称为主页面，因为它将承载其他页面，所以我们也需要在 PageTab.html 中声明 "ui-view"。我们现在来更改它。
PageTab.html
<div>
<div>
<span style="width:100px"><a href="">Page-1</a></span>
<span style="width:100px"><a href="">Page-2</a></span>
<span style="width:100px"><a href="">Page-3</a></span>
</div>
<div>
<div ui-view=""/>
</div>
</div>
好的，下面这行……
<div>
<div ui-view=""/>
</div>
表明 PageTab.html 将承载子页面。
现在清楚了。好的，但是如何做呢？谁会告诉我们应该显示哪个页面？这就是我们在路由引擎中配置的，如下所示。
.state("PageTab.Page2", {
url:"/Page2",
templateUrl: "Page2.html"
})
Page2.html 将显示在名为 PageTab 的状态内，而 PageTab 就是 PageTab.html。
好的，但我们仍然缺少一些东西，关键是我们点击 Page-1 或 Page-2 或 Page-3 时，我们希望相应地在占位符中显示页面，对吧？
那部分确实缺失了，我们还没有建立那个链接。想象一下，如果它是 href，我们可以给出指向页面内部的 ID 名称，如果是简单的 HTML 本地引用，但我们将根据需求显示不同的页面。
这里的关键是这个。 (ui-sref) 我们需要再次更改 PageTab.html，如下所示。，
<div>
<div>
<span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
<span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
<span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
</div>
<div>
<div ui-view=""/>
</div>
</div>
注意，上面高亮显示的项目是唯一的更改。所以我们在这里所做的只是将 App.js 中声明的状态与声明为选项卡的相应文本关联起来。当我们用 DOT 符号声明它时，就假定该页面是路由配置中声明的 ui-view 中的子页面/嵌套页面/嵌套状态，需要显示。
现在，我们将看到到目前为止我们讨论过的所有页面的内容。
Main.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<script src="App.js"></script>
</head>
<body data-ng-app="myApp">
<h1>AngularJS Home Page (Ui-router Demonstration)</h1>
<div data-ui-view=""></div>
</body>
<html>
PageTab.html
<div>
<div>
<span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
<span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
<span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
</div>
<div>
<div ui-view=""/>
</div>
</div>
Page1.html
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
Page2.html
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
Page2.html
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
App.js
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/PageTab");
$stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "PageTab.html"
})
.state("PageTab.Page1", {
url:"/Page1",
templateUrl: "Page1.html"
})
.state("PageTab.Page2", {
url:"/Page2",
templateUrl: "Page2.html"
})
.state("PageTab.Page3", {
url:"/Page3",
templateUrl: "Page3.html"
});
});
一切就绪，现在让我们运行应用程序。
好的，输出是这样的：（忽略图片中显示的边框，如果您想创建，可以使用简单的 CSS）
以下是我点击“Page-1”链接时的输出。
以下是我刚刚打开页面的输出。
好的，根据上面的屏幕，这是我们第一次运行应用程序时看到的首页。但有些需求是希望在加载页面时默认显示 Page-1。好的，我们也用路由中的微小更改来做。
$urlRouterProvider.when("", "/PageTab/Page1");
我们刚刚添加了高亮显示的部分，它将在加载主页时加载带有嵌套子页面的页面。因此，输出现在将是。
希望这对大家有帮助……我将在我的下一篇文章中详细介绍嵌套命名视图。
快乐学习.. .:)