AngularJs根据访问的页面动态加载Controller的解决方案
2015-02-04 00:00
996 查看
用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的controller使得在手机端上,页面的首次打开速度变慢,今天我就和大家分享我是怎么改善这个缺点的,实现Controller的模块化加载
app.js
在route时阻塞一下去加载需要的js,加载成功后再继续,不知道$script是什么的同学请点http://dustindiaz.com/scriptjs
controller.js
index.html
这样改造就可以实现route时动态去加载这个route所依赖的js,但是一般我们的webapp中route都有很多,每个都要写那么一堆代码,既难看又难于维护,我们不妨再优化一下
app.js
到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上
便可以了
PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker.js退出去再进就不会去请求啦
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根据访问的页面动态加载Controller的解决方案
- AngularJs根据访问的页面动态加载Controller的解决方案
- 对于页面动态加载的元素事件无效的解决方案
- angularjs 去往其他页面,目标页面controller中的方法无法自动加载
- 根据浏览器语言,页面动态加载对应的js文件
- 根据页面情况动态加载JS
- AngularJS页面加载闪烁解决方案
- AngularJS实现根据变量改变动态加载模板的方法
- [AngularJS] 使用AngularAMD动态加载Controller
- js动态加载html,加载后的页面元素某些事件失效的解决方案
- AngularJS按需动态加载template和controller?
- Python高级爬虫(四):动态加载页面的解决方案与爬虫代理
- JQuery、AngularJs动态加载其他页面
- backbone页面重绘事件监听不到解决方案 | Jquery Ajax动态加载模版 backbone监听不到事件
- Python高级爬虫之动态加载页面的解决方案与爬虫代理
- 加载页面时,根据页面的Iframe内的子页面的大小进行动态改变Iframe的大小 JS
- +根据html页面模板动态生成html页面(c#类)+
- 根据html页面模板动态生成html页面(c#类)
- 偶然发现网站换肤一招:使页面动态加载不同CSS实现多界面