您的位置：首页 > 产品设计 > UI/UE

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

2017-06-22 17:27 537 查看

在使用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.lazyLoad
var app = angular.module('myApp',['ui.router','oc.lazyLoad']);
//主页控制器
app.controller('myCtrl',function ($scope) {
$scope.main = "ocLazyLoad+uiRouter实现angular单页面应用的控制器js文件按需加载";
});
//配置config
app.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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航