UI-Router详解

作者：盐析白兔 | 2024-08-21 01:19:51

踩

ui-router

无需原生开发基础，也能完美呈现京东商城。《混合开发京东商城系统，提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术，混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。

我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.

angular.js ：为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.

angularUI ：也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.

后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.

咱们今天主要讲解ui-router的基本模块，先上代码。

<!DOCTYPE html>
<html lang="en" ng-app="sunday">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <a ui-sref="hello" ui-sref-active="active">hello</a>
  <br>
  <a ui-sref="world" ui-sref-active="active">world</a>

  <ui-view></ui-view>


  <script src="js/angular.js"></script>
  <script src="js/angular-ui-router.js"></script>
  <script src="js/index.js"></script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

基本的index.html，ui-sref表示指令链接到一个特定的状态，一般情况下为替换视图，替换视图的部分为使用<ui-view></ui-view>所标记的区域。可以简单的理解为<ui-view></ui-view> 起到的其实是一个占位符的作用。

接下来咱们再看js代码。

(function(angular){

  angular.module('sunday',['ui.router'])
    .config(function($stateProvider){
      $stateProvider.state({
        name:'hello',
        url:'/hello',
        template:'<h3>hello world!</h3>'
      }).state({
        name:'world',
        url:'/world',
        template:'<h3>hello ui-router!</h3>'
      })
    });

})(angular);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在构造angular对象的时候，我们引入了 'ui.router' 模块，在angular对象的配制方法中，我们通过 ui-router提供的$stateProvider对象的 state方法去配置路由对象，name对应ui-sref中配置的值，使用template去替换<ui-view></ui-view>。

那么ui-router中的嵌套路由是如何使用的呢？来看我们修改之后的代码。

.state('world',{
        url:'/world',
        templateUrl:'world.html'
      })
1
2
3
4

我们对index.js进行了修改，使点击world的之后指向了一个 world.html 的模板。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>This is a world</title>
</head>
<body>

    <div>
      <a ui-sref=".world1" ui-sref-active="active">world-1</a>
      <br>
      <a ui-sref="world2" ui-sref-active="active">world-2</a>
    </div>

    <div ui-view style="margin-left: 50px"></div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这是world.html中的代码，我们可以看到在world.html中我们创建了两个 ui-sref 分别为：.world1和world2 ，相信看到这里大家也都能知道了，ui-router其实就是通过 .语法去进行的路由层级的配置。
来看一下新的 index.js的代码。

(function(angular){

  angular.module('sunday',['ui.router'])
    .config(function($stateProvider){
      $stateProvider.state('hello-world',{
        url:'/hello',
        template:'<h3>hello world!</h3>'
      }).state('world',{
        url:'/world',
        templateUrl:'world.html'
      }).state('world.world1',{
        url:'/world/world-1',
        template:'<h3>This is a World 1</h3>'
      }).state('world2',{
        url:'/world/world-2',
        template:'<h3>world2并不依赖于world，在我们点击它的时候，他会替换掉index.html中的<div ui-view></div></h3>'
      })
    });

})(angular);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

index.html的代码

<!DOCTYPE html>
<html lang="en" ng-app="sunday">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>

  </style>
</head>
<body>

  <a ui-sref="hello-world" ui-sref-active="active">hello</a>
  <br>
  <a ui-sref="world" ui-sref-active="active">world</a>

  <div ui-view style="margin-left: 50px"></div>


  <script src="js/angular.js"></script>
  <script src="js/angular-ui-router.js"></script>
  <script src="js/index.js"></script>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/1009238