ng-route模塊中的when()和ui-route的state()都提供了resolve屬性。

為什么需要使用resolve？

當路由切換的時候，被路由的頁面中的元素（標簽）就會立馬顯示出來，同時，數據會被準備好并呈現出來。但是注意，數據和元素并不是同步的，在沒有任何設置的情況下，AngularJS默認先呈現出元素，而后再呈現出數據。這樣就會導致頁面會被渲染兩遍，導致“頁面UI抖動”的問題，對用戶不太友好。resolve的出現解決了這個問題。

resolve是干嘛用的

resolve屬性里的值會在路由成功前被預先設定好，然后注入到控制器中。通俗地將，就是等數據都“就位”后，才進行路由（其實我覺得也不能叫路由，因為路由是一些列的操作，其中就包括了設置resolve屬性等等）。這樣的好處就是頁面僅會被渲染一遍。

<!--首頁.html--><div ng-app="myApp"><div><a ui-sref = "index">前往list.html</a></div><div ui-view></div><!--這里是路由視圖存放的地方--></div>

<!--list.html><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>

//JSvar 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;});

我在state方法里面設置了resolve屬性，里面的值是一個名為user的對象，它存有幾個值（格式好像JSON）。并把這個user變量注入到控制器中。這樣就完成了預加載了。

這種把resolve屬性的值（這里是user）注入到控制器的方式有一個非常強大的地方就是，可以運用他來重用控制器，而我們需要做的僅僅只是改變user對象里面的值（tips：如果是嵌套路由的話，不重新設置resolve值則會“繼承”父路由的resolve值，如果不是嵌套路由且不重新設置，則不會正確顯示）。

<!--list.html--><div>  <h1>HI,這里是list.html</h1>  <a ui-sref="index.list">點擊加載list.html視圖</a>  <a ui-sref="index.list2">點擊加載list2.html視圖</a>  <div ui-view></div>  <h1>{{user}}</h1>  <h2>{{name}}</h2>  <h3>{{age}}</h3>  <h3>{{email}}</h3></div>