What is AngularJS Directives

 

 

 

 

 

AngularJS Directives are used to change or control the behavior of HTML elements. We can modify inner text, inner html. This is also used to limit the functionalities of HTML elements.

These are nothing but extended attributes of HTML, prefixed with ng-.  We can define our own custom directives as well. Few most useful directives are listed below:

ng-app : This directive is used to initialize AngularJS application.

ng-init : This directive is used to initialize application data.

ng-model : This directive is used to bind the value of HTML control to application data.

Let’s understand various AngularJS directives with examples:

  1. ng-app

This directive indicates root HTML element to AngularJS. It automatically initializes the application when the page is loaded. Everything regarding to AngularJS in is the scope of this directive. If there are more than one ng-app directive, then first one is considered and its inner content is represented as AngularJS Code.

We provide a module name to AngularJS application, which is further used in the JavaScript for handling the application e.g. here module name is ‘angularJSApp’.

Note: Module Name is Optional

2. ng-bind

ng-bind directive changes the content of associated HTML element by the value of expression. If the value of expression changes, content of HTML element is also changed without page refresh.

This can be used in two ways shown above.

ng-bind=”smText”

or

class = “ng-bind: smText”

Output

3. ng-bind-html

ng-bind is used to provide text as inner content whereas if we have requirement and want to provide or modify insecure scripted inner HTML content then ng-bind-html is the best way to use. Using this directive, we can update or add inner HTML of associated HTML element. Lets see the example below:

Three points are very important in the above example which are marked using arrows.

  • There must be reference to angular-sanitize.js
  • AngularJS directive ng-bind-html will be used to inject inner HTML
  • A parameter ‘ngSanitize’ must be provided to module API for making this functional.

Output

4. ng-bind-template

This directive is used in case we want to bind more than one expressions to a HTML element. We provide template expression and evaluated value is displayed on web page as element’s inner text.

Output

To be Continued…

Be  Connected…

Satyendra Mishra

 

 

 

 

THREE QUERIES offers easy access to information about business, management, technology and spirituality that helps people and has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing projects of all kinds. With weekly exclusive updates, we keep you in touch with the latest business, management, technology and spirituality thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *