diff options
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} | 
