52 lines
3.1 KiB
HTML
Executable file
52 lines
3.1 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/dev_guide.templates.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
|
|
<div><span class="hint"></span>
|
|
</div>
|
|
</h1>
|
|
<div><div class="developer-guide-page developer-guide-understanding-angular-templates-page"><p>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.</p>
|
|
<p>These are the types of Angular elements and element attributes you can use in a template:</p>
|
|
<ul>
|
|
<li><a href="guide/directive">Directive</a> — An attribute or element that
|
|
augments an existing DOM element or represents a reusable DOM component - a widget.</li>
|
|
<li><a href="api/ng.$interpolate"><code>Markup</code></a> — The double
|
|
curly brace notation <code>{{ }}</code> to bind expressions to elements is built-in angular markup.</li>
|
|
<li><a href="guide/dev_guide.templates.filters">Filter</a> — Formats your data for display to the user.</li>
|
|
<li><a href="guide/forms">Form controls</a> — Lets you validate user input.</li>
|
|
</ul>
|
|
<p>Note: In addition to declaring the elements above in templates, you can also access these elements
|
|
in JavaScript code.</p>
|
|
<p>The following code snippet shows a simple Angular template made up of standard HTML tags along with
|
|
Angular <a href="guide/directive">directives</a> and curly-brace bindings
|
|
with <a href="guide/expression">expressions</a>:</p>
|
|
<pre class="prettyprint linenums">
|
|
<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>
|
|
</pre>
|
|
<p>In a simple single-page app, the template consists of HTML, CSS, and angular directives contained
|
|
in just one HTML file (usually <code>index.html</code>). 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 <a href="api/ngRoute.$route">$route</a> service in conjunction with the <a href="api/ngRoute.directive:ngView">ngView</a> directive. An
|
|
example of this technique is shown in the <a href="tutorial/index">angular tutorial</a>, in steps seven and
|
|
eight.</p>
|
|
<h3>Related Topics</h2>
|
|
<ul>
|
|
<li><a href="guide/dev_guide.templates.filters">Angular Filters</a></li>
|
|
<li><a href="guide/forms">Angular Forms</a></li>
|
|
</ul>
|
|
<h2>Related API</h3>
|
|
<ul>
|
|
<li><a href="api/index">API Reference</a></li>
|
|
</ul>
|
|
</div></div>
|