AngularJS ui-routerAngularJS ui-router
介绍
我是一个新手到AngularJS世界,并与它工作了几个月,仍然学习新的东西和力量的AngularJS框架。它真的很神奇,它的优点是你可以http://www.diyabc.com/frontweb/news16509.html快速完成,你想在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文件的内容如下所示
<!-- 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路由器到你的项目中,然后在你的脚本部分引用路径。
是的,AngularJS中的ui路由器是单独的模块,我们需要单独添加。
<script src="App.js"></script>
现在,您知道的前两个脚本文件,我稍后将讨论的下一个App.js文件。
<h1>AngularJS Ui router - Demonstration</h1>
在身体部分,我们有h1gt;标签,它将像母版页,因为它将显示标题为“AngularJS Ui-router演示”,为每个页面,当我们导航。
另一件重要的事你可以看到下一行h1gt;标签是
<div data-ui-view=""></div>
这是ui-router引擎的占位符,用于将我们将要声明的所有部分视图注入到路由配置中。在创建了剩下的HTML部分视图之后,我们看到了这一点。
- 1. - html页
为了使事情变得简单,我将在页-1到页-3的HTML页面中创建某种静态内容。现在,页面-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>
请注意,页面-1的内容没有任何HTML和正文标记,这是因为正如我前面所说的,这是部分视图,它将呈现到我们在main.html页面中声明的占位符中。
<div ui-sref="page2"><a href="">Page 2</a></div>
上面一行是从页面1到页面2的导航链接。因此,当你点击链接“第2页”,你将被导向下一个页面。这是由ui-sref>标签。
让我们继续前进。除了一些小的变化外,其他页面内容看起来类似。让我们看看那些是什么。
- 2. - html页
现在,页面-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州名和alt; gt;标签的文本。
- 3. - html页
现在,页面-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状态名和alt; gt;标签的文本。注意,从这个页面我们将导航回到第一个页面page -1.html
好了,我们已经基本完成了HTML页面及其内容的声明。现在让我们进入状态引擎的角度部分。
现在,在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']);
这一行delcares AngularJS模块和‘ui-router’模块注入它。
myApp.config(function ($stateProvider, $urlRouterProvider) {
上面一行是使用.config函数声明的状态路由配置。$stateProvider和$urlRouterProvider是可用来处理州导航的服务。状态导航声明有以下参数,
stateName, UrlName, Template或TemplateURL和控制器(本例中我们不使用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是其中一种)。如前所述,页面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页面,我们将看到下面的输出。
当你点击链接“第2页”,它会进入第二页…
,
,
的兴趣点
,
NA
历史
NA
本文转载于:http://www.diyabc.com/frontweb/news16509.html