AngularJS - Modules

April 16, 2016 by Mukesh Kumar at 3:47 pm

What are modules in AngularJS ?

A module is a container of different parts of an AngularJS application such as controller, service, filters, directives, factories etc. Modules are used to separate application logics like services, controllers, application etc. and keep the code clean.

You can think module as main() method of other type of application.

Why Module is important ?

AngularJS uses module that specifies how an application should be started. We can create a reusable modules and it can be loaded in any order.

Unit test doesn't need to load all the app, just loading that specific module is enough to start unit testing

What are modules in AngularJS ?

You can think module as main() method of other type of application.

Why Module is important ?

AngularJS uses module that specifies how an application should be started. We can create a reusable modules and it can be loaded in any order.

Unit test doesn't need to load all the app, just loading that specific module is enough to start unit testing

How to Create a Module

A module is created by using module() method of angular object.angular object is provided by AngularJS framework. This function will accept two parameters.1st parameter is the name of the module and 2nd parameter is array of module names on which this module is dependent on. Following is code to define module.


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

In the above code, the module() method creates an application module, where the first parameter is a module name which is same as specified by ng-app directive.The second parameter is an array of other dependent modules []. In the above example we are passing an empty array because this module is not dependent on any other modules.

Now consider another code as given below.

app = angular.module('app', ['app.login', 'app.authorizeUser']);
// OR
var app = angular.module('app', ['app.login', 'app.authorizeUser']);

In the above code snippet, we have instructed AngularJS that "app" mdoule is depdendent on "app.login" and "app.authorizeUser" module.

Example on AngularJS Module

An AngularJS application must create a top level application module. This application module can contain other modules, controllers, filters, etc.

Create Application Module

<!DOCTYPE html>
<html >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <script>
        var myApp = angular.module('myApp', []); 
    </script>
</body>
</html>

In the above example, the angular.module() method creates an application module, where the first parameter is a module name which is same as specified by ng-app directive.The second parameter is an array of other dependent modules []. In the above example we are passing an empty array because there is no dependency.

Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive.You will learn more about controllers later in separate article .

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "Mukesh";
    $scope.lastName = "Kumar";
});
</script>

</body>
</html>

In the above example, we have created a controller named "myCtrl" using controller() method of AngularJS. Here, "app" is an object of a module, and controller() method creates a controller inside "myApp" module.

Output

Mukesh Kumar

Modules in separate files

It is common in AngularJS applications to put the module and controllers in separate JavaScript files.

Example

In this example, "app.js" contains an application module definition, while "myController.js" contains the controller module.

app.js

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

myController.js

myApp.controller("myController", function ($scope) {
    $scope.message = "welcome to javawebtutor.com ";
	$scope.name = "Mukesh";
});

Now include these files in your html document as given below.

index.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/app.js" ></script>
<script src="js/myController.js" ></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        {{name}}
		{{message}}
    </div>

</body>
</html>