AngularJS – Modules

AngularJS supports modular approach. Modules are used to separate logics say controllers, services, application etc and keep the code clean. It is define in separate js file. The controllers always belong to a module.

Creating a Module

The angular.module function helps to create a module in angularjs.

...




The “myApplicaion” parameter refers to an HTML element in which the application will run.
Now you can add controllers, directives, filters, and more, to your AngularJS application.

Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive:

Example





{{ firstName + " " + lastName }}




The output of the above example like: Pritty Times

Adding a Directive

AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications.

The angularjs directives are described bellow:




sl no: Directive Description
1 ng-value It helps to specifies the value of an input element or a select element.
Syntax:
<input ng-value=”expression”&gt</input&gt
2 ng-bind It helps to bind the content of an html element to angularjs application data. It also helps to to replace the content of an HTML element with the value of a given variable, or expression.
Syntax:

<element ng-bind=”expression”></element>
3 ng-bind-html It helps to binds the inner html of an html element to application data, and also removes dangerous code from the html string.
Syntax:

<element ng-bind-html=”expression”></element>
4 ng-bind-template It helps to specifies that the text content should be replaced with a template.
Syntax:

<element ng-bind-template=”expression”></element>
5 ng-blur It helps to specifies a behavior on blur events.
Syntax:

<element ng-blur=”expression”></element>
6 ng-change It helps to specifies an expression to evaluate when content is being changed by the user.
Syntax:

<element ng-change=”expression”></element>
7 ng-checked It helps to specifies if an element is checked or not.
Syntax:

<input type=”checkbox|radio” ng-checked=”expression”></input>
8 ng-class It helps to specifies css classes on html elements.
Syntax:

<element ng-class=”expression”></element>

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

<element ng-class-even=”expression”></element>
10 ng-class-odd It is same as ng-class, but will only take effect on odd rows.
Syntax:

<element ng-class-odd=”expression”></element>
11 ng-click It helps to specifies an expression to evaluate when an element is being clicked.
Syntax:

<element ng-click=”expression”></element>
12 ng-cloak It helps to prevents flickering when your application is being loaded.
Syntax:

<element ng-cloak></element>
13 ng-controller It helps to defines the controller object for an application.
Syntax:

<ng-controller=”expression”></element>
14 ng-copy It helps to specifies a behavior on copy events.
Syntax:

<element ng-copy=”expression”></element>

15 ng-csp It helps to changes the content security policy.
Syntax:

<element ng-csp=”no-unsafe-eval | no-inline-style”></element>
16 ng-cut It helps to specifies a behavior on cut events.
Syntax:

<element ng-cut=”expression”></element>
17 ng-dblclick It helps to specifies a behavior on double-click events.
Syntax:

< ng-dblclick=”expression”></element>
18 ng-disabled It helps to specifies if an element is disabled or not.
Syntax:

<input ng-disabled=”expression”></input>
19 ng-focus It helps to specifies a behavior on focus events.
Syntax:

<element ng-focus=”expression”></element>
20 ng-form It helps to specifies an html form to inherit controls from.
21 ng-hide It helps to hides or shows html elements.
Syntax:

<element ng-hide=”expression”></element>
22 ng-href It helps to specifies a URL for the element.
Syntax:

<a ng-href=”string”></a>
23 ng-if It helps to removes the html element if a condition is false.
Syntax:

<element ng-if=”expression”></element>
24 ng-include It helps to includes html in an application.
25 ng-init It helps to defines initial values for an application.
Syntax:

<element ng-init=”expression” ></element>
26 ng-jq It helps to specifies that the application must use a library, like jQuery.
27 ng-keydown It helps to specifies a behavior on keydown events.
Syntax:

<element ng-keydown=”expression” ></element>
28 ng-keypress It helps to specifies a behavior on keypress events.
Syntax:

<element ng-keypress=”expression” ></element>
29 ng-keyup It helps to specifies a behavior on keyup events.
Syntax:

<element ng-keyup=”expression” ></element>
30 ng-list It helps to converts text into a list (array).
Syntax:

<element ng-list=”separator”></element>
31 ng-model It helps to binds the value of html controls to application data.
32 ng-model-options It helps to specifies how updates in the model are done.
Syntax:

<element ng-model-options=”option”></element>
33 ng-mousedown It helps to specifies a behavior on mousedown events.
Syntax:

<element ng-mousedown=”expression” ></element>
34 ng-mouseenter It helps to specifies a behavior on mouseenter events.
Syntax:

<element ng-mouseenter=”expression” ></element>
35 ng-mouseleave It helps to specifies a behavior on mouseleave events.
Syntax:

<element ng-mouseleave=”expression” ></element>
36 ng-mousemove It helps to specifies a behavior on mousemove events.
Syntax:

<element ng-mousemove=”expression” ></element>
37 ng-mouseover It helps to specifies a behavior on mouseover events.
Syntax:

<element ng-mouseover=”expression” ></element>
38 ng-mouseup It helps to specifies a behavior on mouseup events.
Syntax:

<element ng-mouseup=”expression”></element>
39 ng-non-bindable It helps to specifies that no data binding can happen in this element, or it is children.
Syntax:

<element ng-non-bindable ></element>
40 ng-open It helps to specifies the open attribute of an element.
Syntax:

<details ng-open=”expression” >….</details>
41 ng-options It helps to specifies &glt;options< in a &glt;select< list.
Syntax:

<select ng-options=”array expression”></select>
42 ng-paste It helps to specifies a behavior on paste events.
Syntax:

<element ng-paste=”expression”></element>
43 ng-pluralize It helps to specifies a message to display according to en-us localization rules.
44 ng-readonly It helps to specifies the readonly attribute of an element.
Syntax:

<input ng-readonly=”expression” ></input>
45 ng-repeat It helps to defines a template for each data in a collection.
Syntax:

<element ng-repeat=”expression” ></element>
46 ng-required It helps to specifies the required attribute of an element.
Syntax:

<input ng-required=”expression” ></input>
47 ng-selected It helps to specifies the selected attribute of an element.
Syntax:

<option ng-selected=”expression”></option>
48 ng-show It helps to shows or hides html elements.
Syntax:

<element ng-show=”expression”></element>
49 ng-src It helps to specifies the src attribute for the <img> element.
Syntax:

<ng-src></img>
50 ng-srcset It helps to specifies the srcset attribute for the <img> element.
Syntax:

<img ng-srcset=”string” ></img>
51 ng-style It helps to specifies the style attribute for an element.
Syntax:

<element ng-style=”expression” ></element>
52 ng-submit It helps to specifies expressions to run on onsubmit events.
Syntax:

<form ng-submit=”expression” ></form>
53 ng-switch It helps to specifies a condition that will be used to show/hide child elements.
Syntax:

<element ng-switch=”expression”>
<element ng-switch-when=”value”></element>
<element ng-switch-when=”value”></element>
<element ng-switch-when=”value”></element>
54 ng-transclude It helps to specifies a point to insert transcluded elements.

Leave a Reply

Your email address will not be published. Required fields are marked *