Angular directives

Simply put, directives are custom HTML elements. You write them like ordinary HTML elements, but their functionality is defined entirely programmatically. Thus, they extend the standard HTML syntax by letting us add whatever we need to it in order to build truly dynamic pages.

Creating directives

Like the services and controllers that we have already seen, directives are defined as components of modules, and AngularJS gives us the tools that are necessary to create them. We will explore this process by creating a directive for the map that we created earlier.

The first thing that we will need to do is create a new file named www/js/directives.js for the directives of our project. Create this file and add the following to it:

angular.module('supernav.directives', [])
.directive('map', function () {
  return {}
});

The directive module function is used to define a directive for a module, and as you might have guessed, its first parameter is the name of the directive itself, while...