The angular module is a mechanism to group different components, directives, pipes, and services connected to each other to combine them with other modules to create an application.
If we are building an application to manage employees then we might have the following three features.
Employee feature to create, read, delete and update employee details.
Login feature to login, logout, authenticate and authorize users.
Report feature to generate reports like, list of top 10 employees, total number of employees by department, etc.
So, to group the components, directives, pipes, and services that are related to a specific feature area of an application, we create a module for each feature. For example, for the application to manage employees, if we have three features we might have three modules.
In this article, we’ll talk about modules in AngularJS.
What is an Angular Module?
If you want to understand angular modules, compare them with the concept of classes. As in a class, there are different access specifiers like public and private.
API’s are the public methods that other parts of our application can access.
In contrast, we hide implementation details from users or different parts of the application by private methods.
Like this, a module is also used to export or hide components, pipes, services, and directives.
The elements that we export are used by other modules, while those not exported (hidden) cannot be used directly by other modules/parts of our application.
Angular Module
Types of Module in AngularJS
Angular has its own modularity system called NgModules. It aids in organizing the complex relationships between views(components, directives) to data providers such as services and guards.
Some of the important types of modules in AngularJS are:
In Angular, we have one Root Module for our application. There are other modules known as feature modules which you can create and define as well. The structure of your application will look like this - one root module and other feature modules according to your requirements.
Difference between root and feature module- Root module imports BrowserModule whereas the feature Module imports CommonModule.
In Angular, we can also use JavaScript modules. You can install them using the node package manager and import them using import statements defined in JavaScript.
Points to Remember
The angular module is like a container for various parts of your application.
The angular module is like a container for your application controllers.
Every Angular application will have at least one module and that is known as the root application module.
An Angular application might have a core module, shared module, and one or more routing modules.
Functionalities of Modules in Angular
The following diagram depicts some of the most important functionalities of modules in AngularJS.
Creating a Module in Angular
We can create the module by using the function angular. module provided to us by the angular object.
Syntax:
<div ng-app="”myApplication”">…</div>
<script>
var app= angular.module(“myApplication”,[]);
</script>
The [ ] parameter can be used to define other dependent modules.
Without the [ ] parameter, you are retrieving an existing module and not creating a new one.
The "myApplication" parameter is the HTML element in which our application will run.
Further, you can add filters, directives, controllers and more, to your AngularJS application.
Controllers- We can control the flow of data of AngularJS applications using controllers. We can define a controller using the ng-controller directive. A controller is a JavaScript object containing functions and properties/attributes.
The above-given diagram is showing the hierarchy of modules in angularJS. At the top, we have our feature module that contains routing and imported modules. And in the ground level, we have components and services that our feature module contains. We have child modules as well in our feature module which have the capacity to perform tasks on their own with their own services and components.
Adding a Controller
Adding a controller in your application, and refer to the controller with the ng-controller directive:
Example:
<div ng-app="myApplication" ng-controller="myctrl">
{{ city + " " + state }}
</div>
<script>
var app = angular.module("myApplication", []);
app.controller("myctrl", function($scope) {
$scope.city = "Panipat";
$scope.state = "Haryana";
});
</script>
Adding a Directive
You can add functionality to your application with the help of AngularJS built-in directives.
Also, you can add your own directives to your application with the use of the module.
Example
<div ng-app="myApplication" CN-test-directive></div>
<script>
var app = angular.module("myApplication", []);
app.directive("CNTestDirective", function() {
return {
template : "Hello, I was made in a directive constructor!"
};
});
</script>
Modules and Controllers in Files
In AngularJS applications, you can put the module and the controllers in JavaScript files.
In this example given below, "myctrl.js" contains the controller, while "myApplication.js" contains an application module definition:
1.) Global functions can easily be destroyed or overwritten by other scripts, so they should be avoided in javascript. AngularJS modules keep all functions local to the module to solve this problem.
2.) It is advisable to load the AngularJS library either at the start of the <body> or in the <head> because calls to the angular.module can be compiled only after the library has been loaded.
Answer- Angular is a JavaScript framework totally written in TypeScript. It is open-source.
It is used to develop single-page applications.
2). What is TypeScript?
Answer- TypeScript is a superset of JavaScript. It Offers super consistency. TypeScript first compiles JavaScript that can run efficiently in every environment.
3). What is the difference between Angular and AngularJS?
Answer- AngularJS uses javascript as a language, whereas Angular uses typescript as a language.
4). How many types of decorators are supported in Angular?
Answer- Four types of decorators are supported in Angular. These are Class decorators, Property decorators, Method decorators, Parameter decorators.
5). Between Angular and AngularJS, which is supported by mobile browsers?
Answer- Angular supports most mobile browsers, while mobile browsers do not support AngularJS.
Key Takeaways
In this article, we shared some interesting information regarding modules in AngularJS. As a solution, we recommend that you divide your application into multiple modules.
One module for every feature. One module for every reusable component, as well as an application-level module that is dependent on the preceding modules and contains any initialization code.
46+ registered 