blob: 8b60579f873b6eff5c569cf07fde516e63c3e093 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
@ngdoc overview
@name Templates
@description
In Angular, templates are written with HTML that contains Angular-specific elements and attributes.
Angular 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 Angular 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 Angular 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 ng-click directive, and
string expression 'buttonText'
wrapped in "{{ }}" markup -->
<button ng-click="changeFoo()">{{buttonText}}</button>
<script src="angular.js">
</body>
</html>
```
In a simple 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" –
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/ angular tutorial} shows this
technique in steps seven and eight.
## Related Topics
* {@link guide/filter Filters}
* {@link forms Forms}
## Related API
* {@link ./api API Reference}
|
