In AngularJS, a module defines an application. It is a container for the different parts of your application like controller, services, filters, directives etc.
A module is used as a Main() method. Controller always belongs to a module.
How to create a module
The angular object’s module() method is used to create a module. It is also called AngularJS function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script> Here, “myApp” specifies an HTML element in which the application will run.
Now we can add controllers, directives, filters, and more, to AngularJS application.
How to add controller to a module
If you want to add a controller to your application refer to the controller with the ng-controller directive.
See this example:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 = "Ajeet";
$scope.lastName = "Maurya";
});
</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
See this example:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "This is a directive constructor. "
};
});
</script>
</body>
</html>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:
See this example:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html> app.controller("myCtrl", function($scope) {
$scope.firstName = "Ajeet";
$scope.lastName= "Maurya";
}); 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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 = "Ajeet";
$scope.lastName = "Maurya";
});
</script>
</body>
</html>
Leave a Reply