AngularJS Modules

An AngularJS module defines the functionality of an application and connects different parts to work together across the HTML page. It acts as a container that organizes the structure of the app.

It groups related components like controllers, services, and directives.
It helps manage and structure the application efficiently.
It is applied to HTML using the ng-app directive.

Note: These modules should be made in normal HTML files like index.html and no need to create a new project in Visual Studio for this section.

Creating a Module in AngularJS

An AngularJS module is created using angular.module() and acts as the main container for the application. It can be attached to HTML using the ng-app directive to apply its functionality.

var app = angular.module("Module-name", []);

In this [], we can add a list of components needed but we are not including any components in this case. This created module is bound with any tag like div, body, etc. by adding it to the list of modules.

<div ng-app = "module-name">
    The code in which the module is required.
</div>

Adding a Controller

app.controller("Controller-name", function($scope) {
    $scope.variable-name= "";
});

Here, we can add any number of variables in the controller and use them in the HTML files, and the body of the tag in which the controller is added to that tag by writing:

HTML

<body>
    <div ng-app="Module-name">
        <div ng-controller="Controller-name">
            {{variable-name}}
        </div>
      <!-- This wont get printed since its
           not part of the div in which
           controller is included -->
        {{variable-name}}
    </div>
</body>

Module and Controllers in Files

Modules and controllers can be written in the same file, but for better structure and reuse they are usually stored in separate .js files and included in the HTML file.

This helps avoid redundancy and improves code organization.
It also makes the module reusable across multiple files.

Example 1: This example illustrates the implementation of the Angular JS Modules.

DemoController.js:

JavaScript

// DemoController.js
// Defines the DemoController for the DemoApp module.
app.controller('DemoController', function ($scope) {
    $scope.list = ['A', 'E', 'I', 'O', 'U'];
    $scope.choice = 'Your choice is: GeeksforGeeks';
    $scope.ch = function (choice) {
        $scope.choice = "Your choice is: " + choice;
    };
    $scope.c = function () {
        $scope.choice = "Your choice is: " + $scope.mychoice;
    };
});

Module-name: DemoApp.js:

var app = angular.module('DemoApp', []);

index.html file:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Modules and Controllers in Files
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <script src="DemoApp.js"></script>
    <script src="DemoController.js"></script>
</head>
<body ng-app="DemoApp">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>AngularJS Modules</h3>
    <h4>Using controllers in Module</h4>
    <div ng-controller="DemoController">
            Vowels List : 
        <button ng-click="ch('A')">A</button>
        <button ng-click="ch('E')">E</button>
        <button ng-click="ch('I')">I</button>
        <button ng-click="ch('O')">O</button>
        <button ng-click="ch('U')">U</button>
        <p>{{ choice }}</p>
        Vowels List :
        <select ng-options="option for option in list" 
                ng-model="mychoice" 
                ng-change="c()">
        </select>
        <p>{{ choice }}</p>
    </div>
</body>
</html>

Output:

Note: It makes sure the module and component files are in the same folder otherwise provide the path in which they are saved and run.

Directives in a Module

To add a directive in a module follow the steps:

Step 1: Creating a module as we did earlier:

var app = angular.module("DemoApp", []);

Step 2: Creating a directive:

app.directive("Directive-name", function() {
    return {
        template : "string or some code which is to be executed"
    };
});

Example: This is another example illustrating the implementation of the AngularJS Module.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Modules and Controllers in Files
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="GFG" w3-test-directive></div>

    <script>
        var gfg_app = angular.module("GFG", []);
        gfg_app.directive("w3TestDirective", function () {
            return {
                template: "Welcome to GeeksforGeeks!"
            };
        });
    </script>
</body>

</html>

Output:

Welcome to GeeksforGeeks!

Note: Here anything to be printed should not be put in the div which is calling the directive since it gets overwritten by the code in the template.

Creating a Module in AngularJS

Adding a Controller

Module and Controllers in Files

Directives in a Module

Explore