knowhow-server/public/js/lib/angular-1.2.9/docs/partials/guide/templates.html

A personal workflow engine that can manage and use any network connected host

<a href="http://github.com/angular/angular.js/edit/master/docs/content/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="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/filter">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">
&lt;html ng-app&gt;
 &lt;!-- Body tag augmented with ngController directive  --&gt;
 &lt;body ng-controller="MyController"&gt;
   &lt;input ng-model="foo" value="bar"&gt;
   &lt;!-- Button tag with ng-click directive, and
          string expression 'buttonText'
          wrapped in "{{ }}" markup --&gt;
   &lt;button ng-click="changeFoo()"&gt;{{buttonText}}&lt;/button&gt;
   &lt;script src="angular.js"&gt;
 &lt;/body&gt;
&lt;/html&gt;
</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 &quot;partials&quot;, which are segments of template located in separate HTML
files.  You &quot;include&quot; 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 id="related-topics">Related Topics</h3>
<ul>
<li><a href="guide/filter">Angular Filters</a></li>
<li><a href="guide/forms">Angular Forms</a></li>
</ul>
<h3 id="related-api">Related API</h3>
<ul>
<li><a href="api/index">API Reference</a></li>
</ul>
</div></div>