核心要點(diǎn)

• Ember CLI是一個(gè)為Ember構(gòu)建的命令行工具，它結(jié)合了生成器、壓縮器、CSS預(yù)處理器編譯器、自動(dòng)重載和ES6模塊加載器等多種功能。它可以作為Grunt和Gulp等工具的替代方案，用於設(shè)置新的Ember項(xiàng)目。
• Ember遵循約定優(yōu)於配置的理念，這意味著它具有許多默認(rèn)設(shè)置，可以簡(jiǎn)化開發(fā)過程。關(guān)鍵元素包括路由、控制器、模板、組件和Ember-Data。
• 本教程提供了一個(gè)分步指南，介紹如何使用Ember CLI構(gòu)建簡(jiǎn)單的聯(lián)繫人管理器應(yīng)用程序。它涵蓋了創(chuàng)建新的Ember項(xiàng)目、設(shè)置固定數(shù)據(jù)、生成用戶模型和路由、創(chuàng)建用戶模板以及添加顯示和編輯用戶信息的功能。
• Ember是一個(gè)功能強(qiáng)大的JavaScript框架，適用於構(gòu)建大型Web應(yīng)用程序。借助Ember CLI，它提供了一個(gè)標(biāo)準(zhǔn)化的開發(fā)環(huán)境，可以更輕鬆地管理依賴項(xiàng)、自動(dòng)化任務(wù)和執(zhí)行最佳實(shí)踐。

Ember多年來經(jīng)歷了許多變化。其中最大的一次變化是引入了Ember CLI，這是一個(gè)為Ember構(gòu)建的命令行工具。它結(jié)合了生成器、壓縮器、CSS預(yù)處理器編譯器、自動(dòng)重載和ES6模塊加載器等多種功能。此命令行工具將幫助您減少在設(shè)置Grunt和Gulp等工具上花費(fèi)的時(shí)間?？梢哉f，對(duì)於任何全新的Ember項(xiàng)目，它都是這些工具的良好替代方案。在本文中，您將學(xué)習(xí)如何使用Ember CLI構(gòu)建簡(jiǎn)單的聯(lián)繫人管理器應(yīng)用程序。本教程與我在SitePoint上發(fā)布的其他關(guān)於Ember的文章略有不同，因?yàn)樗鼈儧]有附帶Ember CLI。但是，大多數(shù)這些概念仍然適用，因此我建議您查看它們並繼續(xù)學(xué)習(xí)。本文的完整代碼可在GitHub上找到。

如何安裝Ember CLI

要安裝Ember CLI，您需要先安裝幾個(gè)依賴項(xiàng)。第一個(gè)是Node.js。您至少需要0.12.x版本。接下來，需要安裝Bower，可以通過運(yùn)行以下命令來完成：

npm install -g bower

然後，要安裝Ember CLI，請(qǐng)運(yùn)行以下命令：

npm install -g ember-cli

如何創(chuàng)建一個(gè)新的Ember項(xiàng)目

在開始進(jìn)行精彩的操作之前，您需要打開終端並按順序執(zhí)行以下命令，以便創(chuàng)建一個(gè)名為contactmanager的新項(xiàng)目文件夾：

ember new contactmanager

第二步，進(jìn)入目錄，然後使用以下命令安裝所有npm和Bower依賴項(xiàng)：

cd contactmanager
npm install
bower install

此時(shí)，通過執(zhí)行以下命令啟動(dòng)內(nèi)置的Ember服務(wù)器：

ember serve

您現(xiàn)在可以在URL localhost:4200訪問您的新應(yīng)用程序。這是在本地計(jì)算機(jī)上運(yùn)行的Ember應(yīng)用程序的默認(rèn)端口，但您可以根據(jù)需要更改它。如果您按照所有指示的步驟操作，現(xiàn)在應(yīng)該在瀏覽器中看到一個(gè)標(biāo)題，上面寫著“歡迎使用Ember”。

Ember約定和結(jié)構(gòu)

在深入構(gòu)建應(yīng)用程序之前，讓我們回顧一下一些Ember約定。

路由器和路由

路由是Ember應(yīng)用程序的入口點(diǎn)。路由在app/router.js文件中使用Router定義。它們?cè)试S您訪問應(yīng)用程序的不同部分。例如，如果您決定需要在應(yīng)用程序中管理用戶，則必須定義用戶路由。您可以使用以下語法執(zhí)行此操作：

npm install -g bower

這將為我們創(chuàng)建以下URL：

• /users/
• /users/index/
• /users/loading/

按照慣例，當(dāng)您定義路由時(shí)，Ember期望找到其他關(guān)聯(lián)類型，例如路由、控制器和模板。我們可以決定顯式創(chuàng)建這些類型，或者允許Ember為我們創(chuàng)建它們。在許多應(yīng)用程序中，您很可能必須自己創(chuàng)建它們，但這取決於您。請(qǐng)記住，區(qū)分路由器和路由至關(guān)重要。我們上面創(chuàng)建的URL結(jié)構(gòu)是使用路由器完成的。這些僅顯示我們希望在應(yīng)用程序中使用這些URL的意圖。我們還沒有創(chuàng)建實(shí)際的路由，而只是這些路由的URL。要?jiǎng)?chuàng)建路由，我們必須在routes文件夾中遵循此過程。如果您感到困惑，請(qǐng)不要擔(dān)心，因?yàn)槲覍⒃诒疚尼崦娓钊氲靥接懘酥黝}。

控制器

控制器是一種用於存儲(chǔ)視圖狀態(tài)的類型，位於app/controllers文件夾中。它們與路由協(xié)同工作。在這種情況下，上面的URL對(duì)應(yīng)於/user/，並且需要一個(gè)名為/users/的控制器。同樣在這裡，我們可以自由選擇是否自己定義它?？刂破鬟€定義視圖操作（如點(diǎn)擊、懸停等）的事件處理程序。

模板

模板是Ember的表示部分。您使用名為Handlebars的模板語言編寫它，該語言編譯成純HTML。模板位於app/templates文件夾中。

組件

組件是小的自包含的功能塊。您可以將它們視為表示和功能的組合，它們可重用且易於維護(hù)。

Ember-Data

這是一個(gè)由Ember核心團(tuán)隊(duì)維護(hù)的庫，它補(bǔ)充了Ember核心，並充當(dāng)管理數(shù)據(jù)模型的前端ORM。還有其他一些我以前沒有使用過的替代方案，並且不在本文的討論範(fàn)圍之內(nèi)，因?yàn)槲覀儗⑹褂肊mber-data。

應(yīng)用程序

我們將構(gòu)建的聯(lián)繫人管理應(yīng)用程序?qū)ㄒ粋€(gè)用戶列表及其可用的聯(lián)繫信息。該應(yīng)用程序?qū)⒃试S我們創(chuàng)建、編輯、刪除和查看用戶。為了使我們的應(yīng)用程序簡(jiǎn)潔明了，我們將使用Ember CLI附帶的固定適配器。這充當(dāng)後端，除了數(shù)據(jù)不會(huì)在頁面刷新時(shí)持久化之外。首先，如果您尚未創(chuàng)建，請(qǐng)使用ember new contactmanager創(chuàng)建一個(gè)新的Ember項(xiàng)目。

生成用戶模型

移至項(xiàng)目文件夾並使用以下命令生成用戶模型：

npm install -g ember-cli

這將在app/models中創(chuàng)建一個(gè)名為user.js的文件，其內(nèi)容如下：

npm install -g bower

進(jìn)行必要的更改，以使導(dǎo)出語句如下所示：

npm install -g ember-cli

這定義了我們的用戶模型將具有的屬性。

生成用戶路由

現(xiàn)在，將以下幾行添加到您的router.js文件中，以便為我們提供一些可用的URL：

ember new contactmanager

我們有三個(gè)新的URL。其中一個(gè)是列出用戶，另一個(gè)是查看單個(gè)用戶，最後一個(gè)是編輯用戶信息。接下來，讓我們使用以下命令創(chuàng)建一個(gè)用戶路由：

cd contactmanager
npm install
bower install

此路由將用於檢索我們的用戶列表。使用以下代碼段更改其內(nèi)容：

ember serve

設(shè)置固定數(shù)據(jù)並生成用戶模板

此時(shí)，讓我們向我們的應(yīng)用程序添加一些臨時(shí)數(shù)據(jù)。為此，運(yùn)行以下命令：

Router.map(function() {
  this.resource('users', function() {});
});

這會(huì)在app/adapters/文件夾中生成一個(gè)名為application.js的文件。默認(rèn)情況下，Ember使用RestAdapter查詢模型。此適配器假設(shè)您有一個(gè)後端系統(tǒng)，該系統(tǒng)向您的Ember客戶端應(yīng)用程序提供JSON數(shù)據(jù)。由於我們沒有後端，在這種情況下，我們希望改為使用固定數(shù)據(jù)。因此，我們將更新適配器代碼如下所示：

ember generate model user

並向您的用戶模型添加以下內(nèi)容以創(chuàng)建一些固定裝置。

import DS from 'ember-data';

export default DS.Model.extend({
});

如果您導(dǎo)航到URL localhost:4200/users，您只會(huì)看到舊的問候消息，而不會(huì)看到我們剛剛添加的用戶固定數(shù)據(jù)。要查看用戶數(shù)據(jù)，我們需要使用以下命令為用戶創(chuàng)建一個(gè)模板：

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});

這會(huì)在app/templates/文件夾中創(chuàng)建一個(gè)名為users.hbs的文件。打開此文件並將其內(nèi)容更新如下：

Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});

您現(xiàn)在應(yīng)該看到一個(gè)用戶列表，每個(gè)用戶旁邊都有一個(gè)編輯文本。因?yàn)槲覀児潭〝?shù)據(jù)中只有一個(gè)用戶，所以我們只會(huì)看到一個(gè)用戶。您可以根據(jù)需要向用戶固定裝置中添加更多用戶對(duì)象。只需確保每個(gè)對(duì)像都有一個(gè)唯一的ID。

顯示單個(gè)用戶

既然我們已經(jīng)列出了我們的用戶，讓我們看看顯示用戶完整信息的方法。首先。通過將每個(gè)用戶名旁邊的“編輯”文本用鏈接括起來來更改users模板中的代碼。然後，將“編輯”更改為：

ember generate route users

接下來，讓我們使用以下命令生成一個(gè)用戶控制器：

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.find('user');
  }
});

在（用戶控制器）內(nèi)部，將內(nèi)容更改為如下所示：

ember generate adapter application

完成後，使用以下命令生成一個(gè)用於編輯用戶的模板：

import DS from 'ember-data';

export default DS.FixtureAdapter.extend({
});

目前，創(chuàng)建的模板（app/templates/users/show.hbs）為空。打開它並添加以下代碼：

User.reopenClass({
   FIXTURES: [{
      id: 1,
      firstName: 'James',
      lastName: 'Rice',
      addressLine: '66 Belvue Road',
      postCode: 'M235PS',
      country: 'United Kingdom'
   }]
});

這樣做，您應(yīng)該能夠看到您單擊的每個(gè)用戶的完整信息。

編輯單個(gè)用戶

如果您想編輯單個(gè)用戶，則必須遵循一些簡(jiǎn)單的步驟。首先，通過將每個(gè)用戶名旁邊的“編輯”文本用鏈接括起來來鏈接到用戶編輯路由。然後，將“編輯”更改為：

npm install -g bower

接下來，讓我們使用以下命令生成一個(gè)用戶控制器：

npm install -g ember-cli

在（用戶控制器）內(nèi)部，將內(nèi)容更改為如下所示：

ember new contactmanager

完成後，使用以下命令生成一個(gè)用於編輯用戶的模板：

cd contactmanager
npm install
bower install

在新的模板app/templates/users/edit中，粘貼以下代碼：

ember serve

此代碼在提交表單時(shí)調(diào)用我們控制器上的saveUser()函數(shù)。該函數(shù)傳遞正在編輯的用戶並保存修改後的信息。有了此更改，當(dāng)您單擊用戶的編輯鏈接時(shí)，您可以編輯其詳細(xì)信息。當(dāng)您單擊保存按鈕時(shí)，您可以保存它們，之後您將被重定向回用戶列表。萬歲！我們現(xiàn)在有一個(gè)簡(jiǎn)單的聯(lián)繫人列表管理器。您可以通過將其連接到真實(shí)後端來將其轉(zhuǎn)換為完整應(yīng)用程序，以便在頁面刷新時(shí)持久化數(shù)據(jù)。我還鼓勵(lì)您向應(yīng)用程序添加刪除功能，以便您可以隨時(shí)刪除不需要的用戶。

結(jié)論

Emberhttp://ipnx.cn/link/0e0f9e664029e8912996d65c1cf09761是一個(gè)用於構(gòu)建大型Web應(yīng)用程序的框架。它具有約定優(yōu)於配置的理念，這意味著它基於幾個(gè)常見的決定，並且具有許多默認(rèn)（約定），這使得您的開發(fā)過程更容易。這樣，您在開發(fā)過程中就不必做出許多瑣碎的決定。我希望您喜歡閱讀本教程並學(xué)習(xí)了有關(guān)如何在您的項(xiàng)目中使用如此強(qiáng)大而簡(jiǎn)單的JavaScript框架的新知識(shí)。請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我們您的想法。您可以在GitHub上找到應(yīng)用程序的代碼。

關(guān)於Ember入門和Ember CLI的常見問題

Ember和Ember CLI有什麼區(qū)別？

Ember是一個(gè)用於構(gòu)建Web應(yīng)用程序的JavaScript框架，而Ember CLI是一個(gè)命令行工具，可幫助您創(chuàng)建、開發(fā)和構(gòu)建Ember應(yīng)用程序。 Ember CLI提供了一個(gè)標(biāo)準(zhǔn)化的開發(fā)環(huán)境，使管理依賴項(xiàng)、自動(dòng)化任務(wù)和執(zhí)行最佳實(shí)踐變得更容易。

如何安裝Ember CLI？

要安裝Ember CLI，您需要在系統(tǒng)上安裝Node.js和npm。安裝這些先決條件後，您可以使用終端中的以下命令安裝Ember CLI：npm install -g ember-cli。

我收到一條錯(cuò)誤消息，提示“您必須位於Ember CLI項(xiàng)目?jī)?nèi)部才能使用serve命令”。這是什麼意思？

當(dāng)您嘗試在Ember CLI項(xiàng)目目錄之外運(yùn)行ember serve命令時(shí)，會(huì)出現(xiàn)此錯(cuò)誤。要解決此問題，請(qǐng)?jiān)谶\(yùn)行ember serve之前，使用cd命令導(dǎo)航到項(xiàng)目的根目錄。

如何使用Ember CLI創(chuàng)建一個(gè)新的Ember應(yīng)用程序？

您可以使用ember new命令後跟應(yīng)用程序的名稱來創(chuàng)建一個(gè)新的Ember應(yīng)用程序。例如，ember new my-app將創(chuàng)建一個(gè)名為“my-app”的新Ember應(yīng)用程序。

我應(yīng)該了解哪些基本的Ember CLI命令？

您應(yīng)該了解的一些基本的Ember CLI命令包括ember new（創(chuàng)建新應(yīng)用程序）、ember serve（啟動(dòng)開發(fā)服務(wù)器）、ember generate（生成新文件）和ember build（構(gòu)建您的應(yīng)用程序以進(jìn)行部署）。

如何使用Ember CLI構(gòu)建我的應(yīng)用程序以進(jìn)行生產(chǎn)？

您可以使用ember build命令並將--environment選項(xiàng)設(shè)置為“production”來構(gòu)建您的應(yīng)用程序以進(jìn)行生產(chǎn)。該命令如下所示：ember build --environment production。

如何使用Ember CLI在我的Ember應(yīng)用程序中生成新文件？

您可以使用ember generate命令後跟文件類型及其名稱來在Ember應(yīng)用程序中生成新文件。例如，ember generate route about將生成一個(gè)名為“about”的新路由。

如何使用Ember CLI啟動(dòng)開發(fā)服務(wù)器？

您可以使用ember serve命令啟動(dòng)開發(fā)服務(wù)器。這將啟動(dòng)服務(wù)器，並使您的應(yīng)用程序可在http://localhost:4200訪問。

如何更新Ember CLI？

您可以先使用命令npm uninstall -g ember-cli卸載舊版本，然後使用命令npm install -g ember-cli安裝新版本來更新Ember CLI。

.ember-cli文件的用途是什麼？

.ember-cli文件是Ember CLI的配置文件。它允許您自定義Ember CLI項(xiàng)目的行為。例如，您可以指定開發(fā)服務(wù)器的默認(rèn)端口，啟用或禁用某些功能等等。

以上是灰燼和Ember CLI入門的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！