灰燼和Ember CLI入門

核心要點

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

Ember多年來經歷了許多變化。其中最大的一次變化是引入了Ember CLI，這是一個為Ember構建的命令行工具。它結合了生成器、壓縮器、CSS預處理器編譯器、自動重載和ES6模塊加載器等多種功能。此命令行工具將幫助您減少在設置Grunt和Gulp等工具上花費的時間。可以說，對於任何全新的Ember項目，它都是這些工具的良好替代方案。在本文中，您將學習如何使用Ember CLI構建簡單的聯繫人管理器應用程序。本教程與我在SitePoint上發布的其他關於Ember的文章略有不同，因為它們沒有附帶Ember CLI。但是，大多數這些概念仍然適用，因此我建議您查看它們並繼續學習。本文的完整代碼可在GitHub上找到。

如何安裝Ember CLI

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

<code class="language-bash">npm install -g bower</code>

然後，要安裝Ember CLI，請運行以下命令：

<code class="language-bash">npm install -g ember-cli</code>

如何創建一個新的Ember項目

在開始進行精彩的操作之前，您需要打開終端並按順序執行以下命令，以便創建一個名為contactmanager的新項目文件夾：

<code class="language-bash">ember new contactmanager</code>

第二步，進入目錄，然後使用以下命令安裝所有npm和Bower依賴項：

<code class="language-bash">cd contactmanager
npm install
bower install</code>

此時，通過執行以下命令啟動內置的Ember服務器：

<code class="language-bash">ember serve</code>

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

Ember約定和結構

在深入構建應用程序之前，讓我們回顧一下一些Ember約定。

路由器和路由

路由是Ember應用程序的入口點。路由在app/router.js文件中使用Router定義。它們允許您訪問應用程序的不同部分。例如，如果您決定需要在應用程序中管理用戶，則必須定義用戶路由。您可以使用以下語法執行此操作：

<code class="language-bash">npm install -g bower</code>

這將為我們創建以下URL：

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

按照慣例，當您定義路由時，Ember期望找到其他關聯類型，例如路由、控制器和模板。我們可以決定顯式創建這些類型，或者允許Ember為我們創建它們。在許多應用程序中，您很可能必須自己創建它們，但這取決於您。請記住，區分路由器和路由至關重要。我們上面創建的URL結構是使用路由器完成的。這些僅顯示我們希望在應用程序中使用這些URL的意圖。我們還沒有創建實際的路由，而只是這些路由的URL。要創建路由，我們必須在routes文件夾中遵循此過程。如果您感到困惑，請不要擔心，因為我將在本文後面更深入地探討此主題。

控制器

控制器是一種用於存儲視圖狀態的類型，位於app/controllers文件夾中。它們與路由協同工作。在這種情況下，上面的URL對應於/user/，並且需要一個名為/users/的控制器。同樣在這裡，我們可以自由選擇是否自己定義它。控制器還定義視圖操作（如點擊、懸停等）的事件處理程序。

模板

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

組件

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

Ember-Data

這是一個由Ember核心團隊維護的庫，它補充了Ember核心，並充當管理數據模型的前端ORM。還有其他一些我以前沒有使用過的替代方案，並且不在本文的討論範圍之內，因為我們將使用Ember-data。

應用程序

我們將構建的聯繫人管理應用程序將包括一個用戶列表及其可用的聯繫信息。該應用程序將允許我們創建、編輯、刪除和查看用戶。為了使我們的應用程序簡潔明了，我們將使用Ember CLI附帶的固定適配器。這充當後端，除了數據不會在頁面刷新時持久化之外。首先，如果您尚未創建，請使用ember new contactmanager創建一個新的Ember項目。

生成用戶模型

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

<code class="language-bash">npm install -g ember-cli</code>

這將在app/models中創建一個名為user.js的文件，其內容如下：

<code class="language-bash">npm install -g bower</code>

進行必要的更改，以使導出語句如下所示：

<code class="language-bash">npm install -g ember-cli</code>

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

生成用戶路由

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

<code class="language-bash">ember new contactmanager</code>

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

<code class="language-bash">cd contactmanager
npm install
bower install</code>

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

<code class="language-bash">ember serve</code>

設置固定數據並生成用戶模板

此時，讓我們向我們的應用程序添加一些臨時數據。為此，運行以下命令：

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {});
});</code>

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

<code class="language-bash">ember generate model user</code>

並向您的用戶模型添加以下內容以創建一些固定裝置。

<code class="language-javascript">import DS from 'ember-data';

export default DS.Model.extend({
});</code>

如果您導航到URL localhost:4200/users，您只會看到舊的問候消息，而不會看到我們剛剛添加的用戶固定數據。要查看用戶數據，我們需要使用以下命令為用戶創建一個模板：

<code class="language-javascript">export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});</code>

這會在app/templates/文件夾中創建一個名為users.hbs的文件。打開此文件並將其內容更新如下：

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});</code>

您現在應該看到一個用戶列表，每個用戶旁邊都有一個編輯文本。因為我們固定數據中只有一個用戶，所以我們只會看到一個用戶。您可以根據需要向用戶固定裝置中添加更多用戶對象。只需確保每個對像都有一個唯一的ID。

顯示單個用戶

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

<code class="language-bash">ember generate route users</code>

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

<code class="language-javascript">import Ember from 'ember';

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

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

<code class="language-bash">ember generate adapter application</code>

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

<code class="language-javascript">import DS from 'ember-data';

export default DS.FixtureAdapter.extend({
});</code>

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

<code class="language-javascript">User.reopenClass({
   FIXTURES: [{
      id: 1,
      firstName: 'James',
      lastName: 'Rice',
      addressLine: '66 Belvue Road',
      postCode: 'M235PS',
      country: 'United Kingdom'
   }]
});</code>

這樣做，您應該能夠看到您單擊的每個用戶的完整信息。

編輯單個用戶

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

<code class="language-bash">npm install -g bower</code>

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

<code class="language-bash">npm install -g ember-cli</code>

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

<code class="language-bash">ember new contactmanager</code>

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

<code class="language-bash">cd contactmanager
npm install
bower install</code>

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

<code class="language-bash">ember serve</code>

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

結論

Emberhttps://www.php.cn/link/0e0f9e664029e8912996d65c1cf09761是一個用於構建大型Web應用程序的框架。它具有約定優於配置的理念，這意味著它基於幾個常見的決定，並且具有許多默認（約定），這使得您的開發過程更容易。這樣，您在開發過程中就不必做出許多瑣碎的決定。我希望您喜歡閱讀本教程並學習了有關如何在您的項目中使用如此強大而簡單的JavaScript框架的新知識。請在下面的評論中告訴我們您的想法。您可以在GitHub上找到應用程序的代碼。

關於Ember入門和Ember CLI的常見問題

Ember和Ember CLI有什麼區別？

Ember是一個用於構建Web應用程序的JavaScript框架，而Ember CLI是一個命令行工具，可幫助您創建、開發和構建Ember應用程序。 Ember CLI提供了一個標準化的開發環境，使管理依賴項、自動化任務和執行最佳實踐變得更容易。

如何安裝Ember CLI？

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

我收到一條錯誤消息，提示“您必須位於Ember CLI項目內部才能使用serve命令”。這是什麼意思？

當您嘗試在Ember CLI項目目錄之外運行ember serve命令時，會出現此錯誤。要解決此問題，請在運行ember serve之前，使用cd命令導航到項目的根目錄。

如何使用Ember CLI創建一個新的Ember應用程序？

您可以使用ember new命令後跟應用程序的名稱來創建一個新的Ember應用程序。例如，ember new my-app將創建一個名為“my-app”的新Ember應用程序。

我應該了解哪些基本的Ember CLI命令？

您應該了解的一些基本的Ember CLI命令包括ember new（創建新應用程序）、ember serve（啟動開發服務器）、ember generate（生成新文件）和ember build（構建您的應用程序以進行部署）。

如何使用Ember CLI構建我的應用程序以進行生產？

您可以使用ember build命令並將--environment選項設置為“production”來構建您的應用程序以進行生產。該命令如下所示：ember build --environment production。

如何使用Ember CLI在我的Ember應用程序中生成新文件？

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

如何使用Ember CLI啟動開發服務器？

您可以使用ember serve命令啟動開發服務器。這將啟動服務器，並使您的應用程序可在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項目的行為。例如，您可以指定開發服務器的默認端口，啟用或禁用某些功能等等。

以上是灰燼和Ember CLI入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！