AngularJS Module

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

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:

Test it Now

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:

DirectiveDescription
ng-appIt defines the root element of an application.
ng-bindIt binds the content of an html element to application data.
ng-bind-htmlItbinds the innerhtml of an html element to application data, and also removes dangerous code from the html string.
ng-bind-templateIt specifies that the text content should be replaced with a template.
ng-blurIt specifies a behavior on blur events.
ng-changeIt specifies an expression to evaluate when content is being changed by the user.
ng-checkedIt specifies if an element is checked or not.
ng-classIt specifies css classes on html elements.
ng-class-evenIt is same as ng-class, but will only take effect on even rows.
ng-class-oddIt is same as ng-class, but will only take effect on odd rows.
ng-clickIt specifies an expression to evaluate when an element is being clicked.
ng-cloakIt prevents flickering when your application is being loaded.
ng-controllerIt defines the controller object for an application.
ng-copyIt specifies a behavior on copy events.
ng-cspIt changes the content security policy.
ng-cutIt specifies a behavior on cut events.
ng-dblclickIt specifies a behavior on double-click events.
ng-disabledIt specifies if an element is disabled or not.
ng-focusIt specifies a behavior on focus events.
ng-formIt specifies an html form to inherit controls from.
ng-hideIt hides or shows html elements.
ng-hrefIt specifies a URL for the <a> element.
ng-ifIt removes the html element if a condition is false.
ng-includeIt includes html in an application.
ng-initIt defines initial values for an application.
ng-jqIt specifies that the application must use a library, like jQuery.
ng-keydownIt specifies a behavior on keydown events.
ng-keypressIt specifies a behavior on keypress events.
ng-keyupIt specifies a behavior on keyup events.
ng-listIt converts text into a list (array).
ng-modelIt binds the value of html controls to application data.
ng-model-optionsIt specifies how updates in the model are done.
ng-mousedownIt specifies a behavior on mousedown events.
ng-mouseenterIt specifies a behavior on mouseenter events.
ng-mouseleaveIt specifies a behavior on mouseleave events.
ng-mousemoveIt specifies a behavior on mousemove events.
ng-mouseoverIt specifies a behavior on mouseover events.
ng-mouseupIt specifies a behavior on mouseup events.
ng-non-bindableIt specifies that no data binding can happen in this element, or it's children.
ng-openIt specifies the open attribute of an element.
ng-optionsIt specifies <options> in a <select> list.
ng-pasteIt specifies a behavior on paste events.
ng-pluralizeIt specifies a message to display according to en-us localization rules.
ng-readonlyIt specifies the readonly attribute of an element.
ng-repeatIt defines a template for each data in a collection.
ng-requiredIt specifies the required attribute of an element.
ng-selectedIt specifies the selected attribute of an element.
ng-showIt shows or hides html elements.
ng-srcIt specifies the src attribute for the <img> element.
ng-srcsetIt specifies the srcset attribute for the <img> element.
ng-styleIt specifies the style attribute for an element.
ng-submitIt specifies expressions to run on onsubmit events.
ng-switchIt specifies a condition that will be used to show/hide child elements.
ng-transcludeIt specifies a point to insert transcluded elements.
ng-valueIt specifies the value of an input element.

How to add directives

See this example:

Test it Now

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:

Here "myApp.js" contains:

Here "myCtrl.js" contains:

This example can also be written as:

Test it Now



Latest Courses