{"id":46388,"date":"2019-01-02T10:07:36","date_gmt":"2019-01-02T04:37:36","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46388"},"modified":"2020-01-31T10:43:00","modified_gmt":"2020-01-31T05:13:00","slug":"angularjs-modules","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-modules\/","title":{"rendered":"How to Create AngularJS Modules?\u00a0| Types of Modules in AngularJS"},"content":{"rendered":"

In our last tutorial, we discussed Data Binding<\/strong><\/a>. Here, we will learn about AngularJS Modules.\u00a0An angular module is a container, which we use to create an application.\u00a0By containing specific functions in a module, AngularJS stops polluting global scope. Moreover, we will discuss how to create different types of modules in AngularJS.<\/p>\n

So, are you ready for AngularJS Modules?<\/p>\n

\"How<\/a>

How to Create AngularJS Modules\u00a0| Types of Modules in AngularJS<\/p><\/div>\n

1. What are AngularJS Modules?<\/h2>\n

An angular<\/a><\/strong> module is a container which we use to create an application.\u00a0By containing angularJS specific functions in a module, angular JS stops polluting global scope. In\u00a0AngularJS Modules, we can apply functionality of an application to the entire HTML page with the help of ng-directive.<\/p>\n

AngularJS modules is used to define functionalities or to add controllers, filters, directives<\/a><\/strong> etc to the angular application.\u00a0Also, make it easy to reuse in different applications.\u00a0Separation of concern using angular support\u00a0by using it.<\/p>\n

2. How to Create Modules in AngularJS?<\/h2>\n

Before we start our discussion on creating AngularJS modules, let’s study what will happen if there is no module in our application?<\/p>\n

Let\u2019s create a file Firstcontroller.js with the code<\/p>\n

Function Firstcontroller($scope) {\r\n    $scope.x=15;\r\n    $scope.y=2;\r\n    $scope.z=$scope.x - $scope.y;\r\n       });\r\n\r\n<\/pre>\n
The code written above will simply create a function \u201cFirstcontroller\u201d in our application. In the above controller, a simple subtraction operation is being performed and the result is being assigned to new variable z.<\/p>\n
Do you know Why AngularJS is Used?<\/a><\/strong><\/p>\n
After that create a simple HTML page \u201cdemo.html\u201d with the following code<\/p>\n
<body ng-app=\"\">\r\n      <div ng-controller=\"Firstcontroller\">\r\n      <h3> Result is:<\/h3>\r\n        {{c}}<\/pre>\n
In this code, we included the controller we created above, that is \u201cFirstcontroller\u201d and calling the value of $scope c through expression to get it displayed to a user.<\/p>\n
But, here the value of our ng-app is blank. It is like ng-app= \u201c \u201d.<\/p>\n
Here, it means all the controllers invokes within the context of ng-app directives will access globally.\u00a0There is no boundary to separate a number of controllers from each other. Now in case of modern-day programming, it prefers to attach controller with the module so that a logical boundary can be defined for a controller.<\/p>\n
Let\u2019s do the same code with a module.<\/p>\n
var sampleApp = angular.module('demo',[]);\r\nsampleApp.controller('Firstcontroller', function($scope) {\r\n          $scope.x=15;\r\n          $scope.y=2;\r\n          $scope.z=$scope.x - $scope.y;\r\n    });<\/pre>\n
Code explanation:<\/p>\n
var sampleApp = angular.module('demo',[]);<\/pre>\n
Here, an angular module \u201cdemo\u201d is created to perform the logical boundary for the functionality contains in this module.<\/p>\n
sampleApp.controller('Firstcontroller', function($scope)<\/pre>\n
By this line, we are attaching the controller with a module. It means if we want to access the functionality present in this module, we have to provide a reference of this module in our main HTML page.<\/p>\n
Main HTML page code<\/p>\n
<body ng-app=\"'Demo'\">\r\n    <div ng-controller=\"Firstcontroller\">\r\n    <h3> Result is:<\/h3>\r\n      {{c}}<\/pre>\n
Instead of blank, we provide a reference in the ng-app directive. By invoking its application module we can define functionalities in it.<\/p>\n
Therefore, we found:<\/p>\n