当前位置:   article > 正文

Angularjs之UI.Router_angularjs ui router

angularjs ui router

最近正在开发的项目以AngularJS开发,目前开发已经告一段落,打算近期整理一下开发阶段中遇到的问题和个人感受。开发过程中接触了一些AngularJS的常用库,UI-ROUTER就是其中比较重要的路由库,就从这里开始写起来。

UI-ROUTER官网上提供了3个简单的教程,本篇就以这3个教程结合开发中的实际使用进行总结。

首先是熟悉的Hello World

<body ng-app='myApp'>
    <ul>
        <li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
        <li><a ui-sref="about" ui-sref-active="active">about</a></li>
    </ul>
    <ui-view></ui-view>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
angular.module('myApp', ['ui.router'])
       .config(function ($stateProvider) {
           var helloState = {
               name: 'hello',
               url: '/hello',
               template: '<h3>hello world</h3>'
           };
           var aboutState = {
               name: 'about',
               url: '/about',
               template: '<h3>this is a abut view</h3>'
           };

           $stateProvider.state(helloState)
                         .state(aboutState);
       });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

我们首先来谈谈HTML部分的代码。其中首先来看看ui-srefui-sref-active属性和ui-view标签。

ui-sref:

ui-sref: 是用来连接状态的一个指令。
这是一个可以带参数的连接状态的指令。当被选中,这个指令会激活带有提供的参数值的连接状态。

Linked State

属性值是连接状态的name

比如:
在上面的代码中,

<a ui-sref="hello" ui-sref-active="active">hello</a>
  • 1

其中ui-sref的属性值hello,对应的就是js中helloStatename值。

Relative Links

你也可以在ui-sref中使用相对状态路径。
需要注意的是路径是相对于创建了连接的状态。这允许一个状态创建一个总是命中相同目的的相对ui-sref属性。
例子:
下面的连接都相对于于父状态,即使当一个子状态当前被激活

<a ui-sref='.child1'>child 1 state</a>
<a ui-sref='.child2'>child 2 state</a>
  • 1
  • 2

下面的连接会激活父状态

<a ui-sref='^'>Return</a>
  • 1

这个例子是个很不错的例子
Relative links

hrefs

如果这个已连接的状态有一个URL,指令会自动生成并且更新href属性(使用[[StateService.href]])方法。
例子:
假设users状态有一个url/users/

<a ui-sref='users' href='/users/'>Users</a>
  • 1

参数值

除了状态名,属性ui-sref可以包含用来激活状态的参数值。参数值可以添加在状态名之后,用括号闭合。括号内的内容是一个表达式,被当作参数值执行。
例子:
这个例子渲染了一个连接列表给用户,状态的userId参数值来自用户的user.id属性。

<li ng-repeat="user in users">
 <a ui-sref="users.detail({userId: user.id})">{{user.displayName}}</a>
</li>
  • 1
  • 2
  • 3

注意:
参数值表达式通过$watch监听并更新。

过渡期选项(Transition Options)

你可以通过ui-sref-opts属性来指定[[TransitionOptions]]传递给[[StateService.go]]
选项被限制为只有location,inhreit并且reload

例子:

 <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
  • 1

其他DOM事件

你可以指定DOM事件响应(而不是click),通过提供一个events数组在ui-sref-opts属性中。
例子:

 <input type="text" ui-sref="contacts" ui-sref-opts="{events: ['change', 'blur']}">
  • 1

跟参数值表达式不一样的是,状态名没有通过$watch进行监听(因为性能原因),如果你需要动态更新连接状态,使用全动态指定[[uiState]]指令

ui-view

ui-view: 一个用激活状态填充视区的指令。

Attributes

name: (可选的) 视图名称

相同状态下的视图中的视图名称必须是唯一的。在不同的状态下你可以有相同的名称。

autoScroll

一个表达式,当执行结果为true, 状态被激活时, ui-view将会滚动进试图中。通过[[$uiViewScroll]]来实现滚动。

onload

当视图更新时就会执行的表达式

其中ui-view组件使用ViewConfig来决定哪个视图被加载进ui-view,并且决定了视图状态的上下文对象。比如:

    <div ng-app="myApp">
        <a ui-sref="hello">hello</a>

        <div ui-view></div>
    </div>
  • 1
  • 2
  • 3
  • 4
  • 5
    angular.module('myApp')
        .config(['$stateProvider', function($stateProvider) {
            var helloState = {
                name:'hello',
                url: '/hello',
                template: '<h2>{{$resolve.init}}</h2><h3>hello world {{num}}</h3><button ng-click="helloCtrl.add()">+</button><button ng-click="helloCtrl.subtract()">-</button>',
                controller: function ($scope) {
                    $scope.num = 0;

                    this.add = function () {
                        $scope.num++;
                    }

                    this.subtract = function () {
                        $scope.num--;
                    }
                },
                controllerAS: "helloCtrl",
                resolve: {
                    init: function () {
                        console.log('init');
                        return 1;
                    }
                }
            };

            $stateProvider.state(helloState);
        }])
  • 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
  • 27
  • 28

上面是一个较为完整的例子。a标签中的ui-sref的值与viewConfigname对应。需要注意的是,resolve块中的数据作为$scope放置在scope中(上面的模板中提到写到的<h2>{{$resolve.init}}</h2>)。

此时,将$scope输出到控制台中, 发现了$resolve。其中$resolve$transitions$有各种状态的hookRegistrationFn

    $transition$: Transition
    $id: 0
    isActive: ƒ ()
    onBefore: ƒ hookRegistrationFn(matchObject, callback, options)
    onEnter: ƒ hookRegistrationFn(matchObject, callback, options)
    onError: ƒ hookRegistrationFn(matchObject, callback, options)
    onExit: ƒ hookRegistrationFn(matchObject, callback, options)
    onFinish: ƒ hookRegistrationFn(matchObject, callback, options)
    onRetain: ƒ hookRegistrationFn(matchObject, callback, options)
    onStart: ƒ hookRegistrationFn(matchObject, callback, options)
    onSuccess: ƒ hookRegistrationFn(matchObject, callback, options)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

注:上面的例子中,在controller部分加上console.log(1),发现控制台中的输出为init,然后是1

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/1009278
推荐阅读
相关标签
  

闽ICP备14008679号