灰烬和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中文网其他相关文章！