Ember採用handlebars模板庫作爲應用程序的view層。Handlebars模板與普通的HTML非常相似。但是相比普通的HTML而言handlebars提供了非常豐富的Ember表達式。
Ember採用handlebars模板並且擴展了很多功能，讓你使用handlebars就像使用HTML一樣簡單。你設置可以指定某個模板顯示你的應用程序界面，並且還不需要編寫更新界面顯示值的代碼，Ember會自動爲你更新。
在介紹模板之前先介紹一個非常有用、強大的工具 Ember CLI，使用這個工具可以自動生成Ember的代碼，甚至可以幫你構建一個新的Ember項目，爲你省去很多重複的勞動。有關它的詳細介紹請看官網，上面有非常詳細的教程，或者你可以使用命令：ember –help 查看它的幫助文檔，所涉及的插件請自行安裝，如有不明白的可以聯繫我。下面我將使用這個工具新建一個Ember項目，並運行它。
1，Ember CLI 工具
新建項目命令:
ember new chapter2_tempalte
進入項目目錄並啓動服務器：
cd chapter2_template
ember server
運行項目，瀏覽器打開這個鏈接：http://localhost:4200/
如果你能看到如下信息說明安裝成功了。
如果項目創建成功你可以繼續往下看，如果創建不成功請重試，因爲後面的代碼都基於這個項目來演示的！！！對於生成的每個文件和目錄請你看官網文檔，上面會有非常詳細的說明。爲了方便懶人在此就簡單介紹其中幾個很重要的目錄：
|
目錄 |
說明 |
|
app |
項目的主要代碼都是放在這個目錄下 |
|
app/controllers |
存放C（MVC）層（controller）的代碼文件 |
|
app/helpers |
存放自定義的helper代碼文件 |
|
app/models |
存放M（MVC）層（model）代碼文件 |
|
app/routes |
存放項目路由設置代碼文件 |
|
app/templates |
存放項目模板代碼文件 |
|
bower_components |
第三方插件庫 |
|
tests |
單元測試文件 |
|
vendor |
不是使用npm和bower安裝的第三方插件庫 |
|
ember-cli-build.js |
設置構建規範 |
|
dist |
存放項目靜態資源 |
上述這些文件或者目錄是後面開發過程經常會用到，只要你是使用ember new appName命令生成的項目都會包括上述這些目錄或者文件。其中最重要的就是app目錄下的文件、目錄了，從app裏面的目錄結果你就可以很清楚的看到這是個MVC框架的項目。Ember之所以能找到controller對應的template也是根據目錄和文件的名稱找到的，Ember是有自己的一套命名規則的，詳情請看官方文檔。
2，模板定義
<!-- app/templates/application.hbs -->
<h1>Kittens</h1>
<p>
Kittens are the cutest!!
</p>
注意：代碼中的第一句註釋的內容表明瞭這個文件的位置已經文件名稱，後面的代碼片段也會採用這種方式標註。如果沒有特別的說明第一句代碼都是註釋文件的路徑及其名稱。
上述就是一個模板，非常簡單的模板，只有一個h1和p標籤，當你保存這個文件的時候Ember CLI會自動幫你刷新頁面，不需要你手動去刷新！此時你的瀏覽器頁面應該會看到如下信息：
那麼恭喜你，模板定義成功了，至於爲什麼執行localhost:4200就直接顯示到這裏等你慢慢學到controller和route的時候自然會明白，你就當application.hbs是一個默認的首頁，這樣你應該明白了吧！
3，handlbars表達式
每一個模板都會有一個與之關聯的controller類。這就是模板能顯示錶達式的值的原因，你可以在controller類中設置模板中表達式顯示的值，就像java web開發中在servlet或者Action調用request.setAttribute()方法設置某個屬性一樣。比如下面的模板代碼：
<!-- app/templates/application.hbs -->
<!-- 這個是默認的模板，Ember會根據命名的規則自動找到 controllers/application 對應的模板是templates/application.hbs -->
<h2 id="title">Welcome to Ember</h2>
<!-- Ember的屬性自動更新：如果屬性在controller層改變了，頁面會自動刷新顯示最新的值，太強大了！！！ -->
Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>
下面我們創建一個controller。這次我們用Ember CLI的命令創建： ember generate controller application，這句命令表示會創建一個controller並且名稱是application，然後我們會得到如下幾個文件：
-
app/controllers/application.js --controller本身
-
tests/unit/controllers/application-test.js --controller對應的單元測試文件
打開你的文件目錄，是不是可以在app/controllers下面看到了！
現在爲了演示表達式我們在controller裏添加一些代碼：
// app/controllers/application.js
import Ember from 'ember';
/**
* Ember會根據命名規則自動找到templates/application.hbs這個模板，
* @type {hash} 需要設置的hash對象
*/
export default Ember.Controller.extend({
// 設置兩個屬性
firstName: 'chen',
lastName: 'ubuntuvim',
email: '[email protected]'
});
然後修改顯示的模板如下：
<!-- app/templates/application.hbs -->
<!-- 這個是默認的模板，Ember會根據命名的規則自動找到 controllers/application 對應的模板是templates/application.hbs -->
<h2 id="title">Welcome to Ember</h2>
<!-- Ember的屬性自動更新：如果屬性在controller層改變了，頁面會自動刷新顯示最新的值，太強大了！！！ -->
Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>
保存，然後頁面會自動刷新，我們可以看到在controller設置的值，可以直接在模板上顯示了。
這個就是表達式的綁定，後面你會學習到更多更有趣也更復雜的handlebasr表達式，HTML文檔的內容會根據這下表達式的改變而改變。
隨着應用程序的規模不斷擴大，會有更多的模板和與之關聯的控制器。並且有時候一個模板還可以對應這多個控制器。也就是說模板上表達式的值可能有多個controller控制。
