AngularJS Modules (original) (raw)

Last Updated : 21 Feb, 2023

The AngularJS module defines the functionality of the application which is applied on the entire HTML page. It helps to link many components. So it is just a group of related components. It is a container that consists of different parts like controllers, services, and directives.

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

Creating a Module in AngularJS:

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.

The code in which the module is required.

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 `

  <!-- This wont get printed since its
       not part of the div in which
       controller is included -->
    {{variable-name}}
</div>

Module and Controllers in Files: While we can make modules and controllers in the same file along with the HTML file which requires it however we may want to use this module in some other file. Hence this will lead to redundancy so we will prefer to create Module, Controller, and HTML files separately. The Module and Controller are to be stored by using .js files and in order to use them in the HTML file we have to include them in this way:

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

DemoController.js: JavaScript `

// Here the Component name is DemoComponent // so saving the file as DemoComponent.js 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 () {
    <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>s</mi><mi>c</mi><mi>o</mi><mi>p</mi><mi>e</mi><mi mathvariant="normal">.</mi><mi>c</mi><mi>h</mi><mi>o</mi><mi>i</mi><mi>c</mi><mi>e</mi><mo>=</mo><mi mathvariant="normal">&quot;</mi><mi>Y</mi><mi>o</mi><mi>u</mi><mi>r</mi><mi>c</mi><mi>h</mi><mi>o</mi><mi>i</mi><mi>c</mi><mi>e</mi><mi>i</mi><mi>s</mi><mo>:</mo><mi mathvariant="normal">&quot;</mi><mo>+</mo></mrow><annotation encoding="application/x-tex">scope.choice = &quot;Your choice is: &quot; + </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal">sco</span><span class="mord mathnormal">p</span><span class="mord mathnormal">e</span><span class="mord">.</span><span class="mord mathnormal">c</span><span class="mord mathnormal">h</span><span class="mord mathnormal">o</span><span class="mord mathnormal">i</span><span class="mord mathnormal">ce</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord">&quot;</span><span class="mord mathnormal" style="margin-right:0.22222em;">Y</span><span class="mord mathnormal">o</span><span class="mord mathnormal">u</span><span class="mord mathnormal">rc</span><span class="mord mathnormal">h</span><span class="mord mathnormal">o</span><span class="mord mathnormal">i</span><span class="mord mathnormal">ce</span><span class="mord mathnormal">i</span><span class="mord mathnormal">s</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">:</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.7778em;vertical-align:-0.0833em;"></span><span class="mord">&quot;</span><span class="mord">+</span></span></span></span>scope.mychoice;
};

});

Module-name: DemoApp.js:

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

index.html file: HTML `

Modules and Controllers in Files

GeeksforGeeks

AngularJS Modules

Using controllers in Module

<div ng-app="DemoApp" 
     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>

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:

Creating a module as we did earlier:

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

Creating a directive:

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

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

HTML `

Modules and Controllers in Files

<script src=

"" title="undefined" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

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

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.