当我们想展示一个列表时,传统的方式是我们进入到某个页面后发AJAX请求,请求数据,ui-router提供给我们一种方式,可以在进入页面前将数据请求到,然后再进入页面,
这种方式的目的在于,防止在进入页面后,请求数据的过程中,页面没有数据内容而中白屏。通过ui-router的resolve属性,我们可以将多个值再请求到后传给controller。
这里举个栗子:
//这个是路由文件 .state('persons',{ parent: 'site', url: '/persons', data: { }, views: { 'content@': { templateUrl: 'person-list.html', controller: 'PersonListController.js' } }, resolve: { persons:['PersonService',function(PersonService){ return PersonService.query({}) }] } })
//这个是控制器 'use strict'; angular.module('MyApp') .controller('PersonListController', function ($scope, $state, persons) { $scope.persons = persons; });
我们可以看到,在路由的resolve中,定义了一个persons的数据,在controller中直接通过persons引用就好了。