diff options
| author | Tobias Bosch | 2013-11-05 22:16:11 -0800 |
|---|---|---|
| committer | Tobias Bosch | 2013-11-06 17:11:44 -0800 |
| commit | fc060dfc08f048511fe78e9df04ce4616171da34 (patch) | |
| tree | 71b912fb07c70b3e5c315577057b13c85b2032e6 /docs/content/guide/templates.ngdoc | |
| parent | 947a44d1ee6b253a5f31bb28616e0fa0303bd4aa (diff) | |
| download | angular.js-fc060dfc08f048511fe78e9df04ce4616171da34.tar.bz2 | |
docs(guide/overview): Refactor overview and mvc docs
Before, there we multiple overview docs:
- guide/overview
- guide/introduction
- guide/dev_guide.mvc
- guide/dev_guide.mvc.understanding_model
- guide/dev_guide.mvc.understanding_view
- guide/concepts
Now we have:
- guide/introduction: High level description of Angular with the key benefits but without code or any concrete concepts
- guide/concepts: explains all important concepts with a simple example and contains deep links to the other parts of the guide.
All the old information was moved into existing documents or deleted when they were duplicates.
Diffstat (limited to 'docs/content/guide/templates.ngdoc')
| -rw-r--r-- | docs/content/guide/templates.ngdoc | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/docs/content/guide/templates.ngdoc b/docs/content/guide/templates.ngdoc new file mode 100644 index 00000000..4b675e45 --- /dev/null +++ b/docs/content/guide/templates.ngdoc @@ -0,0 +1,57 @@ +@ngdoc overview +@name 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} |