Question

我正在使用带有AngularJS和AngularJS UI路由器的ocLazyLoad来按需加载AngualarJS模块。我在不同的模块中有一个帖子视图/状态和后视图/状态，我可以在它们之间进行导航。

唯一的问题是，当我在 / 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', []);

Answer 1

使用ocLazyLoad和ui-router-extras futureStates延迟加载ui-router状态

http://bardo.io/2014/08/26/oclazyload-future-states/

ocLazyLoad + UI路由器在页面刷新后导航回子视图

1 个答案: