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的问题