Angular模板

模板是一种自定义的标准化页面，通过模版和模版中的数据结合，可以生成各种各样的网页。
几乎所有HTML语法在模版中都是适用的，除了script标签。另外html body base等元素并不起什么作用。

<!--
   数据绑定根据流向可分为以下三种： 
1. 单向绑定：从数据源到视图目标（属性绑定）：[] 
2. 单向绑定：从视图目标到数据源（事件绑定）：() 
3. 双向绑定：数据源至视图是[ ]，视图至数据源是()，所以双向绑定就是他们的结合[( )]。
-->

<!-- DOM元素属性绑定 -->
<div [title]="titleText">hello world</div> <!-- DOM对象属性title就是绑定目标 -->
<div bind-title="titleText">hello world</div> <!-- 也可以选择bind-前缀的形式来实现，这种方式又成为标准形式 -->
<div [ngStyle]="styles">xxx</div> <!-- 用来设置Angular指令的属性 -->
<user-detail [user]="currentUser"></user-detail> <!-- 可以使用属性绑定设置自定义标签的输入属性(这是父子组件间通讯的重要途径) -->

<!-- 中括号 -->
<div [title]="titleText">hello world</div> <!-- 中括号的作用是执行=右侧的模版表达式，然后将执行结果赋值给DOM的title属性。 -->
<div title="titleText">hello world</div><!-- 没有中括号则直接将双引号内的内容当作文本赋值给title属性。 -->

<!-- CSS类绑定 -->
<div class="font"></div>
<div class="red" [class]="tessssssst"></div> <!-- 当使用DOM对象属性绑定 给 [class]绑定值时，tessssssst对象会重写这个div元素的全部class。 -->
<div [class.red]="true"></div> <!-- 根据模版表达式的boolean型结果，决定是否将red属性绑定在标签上。 -->

<!-- style样式绑定 -->
<!--
[style.style-name.单位]=”模版表达式” 
样式属性名可以使用烤肉串命名法background-color，也可以使用驼峰命名法backgroundColor。
-->

<!-- 属性绑定与插值的关系 -->
<div>{{userName}}</div>
<div [innerText]="userName"></div>