Post
Ask Question

Module and Controller in AngularJS

Please refer to the following article for the basics:

In this blog we will see,

  • What is module and what is a controller
  • How to create a module and controller
  • How it works

What is Module and how to create it?

  1. Module is a kind of Main () method in AngularJS which contains controllers, services, directives etc.
  2. Module in AngularJS can be created by using following syntax.
  3. Module is used with ng-app.

A Module can be dependent on another module like ngRoute, ui.bootstrap.

What is a controller and how to create a controller?

  1. Controller is a function which defines the data for view to display.
  2. It can retrieve data from the database by calling a service. Controller is used with ng-controller.
  3. The syntax to create controller is,

$scope is an object to which the data is attached and it is then retrieved and displayed.

Here message is attached to $scope object. So in the Html page which is using this controller by using double curly braces {{message}} the message will be displayed.

The controller needs to be registered with a module like this



Complete Code for Creating Module, Controller and registering Controller with Module is,

  1. varmyApp = angular.module("myModule", [])  
  2.   
  3.   
  4. varmyController = function ($scope) {  
  5.   
  6.     $scope.message = "Welcome to angular JS";  
  7.   
  8. };  
  9.   
  10. myApp.controller("myController", myController);  
or
  1. varmyApp = angular  
  2.    .module("myModule", [])  
  3.    .controller("myController", function ($scope) {  
  4.  
  5.        $scope.message = "Welcome to angular JS";  
  6.    });  
Steps to Create Application,

Step 1

Download Angular.JS file from AngularJS.org.

Step 2

Create a website in Visual Studio. Add Angular.js file in it.

Find the below screenshots for reference.




 

  • Now add one html page and just drag and drop angular.min.js in your HTML page. It will look like this.
    1. <head>  
    2.    <scriptsrc="Scripts/angular.js"></script>  
    3. </head>  
  • Now add one Javascript file and just drag and drop angular.js in your JS file. It will look like this.
    1. /// <reference path="angular.js" />  
  • Following is the code for the Javascript file .
    1.    varmyApp = angular.module("myModule", [])  
    2. .controller("myController", function($scope)  
    3. {  
    4.     var employee = {  
    5.         firstName: "rekha",  
    6.         lastName: "Kulkarni",  
    7.         gender: "f→emale",  
    8.     };  
    9.     var country = {  
    10.         Name: "India",  
    11.         Capital: "delhi",  
    12.     };  
    13.     // Attaching to $scope Object  
    14.     $scope.message = "Welcome to angular JS";  
    15.     $scope.country = country;  
    16.     $scope.employee = employee;  
    17. });  
  • Following is the code for html file.
    1. <!DOCTYPEhtml>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4. <head>  
    5.     <script src="Scripts/angular.js"></script>  
    6.     <script src="Scripts/JavaScript.js"></script>  
    7. </head>  
    8.   
    9. <body ng-app="myModule">  
    10.   
    11.     <div ng-controller="myController">  
    12.         {{message}}  
    13.         <br/>  
    14.         <br/>  
    15.     </div>  
    16.     <hr/>  
    17.     <div ng-controller="myController">  
    18.         <div>  
    19.             Country Name: {{country.Name}}  
    20.             <br/>  
    21.             <br/> Country Capital: {{country.Capital}}  
    22.         </div>  
    23.         <hr/>  
    24.         <div>  
    25.             Employee FirstName :{{employee.firstName}}  
    26.             <br/> Employee LastName :{{employee.lastName}}  
    27.             <br/> Gender :{{employee.gender}}  
    28.   
    29.         </div>  
    30.   
    31.     </div>  
    32.   
    33. </body>  
    34.   
    35. </html>  
  • The result of the program is: