環境搭建以及使用Ember.js建立第一個靜態頁面

轉載於：環境搭建以及使用Ember.js建立第一個靜態頁面

本篇將爲讀者介紹Ember項目開發環境的搭建，並建立一個靜態頁面。

安裝Ember CLI

本教程使用的是2.4.3版本的Ember CLI工具集，若是你的是1.13.8版本在啓動項目時會提示以下錯誤： Future versions of Ember CLI will not support v5.9.1. Please update to Node 0.12 or io.js. 可是項目仍然能夠正常訪問，不過建議仍是升級到2.4.3版本，免得出現未知錯誤很差解決。 升級命令：npm install -g ember-cli@2.4.3

查看ember命令是否安裝成功，在終端或者控制檯下輸入下面的命令

ember -v

若是出現以下信息說明環境搭建成功。

version: 2.4.3
node: 5.9.1
npm: 2.13.4
os: darwin x64

若是你用的電腦不是Mac最後一行os有所不一樣，這個沒關係。第一行是Ember CLI的版本號，第二行是node的版本號，第三行是npm的版本號，最後一個是系統版本。

注意

若是你的執行ember -v得不到上述的版本信息也沒關係，仍然按照下面的教程新建項目新建完成項目以後再更行Ember CLI的版本，更新教程請參考Could this be a shame in the making?，只須要根據Project Update部分更新項目便可，更新到最後一步ember init時候會以下確認信息，所有y便可。

? Overwrite .travis.yml? Yes, overwrite
? Overwrite .watchmanconfig? Yes, overwrite
? Overwrite README.md? Yes, overwrite
? Overwrite app/app.js? Yes, overwrite
? Overwrite app/index.html? Yes, overwrite
? Overwrite app/router.js? Yes, overwrite
? Overwrite bower.json? Yes, overwrite
? Overwrite ember-cli-build.js? Yes, overwrite
? Overwrite package.json? Yes, overwrite
? Overwrite tests/helpers/resolver.js? Yes, overwrite
? Overwrite tests/helpers/start-app.js? Yes, overwrite
? Overwrite tests/index.html? Yes, overwrite

更新過程可能還會出現以下選擇版本的問題，請根據下面例子選擇：

Installed packages for tooling via npm.
  conflict Unable to find suitable version for qunit-notifications
    1) qunit-notifications ~0.0.6
    2) qunit-notifications ~0.1.0
? Answer 2
  conflict Unable to find suitable version for ember
    1) ember >= 1.8.1 < 2.0.0
    2) ember >=1.4 <2
    3) ember > 1.5.0-beta.3
    4) ember ~2.4.3
    5) ember >=1.4
? Answer 4
Installed browser packages via Bower.

最後驗證是否更新成功，執行ember -v會獲得以下版本信息：

ubuntuvimdeMacBook-Pro:library-app ubuntuvim$ ember -v
ember-cli: 2.4.3
node: 5.9.1
os: darwin x64

更多有關開發環境的詳細介紹請看www.ember-cli.com。

建立一個新項目

安裝好開發環境以後，直接使用Ember CLI命令建立新項目。下面是建立命令：

ember new library-app

等待命令執行完成，安裝過程須要下載所必須的npm插件，跟網絡有關係，請耐心等待。

運行項目

等待項目建立完成以後就能夠直接使用命令運行項目了，首先進入項目目錄下，而後執行ember cli命令運行項目。

//  進入項目目錄下
cd library-app
//  執行啓動命令
ember server

//的內容爲註釋，請直接忽略。

等待啓動完畢後，打開瀏覽器執行http://localhost:4200，若是能在頁面上看到Welcome to Ember說明項目建立成功。而且能夠在瀏覽器控制檯上看到以下圖的日誌信息：

開啓調試模式

在開發階段最好是把打開調試模式，開啓以後能夠在瀏覽器的控制檯下看到ember項目執行過程的相關信息，有助於發現問題。 修改library-app/config/environment.js文件的內容，在下面代碼段中增長配置：

// ……
if (environment === 'development') {
  // ENV.APP.LOG_RESOLVER = true;
  ENV.APP.LOG_ACTIVE_GENERATION = true;
  ENV.APP.LOG_TRANSITIONS = true;
  ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
  ENV.APP.LOG_VIEW_LOOKUPS = true;
}
//……

重啓項目（按Ctrl+C終止在執行ember servere），必須重啓才能其效果，能夠在瀏覽器控制檯看到了不少的日誌信息。好比下圖

添加Bootstrap和Sass到項目中

爲了美化項目界面引入Bootstrap，這兩個插件的安裝也是直接使用Ember CLI命令安裝，命令以下：

ember install ember-cli-sass
ember install ember-cli-bootstrap-sassy

等待安裝完成以後能夠在項目目錄下的pachage.json和bower.json看到這兩個插件的配置信息。

//  bower.json
"bootstrap-sass": "^3.3.6"
// package.json
"ember-cli-sass": "5.3.1"

在項目下增長樣式文件

建立文件library-app/app/styles/app.scss，若是項目已經存在文件library-app/app/styles/app.css則重命名爲app.scss，樣式會被Ember CLI引入到項目中。 在文件中增長以下內容：

@import "bootstrap";

使用快捷鍵Ctrl+C關閉在用命令ember server啓動項目。若是終端沒出現錯誤說明配置是正確的。那麼請繼續往下看！！

建立項目導航條

在前面引入的了Bootstrap以後咱們就能夠在頁面中直接使用了，而且不須要再在頁面上引入相關的css和js文件。 打開文件library-app/app/templates/application.hbs，清空原有代碼再添加以下代碼：

<div class="container">
    {{partial 'navbar'}}
    {{outlet}}
</div>

Ember.js項目的頁面使用的是Handlebarsjs模板，{{}}是模板的語法。在Ember.js的官方參考教程中有一章是專門介紹如何使用Handlebarsjs模板的，或者根據Ember.js 入門指南之八handlebars基礎學習。 在上述代碼中{{partial}}是一個ember helper能夠用於調用模板，這裏就是調用了模板navbar，不過這個功能在2.4的參考文檔中移除了能夠在1.13.0的文檔中看到，更多有關信息請看參考網址。 代碼中{{outlet}}也是一個helper，可是這個是一個特殊的helper，你能夠把這個helper理解爲一個佔位符。全部子模板都會渲染到{{outlet}}所在的位置。更多信息請看Ember.js 入門指南之十四番外篇，路由、模板的執行、渲染順序。

建立一個模板

仍然是使用命令建立模板。

ember g template navbar

等待命令執行完畢以後能夠看到library-app/app/templates/navbar.hbs這個文件。下面在文件中增長一個導航條。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{#link-to 'index' class="navbar-brand"}}Library App{{/link-to}}
    </div>

    <div class="collapse navbar-collapse" id="main-navbar">

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

代碼中{{link-to}}是Handlebars模板的標籤，在第一個{{link-to}}標籤中index是一個路由的名字，模板被編譯以後這個標籤就轉成一個廣泛HTML標籤的<a>，若是你想指定編譯以後的標籤名請使用屬性tagName指定，好比上述代碼的第二個link-to標籤，在後面的文章中會使用組件（component）重構這個標籤。 爲了美化界面在頁面的頂部加了css的填充，修改樣式文件app.scss。

@import "bootstrap";

body {
    padding-top: 20px;
}

等待項目重啓完成，能夠在頁面上看到黑色的導航條，好像咱們而且沒有在任何地方使用這個模板navbar，爲什麼能在首頁上顯示呢？？其實咱們已經在application.hbs中調用了！在這個模板中有這樣一句代碼{{partial 'navbar'}}，在此根據模板名調用了模板navbar。若是刪除了application.hbs中的{{partial}}界面上就什麼都不顯示了！請讀者自行實驗。

建立關於界面並在導航菜單上增長一個菜單項

一樣的，使用Ember CLI命令建立一個路由（route），有關路由的信息能夠查看官方參考文檔或者直接看教程Ember.js 入門指南之二十路由定義，文章上有詳細的介紹，歡迎閱讀！執行下面的命令建立路由，建立路由的過程當中會同時建立路由對應的模板，因此執行一個命令會獲得2個文件：app/templates/about.hbs、app/routes/about.js，同時會在app/router.js中app/自動增長一條路由配置語句this.route('about');。而後在模板about.hbs中增長一些信息：

{{! app/templates/about.hbs }}

# About Page

等待項目重啓完成，執行http://localhost:4200/about能夠看到剛剛在模板about.hbs中增長的信息。

可是"About Page"怎麼會顯示在導航條下方呢？好像並無指定啊，也沒有想前面那樣使用表達式{{partial}}調用模板，有關這個內容的介紹請看Ember.js 入門指南之十四番外篇，路由、模板的執行、渲染順序，還記得在主模板application.hbs中的{{outlet}}嗎？除了application.hbs以外的全部模板都是子模板，子模板會自動渲染到父模板的{{outlet}}上。可是是如何觸發顯示的呢？很簡單，由於咱們訪問了about這個路由，路由會自動根據名字查找到同名的模板並顯示（Ember默認規則）。

再建立一個模板index，仍然是使用Ember CLI命令建立，執行命令：ember g template index，獲得模板後再模板內添加一些內容：

{{! app/templates/index.hbs}}

# Home Page

而後執行http://localhost:4200/，神奇的事情發生了，能夠直接看到模板index的內容，而且並無訪問http://localhost:4200/index。這又是爲何呢？請看Ember.js 入門指南之二十路由定義中關於index路由的解釋。簡單講，index路由就是每一個路由默認首頁路由，不須要手動建立，這個路由對應的URL是/，當你執行http://localhost:4200/時候實際就是執行http://localhost:4200/index而後渲染的模板就是index.hbs，因此就獲得界面顯示的效果。 而後在導航欄上在添加一個連接，最後得打以下代碼（先後部分代碼省略）：

等待項目重啓完成，能夠看到導航欄上多了一項，而且點擊「Home」和「About」看到顯示不一樣的內容。效果以下圖：

到此教程第一篇介紹完畢，若是你看過官方參考文件或者是看過ember teach上的教程理解起來應該是沒難度的！多一份耐心就多一份收穫。

家庭做業

最後給你留了一份做業，想學好就必需要動手實踐才行啊！！！

做業內容：

1. 建立一個名爲contact的路由和模板
2. 在導航菜單上增長一個菜單項"Contact"，而且點擊這個菜單項看到的是模板contact.hbs的內容。

爲了照顧懶人我把完整的代碼放在GitHub上，若有須要請參考參考。博文通過屢次修改，博文上的代碼與github代碼可能有出入，不過影響不大！若是你以爲博文對你有點用，請在github項目上給我點個star吧。您的確定對我來講是最大的動力！！