天恒娱乐:AngularJs根据访问的页面动态加载Contro

标签:行业资讯    日期:2017-12-28 11:03    录入:天恒娱乐平台注册    浏览:

  

[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是什么的同学请点  

  

代码如下:

  
  $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  

  

代码如下:

  
  
  
  ...

  
  

  
  
  

  

这样改造就可以实现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', {   ★★★小编:天恒娱乐 整理文章,欢迎大家转载 ★★★
上一篇:天恒娱乐:推荐:成功商务人士必用的5款商务AP
下一篇:没有了
相关文章阅读
点击右上角的分享按钮即可收藏天恒娱乐平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行