In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.
These are the types of Angular elements and attributes you can use:
- Directive â An attribute or element that augments an existing DOM element or represents a reusable DOM component.
-
Markup â The double curly brace notation
{{ }}to bind expressions to elements is built-in Angular markup. - Filter â Formats data for display.
- Form controls â Validates user input.
The following code snippet shows a template with directives and curly-brace expression bindings:
1 2 3 4 5 6 7 8 9 10 11 | <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> |
In a simple 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" â segments of template located in separate HTML files. You can use the ngView directive to load partials based on configuration passed to the $route service. The angular tutorial shows this technique in steps seven and eight.
Please login to continue.