angularJS+Example of On-Demand Loading of Controller and Directive Using requireJS

Recently, because the project is quite large and there are many JS files to load, in order to improve the loading speed of the first screen, we need to load JS files on demand. After referring to some information online and conducting in-depth research, I have achieved the effect of on-demand loading of controller JS files and directive JS files

The idea is as follows

1By using ui-to implement preloading through the resolve attribute in the router

2We need to use $controllerProvider to dynamically register controllers and $compileProvider to dynamically register directives

3To help us achieve asynchronous loading, we need to use $q as shown below

1Mount the properties for registering controllers and directives on the app we define (within the JS file defining app.config()), as shown below　

app.register = {　　　　//Note that $controllerProvider is a built-in property for registering controllers, and $compileProvider is a built-in property for registering directives
    controller: $controllerProvider.register
    directive: $compileProvider.directive
   } 

2By using $q to define an asynchronous method for loading JS files (within the JS file defining the route)

app.loadMyJs = function(js) {
        return function($rootScope, $q) {
          var deffer = $q.defer(),
            deps = [];
          angular.isArray(js) ?63; (deps = js) : deps.push(js);
          require(deps, function() {
            $rootScope.$apply(function() {
              deffer.resolve();
            });
          });
          return deffer.promise;
        };
      }

3By using the resolve attribute in the routing, configure the controller file and directive file to be loaded (within the JS file defining the route)

.state('view1',{
      url: '/view1',
      templateUrl: 'temp/partial1.html',
      controller: 'MyCtrl1',
      resolve: {
　　　　　　　　　　//js files for controllers and directives that need to be dynamically loaded, other js files follow the same pattern
        deps:app.loadMyJs(['./controllers/my-ctrl-1','./directives/loading'])
      }
    })

4and register the controller or directive dynamically by first mounting the properties on app

//Register controller (corresponding to the controller js file)
app.register.controller('MyCtrl1', function ($scope,$css,$rootScope) {
    //Content inside the controller
  });
//Register directive (corresponding to the directive js file)
app.register.directive("loading",function (){
　　　　return {
　　　　　　restrict: "AE",
　　　　　　replace: true,
　　　　　　template: "<div class='mask' ng-show='isLoading'><span>loading</span></div>"
　　　　　　}
　　　　});　 

If there are services or filters that need to be loaded on demand, it is also similar. In addition, if it is a public service, command or filter, etc., which does not need to be loaded on demand, you can define it using the ordinary angular.module() method.

This is just one way to implement on-demand loading of js files. That's all for this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report by email to codebox.com (replace # with @ when sending an email), and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.