Post
Ask Question

Introduction To AngularJS - Day 2

In the 2nd day of AngularJS article series, we are going to learn key players of AngularJS. Before moving to key players/concepts of AngularJS, please read my previous article:

The following are the main key players or key concepts of AngularJS:

*Data binding

  1. Module
  2. Data Binding
  3. Routes
  4. Controller
  5. View
  6. $Scope
  7. Directives
  8. Filters
  9. Factory/Service

Now, we will learn about all the key players or key concepts of AngularJS one by one.

Module

AngularJS supports modular approach. Some applications have a main method which start, instantiate or bootstraps the application. So, AngularJS don’t have main method to bootstrap an application so the module tell how an application should be bootstrapped. Modules are nothing but a container for the different parts of your application like – controllers, filters, services, directives, etc.

Next, we are going to learn how to create a module and how to use that for creating controller with simple example. Actually it was difficult for me to understand the concept by just reading, that’s why the best thing to understand the concept is to implement it or hands on example of the concept to understand better.

So we are going to do some hands on.

The following are the steps to create a module and use in HTML template:
  1. Open notepad or notepad++ as an editor.

  2. If you gone through the first article Introduction to AngularJS – Day 1, I used same example and saved file with extension .html.
    1. <!DOCTYPE html>  
    2. <html ng-app>  
    3.   
    4. <head>  
    5.     <title>Module in AngularJS Demo</title>  
    6.     <script src="Scripts/angular.min.js"></script>  
    7. </head>  
    8.   
    9. <body> </body>  
    10.   
    11. </html>  
  3. Now, our template is ready next to create a module and use in the above example.

  4. Create a module in same file or create a separate javascript (.js) file. For that add the following code,
    1. <!DOCTYPE html>  
    2. <html ng-app="myApp">  
    3.   
    4. <head>  
    5.     <title>Module in AngularJS Demo</title>  
    6.     <script src="Scripts/angular.min.js"></script>  
    7. </head>  
    8.   
    9. <body ng-controller="greetController">  
    10.     <h2>{{ greet }}</h2>  
    11.     <script type="text/javascript">  
    12. //Creating Module  
    13. var app = angular.module("myApp", []);  
    14. //Creating Controller using object of module 'app'  
    15. app.controller("greetController", function ($scope)  
    16. {  
    17.     $scope.greet = 'Welcome to C# Corner!';  
    18. });  
    19.     </script>  
    20. </body>  
    21.   
    22. </html>  
  5. Now understanding the above code, in above code I created a module in same file. Created module like the following:
    1. //Creating Module  
    2. var app = angular.module("myApp", []);  
    This is the syntax of creating a module, we create the module using the angular object of AngularJS. The first parameter is the name of module ‘myApp’ and second parameter is for dependencies like if you are using routing functionality in your application, at that time you have to declare the dependency in square brackets ‘[‘ngRoute’]’ like this way.

  6. This is creating controller using the object of the module we have created like the following:
    1. //Creating Controller using object of module 'app'  
    2. app.controller("greetController", function ($scope) {  
    3.    $scope.greet = 'Welcome to C# Corner!';  
    4. });  
    This is the syntax of creating a controller in AngularJS using the object of module ‘app’. First parameter is the name of controller used in HTML template, and second is the simple function syntax using the ‘$scope’.

    The concept of ‘$scope’ we are going to see in coming days. We have a created one property using the ‘$scope’. The ‘greet’ property is bind using the {{expression}} or you can use ’ng-bind’ directive to bind the property. This property bind in HTML </h2> tag.

  7. The following image shows all the concept how to create a module, controller and how to use in application.

    controller

  8. Now save the changes and open the file in browser to see the output, after you open the file in browser you can see the following,

    browser

Great, your first AngularJS module example created successfully!

Summary

I hope that beginners as well as students understand the concept of Module in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn and share it!


Similar Articles