AngularJs - Manual Bootstrapping

AngularJs Manual Bootstrapping

Manual Bootstrapping :

Let us now look into how we can manually bootstrap the first Angular web page.

As we need to manually bootstrap the html, we will remove ng-app from the htmlspecialchars() and add the required script to perform the manual bootstrapping.

Manual Bootstrapping - Demo

Highlights:

Manually Bootstrapping the first Angular web page

Using angular built-in functions with namespace ‘angular’.

Demosteps:

The first Angular web page using Manual Bootstrapping will look like below:

Let us now create a duplicate of 1-MyFirstAngularWebPage.html created earlier and name it as 2-ManualBootstrap.html.

Let us now modify 2-ManualBootstrap.html to manually bootstrap the web page.

CODE/PROGRAM/EXAMPLE

<html>  
<head>   
   <script src="lib/Angular/angular.js"></script>
   <script type="text/javascript">
	angular.element(document).ready(function() {
  		    angular.bootstrap(document); 		
        });
	</script>
</head>
<body>   
    <h2 id="heading">{{"My "+"First "+"Angular "+"Web Page"}}</h2>
    <table>    
        <tr>
		 <td>
			 <label for="username">Hello:</label>      
		 </td>
		 <td>
			 <input type="text" name="username" ng-model="username" />
		 </td>
		 <td>
			<span id="result"> Hello <b>{{ username }}</b> </span>
		</td>
         </tr>     
    </table>
</body>
</html>

Partial Manual Bootstrapping of webpage

We just looked into how to manually bootstrap the complete Angular web page.

Angular also allows to bootstrap even any specific portion of the web page.

Let us now look into how this can be done.

Highlights:

Using angular.bootstrap method

Passing the reference of a particular element to angular.bootstrap method for manual bootstrapping

Demosteps:

The web page will look like below when rendered on a web browser, if only the heading portion of the web page is bootstrapped.

Let us modify the Angular web page 2-ManualBootstrap.html, which was updated earlier, so that we bootstrap only a particular element/portion of the page.

CODE/PROGRAM/EXAMPLE

<html>  
<head>   
   <script src="lib/Angular/angular.js"></script>
   <script type="text/javascript">
	angular.element(document).ready(function() {
  		    angular.bootstrap(document.getElementById("heading")); 		
        });
	</script>
</head>
<body>   
    <h2 id="heading">{{"My "+"First "+"Angular "+"Web Page"}}</h2>
    <table>    
        <tr>
		 <td>
			 <label for="username">Hello:</label>      
		 </td>
		 <td>
			 <input type="text" name="username" ng-model="username" />
		 </td>
		 <td>
			 <span id="result"> Hello <b>{{ username }}</b> </span>
		 </td>
      </tr>     
    </table>
</body>
</html>

#Manual_Bootstrapping #Manual_Bootstrapping_in_angular #Manual_Bootstrapping_in_angularjs #Manual_Bootstrapping_in_angular_-_Demo #Partial_Manual_Bootstrapping_of_webpage_in_angular

(New page will open, for Comment)

Not yet commented...