Angular Module Example Tutorials

By | 2018-04-01T15:46:13+00:00 October 11th, 2016|angularjs|0 Comments

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 :


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

Http iframes are not shown in https pages in many major browsers. Please read this post for details.

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 :

Http iframes are not shown in https pages in many major browsers. Please read this post for details.

About the Author:

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+ ,

Leave A Comment