Initialization of basic learning

1. Binding initialization, automatic loading

Initializing angular through binding will invade the js code into the html.

ng-appIt is an angular instruction that represents an angular application (also called a module). useng-apporng-app=""Mark a DOM node so that the framework will load automatically. That is to say,ng-appIt can be equipped with attribute values.

<body ng-app="myApp">
 <div ng-controller="myCtrl">
  {{ hello }}
 </div>
 <script type="text/javascript">
  var myModule = ("myApp",[]);
  ("myCtrl",function($scope){
   $ = "hello,angular!";
  });
 </script>
</body>

2. Manual initialization

If you want to have more control over the initialization, you can use a custom manual boot method to initialize instead of angular's automatic initialization. For example, you need to do something before angular compiling the template, such as changing certain contents of the template.

Angular also provides a manually bound API - bootstrap, which is used as follows:

(element, [modules], [config]);

The first parameterelement:It's boundng-appdom element;

modules: bound module name
config: Additional configuration

It is worth noting:

Only the first loaded object will be bound.
The subsequent repeated bindings or other objects will output error prompts on the console.

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

&lt;html&gt;
 
 &lt;head&gt;
 &lt;script src=""&gt;&lt;/script&gt;
 &lt;script&gt;
 
 // Create moudle1 var rootMoudle = ('moudle1', []);
 ("controller1",function($scope){$="aty"});
 
 // Create moudle2 var m2 = ('moudle2', []);
 ("controller2",function($scope){$="aty"});
 
 
 // After the page is loaded, the module is loaded (document).ready(function() {
  (("div1"),["moudle1"]);
  (("div2"),["moudle2"]);
 });
 
 &lt;/script&gt;
 
 &lt;head&gt;
 &lt;body&gt;
 &lt;div  ng-controller="controller1"&gt;div1:{{name}}&lt;/div&gt;
 &lt;div  ng-controller="controller2"&gt;div2:{{name}}&lt;/div&gt;
 &lt;/body&gt;
 
&lt;/html&gt;

Summarize

The above is all about initialization. I hope that the content of this article will be of some help to everyone’s learning or use. If you have any questions, you can leave a message to communicate. Thank you for your support.