angular学习(七)—— 模板


在Angular中,模板是包含一些特定元素和属性的HTML,Angular将模板结合模型和控制器的信息在浏览器中以动态视图的形式呈现给用户。

下面是你可以使用的angular元素和属性:

  • Directive — 增强现有的DOM元素或者展现可重复的DOM组件
  • Markup — 双大括号是angular的内置标记,将表达式和元素绑定
  • Filter — 格式化数据用于显示
  • Form controls — 用于验证用户输入

    下面代码是一个带有指令和双大括号表达式的模板

1
2
3
4
5
6
7
8
9
10
<html ng-app>
<!-- Body 标签扩展了ngController指令 -->
<body ng-controller="MyController">
<input ng-model="foo" value="bar">
<!-- Button标签扩展了ngClick指令,
双大括号字符串表达式buttonText -->
<button ng-click="changeFoo()">{{buttonText}}</button>
<script src="angular.js">
</body>
</html>

简单的app只需要一个html文件,里面的模板由HTML,CSS,和angular指令构成。

复杂一点的app,你可以在一个主页面通过partials显示不同的视图(partials是一个单独的html文件,文件内容是模板段),你也可以用ngView指令加载partials,这些partials由$route服务配置。

文章目录
|