Directives of AngularJS

the angularjs directives that extends html

AngularJS Directives - References
AngularJS Directives - References

AngularJS as an open source javascript framework with a lot of built-in library of directives

Since as said above About AngularJS, there are many characteristics and functions(role) AngularJS plays mainly in one-page web application if not all.

It is easy and plain to understand and more professional to use AngularJS that’s why many web developers and Designers are falling in love with AngularJS

AngularJS a  JavaScript framework that wires up dynamic activities on the client side while been a cross-browser compliant.

Main features of AngularJS includes the below

Data-binding, scope, controller, services, filters, directives, templates, routing, modelling, dependency injection, Deep linking

Purposely AngularJS Directives is our main deal on this post

In this post we are going to concentrate much more on the 4 basic directives of AngularJS though we have as many as possible angularjs directives. Below are the four(4) basic directives of AngularJS

  1. ng-app
  2. ng-init
  3. ng-model
  4. ng-bind

Note: AngularJS have as many builtin directives but we mention only (4) four here but will update the rest in our example and references of AngularJS Directives.

Example of AngularJS Directives

<html ng-app>
<title>AngularJS Directives</title>
<script src = ""></script>

<section ng-init="fullName='Shopinson Mainlion'">
<p>Names: <input type="text" ng-model="fullName"></p>
<p>You typed: ❴❴ fullName }}</p>



Explanation of the example above

The angularjs expression above ❴❴ fullName }} is used alternatively to data binding directive of angularjs ng-bind. The expression ❴❴ fullName }} confines with ng-model="fullName" .

Result of the example above

Another example of AngularJS directives

The below example shows the data binding and modelling directives of an AngularJS in two variables.

<section ng-init="quantities=2;prices=10">
Quantity: <input type="number" ng-model="quantities">
Costs:    <input type="number" ng-model="prices">
Total Amount: ❴❴ quantities * prices }}


CREATIvity Is an Act of Being a deSIGNER or deveLOPER. Without being creative one is a Dummy so therefore a script framework library like AngularJS if it cannot be modified by a developer to suit their needs then it’s not suitable to be licensed an OPEN SOURCE framework.

All I mean to express is that AngularJS directives can be created (custom directives) apart from the built-in directives.

In the new post you will see review or basically a way of creating a custom AngularJS Directives.

Since you can create a custom AngularJS Directives to suit your need or desire in the application you are developing then I bet you will be falling in Love with AngularJS and its creativity (application).


Please enter your comment!
Please enter your name here