angularjs ui-router

时间  2019-12-20
标签 angularjs router 栏目 AngularJS 繁體版
原文   原文链接

[转]AngularJS ui-router (嵌套路由)

本文转自：http://www.oschina.net/translate/angularjs-ui-router-nested-routeshtml

 http://www.codeproject.com/Articles/842880/AngularJS-ui-router-nested-routesjava

AngularJS ui-router (嵌套路由)                    angularjs

英文原文：AngularJS ui-router (nested routes)

 

介绍

AngularJS 嵌套路由：这是我针对同一个主题（ui-router）的第二篇文章. 若是你对第一篇文章感兴趣的话，能够访问 这里. 好了，让咱们继续吧，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route同样强大. ui-router提供了让咱们能够作路由嵌套和视图命名的特性. 咱们将在示例中看到ui-router中存在的全部类型. web

背景

引述我以前那篇文章开头给出的使用ui-router框架实现的简单路由, 基于咱们的业务需求，须要有不一样类型的导航, 通常像那种从一个页面到另一个页面的导航很是的普通。但请想象一下在某些状况下，你须要在一个主页中有tab页或者菜单能够点击打开相应的页面.app

             
leoxu 翻译于 5个月前

0人顶框架

 

顶 翻译的不错哦!                        ide

好吧，让咱们来看看一个典型的导航..函数

注意，这个导航咱们已经在以前的文章中见过。针对如今的主题咱们将看到该导航嵌套进视图中的形式.post

根据上的界面设计，咱们计划该页面能从一个页面导航到另一个页面, 当点击page-1时，咱们将在下面显示page-1的内容，点击其它导航菜单也会有相似的效果. 咱们但愿这可以用一种很直接的方式被处理. 让咱们开始写代码吧.ui

实战

针对该需求咱们使用AngularJS框架来建立简单的html和JavaScript页面. 咱们将建立3个HTML页面和一个JavaScript脚本文件。 

一开始咱们建立一个空的web应用程序，并加入三个HTML页面。以下所示. 这些页面都是片断视图, 它们会在导航过程当中展现。咱们还要为了能展现应用程序的Tab，建立另一个叫作PageTab.html的页面.

             
leoxu 翻译于 5个月前

0人顶

 

顶 翻译的不错哦!                        

所以咱们须要建立如下文件：

1. Page1.html

2. Page2.html

3. Page3.html

4. PageTab.html

注意：咱们使用的是AngularJS 1.2，当我写这篇文章的时候，Angular 1.3已经发布了。

Page1.html

建立以下的html页面：

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

 

Page2.html

建立以下的html页面：

1
2
3
4
5
<div>
     <div>
         <h1>Page 2 content goes here...</h1>
     </div>
</div>

 

Page3.html

建立以下的html页面：

1
2
3
4
5
<div>
     <div>
         <h1>Page 3 content goes here...</h1>
     </div>
</div>

 

建立以下的html页面：

PageTab.html

建立以下的html页面：

1
2
3
4
5
6
7
<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>

 

这将会使页面文本处于侧边，哎呀，我忘了添加当用户将鼠标悬停在文本上的时候的超连接了。让咱们这样作：

1
2
3
4
5
6
7
<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的解决方法。

             
痞子蔡 翻译于 6个月前

0人顶

 

顶 翻译的不错哦!                        

注意，到目前为止，咱们尚未插入任何AngularJS路由或者其它任何框架。目前咱们只是建立了一些页面片断，咱们须要一个占位或者说父页面来装下这些东西. 让咱们把这个页面叫作 Main.html.

如今咱们就来建立它.

Main.html

用以下内容建立这个html页面.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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) 第四件事情就是让主页内容展现出来，而后显示出它里面的页面.

             
leoxu 翻译于 5个月前

0人顶

 

顶 翻译的不错哦!                        

如今，让咱们看一下App.JS文件的内容，咱们声明了AngularJS模块和路由配置。当页面加载的时候咱们会在Main.html中显示PageTab.html的内容。代码以下：

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var myApp = angular.module("myApp", [&apos;ui.router&apos;]);
 
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"
        });
});

咱们一步步地来解释这作了什么。

Line-1: 第一行，声明AngularJS模块, 并把ui-router传入AngularJS主模块，全部的结合起来咱们就获得了Angular模块。

1
var myApp = angular.module("myApp", [&apos;ui.router&apos;]);

 

这里叫作App模块，这将告诉HTML页面这是一个AngularJS做用的页面，它的内容由AngularJS引擎来解释。

             
痞子蔡 翻译于 6个月前

1人顶

 

顶 翻译的不错哦!                        

代码行-2:这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎做为函数参数传入，这样咱们就能够为这个应用程序配置路由了.

1
myApp.config(function ($stateProvider, $urlRouterProvider) {

代码行-3: 好，那这一行作什么的呢，若是没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 PageTab.html, 这个页面就是状态名称被声明的地方. 只要理解了这个，那它就像switch case语句中的default选项.

1
$urlRouterProvider.when("", "/PageTab");

语句块-1: 这一行定义了会在main.html页面第一个显示出来的状态，做为页面被加载好之后第一个被使用的路由.

1
2
3
4
5
$stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })

这就向母版页的子页面，应用程序会首先加载这个main.html页面。

             
leoxu 翻译于 5个月前

0人顶

 

顶 翻译的不错哦!                        

语句块-2: 现在，就由这一行来定义页面, 可是等一等，这里有点不一样，咱们以前为上面的状态名称加上了前缀，而且使用点“.“号进行了分隔. 这里很关键，它会告诉路由引擎咱们在这里定义的是子页面/嵌入页面/嵌入(sub page / nested page / nested)状态的page/route.

1
2
3
4
.state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page-1.html"
        })

它将会在 "PageTab.html" 页面里面显示出来，那么它是什么意思呢. 想象一下当咱们想要在母版页中管理全部的页面时，咱们就会想要一个叫作”ui-view“的占位标记, 所以咱们如今把PageTab.html叫作一个母版页，由于它会把咱们须要在PageTab.html中用”ui-view“ 声明好的其它页面都管理起来. 如今让咱们来修改一下它.

PageTab.html

1
2
3
4
5
6
7
8
9
10
<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>

好了，再来下面一行..

1
2
3
<div>
    <div ui-view=""/>
</div>

也就是说 PageTab.html 将对装下全部的子页面.

             
leoxu 翻译于 5个月前

0人顶

 

顶 翻译的不错哦!                        

如今一切就绪了。OK，但是如今谁来告诉程序应该显示哪一个页面呢. 这就是咱们要在路由引擎里面配置的东西，以下所示.

1
2
3
4
.state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page2.html"
        })

Page2.html 将会在被叫作PageTab的状态中展现，它就是 PageTab.html.

Ok, 可是咱们还落下啥事没作，这事就是当咱们在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候须要页面在占位标记那里显示出来，是不 ?

还真是把那一块给忘啦，咱们尚未为路由和这种逻辑创建起联系, 想象一下若是那是href的话，就意味着咱们能够指定将会锚向页面里面的ID名称, 若是它是简单的html本地引用就是这样，但咱们则须要按照需求显示不一样的页面.

             
leoxu 翻译于 5个月前

0人顶

 

顶 翻译的不错哦!                        

关键的地方在这里.  (ui-sref) 咱们须要再一次修改 PageTab.html，以下所示.,

1
2
3
4
5
6
7
8
9
10
<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中定义的状态同tab中定义的对应文本进行了关联. 当咱们使用点符号对它进行了声明，程序就会认为页面时ui-view中的子页面或者说嵌入页面，它们就是路由配置中须要被展现的页面.

如今，咱们要看看目前为止咱们讨论过的那些页面的内容了.

Main.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

Page2.html

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

Page2.html

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var myApp = angular.module("myApp", [&apos;ui.router&apos;]);
 
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"
        });
});

一切OK，如今让咱们把这个应用程序运行起来吧.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程