AngularJS Directives

Directives are markers on a DOM element that tell AngularJS to attach a specified behavior
to that DOM element or even transform the DOM element and its children. In short, it
extends the HTML.

Most of the directives in AngularJS are starting with ng- where ng stands for Angular.
AngularJS includes various built-in directives.

In addition to this, you can create custom directives for your application.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Directive Description
ng-app Auto bootstrap AngularJS application.
ng-init Initializes AngularJS variables
ng-model Binds HTML control's value to a property on the $scope object.
ng-controller Attaches the controller of MVC to the view.
ng-bind Replaces the value of HTML control with the value of specified AngularJS expression.

ng-repeat Repeats HTML template once per each item in the specified collection.

ng-show Display HTML element based on the value of the specified expression.

ng-readonly Makes HTML element read-only based on the value of the specified expression.

ng-disabled Sets the disable attribute on the HTML element if specified expression evaluates to
true.
ng-if Removes or recreates HTML element based on an expression.
ng-click Specifies custom behavior when an element is clicked.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ng-app

The ng-app directive initializes AngularJS and makes the specified element a root element
of the application.

ng-init

The ng-init directive can be used to initialize variables in AngularJS application.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ng-model

The ng-model directive is used for two-way data binding in AngularJS.

It binds <input>, <select> or <textarea> elements to a specified property on the $scope

So, the value of the element will be the value of a property and vica-versa.

Note : Variables initialized in ng-init are different from the properties defined using ng-
model directive. The variables initialized in ng-init are not attached to $scope object
whereas ng-model properties are attached to $scope object.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ng-bind

The ng-bind directive binds the model property declared via $scope or ng-model
directive or the result of an expression to the HTML element.

It also updates an element if the value of an expression changes.

ng-repeat

The ng-repeat directive repeats HTML once per each item in the specified array
collection.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ng-if
The ng-if directive creates or removes an HTML element based on the Boolean value
returned from the specified expression. If an expression returns true then it recreates an
element otherwise removes an element from the HTML document.

ng-readonly
The ng-readonly directive makes an HTML element read-only, based on the Boolean
value returned from the specified expression. If an expression returns true then the
element will become read-only, otherwise not.

ng-disabled
The ng-disabled directive disables an HTML element, based on the Boolean value
returned from the specified expression. If an expression returns true the element will be
disabled, otherwise not.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Directive Syntax

AngularJS directives can be applied to DOM elements in many ways. It is not mandatory to
use ng- syntax only.

Directive can start with x- or data-, for example ng-model directive can be written as data-
ng-model or x-ng-model.

Also, the - in the directive can be replaced with : or _ or both. For example, ng-model can
be written as ng_model or ng:model. It can also be a mix with data- or x-.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 AngularJS Controller

The controller in AngularJS is a JavaScript function that maintains the application data and
behavior using $scope object.

You can attach properties and methods to the $scope object inside a controller function,
which in turn will add/update the data and attach behaviors to HTML elements. The
$scope object is a glue between the controller and HTML.

The ng-controller directive is used to specify a controller in HTML element, which will add
behavior or maintain the data in that HTML element and its child elements.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Attach Behaviors

You can attach multiple methods to the scope object inside a controller, which can be
used as an event handler or for other purposes.

Attach Complex object

Nested Controllers
Angular allows nested controllers.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Minification Syntax

All the script files in AngularJS application should be minified in the production
environment.

The minification process shortens parameter and function names. As mentioned before,
AngularJS controller function may include $scope or other parameters. If minification
process changes the parameter names then AngularJS application will break because
Angular framework needs the same parameter name for built-in objects such as $scope.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video