快速開始

本教程將指導你通過EmberJS建立一個簡單的應用。

將包含以下幾個歷程：
① 安裝EmberJS
② 建立一個新的應用程式
③ 定義一個路由
④ 編寫一個UI元件
⑤ 部署你的應用

安裝Ember

你可通過一個簡單的npm命令來安裝ember, npm– nodejs包的管理器。在你的命令列中輸入如下命令：

npm install -g ember-cli

建立一個新的應用程式

一旦你已經安裝好了 Ember Cli，那你就可以通過ember new命令來建立你的應用了。如下

ember new ember-quickstart
 

此條命令會建立一個名叫ember-quickstart的資料夾，並且將新建立的應用放在該資料夾下。不出所料的，你的應用將包含：

• 一個開發伺服器
• 模板編譯器
• 通過Babel實現的ES2015的特性
• javascript和css 壓縮功能

ember已經將所有的準備工作幫你完成了，它使得建立應用的工作顯的輕而易舉。
讓我們看看是不是所有的東西都運轉正常了。直接 cd 到你的ember-quickstart目錄下，然後通過以下命令來開啟伺服器：

cd ember-quickstart
ember server

稍微等一會，你將會看到如下資訊：

Livereload server on
 
 http://localhost:49152
Serving on http://localhost:4200/

(在命令列按下 Ctrl + C ，可以在任何時候終止伺服器的執行)

緊接著在瀏覽器中輸入http://localhost:4200，那麼你將會看到ember的歡迎頁面。恭喜你哈！你剛剛建立併成功啟動了你的第一個Ember應用。

接下來，讓我們通過ember命令來建立一個新的模板：

ember generate template application

application模板將總是出現在使用者的瀏覽器上。使用你的編輯工具開啟app/templates/application.hbs檔案，然後新增如下內容：

app/templates/application.hbs

<h1>PeopleTracker</h1>

{{outlet}}

請注意，ember會在後臺檢測該模板檔案並自動的過載該模板對應的頁面。
你應該會發現之前的歡迎頁面不見了，取而代之的是”PeopleTracker”的大標題。
當然你也會對{{outlet}}感到好奇，它表明任何巢狀的路由所對應的內容都會被渲染到{{outlet}}所在的那個位置。

定義路由

讓我們的應用來展示一個包含科學家名字的列表吧。為了達到這個目的，我們首先要建立一個路由。目前，你可以把路由當做一個能給你應用輸送不同頁面的東西。

Ember 配備了一個生成器可以自動的為你生成樣板程式碼。要建立一個路由，輸入下面這行程式碼：

ember generate route scientists

然後你將看到如下的輸出資訊：

installing route
  create app/routes/scientists.js
  create app/templates/scientists.hbs
updating router
  add route scientists
installing route-test
  create tests/unit/routes/scientists-test.js

Ember向你展示了它都建立了哪些東西：

1. 一個當用戶訪問 /scientists時，被展示的模板
2. 一個可以給模板提供模型的路由
3. 在app/router.js 中添加了一條路由記錄
4. 一個單元測試檔案

開啟這個新生成的模板檔案：app/templates/scientists.hbs，在裡面新增如下的HTML程式碼：

app/templates/scientists.hbs

<h2>List of Scientists</h2>

用你的瀏覽器訪問http://localhost:4200/scientists這個地址。你將看到scientists.hbs模板中的 <h2>標題跟在application.hbs模板中的 <h1>標題之後。

那麼，現在我們得到了被渲染過的scientists模板。接下來，讓我們給它一些資料吧。我們通過編輯app/routes/scientists.js來造一些資料.

我們在生成器建立好的app/routes/scientists.js中新增一個model()方法:

app/routes/scientists.js

import Ember from 'ember';
export default Ember.Route.extend({
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
});

(以上程式碼使用的最新的javascript語法，請參閱ECMAscript6語法)

你可以在model()方法中返回任何你想傳遞給模板的資料。如果你想通過非同步的方式獲取資料，那麼仍然可使用model()方法，它支援任何使用Javascript Promise的庫。

好了，現在讓我們告訴Ember怎麼把上面的陣列嵌入HTML中。開啟scientists模板檔案，為它新增一些Handlerbars程式碼，讓Handlerbars迴圈打印出這些資料：

app/templates/scientists.hbs

<h2>List of Scientists</h2>

<ul>
  {{#each model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>

在這裡，我們藉助於each助手來迴圈遍歷出我們提供的陣列中的資料。並且將資料都顯示在 <li> 元素中。

建立UI元件

隨著應用發展的越來越複雜，你注意到需要有一些可以複用的UI單元。Ember提供了可複用的元件，幫助你輕鬆實現這個目的。

現在讓我們建立一個名叫 people-list的元件。實際上它是可以被複用的，在你任何需要它的地方引用它即可。

向之前一樣，我們通過生成器來建立元件。命令如下：

ember generate component people-list

然後把scientists模板中的程式碼貼上到people-list元件的模板中，讓它看起來向這樣：

app/templates/components/people-list.hbs

<h2>{{title}}</h2>
<ul>
  {{#each people as |person|}}
    <li>{{person}}</li>
  {{/each}}
</ul>

[注意]：現在的標題不是之前硬編碼的”List of Scientists”了，而是一個動態的屬性{{title}}。並且把scientists變數改成了更具有一般性的person變數，減少了使用時的耦合度。

儲存這個模板，並且返回到scientists模板。並且修改scientists模板至如下方程式碼。元件的構成元素跟HTML的標籤挺相似，但是注意了，元件中是用兩個”{{ }}”來包裹它的內容– {{component}}。接下來我們要讓元件做一些事情：

通過title屬性告訴元件我們想要什麼樣的標題
通過people屬性告訴元件我們要哪些人。

app/templates/scientists.hbs
{{people-list title="List of Scientists" people=model}}

好了，返回到瀏覽區。這時候你應該看到UI跟之前一樣。不同之處在於我們是用可複用的元件來完成，並且複用性和可維護性更優。

點選事件

到目前為止，我們的應用已經可以展示資料了，但是仍然不能和使用者互動。在web應用中，我們通常會監聽使用者事件，比如點選事件等。Ember使它變得更容易實現。
第一、在people-list元件中的

app/templates/components/people-list.hbs

<h2>{{title}}</h2>
<ul>
  {{#each people as |person|}}
 <!--   <li>{{person}}</li>   -->
    <li {{action "showPerson" person}}> {{person}}</li>
  {{/each}}
</ul>

action助手可以讓你在元素上繫結指定名稱的事件監聽函式。預設的，action助手會對點選事件進行監聽，但是也可以指定它監聽任何的DOM事件。好了，現在

為了處理這個函式呼叫，我們需要在people-list元件中新增這個函式。
在元件中定義actions物件，並在actions物件中新增showPerson函式，並且接受在模板傳入的引數：

app/components/people-list.js

import Ember from 'ember';
export default Ember.Component.extend({
  actions: {
    showPerson(person) {
      alert(person);
    }
  }
});

好了，讓我們在瀏覽器上試試點選科學家的名字吧。

構建產品

現在我們已經編寫完成了應用，並且在開發中驗證它能良好的工作。是時候為我們的使用者不熟應用了，執行以下的命令：

ember build --env production

build命令會打包所有構建你應用的資源– javascript，模板，CSS，web fonts , images等。

在這裡，我們通過–ENV引數來通知Ember構建一個在生產環境下的應用。它便會建立一個可以上傳到伺服器上的優化過的包。一旦構建完成，你會發現在dist目錄下有被編譯和壓縮過的你編寫的所有東西。

如果你對部署有興趣，並且想快速、可靠的完成部署。請關注Ember CLI Deploy 外掛。
如果你要部署在 Apache伺服器上，首先你需要建立一個新的虛擬主機。並且確保所有的路由要通過index.html來跳轉，並且為你的虛擬主機新增FallbackResource index.html配置項.