mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-03 17:15:37 +08:00
53 lines
1.9 KiB
Plaintext
53 lines
1.9 KiB
Plaintext
@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}
|