It is a known fact that AngularJS extends HTML vocabulary for your application. AngularJS lets you write write custom directives, letting you to extend HTML with new tags and attributes. Directives can be reused inside and across projects and verified, maintained, and re-used in various projects.
If properly implemented, they can be improved and re-deployed with slight or no change to the applications that use them.
To give you a better understanding what I mean here let me start with a bare HTML code:
AngularJS Extends HTML
AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.
AngularJS starts when the web page has been loaded. The ng-app directive states AngularJS that the div element is the "owner" of an AngularJS app. The ng-model directive attaches the value of the input field to the application variable name. The ng-bind directive attaches the innerHTML of the p element to the application variable name.
AngularJS Directives
AngularJS lets you extend HTML with new attributes called Directives. AngularJS has a suite of in-built directives which adds features to your web app. AngularJS also lets you state your own directives.
AngularJS directives are HTML attributes with an ng prefix. The ng-app directive prepares an AngularJS application. The ng-init directive prepares application data. The ng-model directive attached the value of HTML controls to app data.
The ng-app directive also tells AngularJS that the div element is the "owner" of the AngularJS application.
The {{ firstName }} expression is a data binding expression. Data binding in AngularJS attaches AngularJS expressions with AngularJS data. Here {{ firstName }} is bound with ng-model="firstName". In the following example, two text fields are together with two ng-model directives:
Repeating HTML Elements
The ng-repeat directive, as the name sounds, repeats elements of HTML:
The ng-repeat directive essentially duplicates HTML elements once for each item in a group.
The ng-app Directive
The ng-app directive outlines the root element of an AngularJS app. The ng-app directive shall routinely prepare the application when a web page is loaded.
The ng-init Directive
The ng-init directive outlines initial values for an AngularJS application. Usually, you will not use ng-init. You will use a controller or module in its place.
The ng-model Directive
The ng-model directive attaches the value of HTML controls (input, select, textarea) to app data.
Creating New Directives
In addition to all the built-in AngularJS directives, you can generate your own directives. New directives are fashioned around .directive function. To raise the new directive, name an HTML element with the same tag as the new directive.
A directive must use a camel case name, w3TestDirective, but when raising it, you must use—detached name, w3-test-directive:>
You can invoke a directive by using:
Restrictions
You can restrict a directive to be invoked by only and only some methods. By adding a restrict property with the value "A", the directive can only be raised by attributes:
The ng-model Directive
With the ng-model directive you can attach a value of an input field to a JavaScript variable.
Two-Way Binding
A change in model reflects in the view, and a change in view, updates the model to it. This happens instantaneously and automatically, which assures that the model and the view are in sync all the time for robust web apps.
Validate User Input
The ng-model directive can offer type authentication for application data (number, e-mail, required):
In the instance above, the span will be showed only if the expression in the ng-show attribute creates true.
Application Status
The ng-model directive can provide status for application data (invalid, dirty, touched, error):
AngularJS Controller
Controllers control applications in AngularJS. Because of the immediate synchronization of the model and the view, the controller can be completely separated from the view, and simply concentrate on the model data. Thanks to the data binding in AngularJS, the view will reflect any changes made in the controller.
