EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Directives
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS Directives

By Priya PedamkarPriya Pedamkar

AngularJS Directives

What is AngularJS?

AngularJS is one of the most popular JavaScript-based web frameworks used in front end development. In addition, it is used in the development of Single Page Applications (SPAs). AngularJS is an open-source framework that is mainly maintained by Google and by a community of individuals involved in resolving problems faced in single page application development. In this topic, we are going to learn about AngularJS Directives.

AngularJS is nothing but it extends the existing HTML; It is added in HTML page with <script> tag. AngularJS makes the HTML site more responsive to user actions by adding additional attributes easily. The latest stable version of AngularJS is 1.6.x as of now.

Directives of AngularJS

AngularJS is an efficient framework that supports Model-View-Controller (MVC) based architecture. In addition, it provides core features such as two-way data binding, Controller, Services, Directives, Templates, Router, Filters, Dependency Injection, etc. These all are the main features that work collaboratively to make AngularJS efficient.

The directive is one of the very useful features in AngularJS. It extends the existing HTML and easily develops web pages with new behaviour using core JavaScript. Furthermore, it allows us to write our own custom tags and map them into existing HTML. This functionality gives more freedom and allows developers great flexibility in creating and using custom elements in web applications accordingly. Also, they can design their own directives too. This article will mainly focus on AngularJS Directives and try to gain knowledge of this core feature.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Directives are nothing but markers on DOM elements in HTML such as attribute name, element name, CSS class or comment. The compiler of AngularJS then attaches the specified behaviour to that element. Each directive has a name and starts with ‘ng-’. Each directive can decide where it can be used in DOM elements. There are some existing directives that are already available in AngularJS, and similarly, we can define them on our own.

We will have a look at three main in-built directives, which divide the AngularJS framework into three major parts.

1. ng-app: This directive tells the compiler that this is the AngularJS application. The directive where it is defined in DOM becomes the root element of the application.

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
<body>
<div ng-app = "">
<! -- main code -->
</div>
</body>
</html>

AngularJS is available as JavaScript file and is added into HTML using <script> tag. The ng-app at <div> element tells AngularJS that div is the root element and owner of the AngularJS application. AngularJS application starts from that element, and whatever is AngularJS code is written inside of it.

2. ng-model: This directive binds the value from the web page, mostly from the input field, to the application variable. Basically, this directive allows sending data from input to AngularJS application which can be used somewhere else.

Code:

<body>
<div ng-app = "">
<p> Enter: <input type="text" ng-model = "input"> </p>
</div>
</body>

Output:

Angularjs

The ng-model directive binds the input value to the application variable named “input”. We will then see how we can display the same value on the web page in the next example.

3. ng-bind: This directive binds the value from the AngularJS application to the web page. i.e. It allows forwarding data from the application to HTML tags.

Code:

<body>
<div ng-app = "">
<p> Enter: <input type="text" ng-model = "input"> </p>
<p ng-bind = "input"> </p>
</div>
</body>

Output:

Angularjs

The data we captured using the “ng-model” directive in the application variable “input” is bound to tag element <p> using “ng-bind”. We can run this application now and see how dynamically AngularJS updates the entered value on the page.

Along with these, there are some other directives available in AngularJS, which are important.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,452 ratings)

4. ng-repeat: This directive repeats an HTML element and is used on an array of objects. This directive is very useful in scenarios like displaying table elements on a web page.

5. ng-init: This directive is used to initialize the values for the AngularJS application before it loads a web page.

Creating New Directives

We can create our own custom directives along with the existing available AngularJS directives. It is very easy to create new directives by using only JavaScript. New directives are created by using the “. directive” function. E.g.

<body ng-app = "appName">
<custom-Directive> </custom-Directive>
<script>
var app = angular.module("appName", []);
app.directive("customDirective", function() {
return {
template : "<h1> Welcome to AngularJS Directives..! </h1>"
};
});
</script>
</body>

Angular.module is an AngularJS function that creates a module. We have created a custom directive named custom directive for which function is written.  Whenever we use this directive on our web page, this function will get executed. In this case, it is a returning template that contains HTML code.

While naming directive, we need to use the camel case naming convention, and while invoking it, we need to use “-” separated naming convention.

There are 4 ways by which we can invoke directives

1. Element name

As used in the last example:

<custom-Directive> </custom-Directive>

2. Attribute

<div custom-Directive> </div>

3. Class

<div class="custom-Directive"> </div>

To invoke directive by using the class name, we must add restrict property with the value ‘C’ while defining it.

app.directive("customDirective", function() {
return {
restrict : “C”,
template : "<h1> Welcome to AngularJS Directives..! </h1>"
};
});

4. Comment

<! -- directive: custom-Directive -->

To invoke a directive by using a comment, we must add restrict property with the value ‘M’ while defining it.

app.directive("customDirective", function() {
return {
restrict : “M”,
replace: true,
template : " <h1> Welcome to AngularJS Directives..! </h1> "
};
});

The replace property: true is mandatory, and it will replace the original comment with a directive; otherwise, the comment would be invisible.

Conclusion

So, it is a very powerful feature available in AngularJS. The directive allows us to introduce new syntax, are like markers, and attach special behaviour to them. There are available directives in AngularJS, which are very useful; we can also define our own custom directives and use them. Custom directives allow developers great flexibility and freedom. Directives add new functionality into existing HTML with innovative style and features.

Recommended Articles

This is a guide to AngularJS Directives. Here we discuss the basic concept, three main in-built directives, which divide the AngularJS framework into three major parts. You may also have a look at the following articles to learn more –

  1. AngularJS Architecture
  2. HTML List Styles
  3. Controllers in AngularJS
  4. AngularJS Validation
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more