Easy learning with example program codes

Angularjs add directive to module tutorial

AngularJS directive:

AngularJS directives are used to extend the functionality of HTML elements. AngularJS are the special attributes starting with ng- prefix.

AngularJS module:

An AngularJS module defines an application and used to separate logics like services, controllers and application etc. It acts as a container for the different parts of an application.

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. We create a module named app and then add a directive testDirective to it.


<!DOCTYPE html>
<div ng-app="myApp" test-directive></div>
var app = angular.module("myApp", []);
app.directive("testDirective", function() {
    return {
        template : "testDirective add to myApp module."

Try it:

JS Bin on

Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at


We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on

Copyright © 2019 CodesJava Protection Status SiteMap Reference: Java Wiki