首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >页面刷新后ocLazyLoad + UI路由器导航回子视图

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

Stack Overflow用户
提问于 2015-02-28 16:55:25
回答 1查看 845关注 0票数 1

我使用ocLazyLoad与AngularJS和AngularJS UI路由器按需加载AngualarJS模块。我在不同的模块中有一个Post视图/state和Posts /state,我可以简单地在它们之间导航。

唯一的问题是,当我使用/posts/1并手动刷新页面时,它会返回到/。我理解这是非常有意义的,因为app.js是页面刷新后加载的唯一文件,但我不明白的是如何在刷新页面之后再次加载相同的/posts/1视图。我试着在app.js中使用app.js,但没有成功。

我已经为此创建了一个柱塞:http://plnkr.co/edit/lPb2qCGF9KLL16jVoLQo?p=info

app.js

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
angular.module('app.posts.post', []);
EN

回答 1

Stack Overflow用户

发布于 2015-06-20 08:08:50

使用ocLazyLoad和ui路由器附加futureStates延迟加载ui-路由器状态

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28784333

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档