What is AngularJS module?
AngularJS modules are a logical separation between the controllers, services, filters, directives etc. In simple words, a module is a container for the different parts of the application. AngularJS framework is popular because it supports the modular approach. By using modular framework we can keep the code base neat and clean.
Advantages of AngularJS Modules
- The architecture will be loosely coupled
- The declarative process will be easy to understand.
- You could package code as reusable modules, it means you can be plug and play the modules into different applications.
- Easy to maintain the code.
- Unit tests have to load only relevant modules which help in speed up the process.
- Modules can be loaded in parallel or in any order.
AngularJS Modules Best Practices to be followed
- Create different modules for each feature.
- Create modules for every reusable component.
- Add an application level module which contains initialization code for all the above modules.
Creating an Application module in AngularJS
var app = angular.module("myFirstApp", []);
We can create the module by using the angular method angular.module("moduleName",["dependency1","dependency2"]).The above code is a syntax of declaring the angular module, “myFirstApp” is the name of the module and you can pass the dependencies of the module in the next parameter as an array.
Now we have declared a module we can go head and create the controller, directives, filters etc.
Creating an Controller Module in AngularJS
<script>
//Application Module
var app = angular.module("myFirstApp", []);
//Controller Module for the application
app.controller("myFirstController",function($scope) {
$scope.firstName ="Ross";
$scope.lastName ="Geller";
});
</script>
We now have created an application module and controller module let’s see how we integrate both the things in HTML.
Angularjs modules Example
<!DOCTYPE html>
<html>
<head>
<title>Angular Expressions</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myFirstController">
<p> Concatenation of First name and Last name is: <strong>{{ firstName + " " + lastName }}</strong></p>
</div>
<script>
//Application Module
var app = angular.module("myFirstApp", []);
//Controller Module for the application
app.controller("myFirstController", function ($scope) {
$scope.firstName = "Ross";
$scope.lastName = "Geller";
});
</script>
</body>
</html>
Modules should always be separated into different files so that we can reuse it. So you separate the application module and controller module into 2 different files for better code maintainability.
AngularJS Modules split into separate JS files
<!DOCTYPE html>
<html>
<head>
<title>Angular Expressions</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myFirstController">
<p> Concatenation of First name and Last name is: <strong>{{ firstName + " " + lastName }}</strong></p>
</div>
<script src="myFirstApp.js"></script>
<script src="myFirstController.js"></script>
</body>
</html>
Output
Concatenation of First name and Last name is: Ross Geller
Srinivas Ramakrishna