How AngularJS extends HTML?
Tags: angular, web
Published: 2018-04-25 11:45:02

---
title: How AngularJS extends HTML?
published: True
tags: AngularJS,Web
canonical_url: http://www.peerbits.com/blog/extending-html-with-angularjss-directives.html
---

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.

![angularjs extends html main](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-main.jpg)

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](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-1.jpg)

## 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 extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-2.jpg)

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.

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-3.jpg)

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:

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-4.jpg)

## Repeating HTML Elements

The ng-repeat directive, as the name sounds, repeats elements of HTML:

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-5.jpg)

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.

[![angularjs extends html cta](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-cta-2.jpg)](https://www.peerbits.com/blog/react-vs-angular-which-one-popular-javascript-developers.html)

## 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:\>

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-6.jpg)

You can invoke a directive by using:

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-7.jpg)

## 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:

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-8.jpg)

## The ng-model Directive

With the ng-model directive you can attach a value of an input field to a JavaScript variable.

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-9.jpg)

## 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.

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-10.jpg)

## Validate User Input

The ng-model directive can offer type authentication for application data (number, e-mail, required):

![angularjs extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-11.jpg)

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 extends html](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-12.jpg)

## AngularJS Controller

[Controllers control applications in AngularJS](https://www.peerbits.com/blog/reasons-behind-growing-popularity-of-angularjs.html). 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.

[![Technologies supply chain cta1](https://peerbits.com/wp-content/uploads/2018/04/angularjs-extends-html-cta-1.jpg)](https://www.peerbits.com/request-quote.html)

The post [How AngularJS extends HTML?](http://www.peerbits.com/blog/extending-html-with-angularjss-directives.html) appeared first on [Peerbits](http://www.peerbits.com).