在Angular UI-Router中,可以使用resolve
属性来等待内容加载完毕。resolve
属性可以在路由状态配置中定义,它允许你在路由状态切换之前预先加载数据或执行某些操作。
下面是一个使用resolve
属性等待内容加载完毕的示例:
angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
template: 'Home
',
resolve: {
loadData: function($http) {
// 在路由状态切换之前加载数据
return $http.get('/api/data');
}
}
})
.state('about', {
url: '/about',
template: 'About
',
resolve: {
loadData: function($http) {
// 在路由状态切换之前加载数据
return $http.get('/api/data');
}
}
});
});
在上面的示例中,resolve
属性定义了一个名为loadData
的依赖项,在切换到home
和about
路由状态之前会自动执行loadData
函数并加载数据。
在控制器中,可以通过注入loadData
来访问加载的数据:
angular.module('myApp')
.controller('HomeController', function(loadData) {
// 使用加载的数据
console.log(loadData);
})
.controller('AboutController', function(loadData) {
// 使用加载的数据
console.log(loadData);
});
注意,resolve
属性返回的是一个Promise对象,所以在控制器中使用数据之前,需要使用.then()
方法来处理Promise的结果。
这样,当切换到home
或about
路由状态时,UI-Router会自动等待数据加载完毕后再渲染模板。