最簡單的模板
組件的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>