docs/content/guide/templates.ngdoc

@ngdoc overview
@name Templates
@sortOrder 260
@description

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

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

The following code snippet shows a template with {@link guide/directive directives} and
curly-brace {@link expression expression} bindings:

```html
<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
{@link ngRoute.directive:ngView ngView} directive to load partials based on configuration passed
to the {@link ngRoute.$route $route} service. The {@link tutorial/ AngularJS tutorial} shows this
technique in steps seven and eight.


## Related Topics

* {@link guide/filter Filters}
* {@link forms Forms}

## Related API

* {@link ./api API Reference}