AngularJS Modules - What is meant by modules in Angular?

Published August 13, 2022

A module in AngularJS describes an application. It serves as a holding area for many components of your application, such as the controller, services, filters, and directives. AngularJS Main() method is implemented as a module. A module will always contain a controller.

Syntax

The following syntax shows the module of the AngularJS.

<div ng-app="conApp">

</div>

<script>

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

</script>

 

AngularJS Module examples - Creating Module in Angular

The examples show module functions examples in detail. While we load large data from any api/other services there we may require to load data, Lazy Loading in Angular with Angular Lazy Loading Modules

Example #1:

Basic module: the following example shows the AngularJS "module" features in web application.

<!DOCTYPE html>

<html lang="en">

<head>

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

</head>

<body ng-app = "conapp">

<h3> AngularJS Module Function </h3>

<div ng-controller = "idController" >

<h4> Welcome To {{first.title}} !</h4>

</div>

<script>

angular.module("conapp", [])

.controller("idController", function($scope) {

$scope.first = {};

$scope.first.title = "RRTutor Tutorial";

} );

</script>

</body>

</html>

Output

AngularJS Modules How to create Module in AngularJS

 

Example #2:

AngularJS module with variable: the following example shows the "module" method in web application.

<!DOCTYPE html>

<html lang="en">

<head>

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

</head>

<body ng-app = "conapp">

<h3> AngularJS Module Function </h3>

<div ng-controller = "idController" >

<h4> Welcome To {{first.title}} !</h4>

</div>

<script>

var  module_variable = angular.module("conapp", []);

module_variable.controller("idController", function($scope) {

$scope.first = {};

$scope.first.title = "AngularJS Tutorial";

} );

</script>

</body>

</html>

Output

AngularJS Modules How to create Module in AngularJS 2

 

Summary

The module is the function to connect with the controller and develop an AngularJS web application. This function uses for the controller, filtration, services, and other methods' functionality

Tags: creating module in angular, angular lazy loading modules, lazy loading in angular