How to Create AngularJS Modules? | Types of Modules in AngularJS
Free Angular course with real-time projects Start Now!!
In our last tutorial, we discussed Data Binding. Here, we will learn about AngularJS Modules. An angular module is a container, which we use to create an application. By containing specific functions in a module, AngularJS stops polluting global scope. Moreover, we will discuss how to create different types of modules in AngularJS.
So, are you ready for AngularJS Modules?
How to Create AngularJS Modules | Types of Modules in AngularJS
1. What are AngularJS Modules?
An angular module is a container which we use to create an application. By containing angularJS specific functions in a module, angular JS stops polluting global scope. In AngularJS Modules, we can apply functionality of an application to the entire HTML page with the help of ng-directive.
AngularJS modules is used to define functionalities or to add controllers, filters, directives etc to the angular application. Also, make it easy to reuse in different applications. Separation of concern using angular support by using it.
2. How to Create Modules in AngularJS?
Before we start our discussion on creating AngularJS modules, let’s study what will happen if there is no module in our application?
Let’s create a file Firstcontroller.js with the code
Function Firstcontroller($scope) {
$scope.x=15;
$scope.y=2;
$scope.z=$scope.x - $scope.y;
});
The code written above will simply create a function “Firstcontroller” in our application. In the above controller, a simple subtraction operation is being performed and the result is being assigned to new variable z.
Do you know Why AngularJS is Used?
After that create a simple HTML page “demo.html” with the following code
<body ng-app="">
<div ng-controller="Firstcontroller">
<h3> Result is:</h3>
{{c}}In this code, we included the controller we created above, that is “Firstcontroller” and calling the value of $scope c through expression to get it displayed to a user.
But, here the value of our ng-app is blank. It is like ng-app= “ ”.
Here, it means all the controllers invokes within the context of ng-app directives will access globally. There is no boundary to separate a number of controllers from each other. Now in case of modern-day programming, it prefers to attach controller with the module so that a logical boundary can be defined for a controller.
Let’s do the same code with a module.
var sampleApp = angular.module('demo',[]);
sampleApp.controller('Firstcontroller', function($scope) {
$scope.x=15;
$scope.y=2;
$scope.z=$scope.x - $scope.y;
});Code explanation:
var sampleApp = angular.module('demo',[]);Here, an angular module “demo” is created to perform the logical boundary for the functionality contains in this module.
sampleApp.controller('Firstcontroller', function($scope)By this line, we are attaching the controller with a module. It means if we want to access the functionality present in this module, we have to provide a reference of this module in our main HTML page.
Main HTML page code
<body ng-app="'Demo'">
<div ng-controller="Firstcontroller">
<h3> Result is:</h3>
{{c}}Instead of blank, we provide a reference in the ng-app directive. By invoking its application module we can define functionalities in it.
Therefore, we found:
- This module use for packaging the code in reusable modules.
- There is no order for loading modules.
- It is an easily testable component.
- It is an easily maintainable component.
- Using a module, you can easily organize an application.
3. Types of AngularJS Modules
There are two types of AngularJS modules:
- Application Modules
- Controller Modules
Types of AngularJS Modules
a. Application Modules in AngularJS
Using the function “angular.module” we can create an application module in angular. To create Angular Modules, application modules consider as global space, retrieving angular Js modules and registering angular modules. All the modules use for an application have to register using this mechanism whether it is angular core or any third party module.
<div ng-app="demo">
</div>
<script>
var app = angular.module("demo",[ ]);
</script>Here in the above code “demo” parameter that is used to refer an HTML element in which the application will run. Angular.module() creates an application module in which two parameters passes.
The first parameter is the module name that should be the same as specified by an ng-app directive.
The second parameter is an array of some other dependent modules. Since there is no dependency, therefore, we are passing an empty array. A module definition without its second parameter(module without []), implies that we are using an existing module rather than creating a new module. We are retrieving from the existing module only.
Using module API we can create services, factories and providers too.
The Syntax for creating service in a module
module.service( ‘Name of service’, function );
A Syntax for creating a factory in a module.
module.factory( ‘Name of Factory’, function );
The Syntax for creating a provider in a module.
module.provider( ‘providerName’, function );
Note: ANGULAR LIBRARY should be loaded either in head part or at the start of a body because angular.module gets compiled only when a library is loaded.
b. Controller Modules in AngularJS
The AngularJS modules use to define a controller in an application. In the controller module, you have to add a controller in our application and that controller refers to the ng-controller directive.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="App" ng-controller="myCtrl">
{{ fName + " " + lName }}
</div>
<script>
var a = angular.module("App", []);
a.controller("myCtrl", function($scope) {
$scope.fName = "Data";
$scope.lName = "Flair";
});
</script>
</body>
</html>Output:
Data Flair
4. AngularJS Modules with Directive
There are various built-in directives present in angular, one can use them to add functionality. We can also use AngularJS Modules to add directives to our application.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="demoApp" w3-test-directive></div>
<script>
var a = angular.module("demoApp", []);
a.directive("w3TestDirective", function() {
return {
template : "example of module with directive"
};
});
</script>
</body>
</html>Output:
example of module with directive
So, this was all about AngularJS Modules Tutorial.
5. Conclusion
From the above article, we can conclude that AngularJS modules use to make the code clean. Various business logic such as filters, controllers, directives etc separated by creating the module in our application. Hope you liked our explanation. Furthermore, if you have any query, feel free to ask in the comment box.
If you are Happy with DataFlair, do not forget to make us happy with your positive feedback on Google
