Of Stack

AngularJS uses angular. bootstrap to complete manual loading of modules

  • 2021-07-12 05:18:58
  • OfStack

In this paper, an example is given to analyze the manual loading method of AngularJS using angular. bootstrap. Share it for your reference, as follows:

We saw earlier that modules can be automatically loaded using the ng-app instructions. Now let's look at how modules are manually loaded in angular. You need to use the function angular. bootstrap. 


<html>
  <head>
    <script src="angular.js"></script>
    <script>
    //  Create moudle1
    var rootMoudle = angular.module('moudle1', []);
    rootMoudle.controller("controller1",function($scope){$scope.name="aty"});
    //  Create moudle2
    var m2 = angular.module('moudle2', []);
    m2.controller("controller2",function($scope){$scope.name="aty"});
    //  After the page is loaded, , Reload module 
    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("div1"),["moudle1"]);
      angular.bootstrap(document.getElementById("div2"),["moudle2"]);
    });
  </script>
  <head>
  <body>
    <div id="div1" ng-controller="controller1">div1:{{name}}</div>
    <div id="div2" ng-controller="controller2">div2:{{name}}</div>
  </body>
</html>

IE runs this page and finds that variables can be correctly parsed by angular framework; F12 found that the console did not report an error either. So far, we know how to load the modules of angular and understand the difference between manual loading and automatic loading. Next, we can continue to learn other knowledge of AngularJS framework.

For more readers interested in AngularJS related content, please check the topics of this site: "Introduction and Advanced Tutorial of AngularJS" and "Summary of AngularJS MVC Architecture"

I hope this article is helpful to everyone's AngularJS programming.

Related articles: