Previous

AngularJS Modules

In AngularJS, a module is a container for the different parts of an application, such as controllers, services, filters, directives, and configuration information. Modules help in organizing the application into manageable parts and promote modularity and reuse of code.

Key Features of AngularJS Modules

  1. Encapsulation: Modules encapsulate code, making it easier to manage and maintain.
  2. Dependency Management: Modules can declare dependencies on other modules, which AngularJS will resolve and inject.
  3. Configuration and Run Blocks: Modules can have configuration (config) and run (run) blocks to configure services and initialize the module.

Creating a Module

You create a module using the angular.module method. This method can be used to both create and retrieve modules.

Creating a Module

var app = angular.module('myApp', []);
  • 'myApp': The name of the module.
  • []: An array of dependencies (other modules that this module depends on).

Example: Basic AngularJS Module

Here’s a basic example to demonstrate how to create and use a module:

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Module Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <h1>{{ message }}</h1>
    </div>

    <script>
        // Create a module named 'myApp'
        var app = angular.module('myApp', []);

        // Define a controller named 'myController'
        app.controller('myController', function($scope) {
            $scope.message = "Hello, AngularJS Module!";
        });
    </script>
</body>
</html>

Explanation:

  1. Creating the Module: The angular.module('myApp', []) statement creates a new module named myApp.
  2. Attaching a Controller: The myApp module defines a controller named myController, which sets a message variable on the $scope.

Module Dependencies

Modules can depend on other modules. You specify dependencies in the second argument of the angular.module method.

Example:

var app = angular.module('myApp', ['ngRoute', 'ngAnimate']);
  • This module depends on ngRoute and ngAnimate modules.

Configuration and Run Blocks

Modules can have configuration and run blocks to set up and initialize the module.

Configuration Block

Used to configure providers and services.

app.config(function($locationProvider) {
    $locationProvider.html5Mode(true);
});

Run Block

Used to execute code after the injector is created and modules are configured.

app.run(function($rootScope) {
    $rootScope.appName = "My AngularJS App";
});

Organizing an AngularJS Application with Modules

In larger applications, you can split functionality into multiple modules. For example:

app.js (Main Module)

var app = angular.module('myApp', ['myApp.controllers', 'myApp.services']);

controllers.js

angular.module('myApp.controllers', [])
.controller('MainController', function($scope) {
    $scope.message = "Hello from MainController";
});

services.js

angular.module('myApp.services', [])
.service('myService', function() {
    this.greet = function() {
        return "Hello from myService";
    };
});

Bootstrapping the Application

To bootstrap the AngularJS application, you need to specify the root module in the ng-app directive in your HTML:

<body ng-app="myApp">
    <!-- Application content goes here -->
</body>

 

Summary

AngularJS modules are essential for organizing an application into cohesive and maintainable parts. They provide encapsulation, dependency management, and the ability to configure and initialize components. By using modules effectively, you can build scalable and modular AngularJS applications.

Previous