aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/dev_guide.templates.ngdoc
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/guide/dev_guide.templates.ngdoc')
-rw-r--r--docs/content/guide/dev_guide.templates.ngdoc75
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}