Views with Templates and Directives

HTML webpages are based on a DOM where 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 webpage, 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 values such as adding/changing elements to a table or menu.

AngularJS introduces a new concept of combining templates with directives to build an HTML view that is presented to a user. 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 an HTML template indicates the intended logic with a directive. Also, the built-in AngularJS directives handle most of the necessary DOM manipulation functionality that you need to implement to bind the data in the scope to a 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.