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路由器。

页面导航

通常我们会有页面导航，如下面的高级部分所示。

Image 1

让我们假设从一个HTML页面到另一个HTML页面的基本流程。在角的世界里，我们称之为部分观点。对于所有的页面，我们都有一个起始位置/起始页面。让我们把它作为Main.HTML。

现在流程看起来如下所示。它的意思是，我们将拥有承载其他页面的容器页面，这里容器页面是Main.html。

Image 2

因此，使用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页面，我们将看到下面的输出。

Image 3

当你点击链接“第2页”，它会进入第二页…

,

Image 4

,

的兴趣点

,

NA

历史

NA

本文转载于：http://www.diyabc.com/frontweb/news16509.html

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Dincat/p/13492238.html