Angular模板是一份声明式的文档,它使用了从model和controller中抽取出来的信息,最后被渲染为用户可在浏览器中看到的视图。它是一些静态的DOM,由HTML、CSS和angular相关的元素和属性组成。其中,Angular元素及属性将向DOM中添加行为,并把模板DOM转换为动态视图DOM。
下面是可以在模板中使用的anguar元素和元素属性:
{{ }}
把表达式绑定到元素上的语法,是Angular内置的标记 filter - 格式化你的数据,显示给用户* Form controls - 验证用户输入注意:除了可以在模板中声明以上元素,你还可以在JavaScript代码中访问这些元素。
下面的代码片断演示了一个由HTML标签、angular directives和双花括号绑定的表达式,组成的简单的angular模板
<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>
在一个简单的单页面程序中,模板通常是一个HTML文件(如index.html
),由HTML、CSS和angular directives组成。在更复杂的程序中,你可能在一个主页面中使用片断页(partials)来显示多个view,它们是分散于多个文件中的模板片断。你在主页面中使用$route
service和ngView
directive将这些片断页包含进来。使用这个技术的一个例子是在angular tutorial中的第七步和第八步。