Angular2组件开发—模板语法（一）
最简单的模板
组件的View注解用来声明组件的外观，它最重要的属性就是template - 模板。 Angular2的模板是兼容HTML语法的，这意味着你可以使用任何标准的HTML标签编写 组件模板。
所以，在最简单的情况下，一个Angular2组件的模板由标准的HTML元素构成，看起来就是 一段HTML码流。Angular2将原封不同地渲染这段模板：
有两种方法为组件指定渲染模板：
1. 内联模板
可以使用组件的View注解中的template属性直接指定内联模板：
1 @View({ 2 template : `<h1>hello</h1> 3 <div>...</div>` 4 })
在ES6中，使用一对`符号就可以定义多行字符串，这使得编写内联的模板轻松多了。
2. 外部模板
也可以将模板写入一个单独的文件：
1 <!--ezcomp-tpl.html--> 2 <h1>hello</h1> 3 <div>...</div>
然后在定义组件时，使用templateUrl引用外部模板
@View({ templateUrl : "ezcomp-tpl.html" })
例如：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>template - standard HTML</title> 6 <script type="text/javascript" src="lib/system@0.16.11.js"></script> 7 <script type="text/javascript" src="lib/angular2.dev.js"></script> 8 <script type="text/javascript" src="lib/system.config.js"></script> 9 </head> 10 <body> 11 <ez-app></ez-app> 12 <script type="module"> 13 import {Component,View,bootstrap} from "angular2/angular2"; 14 15 @Component({selector : "ez-app"}) 16 @View({ 17 template : ` 18 <h1>Hello,Angular2</h1> 19 <p> 20 使用ES6开发Angular2应用的一个好处就是，可以不用拼接模板字符串了。 21 </p> 22 23 输入文本框：<input type="text" name="firstname"><br /> 24 添加的按钮：<button type="button">按钮</button> 25 26 <ul> 27 <li>在模板中可以使用任何标准的HTML元素</li> 28 <li>如果模板定义在单独的文件里，可以使用templateUrl引入</li> 29 </ul> 30 ` 31 }) 32 class EzApp{} 33 34 bootstrap(EzApp); 35 </script> 36 </body> 37 </html>
