当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来。但是注意,数据和元素并不是同步的,在没有任何设置的情况下,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>