diff options
| author | Igor Minar | 2011-06-06 08:50:35 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-06-06 22:52:02 -0700 |
| commit | 7f1e2e48467f80cc083d24b44f088620e4e7bcb6 (patch) | |
| tree | 731a91366c5780985be6d4c5ddbe34e307d5cb70 /docs/content/guide/dev_guide.templates.ngdoc | |
| parent | 5533e48dead5cff3107e72ee80bf0f19df77c1e9 (diff) | |
| download | angular.js-7f1e2e48467f80cc083d24b44f088620e4e7bcb6.tar.bz2 | |
new batch of docs
Diffstat (limited to 'docs/content/guide/dev_guide.templates.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.templates.ngdoc | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/docs/content/guide/dev_guide.templates.ngdoc b/docs/content/guide/dev_guide.templates.ngdoc new file mode 100644 index 00000000..59fed0fc --- /dev/null +++ b/docs/content/guide/dev_guide.templates.ngdoc @@ -0,0 +1,75 @@ +@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} |