Angular的模板是一个声明式的视图,它指定信息从模型、控制器变成用户在浏览器上可以看见的视图。 它把一个静态的DOM —— 只包含HTML,CSS以及Angular添加的标记和属性,然后引导Angular为其加上一些行为和格式转换器,最终变成一个动态的DOM。

在Angular中有以下元素属性可以直接在模板中使用:

注: 除了在模板中声明元素外, 你也可以在JavaScript代码中访问这些元素。

下面的代码片段展示了一个简单的Angular模板,主要由带有(指令)的HTML标准标签和{{ }}表达式(Expressions)组成:

<html ng-app>
 <!-- Body标记带有ngController参数  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button标记带有ng-click指令,字符串表达式'buttonText'被包裹在""中 -->
   <button ng-click="changeFoo()"></button>
   <script src="angular.js">
 </body>
</html>

在一个简单的单页程序中,模板包含HTML,CSS和Angular指令,通常只是一个HTML文件(如 index.html), 在一个更复杂的程序中,你可以在一个主要的页面用"零件(partials)"展示多个视图,这些 "零件(partials)"都是独立的HTML文件,在主页面可以包含(include) 这些"零件(partials)"页面,通过路由 $routengView指令结合, 相关的示例代码参考 phonecat教程 中的第七,八步骤。


相关主题


相关的 API