angular.js/docs/content/guide/dev_guide.templates.ngdoc

@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 guide/directive Directive} — An attribute or element that
  augments an existing DOM element or represents a reusable DOM component - a widget.
* {@link api/ng.$interpolate Markup} — 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 forms Form controls} — Lets you validate user input.

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 guide/directive directives} and curly-brace bindings
with {@link expression expressions}:

<pre>
<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>

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/ngRoute.$route
$route} service in conjunction with the {@link api/ngRoute.directive:ngView ngView} 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 forms Angular Forms}

## Related API

* {@link api/index API Reference}
new batch of docs 2011-06-06 15:50:35 +00:00			`@ngdoc overview`
			`@name Developer Guide: Understanding Angular Templates`
			`@description`

docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`An Angular template is the declarative specification that, along with information from the model`
new batch of docs 2011-06-06 15:50:35 +00:00			`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`
docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`Angular elements and attributes direct angular to add behavior and transform the template DOM into`
new batch of docs 2011-06-06 15:50:35 +00:00			`the dynamic view DOM.`

docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`These are the types of Angular elements and element attributes you can use in a template:`
new batch of docs 2011-06-06 15:50:35 +00:00
chore(docs): re-skin main documentation 2012-04-29 05:45:28 +00:00			`* {@link guide/directive Directive} — An attribute or element that`
docs(*): fixing various docs 2012-03-14 06:00:30 +00:00			`augments an existing DOM element or represents a reusable DOM component - a widget.`
docs(): simplify doc urls we now have two types of namespaces: - true namespace: angular. - used for all global apis - virtual namespace: ng., ngMock., ... - used for all DI modules the virual namespaces have services under the second namespace level (e.g. ng.) and filters and directives prefixed with filter: and directive: respectively (e.g. ng.filter:orderBy, ng.directive:ngRepeat) this simplifies urls and makes them a lot shorter while still avoiding name collisions 2012-06-12 06:49:24 +00:00			`* {@link api/ng.$interpolate Markup} — The double`
new batch of docs 2011-06-06 15:50:35 +00:00			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.`
doc(guide): clean up broken links 2012-05-24 21:49:47 +00:00			`* {@link forms Form controls} — Lets you validate user input.`
new batch of docs 2011-06-06 15:50:35 +00:00
			`Note: In addition to declaring the elements above in templates, you can also access these elements`
			`in JavaScript code.`

docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`The following code snippet shows a simple Angular template made up of standard HTML tags along with`
			`Angular {@link guide/directive directives} and curly-brace bindings`
doc(guide): clean up broken links 2012-05-24 21:49:47 +00:00			`with {@link expression expressions}:`
new batch of docs 2011-06-06 15:50:35 +00:00
			`<pre>`
docs(links): corrected borken links 2012-03-14 02:36:09 +00:00			`<html ng-app>`
fix(docs): change all directive references to use the normalized names 2012-04-06 23:35:17 +00:00			`<!-- Body tag augmented with ngController directive -->`
docs(links): corrected borken links 2012-03-14 02:36:09 +00:00			`<body ng-controller="MyController">`
			`<input ng-model="foo" value="bar">`
			`<!-- Button tag with ng-click directive, and`
new batch of docs 2011-06-06 15:50:35 +00:00			`string expression 'buttonText'`
			`wrapped in "{{ }}" markup -->`
docs(links): corrected borken links 2012-03-14 02:36:09 +00:00			`<button ng-click="changeFoo()">{{buttonText}}</button>`
feat(module): new module loader 2012-01-07 02:10:47 +00:00			`<script src="angular.js">`
new batch of docs 2011-06-06 15:50:35 +00:00			`</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`
refactor($route): pull $route and friends into angular-route.js $route, $routeParams and ngView have been pulled from core angular.js to angular-route.js/ngRoute module. This is was done to in order keep the core focused on most commonly used functionality and allow community routers to be freely used instead of $route service. There is no need to panic, angular-route will keep on being supported by the angular team. Note: I'm intentionally not fixing tutorial links. Tutorial will need bigger changes and those should be done when we update tutorial to 1.2. BREAKING CHANGE: applications that use $route will now need to load angular-route.js file and define dependency on ngRoute module. Before: ``` ... <script src="angular.js"></script> ... var myApp = angular.module('myApp', ['someOtherModule']); ... ``` After: ``` ... <script src="angular.js"></script> <script src="angular-route.js"></script> ... var myApp = angular.module('myApp', ['ngRoute', 'someOtherModule']); ... ``` Closes #2804 2013-06-05 22:30:31 +00:00			`files. You "include" the partials in the main page using the {@link api/ngRoute.$route`
			`$route} service in conjunction with the {@link api/ngRoute.directive:ngView ngView} directive. An`
new batch of docs 2011-06-06 15:50:35 +00:00			`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}`
doc(guide): clean up broken links 2012-05-24 21:49:47 +00:00			`* {@link forms Angular Forms}`
new batch of docs 2011-06-06 15:50:35 +00:00
			`## Related API`

			`* {@link api/index API Reference}`