caoruiy‘s blog

Wisdom outweighs any wealth

ui-router+ocLazyLoad实现模块按需加载

首先一个前提是网上的教程一大堆,都在讲各种解决方案,不做赘述。

本文要实现的效果是:

当页面加载时,页面中不包含任何信息,但是,当ui-router跳转到某一个状态时,比如 http://host.com/#!/index,此时,去延迟加载 index 模块所需要的 js(controller)css文件模板文件

引入依赖:

var app = angular.module('app', ['ui.router','oc.lazyLoad'])

暴露一些Angular的方法:

app.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",function($provide,$compileProvider,$controllerProvider,$filterProvider){
    app.controller = $controllerProvider.register;
    app.directive = $compileProvider.directive;
    app.filter = $filterProvider.register;
    app.factory = $provide.factory;
    app.service  =$provide.service;
    app.constant = $provide.constant;
}])

配置路由:

.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/')

    $stateProvider
    .state('index',{
        name:'index',
        url:'/',
        controller: 'indexCtrl',
        templateUrl: '/tpl/index/index',
        resolve: {
            deps:['$ocLazyLoad',function($ocLazyLoad) {
                $ocLazyLoad.load('../modules/index/index.css');
                return $ocLazyLoad.load('../modules/index/index.js');
            }],
        }

    })
}])

当,当前模块需要依赖多个js文件时,路由配置中的 reslove 可以返回一个数组:

resolve: {
    deps:['$ocLazyLoad',function($ocLazyLoad) {
        $ocLazyLoad.load('../modules/index/index.css');
        return [
            $ocLazyLoad.load('../modules/index/index.js'),
            $ocLazyLoad.load('../modules/index/others.js')
        ];
    }],
}

需要注意的是:不要把css文件写在return返回的数组中,会导致刷新时,js中控制器找不到的错误。

相关文章:

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注