Views with Templates and Directives

HTML web pages are based on a DOM in which each HTML element is represented by a DOM object. A web browser reads the properties of a DOM object and knows how to render the HTML element on the web page, based on the DOM object’s properties.

Most dynamic web applications use direct JavaScript or a JavaScript-based library such as jQuery to manipulate a DOM object to change the behavior and appearance of the rendered HTML element in the user view.

AngularJS introduces a new concept of combining templates that contain directives which extend the HTML tags and attributes directly with JavaScript code in the background to extend the capability of HTML. Directives have two parts. The first part is extra attributes, elements, and CSS classes that are added to an HTML template. The second part is JavaScript code that extends the normal behavior of the DOM.

The advantage of using directives is that the intended logic for visual elements is indicated by the HTML template such that it is easy to follow and is not hidden within a mass of JavaScript code. One of the best features of AngularJS is that the built-in AngularJS directives handle most of the necessary DOM manipulation functionality that you need in order to bind the data in the scope directly to the HTML elements in the view.

You can also create your own AngularJS directives to implement any necessary custom functionality you need in a web application. In fact, you should use your own custom directives to do any direct DOM manipulation that a web application needs.