Previous
Written by: rJTutorial Team | Last Updated:

AngularJS Modules

In AngularJS, a module is essentially a container for the different parts of your application. Think of it as a "Main" function or a namespace that holds your controllers, services, filters, and directives. Instead of having a cluttered global namespace where variables might overwrite each other, modules help you package your logic into cohesive, reusable units.

By breaking your app into modules, you make the codebase easier to test, maintain, and navigate. Most real-world applications aren't built as one giant file; they are composed of many small modules working together.

Developer Tip: Think of modules as LEGO sets. You might have one set for "User Authentication" and another for "Product Catalog." You can plug them into your main application as needed.

Key Features of AngularJS Modules

  1. Encapsulation: Modules allow you to keep your code organized and prevent "variable pollution." Code defined inside a module doesn't leak into the global scope.
  2. Dependency Management: This is a core strength of AngularJS. A module can "require" other modules. When the app starts, AngularJS automatically finds and loads all the pieces your module needs to function.
  3. Configuration and Run Blocks: Modules give you specific hooks into the application lifecycle. You can configure routes or global settings before the app starts (Config) or run initialization logic once the app is live (Run).
Best Practice: Always modularize your application by feature (e.g., auth.module.js, dashboard.module.js) rather than by type. This makes it much easier for team members to find all related files in one place.

Creating a Module

You create a module using the angular.module method. This single method serves two purposes depending on the arguments you pass: it can either create a new module or retrieve an existing one.

Creating a Module (The Setter)

var app = angular.module('myApp', []);
  • 'myApp': This is the unique name of your module. You will reference this name in your HTML using the ng-app directive.
  • []: This empty array is critical. It defines the list of dependencies. Even if you have no dependencies, you must include the empty array to "create" the module.
Common Mistake: Forgetting the empty brackets []. If you write angular.module('myApp'), AngularJS will try to find an existing module instead of creating a new one. This will throw an error if the module hasn't been defined yet.

Example: Basic AngularJS Module

The following example shows how the JavaScript module links to the HTML via the ng-app and ng-controller directives.

<!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>
        // 1. Create the module
        var app = angular.module('myApp', []);

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

Explanation:

  1. Creating the Module: The angular.module('myApp', []) line initializes the application. By assigning it to the variable app, we can easily chain other components like controllers or services to it.
  2. Attaching a Controller: We use app.controller() to register a controller within the myApp container. This ensures myController is only available within the scope of myApp.
Watch Out: Avoid using global functions for controllers. While older AngularJS tutorials might show function MyCtrl($scope) {...}, this is deprecated and considered bad practice because it pollutes the global JavaScript window object.

Module Dependencies

In a real-world project, you’ll likely use external libraries for things like routing, animations, or UI components. You "inject" these into your application by listing them in the dependency array.

Example:

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap']);
  • This module now has access to ngRoute (for URL handling), ngAnimate (for CSS transitions), and ui.bootstrap (a third-party library).

Configuration and Run Blocks

AngularJS gives you two specific phases where you can execute code: Configuration and Execution.

Configuration Block

The .config() block runs before the app fully starts. This is the only place where you can configure "Providers" (the recipes that create services).

app.config(function($locationProvider) {
    // Enable modern URL routing (without the # hash)
    $locationProvider.html5Mode(true);
});

Run Block

The .run() block is similar to a main method in other languages. It executes after the injector is created and the app is ready. It’s a great place to perform initial setup, like checking if a user is logged in.

app.run(function($rootScope) {
    $rootScope.appName = "My AngularJS App";
    console.log("App is running and initialized!");
});

Organizing an AngularJS Application with Modules

For small demos, one file is fine. For professional apps, you should separate your code into multiple files. This makes it easier for multiple developers to work on the project simultaneously without causing merge conflicts.

app.js (The "Root" Module)

// This module ties everything together
var app = angular.module('myApp', ['myApp.controllers', 'myApp.services']);

controllers.js

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

services.js

// A separate module for data and API calls
angular.module('myApp.services', [])
.service('myService', function() {
    this.greet = function() {
        return "Hello from myService";
    };
});
Developer Tip: When using multiple files, make sure you include the script tags in your HTML in the correct order: first the AngularJS library, then your dependency modules (services, controllers), and finally your main app.js.

Bootstrapping the Application

Bootstrapping is the process of initializing your AngularJS app. Most developers use the "automatic" way by adding the ng-app directive to the root element (usually <html> or <body>).

<body ng-app="myApp">
    <!-- Everything inside this body tag is now managed by AngularJS -->
</body>

 

Summary

AngularJS modules are the foundation of a clean, maintainable application. They act as containers that keep your code organized, manage complex dependencies automatically, and provide clear hooks for configuration and initialization. By mastering modules, you transition from writing simple scripts to building scalable, professional web applications.

Previous