For ordinary users, AngularJS's ng-app is manually bound to a certain dom element. However, in some applications, this seems inconvenient.
Binding Initialization
Initializing angular through binding will invade the js code into the html, but it is still enough for novices to use!
<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, hello,angular will be displayed!
Manual initialization
Angular also provides a manually bound API - bootstrap, which is used as follows:
angular.bootstrap(element, [modules], [config]);
The first parameter element: is the dom element that binds ng-app;
modules: bound module name
config: Additional configuration
A brief 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:
angular.bootstrap will only bind the first loaded object.
The subsequent repeated bindings or other objects will output error prompts on the console.
The above is the information sorting out AngularJS bootstrap. We will continue to add relevant information in the future. Thank you for your support for this site!