Angular Module Example Tutorials

This tutorial explains you what is Angular Module, dependent module and how to create them with beautiful examples.

What is Angular Module ?

Angular Module is consider to be a container for all different programming items of an application like controllers, filters, services, directives and etc..

An Angular Module specifies how an application should be bootstrapped, i.e. how to initialize your application data.

Module can implement separation of code features of MVC.

Module is an important part of the AngularJs dependency injection.

“ng” is a predefined global module, that will be prepared by AngularJs Framework.

How to Create Angular Module :

We can create a module by using the root angular object like below:

var module = angular.module("moduleName",[]);

Angular module can take two different arguments; one is module name and Array of dependent modules (String array)

Module with dependent modules :

var module = angular.module("myApp",[]);

var module2 = angular.module("myApp2",["myApp"]);

What we can use inside the Angular Module ?

We can define different items of the AngularJs application, though we have too many items in AngularJs, we can only use the following items in AngularJs module.

controllers
services
factories
directories
filters
configurations
routers

Angular Module Example :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Module Example</title>
<style>
#person {
   border: 1px solid green;
   padding: 5px;
}
</style>
<script
   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
   var app1 = angular.module("myApp1", []);
   app1.controller("personController", function($scope) {
       $scope.personId = "101";
       $scope.personName = "chandra shekhar";
   });
</script>

</head>
<body ng-app="myApp1">
   <h3>AngularJs Module Example</h3>
   <div id="person" ng-controller="personController">
       Id : {{personId}} <br> Name : {{personName}}<br>
   </div>
</body>
</html>
[/html]

Output :

[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/Angular_Module.html”]

Angular Dependent Modules Example :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Module Example</title>
<style>
#person{
border: 1px solid red;
padding:5px;
}
#employee{
border: 1px solid green;
padding:5px;
}
#body{
border: 1px solid black;
padding:5px;
}
</style>
<script
   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
   var app1 = angular.module("myApp1", []);
   app1.controller("personController", function($scope) {
       $scope.personId = "101";
       $scope.personName = "chandra shekhar";
   });
   var app2 = angular.module("myApp2", ["myApp1"]);
   app2.controller("employeeController", function($scope) {
       $scope.empNo = "201";
       $scope.job = "Manager";
       $scope.sal="62000"
   });
</script>

</head>
<body id="body" ng-app="myApp2">
   <h3>AngularJs Dependent Module Example</h3>
   <div id="person" ng-controller="personController">

       Id : {{personId}} <br> Name : {{personName}}<br>
   </div>
   <div id="employee" ng-controller="employeeController">
       Emp No : {{empNo}} <br> Job : {{job}}<br> Salary
       : {{sal}}
   </div>
</body>
</html>
[/html]

Output :

[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/Angula_Dependent_module.html”]