第10篇：ui-router+ocLazyLoad实现控制器js文件的按需加载

来源：互联网发布：pd11 for mac 破解版编辑：程序博客网时间：2024/06/06 01:44

在使用angular搭建项目的时候，如果单页面过多，就会配置过多的控制器，服务器等，就会导致项目启动时太多的js文件加载进来，存在其不合理之处，使用ocLoadLoad可以实现单页面控制器等js文件的懒加载，避免项目启动时过多的文件加载进来。

下面以一个demo为例分析如何使用lazyload和ui-router实现控制器的懒加载

1.项目目录结构：

tpl 三个视图文件

ctrl 三个视图对应的控制器

lib 引入的库

app.js 启动文件，包括模块，主控制器和路由

index.js 主页面

2.引入库文件和配置ui-router导航

引入js文件：

    <script src="lib/angular-1.3.0.js"></script>    <script src="lib/angular-ui-router.js"></script>    <script src="lib/ocLazyLoad.min.js"></script>    <script src="app.js"></script>

主视图含导航：

<body ng-app="myApp" ng-controller="myCtrl">    <h3>{{main}}</h3>    <div>        <span>            <a ui-sref="a">第一页</a>        </span>        <span>            <a ui-sref="b">第二页</a>        </span>        <span>            <a ui-sref="c">第三页</a>        </span>    </div>    <div ui-view="" style="width: 300px;height: 300px;background: #f2f2f2">        主页    </div></body>

3.项目入口文件app.js的配置

配置resolve属性时有不同的写法，下面引入三个控制器对应三种写法，在该demo中均可使用

//依赖注入oc.lazyLoadvar app = angular.module('myApp',['ui.router','oc.lazyLoad']);//主页控制器app.controller('myCtrl',function ($scope) {    $scope.main = "ocLazyLoad+uiRouter实现angular单页面应用的控制器js文件按需加载";});//配置configapp.config(function ($stateProvider, $locationProvider,$urlRouterProvider) {    $urlRouterProvider.otherwise('/index');    $stateProvider        //懒加载控制器的三种写法（为一个模块的前提下）        .state('a',{            url : '/a',            controller : 'ctrla',//不写会报错            templateUrl : './tpl/pagea.html',            resolve : {                loadMyCtrl : ['$ocLazyLoad',function ($ocLazyLoad) {                    return $ocLazyLoad.load({                        name: 'myApp',//模块的名字，单个模块可以省略                        files: ['ctrl/ctrla.js']//js文件地址                    })                }]            }        })        .state('b',{            url : '/b',            templateUrl : './tpl/pageb.html',            controller : 'ctrlb',            resolve : {                loadMyCtrl : function ($ocLazyLoad) {                    return $ocLazyLoad.load({                        name: 'myApp',                        files: ["ctrl/ctrlb.js"]                    })                }            }        })        .state('c',{            url : '/c',            templateUrl : './tpl/pagec.html',            controller : 'ctrlc',            resolve : {                loadMyCtrl : function ($ocLazyLoad) {                    return $ocLazyLoad.load("ctrl/ctrlc.js")                }            }        })});

4.子控制器的配置

ctrla.js:

angular.module("myApp").controller('ctrla', function ($scope) {   console.log(1);   $scope.testA = 999;});

另外两个ctrlb.js和ctrlc.js对应一样，需要注意的是若写成

app.controller('ctrla', function ($scope) {   console.log(1);   $scope.testA = 999;});

则会报错

angular-1.3.0.js:10062 Error: [ng:areq] Argument 'ctrla' is not a function, got undefined

5.效果展示

控制器js文件实现了按需加载

demo地址：https://github.com/RidingACodeToStray/ocLazyLoad-uiRouter

阅读全文

0 0