AngularJS Modules - What is meant by modules in Angular?
Learn about AngularJS modules, which hold controllers, services, filters, and directives to structure your application at rrtutors.com Check it out!
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
 |
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
 |
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