Detailed Explanation and Example Code of AngularJS bootstrap Start

For general users, AngularJS's ng-Apps are manually bound to a DOM element. However, in some applications, this is not very convenient.

Binding initialization

Binding for Angular initialization will inject JS code into HTML, but it is still sufficient for beginners!

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    {{ hello }}
  </div>
  <script type="text/javascript">
    var myModule = angular.module("myApp",[]);
    myModule.controller("myCtrl",function($scope){
      $scope.hello = "hello,angular!";
    });
  </script>
</body>
</html>

After running, it will display 'hello,angular!'

Manual initialization

Angular also provides a manual binding API called bootstrap, which is used as follows:

angular.bootstrap(element, [modules], [config]);

The first parameter element: is bound to ng-the DOM element of the app;

modules: bound module names
config: additional configuration

Let's take a simple look at the code:

<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<body id="body">
  <div ng-controller="myCtrl">
    {{ hello }}
  </div>
  <script type="text/javascript">
    var app = angular.module("bootstrapTest",[]);
    app.controller("myCtrl",function($scope){
      $scope.hello = "hello,angular from bootstrap";
    });
    // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
    angular.bootstrap(document,['bootstrapTest']);
  </script>
</body>
</html>

It is worth noting that:

angular.bootstrap binds only the first loaded objects.

Any repeated bindings or bindings to other objects will output error prompts in the console.

This is the compilation of information about AngularJS bootstrap. We will continue to supplement relevant information, thank you all for your support to this site!

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, does not edit the content manually, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report any infringement by sending an email to notice#w (replace # with @ when sending emails), and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial