我是伊只雄熊

导航

AngularJS 路由 resolve属性

  当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来。但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据。这样就会导致页面会被渲染两遍,导致“页面View抖动”的问题,对用户不太友好。

  resolve的出现解决了这个问题。 resolve属性里的值会在路由成功前被预先设定好,然后注入到控制器中。通俗地将,就是等数据都“就位”后,才进行路由(其实我觉得也不能叫路由,因为路由是一些列的操作,其中就包括了设置resolve属性等等)。这样的好处就是页面仅会被渲染一遍。

ar app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
    $stateProvider
        .state("index",{
            url:'/',
            templateUrl:'list.html',
            controller:'myController',
            resolve:{
                user:function(){
                    return {
                        name:"perter",
                        email:"826415551@qq.com",
                        age:"18"
                    }
                }
            }
        })
}]);
app.controller('myController',function($scope,user){
    $scope.name=user.name;
    $scope.age=user.age;
    $scope.email=user.email;
    $scope.user=user;
});
<div>
    <h1>HI,这里是list.html</h1>
    <a ui-sref="index.list">点击加载list.html视图</a>
    <div ui-view></div>
    <h1>{{user}}</h1>
    <h2>{{name}}</h2>
    <h3>{{age}}</h3>
    <h3>{{email}}</h3>
</div>

 

posted on 2018-03-06 18:14  我是伊只雄熊  阅读(246)  评论(0编辑  收藏  举报