【发布时间】：2015-06-20 16:08:50
【问题描述】：
我正在使用 ocLazyLoad 与 AngularJS 和 AngularJS UI 路由器来按需加载 AngularJS 模块。我在不同的模块中有一个帖子视图/状态和帖子视图/状态，我可以简单地在它们之间导航。
唯一的问题是，当我在 /posts/1 并手动刷新页面时，它会返回到 /。我知道这很有意义，因为 app.js 是页面刷新后唯一加载的文件，但我不明白如何让它延迟加载相同的 /posts/1 视图刷新页面后。我尝试在 app.js 中使用 $urlRouterProvider.when 但没有运气。
我为此创建了一个 plunker：http://plnkr.co/edit/lPb2qCGF9KLL16jVoLQo?p=info
app.js
angular.module('app', ['ui.router', 'oc.lazyLoad'])
.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.state = $state;
$rootScope.stateParams = $stateParams;
}
])
.config([
'$ocLazyLoadProvider',
'$stateProvider',
'$urlRouterProvider',
function ($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
url: '/',
views: {
header: {
template:
'<nav class="navbar navbar-default">' +
'<div class="container-fluid">' +
'<ul class="nav navbar-nav">' +
'<li><a ui-sref="app">Home</a></li>' +
'<li><a ui-sref="app.posts">Posts</a></li>' +
'</ul>' +
'</div>' +
'</nav>'
},
content: {
template: '<h3>Home view</h3>'
}
}
})
.state('app.posts', {
url: 'posts',
views: {
'content@': {
templateUrl: 'posts.html',
controller: 'PostsController',
resolve: {
load: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'posts.js',
'posts-controller.js'
]
});
}]
}
}
}
});
}
]);
posts.js
angular.module('app.posts', ['ui.router', 'oc.lazyLoad'])
.config([
'$ocLazyLoadProvider',
'$stateProvider',
function ($ocLazyLoadProvider, $stateProvider) {
$stateProvider
.state('app.posts.post', {
url: '/:id',
views: {
post: {
templateUrl: 'post.html',
controller: 'PostController',
resolve: {
post: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'post.js',
'post-controller.js'
]
});
}]
}
}
}
});
}
]);
post.js
angular.module('app.posts.post', []);
【问题讨论】：
标签： angularjs lazy-loading angular-ui-router