Guide: Templates

Improve this Doc

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:

<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.

© 2010–2016 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.2.32/docs/guide/templates

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部