AngularJS ui-router
4.78/5 (14投票s)
使用 AngularJS 创建简单的 ui-router
引言
我是 AngularJS 世界的新手，已经使用它几个月了，仍在学习新的东西和 AngularJS 框架的强大功能。它真的很棒，而且有趣的是，你可以在 UI 方面快速完成你想要做的事情，只需几行代码即可轻松实现。
AngularJS 中最让我印象深刻的是路由框架。希望这对那些想开始使用它的人有帮助（AngularJS Ui-router）。
我们将通过一个简单的例子来了解什么是路由，以及如何配置和使用它。
如果您想快速预览并开始动手操作，请在此处查看：此处
背景
对于那些有 Microsoft .NET MVC 背景的人来说，他们对 MVC（模型-视图-控制器）架构模式更加熟悉。在这种模式下，服务器端代码由控制器处理，模型可以是您的领域实体，用于将数据绑定到视图。
MVC 模式的相同概念也应用于 UI 层，没有服务器端代码。只需设想您有几个 JavaScript 文件，它们可以利用 AngularJS 的强大功能来充当 MVC。
Microsoft MVC 最出色的功能之一是导航从一个页面到另一个页面的方式，这由路由引擎控制。AngularJS 中也有相同的概念，我们称之为路由框架/路由服务。
注意：本文不讨论 Angular 架构和 MVC。重点在于 AngularJS ui-router 模块。
好的，我们将介绍 AngularJS 中的路由引擎（ui-router）。我们有两种路由框架版本，我将不全部介绍，让我们专注于 UI-ROUTER。
页面导航
通常，页面导航如下图所示，这是高层概览。
让我们假设页面从一个 HTML 页面到另一个 HTML 页面的基本流程。在 AngularJS 中，我们称之为“部分视图”（PartialViews）。所有页面都有一个起始位置/起始页面。我们将其命名为 Main.HTML。
现在，流程将如下所示。 这意味着我们将有一个容器页面，其他页面将托管在其中，这里的容器页面是 Main.html。
因此，我们将使用 AngularJS 路由框架在页面之间进行导航。 好的。让我们停止“文字”解释。现在开始“行动”。：)
使用代码
好的，要开始，我们使用 Visual Studio 创建一个空的 Web 应用程序，然后在其中创建总共 4 个 HTML 文件，如下所示。
注意：在撰写本文时，我们将使用 AngularJS 1.2 版本，此时 AngularJS 1.3 已经发布。
1. Main.html，
2. Page-1.html
3. Page-2.html
4. Page-3.html
Main.html
Main.html 文件的内容将如下所示。
<!-- 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 Ui router - Demonstration</h1>
<h4>This is the Home Page</h4>
<div data-ui-view=""></div>
</body>
<html>
好的，我们逐个看看 main.html 页面做了什么。
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
希望您已经注意到上面的脚本部分，我们需要使用 NuGet 安装 angular ui-router 到您的项目中，然后在您的脚本部分引用路径。
是的，AngularJS 中的 ui-router 是一个单独的模块，我们需要单独添加。
<script src="App.js"></script>
现在，前两个脚本文件您应该已经熟悉了，接下来的 App.js 文件我稍后会讲。
<h1>AngularJS Ui router - Demonstration</h1>
在 body 部分，我们有一个 <h1> 标签，它将作为主页面，显示标题“AngularJS Ui-router Demonstration”，在每个页面导航时都会显示。
您可以在 <h1> 标签下一行看到的另一个重要内容是
<div data-ui-view=""></div>
这是 ui-router 引擎的占位符，用于注入我们在路由配置中声明的所有部分视图。我们在创建其余 HTML 部分视图后会看到这一点。
Page-1.html
为了使事情非常简单，我将在 Page-1 到 Page-3 的 HTML 页面中创建一些静态内容。现在 Page-1.html 的内容将如下所示。
<div>
<div style="height: 400px">
<h2>Partial view-1</h2>
<p>The partial view of the content goes here...
</div>
<div ui-sref="page2"><a href="">Page 2</a></div>
</div>
请注意，Page-1 的内容不包含任何 HTML 和 BODY 标签，这是因为如我之前所说，这是一个部分视图，它将呈现到我们在 main.html 页面中声明的占位符中。
<div ui-sref="page2"><a href="">Page 2</a></div>
上面的行是 Page-1 到 Page-2 的导航链接。所以当你点击“Page 2”链接时，你将被导向下一个页面。这是通过 <ui-sref> 标签完成的。
继续。其他页面的内容看起来相似，只有一些小的变化。让我们看看是什么。
Page-2.html
现在 Page-2.html 的内容将如下所示。
<div>
<div style="height: 400px">
<h2>Partial view-2</h2>
<p>The partial view of the content goes here...
</div>
<div ui-sref="page3"><a href="">Page 3</a></div>
</div>
请注意，与 Page-1.html 相比，上面的代码中我们只更改了 ui-sref 状态名称和 <a> 标签文本。
Page-3.html
现在 Page-2.html 的内容将如下所示。
<div>
<div style="height: 400px">
<h2>Partial view-3</h2>
<p>The partial view of the content goes here...
</div>
<div ui-sref="page1"><a href="">Back to Page 1</a></div>
</div>
请注意，与 Page-2.html 相比，上面的代码中我们只更改了 ui-sref 状态名称和 <a> 标签文本。请注意，从这个页面我们导航回第一个页面 Page-1.html
好的，我们几乎完成了 HTML 页面的声明和内容。现在让我们深入研究 AngularJS 的状态引擎部分。
现在，在 Visual Studio 空项目的根目录下，创建一个 JavaScript 文件，并命名为 App.js。
App.js
这个文件将包含声明的 AngularJS 应用程序模块。以及声明的状态导航。
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/page1");
$stateProvider
.state("page1", {
url: "/page1",
templateUrl: "Page-1.html"
})
.state("page2", {
url:"/page2",
templateUrl: "Page-2.html"
})
.state("page3", {
url:"/page3",
templateUrl: "Page-3.html"
});
});
好的，让我们逐个配置。
var myApp = angular.module("myApp", ['ui.router']);
这一行声明了 AngularJS 模块，并将 'ui-router' 模块注入其中。
myApp.config(function ($stateProvider, $urlRouterProvider) {
上面的行是状态路由配置，它将使用 .config 函数声明。$stateProvider 和 $urlRouterProvider 是可用的服务，用于处理状态导航。状态导航声明包含以下参数，
stateName（状态名），UrlName（URL 名），Template（模板）或 TemplateURL（模板 URL）和 Controller（控制器）。 （本例中我们不使用控制器）
$stateProvider
.state("page1", {
url: "/page1",
templateUrl: "Page-1.html"
})
所以根据我们的声明，"page1" 是状态名，"/page1" 是您在地址栏导航时看到的 URL。templateUrl 是我们在导航时将要显示的部分视图。
$urlRouterProvider.when("", "/page1");
另外请注意，上面的行提供了加载时的默认视图，也就是 main.html 中占位符将拥有的第一个部分视图。
像这样，我们声明了所有页面的路由，现在我们正在告诉路由/状态配置，当我们进行导航时。现在，AngularJS 知道哪些部分视图可用以供导航，以及从哪个开始，但是如何从一个页面导航到另一个页面呢？
是的，您说得对，这就是我们已经在 page-1.html 中声明过的导航到其他页面的方式。（注意：我们有不同的导航方式，ui-sref 是一种方式）。正如我之前所说，page-1 包含了导航内容。请注意，我们正在使用状态名称在视图之间导航。
<div ui-sref="page2"><a href="">Page 2</a></div>
现在，我们看到到目前为止我们创建的所有文件的完整内容。
<!-- 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 Ui router - Demonstration</h1>
<h4>This is the Home Page</h4>
<div data-ui-view=""></div>
</body>
<html>
<!-- Page-1.html -->
<div>
<div style="height: 400px">
<h2>Partial view-1</h2>
<p>The partial view of the content goes here...</p>
</div>
<div ui-sref="page2"><a href="">Page 2</a></div>
</div>
<!-- Page-2.html -->
<div>
<div style="height: 400px">
<h2>Partial view-2</h2>
<p>The partial view of the content goes here...</p>
</div>
<div ui-sref="page3"><a href="">Page 3</a></div>
</div>
<!-- Page-3.html -->
<div>
<div style="height: 400px">
<h2>Partial view-3</h2>
<p>The partial view of the content goes here...</p>
</div>
<div ui-sref="page1"><a href="">Back to Page 1</a></div>
</div>
// App.js
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/page1");
$stateProvider
.state("page1", {
url: "/page1",
templateUrl: "Page-1.html"
})
.state("page2", {
url:"/page2",
templateUrl: "Page-2.html"
})
.state("page3", {
url:"/page3",
templateUrl: "Page-3.html"
});
});
现在，让我们在浏览器中查看 main.html 页面，我们将看到以下输出。
当您点击“Page 2”链接时，它会带您到第二个页面...
关注点
不适用
历史
不适用