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”></input> |
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. |