AngularJs根据访问的页面动态加载Controller的解决方

2019-06-24 19:09栏目:技术创新
TAG: 澳门葡

最近AngularJs很火....

废话不多说了,如主题吧

新浦京娱乐场官网,用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

<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 = angular.copy(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的解决方