AngularJs solution to dynamically load Controller based on the visited page_AngularJS

The purpose of using Ng is to make a single page application (simple page application). I hope that all pages in the site will use Ng’s Route and try not to use location.href. However, there are many advantages to such a webapp, but the only drawback is that when you As time goes by, webapps have more users, richer functions, and more controllers. You have to load all controllers as global modules so that you can press on any page in the site. After refreshing with F5, you can route to any other page without the error of not finding the controller. Loading all the controllers makes the first opening of the page slower on the mobile phone. Today I will share with you how I improved it. To solve this shortcoming, implement modular loading of Controller

app.js

Copy code The code is as follows:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
Controller: $controllerProvider.register,
directive: $compileProvider.directive,
Filter: $filterProvider.register,
Factory: $provide.factory,
Service: $provide.service
};
});

Block during route to load the required js, and then continue after the loading is successful. If you don’t know what $script is, please click http://dustindiaz.com/scriptjs

Copy code The code is as follows:

$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

Copy code The code is as follows:

app.register.controller('MyPluginCtrl', function ($scope) {
...
});

index.html

Copy code The code is as follows:

...

In this way, the js that the route depends on can be dynamically loaded during the route. However, generally there are many routes in our webapp, and each one requires a lot of code to be written, which is ugly and difficult to maintain. We might as well add another Optimize it

app.js

Copy code The code is as follows:

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退出去再进就不会去请求啦