Monday , February 27 2017
Home / angularjs / Angular Module Example Tutorials

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 seperation 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 :


<!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>

Output :

Angular Dependent Modules Example :


<!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>

Output :

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

Leave a Reply

Your email address will not be published. Required fields are marked *