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

复制代码 代码如下:


<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;
        }];
    }
});

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfswg.html