Introduction of Modules in AJS
- AngularJS modules play a crucial role in structuring and organizing AngularJS applications, providing modularity, encapsulation, and dependency management capabilities.
Definition of Modules in AJS
- In AngularJS, modules are a fundamental building block of an application that encapsulates different parts of an application into separate, reusable units, providing modularity and organization to the codebase.
Characteristics of Modules in AJS
- AngularJS module is a container to embed different parts of JS applications hence it is said that modules define AngularJS application.
- It creates a logical boundary for dependencies resolution.
- Modules support breaking down the applications into smaller, reusable units, called modules that finally help build scalable, maintainable, and testable codebases.
- Modules help in structuring the application and managing its dependencies efficiently.
- AngularJS modules are defined using the angular.module() method. This method takes two arguments: the name of the module and an optional array of dependencies.
Syntax:
-
- To define a module with the name ‘myApp’ with no dependencies:
angular.module(‘myApp’, []); - To define a module with the name ‘myApp’ with dependencies on other modules: angular.module(‘myApp’, [‘dependency1’, ‘dependency2’]);
- To define a module with the name ‘myApp’ with no dependencies:
Here, dependencies are specified as an array of module names when defining a module. AngularJS resolves these dependencies and makes them available to components within the module.
- Modules can use/embed components such as controllers, services, directives, filters, and configuration blocks as needed in the program. Components are embedded using the module.component(), module.controller(), module.service(), module.directive(), module.filter(), and module.config() methods.
Syntax :
angular.module(‘myApp’, [])
.controller(‘MyController’, function($scope)
{
// Controller codes here
})
})
.service(‘MyService’, function()
{
// Service codes here
})
// Service codes here
})
.directive(‘myDirective’, function()
{
// Directive codes here
})
.filter(‘myFilter’, function()
// Directive codes here
})
.filter(‘myFilter’, function()
{
// Filter codes here
})
.config(function()
// Filter codes here
})
.config(function()
{
// Configuration codes here
});
// Configuration codes here
});
- AngularJS allows main modules to be composed of several sub-modules, enabling modular development and code organization. Sub-modules can be defined within parent modules, and dependencies can be shared between modules.
Syntax :
-
- To define a parent module :
angular.module(‘parentModulename’, [‘childModule1’, ‘childModule2’]); - To define the first child module :
angular.module(‘childModule1’, []); - To define another child module :
angular.module(‘childModule2’, []);
- To define a parent module :
- AngularJS supports lazy loading of modules and components, i.e., it allows applications to load modules on demand based on user actions or application state. This helps in optimizing application performance and reducing initial load times.
- Modules can define configuration blocks using the .config() method. Configuration blocks are executed during the application bootstrap phase and can be used to configure services, providers, routes, and other application settings.
Types of Modules in AJS
- There are two types of modules for an application −
- Application Module −
- Used to initialize an application with controller(s).
- The application module is created by using the AngularJS function angular. module().
- Controller Module −
- Used to define the controller.
- These refer to the controller with the ng-controller directive.
- Application Module −
Examples of AJS Module Programs
Example : A simple program in AJS to display messages using Module.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="app1" ng-controller="controller1">
{{ word1 + " " + word2 + " " + word3}}
</div>
<script>
var app = angular.module("app1", []); //Application Module.
app.controller("controller1", function($scope) //Controller Module.
{
$scope.word1 = "Welcome";
$scope.word2 = "World";
$scope.word3 = "India";
});
</script>
</body>
</html>
Output:
Welcome World India
--------------------------- OR ---------------------------
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="app1" ng-controller="controller1">
The Output is = {{result}}
</div>
<script>
var app = angular.module("app1", []);
app.controller("controller1", function($scope)
{
$scope.value1 = 10.50;
$scope.value2 = 20.32;
$scope.result=$scope.value1+ $scope.value2;
});
</script>
</body>
</html>
Output:
The Output is = 30.82
0 Comments