Quick Start

本篇教程將會教你如何從頭開始構建一個簡單的Ember 應用程序.

構建過程包括下列步驟：

安裝Ember

創建應用

定義路由

編寫UI組件

部署應用到生產環境

Install Ember

你可以通過一條簡單的npm命令安裝Ebmer.在你的命令行中輸入：

npm install -g ember-cli@3.0

Create a New Application

一旦Ember CLI安裝完成，接下來就可以創建新應用了。使用命令：

ember new ember-quickstart

這條命令會創建一個新的目錄:ember-quickstart, 並且會把Ember 應用安裝在內。應用會包括：

一台開發伺服器

模版編譯器

javascript和css壓縮器

ES2015 功能特性

Ember提供了完備的功能，使得項目構建的更容易.

接下來我們確認下是否需要的東西都齊活了.cd進應用根目錄ember-quickstart並且開啟伺服器：

cd ember-quickstart

ember serve

待伺服器啟動，你會看見如下的輸入：

Livereload server on http://localhost:7020

Serving on http://localhost:4200/

(在任何時候都可以通過Ctrl + C停止伺服器)

打開瀏覽器，訪問http://localhost:4200. 你應該會看到Ember的歡迎頁面，如果是這樣，那麼恭喜你!

接下來，開始編輯application模版. 這個模版總會在載入應用後出現在窗口.在你的編輯器中打開app/templates/application.hbs，然後寫點東西：

PeopleTracker

{}

Ember會發現文件變化並且自動在後台重載頁面. 你會發現之前的歡迎頁面被替換成"PeopleTracker". 當然，上面提到的{}並不是沒有用，它是表明下層路由將會被渲染到它所在的位置.

Define a Route

接下來我們做一個頁面用來顯示一些科學家的名字。第一步，創建一個路由。至此，你可以認為路由構建了應用的不用頁面。

Ember 提供了generators幫助開發者快速創建功能單元，生成route的命令：

ember generate route scientists

控制台的輸出:

installing route

create app/routes/scientists.js

create app/templates/scientists.hbs

updating routeer

add route scentists

installing route-test

create tests/unit/routes/scientists-test.js

Ember 告訴了你都創建了什麼：

當用戶訪問/scientists時展示的模版文件。

一個Route對象，提供model給上面的模版使用。

在應用的路由列表裡添加了此路由的訪問入口(app/router.js)

一個單元測試文件

在新創建的模版文件里(app/templates/scientist.hbs)添加一些HTML:

List of Scientists

在瀏覽器中訪問http://localhost:4200/scientists. 你應該會看到頁面上有兩個header元素，其中一個是application.hbs中的。

接下來，我們給模版提供一些數據。

在scientists 的 route 文件中定義一個model函數.

import Route from "@ember/routing/route";

export default Route.extend({

model () {

return ["Marie Curie", "Mae Jemison", "Albert Hofmann"];

}

});

在route的model ( )里，你可以返回任何模版可用的數據(意味著可以從model( )中返回從後台獲取的數據).

再接下來，渲染出我們要的數據. 編輯scientists模版，通過一個循環羅列出所有的名字：

List of Scientists

{{#each model as |scientist|}}

{}

{{/each}}

在這裡，我們通過each助手遍歷出model() 返回的數組中的每一項，並將它們顯示在模版中.

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！