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.
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: