编辑页面

快速开始


欢迎来到Ember!按照本指南使用HTML,JavaScript,命令行和一些Ember最佳功能构建简单的Web应用程序。 每个步骤都有代码,您可以直接复制和粘贴或修改以使其成为自己的代码。 一路上,你将被介绍给Ember社区,以便您知道谁要求帮助以及如何继续学习旅程。

我们将介绍以下步骤:

  1. 安装ember。
  2. 创建新应用程序。
  3. 定义一条路线。
  4. 编写UI组件。
  5. 构建您的应用程序部署到生产。
  6. 将您的应用部署到NetWify。

安装ember.

您可以使用NPM使用单个命令安装Ember, node.js包管理器。 在您的终端中键入它:

npm install -g ember-cli

没有npm?了解如何在此处安装node.js和npm. 对于Ember CLI项目所需的完整依赖项列表,访问Ember CLI指南 - 安装.

创建一个新的应用程序

一旦您通过NPM安装了Ember CLI, you will have access to a new ember command in your terminal. You can use the ember new command to create a new application.

ember new ember-quickstart --lang en

This one command will create a new directory called ember-quickstart and set up a new Ember application inside of it. The --lang en option sets the app's primary language to English to help improve 无障碍. 开箱即用,您的申请将包括:

  • 一个开发服务器。
  • 模板编译。
  • JavaScript和CSS缩小。
  • 现代特色通过Babel。

通过提供在集成包中构建生产就绪的Web应用程序所需的一切, Ember使新的项​​目成为微风。

让我们确保一切正常工作。 cd into the application directory ember-quickstart and start the development server by typing:

cd ember-quickstart
ember serve

几秒钟后,您应该看到如下所示的输出:

Livereload server on http://localhost:7020
Serving on http://localhost:4200/

(要随时停止服务器,请在终端中键入Ctrl-C。)

打开http://localhost:4200在您的选择浏览器中。 你应该看到一个ember欢迎页面,而不是其他的。

Zoey说......
如果您遇到此跑步遇到问题,其他Ember开发人员会很乐意提供帮助! Visit ember社区页面加入聊天团体或论坛。

恭喜!您刚刚创建并启动了您的第一个Ember应用程序。

在模板中写一些HTML

We will start by editing the 应用 template. 当用户加载应用程序时,此模板始终在屏幕上。 In your editor, open app/templates/application.hbs and change it to the following:

PeopleTracker

{{outlet}}

Ember检测到更改的文件,并在后台自动重新加载页面。 您应该看到“PEOPLETRACKER”取代了欢迎页面。 You also added an {{outlet}} to this page, 这意味着任何路线都将在该地方呈现。

定义一条路线

让我们构建一个显示科学家列表的应用程序。 为此,第一步是创建一条路线。 目前,您可以将路由视为构成应用程序的不同页面。

ember来了发电机这为常用任务自动化样板代码。 To generate a route, type this in a new terminal window in your ember-quickstart directory:

ember generate route scientists

您将看到这样的输出:

installing route
  create app/routes/scientists.js
  create app/templates/scientists.hbs
updating router
  add route scientists
installing route-test
  create tests/unit/routes/scientists-test.js

那是Ember告诉你它创造的:

  1. A template to be displayed when the user visits /scientists.
  2. A Route object that fetches the model used by that template.
  3. An entry in the application's router (located in app/router.js).
  4. 这条路线的单元测试。

打开the newly-created template in app/templates/scientists.hbs and add the following HTML:

{{page-title "Scientists"}}

科学家榜单

在您的浏览器中,打开http://localhost:4200/scientists. You should see the

we put in the scientists.hbs template right below the

from our 应用.hbs template.

Since the scientist route is nested under the application route, Ember will render its content inside the application route template's {{outlet}} directive.

Now that we've got the scientists template rendering, 让我们给它一些数据呈现。 我们通过指定一个来这样做模型对于那条路, and we can specify a model by editing app/routes/scientists.js.

We'll take the code created for us by the generator and add a 模型() method to the Route:

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

export default class ScientistsRoute extends Route {
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
}

此代码示例使用名为classes的JavaScript的功能。 了解更多概述最新的JavaScript功能.

In a route's 模型() method, you return whatever data you want to make available to the template. 如果您需要异步获取数据, the 模型() method supports any library that uses JavaScript承诺.

现在让我们告诉Ember如何将该数组转换为HTML。 Open the scientists template and add the following code to loop through the array and print it:

科学家榜单

    {{#each @model as |scientist|}}
  • {{scientist}}
  • {{/each}}

Here, we use the each 帮手要循环阵列中的每个项目 provided from the 模型() hook. Ember will render the 堵塞含有 inside the {{#each}}...{{/each}} 帮手 once for each item (each scientist in 我们的案例)在阵列中。正在呈现的项目(科学家) currently will be made available in the scientist variable, as denoted by as |scientist| in the each helper.

The end result is that there will be one

  • element corresponding to each scientist in the array inside the
      unordered list.

  • 创建UI组件

    随着应用程序的增长,您将注意到您在多页之间共享UI元素, 或在同一页面上多次使用它们。 Ember可以轻松地将模板重新推荐为可重用组件。

    Let's create a component that we can use in multiple places to show a list of people.

    像往常一样,有一个发电机,让我们这么容易。 通过键入键入:

    ember generate component people-list
    

    Copy and paste the scientists template into the component's template and edit it to look as follows:

    {{@title}}

      {{#each @people as |person|}}
    • {{person}}
    • {{/each}}

    请注意,我们已从硬编码字符串(“科学家列表”中更改了标题) to {{@title}}. The @ indicates that @title is an argument that will be 传入组件,这使得更容易重用相同的组件 我们正在建造的应用程序的其他部分。

    We've also renamed scientist to the more-generic person, 将组件的耦合降低到它使用的位置。

    Our component is called , based on its name on the file system. Please note that the letters P and L are capitalized.

    Zoey说......
    组件的名称来自其文件名。 We capitalize the first letter and every letter after -, then remove the hyphens. 这被称为Pascal案例。

    Save this template and switch back to the scientists template.

    我们要告诉我们的组成部分:

    1. What title to use, via the @title argument.
    2. What array of people to use, via the @people argument. We'll provide this route's @model as the list of people.

    我们需要对我们之前写的代码进行一些更改。

    在本教程中的其余代码示例中,每当我们添加或删除代码时,我们都会显示“DFF”。您需要删除的线路在它们面前有一个减号,以及您应该添加的线条具有加号。如果您使用屏幕阅读器,请在使用指南时,我们推荐使用Firefox和VoiceOver进行最佳体验。

    让我们用我们的新组件化版本替换所有旧代码:

    科学家榜单

      {{#each @model as |scientist|}}
    • {{scientist}}
    • {{/each}}

    返回浏览器,您应该看到UI看起来相同。 唯一的区别在于现在我们将列表组织成了更可重复使用和更可维护的版本。

    如果您创建一个显示其他人列表的新路由,您可以在操作中看到此操作。 作为额外的练习(我们不会覆盖), you can try to create a programmers route that shows a list of famous programmers. If you re-use the component, you can do it with almost no code at all.

    响应用户互动

    到目前为止,我们的应用程序是列出数据,但用户无法提供 与信息进行互动。在Web应用程序中,我们经常想回复 用户操作,如点击或播放。 ember这很容易做到。

    First, we can modify the component to include a button:

    {{@title}}

      {{#each @people as |person|}}
    • {{/each}}

    现在我们有一个按钮,我们需要将其连接到努力某物当用户时 clicks on it. For simplicity, let's say we want to show an alert dialog with 单击按钮时的人的名称。

    So far, our component is purely presentational – it takes some 输入为参数并使用模板渲染它们。介绍行为 到我们的组件 - 处理按钮单击此用例,我们需要 attach some 代码到组件。

    除了模板外,组件还可以具有JavaScript文件 this exact purpose. Go ahead and create a .js file with the same name and in the same directory as our template (app/components/people-list.js), 并粘贴以下内容:

    import Component from '@glimmer/component';
    import { action } from '@ember/object';
    
    export default class PeopleListComponent extends Component {
      @action
      showPerson(person) {
        alert(`The person's name is ${person}!`);
      }
    }
    

    Note: If you want this file created for you, you may pass the -gc flag when running the component generator.

    在这里,我们创建了一个基本组件类,并添加了一个接受一个方法 人作为论证,并以他们的名字为提醒对话框。这 @action 装饰者表示我们希望将此方法用作行动 在我们的模板中,响应用户交互。

    现在我们已经实施了所需的行为,我们可以回到 组件的模板和电线所有内容:

    {{@title}}

      {{#each @people as |person|}}
    • {{/each}}

    Here, we used the on 改性剂 to attach the this.showPerson 行动 to 模板中的按钮。

    虽然存在问题 - 如果您在浏览器中尝试过此问题,请 将快速发现单击按钮将提出警报 dialog that said "The person's name is [Object MouseEvent]!" – eek!

    这个错误的原因是我们写了我们的行动来争论 - 这 人的名字 - 我们忘了通过它。修复很容易:

    {{@title}}

      {{#each @people as |person|}}
    • {{/each}}

    Instead of passing the action to the on 改性剂 directly, we used the fn帮手 to pass the person as an argument which our action expects.

    随意在浏览器中尝试。最后,一切都应该表现得完全 as we hoped!

    建筑为生产

    现在我们已经写了我们的应用程序并验证了它在开发中的工作, 是时候准备好部署给我们的用户了。

    为此,请运行以下命令:

    ember build --environment=production
    

    The build command packages up all of the assets that make up your application—JavaScript,模板,CSS,Web字体,图像和 more.

    In this case, we told Ember to build for the production environment via the --environment flag. 这会创建一个已准备好上传到您的Web主机的优化捆绑包。 一旦建造完成, you'll find all of the concatenated and minified assets in your application's dist/ directory.

    Ember社区价值协作和建立每个人都依赖的常用工具。 如果您有兴趣以快速可靠的方式将应用部署到生产, check out the Ember CLI部署添加在。

    如果将应用程序部署到Apache Web服务器,请先为应用程序创建新的虚拟主机。 To make sure all routes are handled by index.html, 将以下指令添加到应用程序的虚拟主机配置:

    FallbackResource index.html
    

    将您的应用部署到NetWify

    netlify.是将应用程序部署到Web的许多方法之一,以便您可以与他人分享!

    关于NetLify.

    为什么netlify?

    它不需要高度的知识,让您将您的网站部署到生产。 NetLify提供免费帐户选项,不需要信用卡。 These Guides themselves are hosted on Netlify, while other parts of emberjs.com are hosted using Heroku, Fastly, GitHub pages, and AWS. 总体而言,Ember开发人员有许多选择它们如何部署应用程序! NetLify只是您的众多选择之一。

    以下这些步骤将帮助您在几分钟内启动您的网站:

    首先,你需要注册NetLify帐户如果您还没有:

    部署到NetWify.

    下一步是让Web App Server知道如何处理URL。有两种方法可以这样做。

    One, you can create a file in your ember-quickstart folder called _redirects. Add /* /index.html 200 to the first line and save the file. This will let the server know to redirect all pages to index.html file. Once redirected, Ember.js app itself will generate the matching html for URLs such as /scientists.

    二,您可以使用由社区创建的Addon,例如ember-cli netlify,处理URL。

    现在您已准备好将您的应用部署到NetLify平台上的生产。有两种方法可以做到这一点:

    1. 使用拖放部署以NetWify
    2. 使用git部署到NetWify(特别是GitHub)

    使用拖放部署以NetWify

    You may need to re-create your dist directory to include changes made to _redirects file by running this command

    ember build --environment=production
    

    登录到NetWify帐户并在“站点”部分中,您应该看到NetLify拖放区域

    NetLify拖放区域

    Next, locate your dist folder on your local machine and drag and drop it into this area

    当您的文件已成功上传时,您应该在“入门”部分中查看部署状态

    使用NetWify使用拖放开始

    一旦您看到“您的网站现已实现,您可以点击该链接提供了”入门“部分查看您的网站

    在NetLify上查看您的网站

    恭喜!您的网站现在居住在生产中!

    使用git部署到NetWify(特别是GitHub)

    确保登录您的NetLify帐户和“站点”部分

    单击“来自git新站点”的按钮。

    NetLify连续部署Git

    单击“连续部署”下的“GitHub”按钮以连接到GitHub帐户。请将您的一系列GitHub登录屏幕带到一系列GitHub登录屏幕上,并要求选择与NetWify相关的GitHub首选项

    NetLify选择要部署的GitHub存储库

    使用NetLify成功连接GitHub帐户后,您应该看到要选择的存储库列表。选择或搜索您希望部署的GitHub存储库

    NetLify Ember默认部署设置

    如果已成功选择repo并且它是一个ember应用程序,NetLify将自动生成Deploy Setting,如下所示。这些指令假设您不希望更改NetLify生成的任何默认设置。因此,如果一切看起来对您好,请继续,然后单击“部署网站”按钮

    NetLify GitHub部署概述

    单击“部署站点”按钮后,您将被带到您的网站“概述”,您应该查看部署的状态

    netlify github部署确认

    一旦您看到“您的网站现已实现,您可以点击该链接提供了”入门“部分查看您的网站

    在NetLify上查看您的网站

    恭喜!您的网站现在居住在生产中!

    下一步

    现在您的应用程序部署,接下来应该怎么做?

    进入下一级别

    这里有一个官方的免费教程,在指南中米进入今天使用的一些功能。 试一试!

    探索生态系统

    现在你有基础,你感受到了创造性和冒险吗? Ember社区已创建数百个附件,您可以在您的应用程序中免费使用。 Addons让您快速添加日历,纳米栏,付款,身份验证,主题等功能。 Visit ember观察者浏览可能性!

    它的风格

    That app we made is a bit plain. Do you know any CSS? Put your styles in app/styles/app.css, which is automatically included in your app build.

    与Ember社区联系

    让Ember特别的一件事是你创造的每个应用程序都有一个很多 与其他人所做的应用程序共同。 这意味着您可以与其他开发人员联系,他们可以与其他兴趣和技术挑战联系起来。 Visit the Ember社区页面要了解您可以连接的方式。查找附近的会员,提出问题,遵循通讯,以及更多! 我们希望能见到你!