mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
63 lines
2.9 KiB
Text
63 lines
2.9 KiB
Text
@workInProgress
|
|
@ngdoc overview
|
|
@name Developer Guide: Understanding Angular Templates
|
|
@description
|
|
|
|
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:
|
|
|
|
* {@link dev_guide.compiler.directives Directive} — An attribute that augments an existing DOM
|
|
element.
|
|
* {@link dev_guide.compiler.widgets Widget} — A custom DOM element. An example of a built-in widget
|
|
is {@link api/angular.widget.@ng:repeat ng:repeat}.
|
|
* {@link dev_guide.compiler.markup Markup} — Shorthand for a widget or a directive. The double
|
|
curly brace notation `{{ }}` to bind expressions to elements is built-in angular markup.
|
|
* {@link dev_guide.templates.filters Filter} — Formats your data for display to the user.
|
|
* {@link dev_guide.templates.validators Validator} — Lets you validate user input.
|
|
* {@link dev_guide.templates.formatters 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 {@link dev_guide.compiler.directives directives}, {@link dev_guide.compiler.markup markup},
|
|
and {@link dev_guide.expressions expressions}:
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
|
|
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 {@link api/angular.service.$route
|
|
$route} service in conjunction with the {@link api/angular.widget.ng:view ng:view} directive. An
|
|
example of this technique is shown in the {@link tutorial/ angular tutorial}, in steps seven and
|
|
eight.
|
|
|
|
|
|
## Related Topics
|
|
|
|
* {@link dev_guide.templates.filters Angular Filters}
|
|
* {@link dev_guide.templates.formatters Angular Formatters}
|
|
* {@link dev_guide.templates.validators Angular Validators}
|
|
|
|
## Related API
|
|
|
|
* {@link api/index API Reference}
|