AngularJs根据访问的页面动态加载Controller的解决方案
用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的controller使得在手机端上,页面的首次打开速度变慢,今天我就和大家分享我是怎么改善这个缺点的,实现Controller的模块化加载
app.js
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
});
在route时阻塞一下去加载需要的js,加载成功后再继续,不知道$script是什么的同学请点http://dustindiaz.com/scriptjs
$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolve: {
load: function($q, $route, $rootScope) {
var deferred = $q.defer();
var dependencies = [
'plugin/' + $route.current.params.plugin + '/controller.js'
];
$script(dependencies, function () {
$rootScope.$apply(function() {
deferred.resolve();
});
});
return deferred.promise;
}
}
});
controller.js
app.register.controller('MyPluginCtrl', function ($scope) {
...
});
index.html
<div ng-controller="MyPluginCtrl">
...
</div>
这样改造就可以实现route时动态去加载这个route所依赖的js,但是一般我们的webapp中route都有很多,每个都要写那么一堆代码,既难看又难于维护,我们不妨再优化一下
app.js
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
app.asyncjs = function (js) {
return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {
var deferred = $q.defer();
var dependencies = js;
if (Array.isArray(dependencies)) {
for (var i = 0; i < dependencies.length; i++) {
dependencies[i] += "?v=" + v;
}
} else {
dependencies += "?v=" + v;//v是版本号
}
$script(dependencies, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}];
}
});
$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolve: {
load: app.asyncjs('plugin/controller.js')
}
});
到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上
$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolve: {
load: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
}
});
便可以了
PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker.js退出去再进就不会去请求啦
相关文章
这篇文章主要为大家介绍了Angular16如何获得路由参数的实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了Angularjs实现多图片上传预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了AngularJS 指令的交互，这里整理了详细的资料及实例代码，有兴趣的小伙伴可以参考下2016-09-09
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-03-03
Angular2管道Pipe及自定义管道格式数据用法实例分析
这篇文章主要介绍了Angular2管道Pipe及自定义管道格式数据用法,结合实例形式详细分析了Angular2管道与纯管道相关概念、语法及使用技巧,需要的朋友可以参考下2017-11-11
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
这篇文章主要介绍了AngularJs的UI组件ui-Bootstrap之Tooltip和Popover，tooltip和popover是轻量的、可扩展的、用于提示的指令。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
Angular 5.0 来了! 有这些重大变化,这篇文章就为大家介绍了Angular 5.0大变化，感兴趣的小伙伴们可以参考一下2017-11-11
vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，所以下面这篇文章主要给大家分享了关于使用axios的一些心得技巧，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了AngularJS 中ui-view传参的实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容，需要的朋友可以参考下2017-08-08
这篇文章主要介绍了AngularJS中的指令实践指南(二)的相关资料,需要的朋友可以参考下2016-03-03
最新评论