# Developer Guide: Understanding Angular Templates

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

An angular template is the declarative specification that, along with information from the model and controller, becomes the rendered view that a user sees in the browser. It is the static DOM, containing HTML, CSS, and angular-specific elements and angular-specific element attributes. The angular elements and attributes direct angular to add behavior and transform the template DOM into the dynamic view DOM.

These are the types of angular elements and element attributes you can use in a template:

- Directive â An attribute that augments an existing DOM element.
- Widget â A custom DOM element. An example of a built-in widget is `ng:repeat`.
- Markup â Shorthand for a widget or a directive. The double curly brace notation `{{ }}` to bind expressions to elements is built-in angular markup.
- Filter â Formats your data for display to the user.
- Validator â Lets you validate user input.
- Formatter â Lets you format the input object into a user readable view.

Note: In addition to declaring the elements above in templates, you can also access these elements in JavaScript code.

The following code snippet shows a simple angular template made up of standard HTML tags along with angular directives, markup, and expressions:

    <html>
     <!-- Body tag augmented with ng:controller directive  -->
     <body ng:controller="MyController">
       <input name="foo" value="bar">
       <!-- Button tag with ng:click directive, and
              string expression 'buttonText'
              wrapped in "{{ }}" markup -->
       <button ng:click="changeFoo()">{{buttonText}}</button>
       <script src="angular.js" ng:autobind>
     </body>
    </html>

In a simple single-page app, the template consists of HTML, CSS, and angular directives contained in just one HTML file (usually `index.html`). In a more complex app, you can display multiple views within one main page using "partials", which are segments of template located in separate HTML files. You "include" the partials in the main page using the `$route` service in conjunction with the `ng:view` directive. An example of this technique is shown in the angular tutorial, in steps seven and eight.

### Related Topics

- Angular Filters
- Angular Formatters
- Angular Validators

### Related API

- API Reference