Modules

A module in AngularJS is a container of the different parts of an application such as controller, service, filters, directives, factories etc. It supports separation of concern using modules.
AngularJS stops polluting global scope by containing AngularJS specific functions in a module.
. We define modules in separate js files and name them as per the module.js file. In this example we're going to create two modules.

Application Module:
An AngularJS application must create a top level application module. This application module can contain other modules, controllers, filters, etc.
The angular object's module() method is used to create a module. It is also called AngularJS function angular.module.
Syntax:-

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Example: Create Application Module.
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
@* HTML content *@
<script>
var myApp = angular.module('myApp', []);

    </script>
</body>
</html>          

In the above example, the angular.module() method creates an application module, where the first parameter is a module name which is same as specified by ng-app directive.The second parameter is an array of other dependent modules []. In the above example we are passing an empty array because there is no dependency.
Note: The angular.module() method returns specified module object if no dependency is specified. Therefore, specify an empty array even if the current module is not dependent on other module.
Now, you can add other modules in the myApp module.
The following example demonstrates creating controller module in myApp module.

How to add controller to a module

<!DOCTYPE html>
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
{{message}}
</div>
<script>
var myApp = angular.module("myApp", []);

        myApp.controller("myController", function ($scope) {
$scope.message = "Hello Angular World!";
});
</script>
</body>
</html>

Controller Module other Example
If you want to add a controller to your application refer to the controller with the ng-controller directive.
See this example:

<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "D.G";
$scope.lastName = "Prasad";
});
</script>
</body>
</html>

How to add directive to a module

AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications.
Following is a list of AngularJS directives:


Directive

Description

ng-app

It defines the root element of an application.

ng-bind

It binds the content of an html element to application data.

ng-bind-html

Itbinds the innerhtml of an html element to application data, and also removes dangerous code from the html string.

ng-bind-template

It specifies that the text content should be replaced with a template.

ng-blur

It specifies a behavior on blur events.

ng-change

It specifies an expression to evaluate when content is being changed by the user.

ng-checked

It specifies if an element is checked or not.

ng-class

It specifies css classes on html elements.

ng-class-even

It is same as ng-class, but will only take effect on even rows.

ng-class-odd

It is same as ng-class, but will only take effect on odd rows.

ng-click

It specifies an expression to evaluate when an element is being clicked.

ng-cloak

It prevents flickering when your application is being loaded.

ng-controller

It defines the controller object for an application.

ng-copy

It specifies a behavior on copy events.

ng-csp

It changes the content security policy.

ng-cut

It specifies a behavior on cut events.

ng-dblclick

It specifies a behavior on double-click events.

ng-disabled

It specifies if an element is disabled or not.

ng-focus

It specifies a behavior on focus events.

ng-form

It specifies an html form to inherit controls from.

ng-hide

It hides or shows html elements.

ng-href

It specifies a URL for the <a> element.

ng-if

It removes the html element if a condition is false.

ng-include

It includes html in an application.

ng-init

It defines initial values for an application.

ng-jq

It specifies that the application must use a library, like jQuery.

ng-keydown

It specifies a behavior on keydown events.

ng-keypress

It specifies a behavior on keypress events.

ng-keyup

It specifies a behavior on keyup events.

ng-list

It converts text into a list (array).

ng-model

It binds the value of html controls to application data.

ng-model-options

It specifies how updates in the model are done.

ng-mousedown

It specifies a behavior on mousedown events.

ng-mouseenter

It specifies a behavior on mouseenter events.

ng-mouseleave

It specifies a behavior on mouseleave events.

ng-mousemove

It specifies a behavior on mousemove events.

ng-mouseover

It specifies a behavior on mouseover events.

ng-mouseup

It specifies a behavior on mouseup events.

ng-non-bindable

It specifies that no data binding can happen in this element, or it's children.

ng-open

It specifies the open attribute of an element.

ng-options

It specifies <options> in a <select> list.

ng-paste

It specifies a behavior on paste events.

ng-pluralize

It specifies a message to display according to en-us localization rules.

ng-readonly

It specifies the readonly attribute of an element.

ng-repeat

It defines a template for each data in a collection.

ng-required

It specifies the required attribute of an element.

ng-selected

It specifies the selected attribute of an element.

ng-show

It shows or hides html elements.

ng-src

It specifies the src attribute for the <img> element.

ng-srcset

It specifies the srcset attribute for the <img> element.

ng-style

It specifies the style attribute for an element.

ng-submit

It specifies expressions to run on onsubmit events.

ng-switch

It specifies a condition that will be used to show/hide child elements.

ng-transclude

It specifies a point to insert transcluded elements.

ng-value

It specifies the value of an input element.

 

How to add directives:

    <html> 
<script src="angular.min.js"></script> 
<body> 

<div ng-app="myApp" vis-directive></div> 
<script> 
var app = angular.module("myApp", []); 
app.directive("visDirective", function() { 
return { 
template : "This is a directive constructor. " 
}; 
}); 
</script> 
</body> 
</html> 

Modules in separate files:

In the controller example shown above, we created application module and controller in the same HTML file. However, we can create separate JavaScript files for each module as shown below.
1)save moduleseperate.html
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
{{message}}
</div>
<script src="app.js" ></script>
<script src="myController.js" ></script>
</body>
</html>
2) save app.js

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

3)save myController.js

myApp.controller("myController", function ($scope) {
    $scope.message = "Hello VisionComputers!";
});

Other Example(Modules and controllers in file)

In AngularJS applications, you can put the module and the controllers in JavaScript files.
In this example, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:
1)<html> 
<script src="angular.min.js"></script> 
<body> 
<script src="myApp.js"></script> 
<script src="myCtrl.js"></script> 
</body> 
</html> 

  1. Here "myApp.js" contains:

app.controller("myCtrl", function($scope) { 
$scope.firstName    = "Vision"; 
$scope.lastName= "Computers"; 
}); 
3)Here "myCtrl.js" contains:
<div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 
</div>
This example can also be written as:
<!DOCTYPE html> 
<html> 
<body> 
<script src="angular.min.js"></script> 
<div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 
</div> 
<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
$scope.firstName = "Vision"; 
$scope.lastName = "Computers"; 
}); 
</script> 
</body> 
</html> 

 

 

For
More Explanation
&
Online Classes

Contact Us:
+919885348743