AngularJS Modules Real World Example

Using AngularJS we can easily divide your front-end source code into reusable components, called modules. An AngularJS module is just a container that groups together different components of your application under a common name.

Modules are used to isolate logics like services, controllers, application etc.

Small Example of Angular Module

Example: In this example I am taking a paragraph and a button. On button click , I am toggling paragraph tag. write module , controller and html code in separate files is a best programming practice . So In this example I have taken module code in separate file named ‘myApp.JS’.

myApp.JS
//myangular is module applied on html tag
//This module is declared as independent module
var obj = angular.module('myangular', []);
//registering controller ctrl1 in myangular module
obj.controller('ctrl1', function ($scope) {
//set default value
$scope.visible = true;
//function definition
$scope.togglefunction = function () {

$scope.visible = !$scope.visible;

}

})

Index.html

   







Hello world

 

Another Example of Angular Module

   

 

 

 

 
{{fulldetails()}}
  

 

 
Employee Salary
 
Employee Salary Month
 
 

{{emp.salary}}
 
{{emp.month}}
 
 
 

  
Download Source Code