ui-router使用ocLazyLoad加载js

  • 发布时间:2017年6月15日 09:45
  • 作者:杨仕航
  • 分类标签: Web前端
  • 阅读(2279)
  • 评论(0)

ui-router是angular.js的路由管理库,可以通过ui-router实现页面局部刷新,同时导航栏的地址也随之变化。它类似pjax的效果。

但有个问题,ui-router局部刷新加载的页面不能加载其中的script标签,即无法执行其js代码。

我们可以使用ocLazyLoad实现加载局部页面同时,也加载对应所需的js或css文件。


首先打开ocLazyLoad的Github项目地址,下载到本地。取其中dist文件夹的内容,我们要引用ocLazyLoad.min.js文件。具体ocLazyLoad你也可查看ocLazyLoad的帮助文档

接着,引用了angular.js和ui-router相关文件。大致如下:

<script src="angular/1.4.8/angular/angular.min.js"></script>
<script src="angular/ui-router/release/angular-ui-router.min.js"></script>
<script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>


使用ocLazyLoad需要在angular的module注册(注意顺序):

angular.module('myApp', [
    'ui.router',
    'oc.lazyLoad',
]);


在ui-router的resolve中使用ocLazyLoad:

angular.module('myApp').config(routesConfig);

function routesConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        // home states and nested views
        .state('page1', {
            url: '/',
            templateUrl: '/page1',
            resolve:{
                deps:["$ocLazyLoad", function($ocLazyLoad){
                    return $ocLazyLoad.load([
                        "lib/other.js",
                        "lib/other.css"
                    ]);
                }]
            }
        });
};


大致格式是这样,不过这个是简单玩法。假如通过ocLazyLoad加载的js文件也需要在angular.js的module注册,可以通过$ocLazyLoad的inject方法注入。如下代码:

angular.module('myApp').config(routesConfig);

function routesConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('page1', {
            url: '/page1',
            templateUrl: '/page1',
            resolve:{
                deps:["$ocLazyLoad", function($ocLazyLoad){
                    $ocLazyLoad.inject(['pdf']);
                    return $ocLazyLoad.load([
                        "lib/pdfjs/pdf.js",
                        "lib/angular-pdf.min.js",
                    ]);
                }]
            }
        });
};


但还是不够完美。假如page2也需要用到pdf.js,再写一遍同样的代码?

不需要!可以换种方式,将重用率比较高的js库写成模板,再被$ocLazyLoad.Load()。

如下代码:

angular.module('myApp').config(oclazyloadConfig);

function oclazyloadConfig($ocLazyLoadProvider){
    $ocLazyLoadProvider.config({
        modules: [{
            name: 'pdf_module', //pdf 
            loadedModules: ['pdf'], //注册pdf模块
            files: [
                "lib/pdfjs/pdf.js",
                "lib/angular-pdf.min.js",
            ]
        },{
            name: 'video_module', //video 视频播放
            loadedModules: ['vjs.video'],
            files: [
                "lib/videojs/vjs-video.min.js",
                "lib/videojs/video.min.js",
                "lib/videojs/videojs-ie8.min.js",
                "lib/video-js.min.css",
            ]
        }
    });
}


执行如上代码之后,在执行ui-router的代码,如下:

angular.module('myApp').config(routesConfig);

function routesConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('page1', {
            url: '/page1',
            templateUrl: '/page1',
            resolve:{
                deps:["$ocLazyLoad", function($ocLazyLoad){
                    $ocLazyLoad.inject(['pdf']);
                    return $ocLazyLoad.load([
                        "pdf_module"
                    ]);
                }]
            }
        })
        .state('page2', {
            url: '/page2',
            templateUrl: '/page2',
            resolve:{
                deps:["$ocLazyLoad", function($ocLazyLoad){
                    $ocLazyLoad.inject(['pdf']);
                    return $ocLazyLoad.load([
                        "pdf_module",
                        "video_module"
                    ]);
                }]
            }
        });
};


搞定!ocLazyLoad还有更多玩法,不过官方的帮助文档不全面。还有一些网友,进一步对ocLazyLoad封装。使其直接可以加载ui-router的templateUrl中的html页面的script标签。有兴趣可以在github上面找找。

上一篇:Django拆分app为多个小app

下一篇:解决python安装pycurl的问题

评论列表

智慧如你,不想发表一下意见吗?

新的评论

清空

猜你喜欢

  • 猜测中,请稍等...