在你开始编写Ember应用之前，最好是吸纳了解一下Ember是如何工作的。这一点非常重要。

路由器和路由处理程序

想象一下，我们正在为一个网站编写一个Web应用程序，如果用户需要通过某些按钮或者链接跳转到她想去的页面要如何做？——只需要一个<a href=""></a>即可。

但是在Ember应用中是如何实现跳转的呢？？？

在Ember中，这些问题的答案由URL确定。可以通过以下几种方式设置URL：

• 用户在首次加载应用的时候。
• 用户手动改变URL，比如点击返回按钮或者直接修改浏览器URL。
• 用户点击应用内的一个连接。
• 应用中的其他事件导致URL更改。

无论如何设置URL，首先发生的都是Ember路由器将URL映射到路由处理程序。

一个路由处理程序最典型的用法有如下两个

• 加载Model
• 渲染模板，使其可以访问model回调返回的数据。

Models

模型（model）代表持久状态。

尽管可以将模型配置为保存到其他任何地方，例如浏览器的本地存储，但是模型通常会将信息保留到Web服务器。

默认情况下，创建的Ember应用程序包括Ember Data，该Ember Data是与Ember集成并提供可靠的常规模型层的独立数据库。我们将在下一节的教程中看到Ember Data的实际应用。

当然你也可以使用第三方的持久化框架，比如Redux（https://github.com/ember-redux/ember-redux）或者是Apollo(https://github.com/ember-graphql/ember-apollo-client)，或者是自定义的API服务。

Templates

Ember应用使用handlebars模板作为用户界面。

如果是你学过web，对于下面的HTML标签肯定非常熟悉。

<div>Hi, this is a valid Ember templete!</div>

这只是一个静态的HTML标签，Ember使用动态的模板语言Handlebars。除了静态HTML内容之外，Ember还使用Handlebars的语法来描述动态用户界面元素。比如下面的页面。

{{!-- The model for this route is the current user --}}

<div>

  Hi <img src="{{@model.profileImage}}" alt="{{@model.name}}'s profile picture"> {{@model.name}},

  this is a valid Ember template!

</div>

{{#if @model.isAdmin}}

  <div>Remember, with great power comes great responsibility!</div>

{{/if}}

在此页面上有三个动态属性@model.profileImage，@model.name，@model.isAdmin，属性的值从路由中传递过来。

• {{!-- 注释标签 --}} 用来注释
• {{...}}标签用来获取动态值。
• {{#if}}...{{/if}} 条件判断标签。

在本教程的后面模板章节会详细说明这些标签的使用。

Components

组件使您可以分解模板，并将它们组织成小型，独立且可重复使用的片段。

在其最基本的形式中，组件只是一块可以按名称引用的模板。与编程语言中的函数相似，它们也可以接受参数，从而可以根据要渲染到的特定上下文对其进行自定义。

我们用组件重构前面的HTML代码段。

{{!-- The model for this route is the current user --}}

<div>

  Hi <UserProfile @user={{@model}} /> this is a valid Ember template!

</div>

{{#if @model.isAdmin}}

  <div>Remember, with great power comes great responsibility!</div>

{{/if}}

<UserProfile>就是自定义的组件标签。这一个标签你可以在任何一个hbs模板文件中使用，并且可以根据当前的路由环境动态传递@model的值。

您可以将组件视为Ember用来创建自己的HTML标签的方式。

除了呈现内容外，组件还可以具有与之关联的JavaScript代码，从而允许您添加行为，例如响应用户单击组件的行为。

紧接着，下一个章节将带着你使用上述的三个主要Ember特性，从0开始构建一个复杂、有后端交互的Ember应用。