In AngularJS, a module is a container for different parts of your application, including controllers, services, directives, filters, and more. Modules help in organizing and structuring your code, making it more maintainable and scalable. They also facilitate the separation of concerns within your application.
Module Creation: You create a module using the
angular.modulefunction. The function takes the name of the module and an optional array of dependencies. Dependencies are other modules that the current module depends on.Example:
var myApp = angular.module('myApp', []);In this example, a module named 'myApp' is created with no dependencies.
-
Dependencies: You can specify dependencies when creating a module by providing an array of dependency names as the second parameter. These dependencies are other modules that the current module relies on.
Example:
var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);In this case, the 'myApp' module depends on the 'ngRoute' and 'ngResource' modules.
-
Adding Components to Modules: Once a module is created, you can add various components to it, such as controllers, services, directives, filters, etc. This is typically done using the
controller,service,directive, and other functions provided by the module object.Example:
myApp.controller('myController', function($scope) {
// Controller logic goes here
});This adds a controller named 'myController' to the 'myApp' module.
-
Module Initialization: After defining the components within a module, you need to bootstrap the module to start the AngularJS application. This is typically done by adding the
ng-appdirective to an HTML element or by manually bootstrapping the application using theangular.bootstrapfunction.Example (using
ng-appdirective):<html ng-app="myApp">
<!-- Your application content goes here -->
</html>Example (manual bootstrapping):
angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); }); -
Module Configuration and Run Blocks: Modules can have configuration and run blocks that are executed during the configuration and run phases of the AngularJS application lifecycle, respectively. Configuration blocks are used to configure providers before the application runs, while run blocks are used to perform initialization tasks.
Example:
myApp.config(function($routeProvider) {
// Configuration logic goes here
});
myApp.run(function($rootScope) {
// Run-time initialization logic goes here
});In this example, the
configblock configures the route provider, and therunblock initializes the root scope.
Comments