Improve this Doc

# Templates

In AngularJS, templates are written with HTML that contains AngularJS-specific elements and attributes. AngularJS combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.

These are the types of AngularJS elements and attributes you can use:

- Directive — An attribute or element that augments an existing DOM element or represents a reusable DOM component.
- Markup — The double curly brace notation `{{ }}` to bind expressions to elements is built-in AngularJS markup.
- Filter — Formats data for display.
- Form controls — Validates user input.

The following code snippet shows a template with directives and curly-brace expression bindings:

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

In a simple app, the template consists of HTML, CSS, and AngularJS 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" – segments of template located in separate HTML files. You can use the ngView directive to load partials based on configuration passed to the $route service. The AngularJS tutorial shows this technique in steps seven and eight.

## Related Topics

- Filters
- Forms

## Related API

- API Reference