欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【AngularJs根据访问的页面动态加载Controller的解决方案】,下面是详细的讲解!
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退出去再进就不会去请求啦
关于AngularJs根据访问的页面动态加载Controller的解决方案的用户互动如下:
相关问题:如何使用angularjs处理动态菜单
答:1. 既然你使用了 ui-router,说明你的应用是 单页程序,既然是单页程序,首先要考虑动态路由是否有必要?只要根据用户角色 显示该角色可以访问的菜单即可,在每次路由切换的时候判断下是否有访问此路由的权限,没有就跳转到指定页面即可; 2. 至... >>详细
相关问题:在jquery中想要实现通过运程hettp get请求载入信息...
答:jQuery是dom驱动,AngularJS是数据驱动,这里有一篇文章阐述的非常好,建议看看 本文来自StackOverFlow上How do I “think in AngularJS” if I have a jQuery background?一题中得票最高的回答。该回答得票超过3000次,回答者Josh David Miller是... >>详细
相关问题:用angularjs绑定repeat出来的图片怎么实现在加载完...
答:var module = angular.module('testApp', []) .controller('myC',function(){ $scope.ta = [1,2,3,4,5,6]; }) .directive('onFinishRender', function () { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last =... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【addEventListener】addEventListener和attachEv
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【AngularJS】AngularJS语法详解-语法
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
