Thursday 1 October 2020
  • :
  • :

What Is Directive In AngularJS

Hi, everybody! I am glad that you are reading my new post. Nowadays everybody wants to be aware of the IT industry even a little. A lot of things we do online these days, so many of us want to know some information about frontend development. AngularJS is one of the most popular frameworks and that is why a great number of you want to find out how to use it. Therefore, today I would like to give you a piece of information about directives in AngularJS.

So, what are directives in AngularJS? They are definitely one of the most important components in this framework. Directives help us to increase the fundamental HTML elements or attributes and compose codes which can be reusable and testable.

So, directives are specific symbols which begin with ng- prefix. Let’s discuss the main inline directives:

  1. ng-app

The AngularJS application is started by this directive. It determines the root element. It initializes or loads the application automatically once the web page, which contains the AngularJS application, is loaded. Furthermore, you can use it to load different AngularJS modules in AngularJS applications.

  1. ng-form

This directive gives an opportunity to build control groups inside a form directive. You can use these “child forms”, for instance, to define the truth of a sub-group of controls.

  1. ng-init

These attributes initialize app data. With its help, you can assign values to variables.

  1. ng-change

Evaluate this directive when the user relays the input data. The term is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a transformation (typically, when the user leaves the elements of the form or presses the return key).

  1. ng-model

This directive determines the model or variable, which can be used in the AngularJS app.

  1. ng-disabled

Directive ‘ng-disabled’ puts the disabled symbol on the element (usually a form control, for example, input, select, button and so on) if the term inside this directive evaluates to truth.

  1. ng-repeat

These attributes repeat HTML elements for every element in the collection.

  1. ng-bind

With the help of this directive, you can bind AngularJS app data to HTML tags.

  1. ng-controller

The directive ‘ng-controller’ joins a controller class with the view. This is the main side of how AngularJS maintains the principles of the Model-View-Controller (MVC) design pattern.

  1. ng-nonBindable

This directive determines AngularJS not to compile or bind the text of the current DOM element, including directives on the element itself that have lower precedence than ng-nonBindable. This is helpful when the element includes what turns up to be AngularJS directives and bindings but which should be overlooked by AngularJS. For example, this can be the case if you have a site that demonstrates fragments of code.

Besides, in AngularJS Development you have a possibility to create your own directives. AngularJS at the time of loading detects matching elements and implements a one-time operation using the compile () method of the custom directive, then work out the element using the link () method of the custom directive based on the directive’s scope. Also, directives describe a behavior change or DOM transformation of a model associated with a custom attribute, element name, or CSS class. AngularJS provides support for creating custom directives for the following element types.

  • Element directives: A directive is got going when a matching element is encountered.
  • Attribute: The directive is got going when a matching attribute is found.
  • CSS: The directive is got going when a matching CSS style is encountered.
  • Comment: The directive is got going when a corresponding comment is encountered.

So, today you have found out some information about directives in AngularJS. Without knowledge about directives, you can never work with this framework. I hope that this post was very interesting and entertaining for you. Wish you all the best! Stay home, be healthy! Bye!