Friday, July 25, 2014

AngularJs Tutorials: understanding bootstrap and importing modules

Assuming you have downloaded "angular.min.js" and created your HTML document in the same directory directory, example:
 ../mydirectory/  
 -> angular.min.js  
 -> 01_quick_basics.html  

You can just include "angular.min.js" like so, for development purposes only:
 <script src="angular.min.js"></script>  

For production code you might need to use a CDN server.

Bootstrap Introduction

Angularjs will bootstrap the first element that has the first "ng-app" attribute in your HTML document. example;
 <html>  
 <head>  
 <script src="angular.min.js"></script>  
 </head>  
 <body>  
 <div ng-app>  
      <input type="text" ng-model="MyName"/>  
      <br/>Hello {{MyName}}!  
 </div>  
 </body>  
 </html>  

(save the above as a HTML document and open in a browser), example output:
angularjs tutorials, bootstrap example 1
 From the above example, Angularjs will look for necessary elements that needs to be processed inside the "div" element above.

When it finds "ng-model", it will listen to the changes on the text input's value. So, when the input's value gets updated the {{MyName}} will be replaced by the text input's value in real-time.

Now, what if you have to have two "ng-app"s, usually production code will have one, but what if you will need two or more? Angularjs will not bootstrap the second ng-app that it finds but you can do it manually by using "angular.bootstrap()".
  <html>   
  <head>   
  <script src="angular.min.js"></script>   
  </head>   
  <body>   
  <div ng-app>   
    <input type="text" ng-model="MyName"/>   
    <br/>Hello {{MyName}}!   
  </div>   
  <br/>   
  <div id="MySecondApp">   
    <input type="text" ng-model="MyName2"/>   
    <br/>Hello {{MyName}}!   
    <br/>Hello {{MyName2}}!   
  </div>   
  </body>   
  <script type="text/javascript">   
  angular.bootstrap(document.getElementById("MySecondApp"));  
  </script>   
  </html>   

From the above example, you use "angular.bootstrap()" to the "MySecondApp". Just make sure that the first parameter of angular.bootstrap is already loaded. The example above placed the code after the <body> to ensure this condition. You can also use "angular.element(document).ready(...)".

example output:
angularjs tutorials, bootstrap example 2
Notice how {{MyName}} is empty in "MySecondApp" and is not on the first div element? Think of the second app  as another application.

Modules

Think of modules as code or third party code that you can import to your application. We will learn how to create our own modules later, for now I will show you how to import a module.

For a list of angular modules, you can visit: ngmodules.org

You can import a module using the second parameter, example:
 angular.bootstrap(document.getElementById("MySecondApp"), ['MySampleModule']);  

Since the second parameter is an array, you can import as many modules as you want, example code:
  <html>   
  <head>   
  <script src="angular.min.js"></script>   
 <!-- begin of sample module, possible third party -->  
  <script type="text/javascript">  
  var module = angular.module('MySampleModule', []);  
  module.directive('myCustomEl', function() {  
      return {  
           template: '<br/>Hey!<pre>you have loaded a module</pre>'  
      };  
  });  
  </script>  
 <!-- end of sample module, possible third party -->  
  </head>   
  <body>   
  <div ng-app>  
    First App  
    <div my-custom-el></div>  
  </div>   
  <br/>   
  <div id="MySecondApp">   
     Second App  
     <div my-custom-el></div>  
  </div>   
  </body>   
  <script type="text/javascript">   
  angular.bootstrap(document.getElementById("MySecondApp"), ['MySampleModule']);  
  </script>   
  </html>   

example output:
angularjs tutorials, bootstrap example 3, modules

Notice from the output, First App was empty, or "First App" did not have the "you have loaded a module" message. If you wanted First App to load a module, first let's give "ng-app" a name, example:
  <div ng-app="MyFirstApp">  

then, let's import the module, example:
 // load module to First App   
 var app1 = angular.module("MyFirstApp", ['MySampleModule']);  

full example:
  <html>   
  <head>   
  <script src="angular.min.js"></script>   
 <!-- begin of sample module, possible third party -->  
  <script type="text/javascript">  
  var module = angular.module('MySampleModule', []);  
  module.directive('myCustomEl', function() {  
      return {  
           template: '<br/>Hey!<pre>you have loaded a module</pre>'  
      };  
  });  
  </script>  
 <!-- end of sample module, possible third party -->  
  </head>   
  <body>   
  <div ng-app="MyFirstApp">  
    First App  
    <div my-custom-el></div>  
  </div>   
  <br/>   
  <div id="MySecondApp">   
     Second App  
     <div my-custom-el></div>  
  </div>   
  </body>   
  <script type="text/javascript">   
 // load module to First App   
 var app1 = angular.module("MyFirstApp", ['MySampleModule']);  
  // bootstrap Secon App  
  angular.bootstrap(document.getElementById("MySecondApp"), ['MySampleModule']);  
  </script>   
  </html>   

example output:

Now, we have loaded the sample module successfully to First App and Second App.