Angularjs add directive to module tutorial

by

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.

Example:

<!DOCTYPE html>
<html>
<script 
 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
 
<div ng-app="myApp" test-directive></div>
 
<script>
var app = angular.module("myApp", []);
app.directive("testDirective", function() {
    return {
        template : "testDirective add to myApp module."
    };
});
</script>
 
</body>
</html>

Try it:

JS Bin on jsbin.com