介绍 我是一个新手到AngularJS世界，并与它工作了几个月，仍然学习新的东西和力量的AngularJS框架。它真的很神奇，它的优点是你可以快速完成，你想在UI端做的事情，它很容易完成，只需要几行代码。 AngularJS中让我印象深刻的一点是路由框架。希望这将帮助那些想要开始它(AngularJS ui路由器)。 我们将看到关于什么是路由以及如何配置和使用路由的简单示例。 如果你想要快速浏览和跳转到行动，请查看这里。 背景 那些曾经使用过Microsoft . net MVC的人，他们更熟悉架构模式MVC(模型-视图-控制器)。在这种情况下，服务器端代码将由控制器处理，而模型可以是用于绑定视图中的数据的域实体。 在UI层端使用了相同的MVC模式概念，但没有服务器代码。假设你有两个Javascipt文件，其中它服务于使用AngularJS功能的MVC。 Microsoft MVC中最伟大的特性之一就是从一个页面导航到另一个页面的方式，这是由路由引擎控制的。同样的概念在AngularJS中也可以使用，我们称之为路由框架/路由服务。 注意:我们不会在本文中看到Angular架构和MVC。重点是AngularJS ui路由器模块。 好的，我们将看到路由引擎(ui-路由器)在AngularjS。我们有两个版本的路由框架，我不打算讨论这两个版本，让我们集中讨论ui路由器。 页面导航 通常我们会有页面导航，如下面的高级部分所示。 让我们假设从一个HTML页面到另一个HTML页面的基本流程。在角的世界里，我们称之为部分观点。对于所有的页面，我们都有一个起始位置/起始页面。让我们把它作为Main.HTML。 现在流程看起来如下所示。它的意思是，我们将拥有承载其他页面的容器页面，这里容器页面是Main.html。 因此，使用AngularJS路由框架，我们将导航从一个页面到另一个页面。好的。让我们停止对“文本”的解释。现在就开始行动。:) 使用的代码 首先，我们使用Visual Studio创建一个空的web应用程序，然后总共创建4个HTML文件，如下所示。 注意:我们将使用AngularJS的1.2版本，当我写这篇文章时，AngularJS 1.3版本已经发布了。 1. Main.html, 2. - 1. - html页 3.- 2. - html页 4. - 3. - html页 , Main.html html文件的内容如下所示 隐藏,复制Code
<!-- 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页面做了什么。 隐藏,复制Code
<script src="Scripts/angular.js"></script> <script src="Scripts/angular-ui-router.js"></script>
希望你注意到上面的脚本部分，我们必须添加/使用NuGet来安装angular ui路由器到你的项目中，然后在你的脚本部分引用路径。 是的，AngularJS中的ui路由器是单独的模块，我们需要单独添加。 隐藏,复制Code
<script src="App.js"></script>
现在，您知道的前两个脚本文件，我稍后将讨论的下一个App.js文件。 隐藏,复制Code
<h1>AngularJS Ui router - Demonstration</h1>
在身体部分，我们有h1gt;标签，它将像母版页，因为它将显示标题为“AngularJS Ui-router演示”，为每个页面，当我们导航。 另一件重要的事你可以看到下一行h1gt;标签是 隐藏,复制Code
<div data-ui-view=""></div>
这是ui-router引擎的占位符，用于将我们将要声明的所有部分视图注入到路由配置中。在创建了剩下的HTML部分视图之后，我们看到了这一点。 - 1. - html页 为了使事情变得简单，我将在页-1到页-3的HTML页面中创建某种静态内容。现在，页面-1.html内容将如下所示。 隐藏,复制Code
<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>
请注意，页面-1的内容没有任何HTML和正文标记，这是因为正如我前面所说的，这是部分视图，它将呈现到我们在main.html页面中声明的占位符中。 隐藏,复制Code
<div ui-sref="page2"><a href="">Page 2</a></div>
上面一行是从页面1到页面2的导航链接。因此，当你点击链接“第2页”，你将被导向下一个页面。这是由ui-sref>标签。 让我们继续前进。除了一些小的变化外，其他页面内容看起来类似。让我们看看那些是什么。 - 2. - html页 现在，页面-2.html内容将如下所示。 隐藏,复制Code
<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州名和alt; gt;标签的文本。 - 3. - html页 现在，页面-2.html内容将如下所示。 隐藏,复制Code
<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相比，我们有just更改了ui-sref州名和alt;标签的文本。注意，从这个页面我们将导航回到第一个页面page -1.html 好了，我们已经基本完成了HTML页面及其内容的声明。现在让我们进入状态引擎的角度部分。 现在，在Visual Studio空项目的根目录中，创建一个JavaScript文件，并将其命名为App.js。 App.js 这个文件中声明了AngularJS应用程序模块。也声明了国家导航。 隐藏,复制Code
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" }); });
好，让我们逐个来看构型。 隐藏,复制Code
var myApp = angular.module("myApp", ['ui.router']);
这一行delcares AngularJS模块和‘ui-router’模块注入它。 隐藏,复制Code
myApp.config(function ($stateProvider, $urlRouterProvider) {
上面一行是使用.config函数声明的状态路由配置。$stateProvider和$urlRouterProvider是可用来处理州导航的服务。状态导航声明有以下参数， stateName, UrlName, Template或TemplateURL和控制器(本例中我们不使用controller) 隐藏,复制Code
$stateProvider
.state("page1", {
url: "/page1",
templateUrl: "Page-1.html"
})
因此，根据我们的声明，“page1”是州名，“/page1”是您在地址栏导航期间看到的URL。templateUrl是在导航时显示的部分视图。 隐藏,复制Code
$urlRouterProvider.when("", "/page1");
还请注意，上面的行给出了加载期间显示的默认视图，它只是占位符将在main.html中拥有的第一个部分视图 就像这样，我们已经为所有页面分配了路由，现在我们在导航时告诉了路由/状态配置。现在，AngularJS知道哪些视图可以导航，哪些视图可以从头开始，但是知道如何从一个页面导航到另一个页面。 是的，您是对的，我们已经在page-1.html中声明了这一点，以便导航到其他页面。(注意:我们有不同的导航方式，ui-sref是其中一种)。如前所述，页面1包含要导航的内容。注意，我们使用状态名从一个视图导航到另一个视图。 隐藏,复制Code
<div ui-sref="page2"><a href="">Page 2</a></div>
现在，我们可以看到到目前为止创建的文件的全部内容。 隐藏,复制Code
<!-- 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>
隐藏,复制Code
<!-- 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>
隐藏,复制Code
<!-- 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>
隐藏,复制Code
<!-- 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>
隐藏,复制Code
// 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页面，我们将看到下面的输出。 当你点击链接“第2页”，它会进入第二页… , , 的兴趣点 , NA 历史 NA 本文转载于：http://www.diyabc.com/frontweb/news1652.html