Aurelia - 快速指南

Aurelia - 概述

框架的最佳定义可以在 Aurelia 官方文档中找到 -

好吧，这实际上很简单。Aurelia 只是 JavaScript。但是，它不是昨天的 JavaScript，而是明天的 JavaScript。通过使用现代工具，我们能够从头开始使用 ECMAScript 2016 编写 Aurelia。这意味着我们有本机模块、类、装饰器等等可以使用……你也可以使用它们。

Aurelia 不仅是用现代和未来的 JavaScript 编写的，而且还采用了现代的架构方法。过去，框架一直是庞大的巨兽。但 Aurelia 不是。它构建为一系列协作库。合在一起，它们形成了一个功能强大且健壮的框架，用于构建单页应用程序 (SPA)。但是，Aurelia 的库通常可以单独使用，在传统的网站上使用，甚至可以通过 NodeJS 等技术在服务器端使用。

Aurelia - 特性

组件 - 组件是 Aurelia 框架的构建块。它由 HTML 视图和 JavaScript 视图模型对组成。
Web 标准 - 这是最简洁的现代框架之一，完全专注于 Web 标准，无需不必要的抽象。
可扩展 - 该框架提供了一种简单的方法来与其他需要的工具集成。
商业支持 - Aurelia 提供商业和企业支持。它是 Durandal Inc. 的官方产品。
许可证 - Aurelia 是开源的，并根据 MIT 许可证授权。

Aurelia - 优势

Aurelia 非常简洁。如果您遵循框架约定，您就可以专注于您的应用程序，而不会让框架妨碍您。
它也很容易扩展。您可以添加或删除框架提供的任何工具，也可以添加任何其他不是框架一部分的工具。
Aurelia 非常易于使用。它面向开发人员体验。它节省了您大量时间。
框架本身面向 Web 标准，因此您将始终与现代概念保持同步。
Aurelia 的社区规模不是最大，但它非常敏捷、知识渊博，并且愿意在短时间内提供帮助。

局限性

没有主要的限制。该框架功能强大且易于使用。

Aurelia - 环境设置

在本节中，您将学习如何开始使用 Aurelia 框架。在您这样做之前，您需要在您的系统上安装NodeJS。

序号	软件和描述
1	NodeJS 和 NPM NodeJS 是 Aurelia 开发所需的平台。查看我们的NodeJS 环境设置。

步骤 1 - 下载 Aurelia 包

在下载 Aurelia 包之前，让我们在桌面上创建一个文件夹来放置我们的应用程序。

C:\Users\username\Desktop>mkdir aureliaApp

现在我们可以从官方Aurelia 网站下载该包。

Aurelia 支持ES2016 和TypeScript。我们将使用ES2016。将下载的文件解压缩到我们上面创建的aureliaApp文件夹中。

步骤 2 - 安装 Web 服务器

首先，我们需要从命令提示符窗口安装 Web 服务器。

C:\Users\username\Desktop\aureliaApp>npm install http-server -g

步骤 3 - 启动 Web 服务器

要启动 Web 服务器，我们需要在命令提示符中运行以下代码。

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

我们可以在浏览器中看到我们的第一个 Aurelia 应用程序。

Aurelia - 第一个应用

在本节中，我们将解释我们在上一节中创建的 Aurelia 启动应用程序。我们还将指导您完成文件夹结构，以便您掌握 Aurelia 框架背后的核心概念。

文件夹结构

package.json 代表有关已安装的npm 包的文档。它还显示了这些包的版本，并提供了一种简单的方法来添加、删除、更改版本或在需要在开发人员之间共享应用程序时自动安装所有包。
index.html 是应用程序的默认页面，就像大多数基于 HTML 的应用程序一样。它是加载脚本和样式表的地方。
config.js 是 Aurelia 加载器配置文件。您不会花太多时间使用此文件。
jspm_packages 是SystemJS 加载的模块的目录。
styles 是默认样式目录。您可以随时更改保存样式文件的位置。
src 文件夹是您将花费大部分开发时间的地方。它保存HTML 和js 文件。

源文件

正如我们之前所说，src 目录是保存应用程序逻辑的地方。如果您查看默认应用程序，您会发现app.js 和app.html 非常简单。

Aurelia 允许我们使用 JavaScript 核心语言进行类定义。以下默认示例显示了 EC6 类。

app.js

export class App {
   message = 'Welcome to Aurelia!';
}

message 属性使用${message}语法绑定到 HTML 模板。此语法表示转换为字符串并显示在模板视图中的一向绑定。

app.html

<template>
   <h1>${message}</h1>
</template>

正如我们在上一节中讨论的那样，我们可以通过在命令提示符窗口中运行以下命令来启动服务器。

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

应用程序将在屏幕上呈现。

Aurelia - 组件

组件是 Aurelia 框架的主要构建块。在本节中，您将学习如何创建简单的组件。

简单组件

如前一节所述，每个组件都包含用JavaScript编写的视图模型和用HTML编写的视图。您可以看到以下视图模型定义。它是一个ES6示例，但您也可以使用TypeScript。

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

我们可以将我们的值绑定到视图，如以下示例所示。${header}语法将绑定来自MyComponent的定义的header值。相同的概念应用于content。

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

以上代码将产生以下输出。

组件函数

如果要在用户点击按钮时更新页眉和页脚，可以使用以下示例。这次我们在EC6类构造函数中定义header和footer。

app.js

export class App{  
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

我们可以添加click.delegate()将updateContent()函数与按钮连接起来。我们将在后续章节中详细介绍这一点。

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

单击按钮后，将更新页眉和内容。

Aurelia - 组件生命周期

Aurelia 使用组件生命周期方法来操作组件生命周期。在本节中，我们将向您展示这些方法并解释组件生命周期。

constructor() - 构造函数方法用于初始化使用类创建的对象。此方法首先被调用。如果您没有指定此方法，则将使用默认构造函数。
created(owningView, myView) - 一旦创建了视图和视图模型并将其连接到控制器，就会调用此方法。此方法接受两个参数。第一个是声明组件的视图(owningView)。第二个是组件视图(myView)。
bind(bindingContext, overrideContext) - 在此时，绑定已开始。第一个参数表示组件的绑定上下文。第二个是overrideContext。此参数用于添加其他上下文属性。
attached() - 一旦组件附加到 DOM，就会调用附加方法。
detached() - 此方法与attached相反。当组件从 DOM 中删除时调用它。
unbind() - 最后一个生命周期方法是unbind。当组件解除绑定时调用它。

当您希望对组件有更多控制时，生命周期方法很有用。当您需要在组件生命周期的某个点触发某些功能时，可以使用它们。

所有生命周期方法如下所示。

app.js

export class App {
   constructor(argument) {
      // Create and initialize your class object here...
   }

   created(owningView, myView) {
      // Invoked once the component is created...
   }

   bind(bindingContext, overrideContext) {
      // Invoked once the databinding is activated...
   }

   attached(argument) {
      // Invoked once the component is attached to the DOM...
   }

   detached(argument) {
      // Invoked when component is detached from the dom
   }

   unbind(argument) {
      // Invoked when component is unbound...
   }
}

Aurelia - 自定义元素

Aurelia 提供了一种动态添加组件的方法。您可以在应用程序的不同部分重用单个组件，而无需多次包含 HTML。在本节中，您将学习如何实现这一点。

步骤 1 - 创建自定义组件

让我们在src文件夹内创建一个新的components目录。

C:\Users\username\Desktop\aureliaApp\src>mkdir components

在此目录中，我们将创建custom-component.html。此组件稍后将插入 HTML 页面中。

custom-component.html

<template>
   <p>This is some text from dynamic component...</p>
</template>

步骤 2 - 创建主组件

我们将在app.js中创建一个简单的组件。它将用于在屏幕上呈现header和footer文本。

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

步骤 3 - 添加自定义组件

在我们的app.html文件中，我们需要requirecustom-component.html才能动态插入它。完成后，我们可以添加一个新元素custom-component。

app.html

<template>
   <require from = "./components/custom-component.html"></require>

   <h1>${header}</h1>
   <p>${content}</p>
   <custom-component></custom-component>
</template>

以下是输出。Header和Footer文本从app.js内的myComponent呈现。附加文本从custom-component.js呈现。

Aurelia - 依赖注入

在本节中，您将学习如何使用 Aurelia 依赖注入库。

首先，我们需要在src文件夹内创建新文件dependency-test.js。在此文件中，我们将创建一个简单的类DependencyTest。此类稍后将作为依赖项注入。

src/dependency-test.js

export class DependencyTest {
   constructor() {
      this.test = "Test is succesfull!!!";
   }
}

注入

在我们的app.js文件中，我们正在导入inject库和我们上面创建的DependencyTest类。要注入该类，我们使用@inject()函数。我们的App类只会将其记录到开发者控制台。

import {inject} from 'aurelia-framework';
import {DependencyTest} from './dependency-test';

@inject(DependencyTest)

export class App {
   constructor(DependencyTest) {
      console.log(DependencyTest);
   }
}

我们可以检查控制台以查看是否注入了DependencyTest类。

后续章节将提供更多 Aurelia 依赖注入的示例。

Aurelia - 配置

在本节中，我们将向您展示如何根据您的需要配置 Aurelia 框架。有时，您需要在应用程序呈现给用户之前设置初始配置或运行一些代码。

步骤 1 - 创建 main.js

让我们在src文件夹内创建main.js文件。在此文件中，我们将配置 Aurelia。

您还需要告诉 Aurelia 加载配置模块。您可以在以下示例中看到注释部分。

index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Aurelia</title>
      <link rel = "stylesheet" href = "styles/styles.css">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
   </head>

   <body aurelia-app = "main"> 
      <!--Add "main" value to "aurelia-app" attribute... -->
      <script src = "jspm_packages/system.js"></script>
      <script src = "config.js"></script>
		
      <script>
         SystemJS.import('aurelia-bootstrapper');
      </script>
   </body>
</html>

步骤 2 - 默认配置

以下代码展示了如何使用默认配置。configure 函数允许手动设置配置。我们正在设置 use 属性以指定我们需要的内容。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

步骤 3 - 高级配置

我们可以使用许多配置选项。本文档的范围不包括向您展示所有内容，因此我们将通过以下示例说明配置的工作原理。我们基本上是在告诉 Aurelia 使用默认数据绑定语言、默认资源、开发日志记录、路由器、历史记录和事件聚合器。这些是一组标准插件。

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();

   aurelia.start().then(() => aurelia.setRoot());
}

注意 - 这些设置将在下一章中详细解释。

Aurelia - 插件

当您开始构建应用程序时，大多数情况下您会想要使用一些额外的插件。在本章中，您将学习如何在 Aurelia 框架中使用插件。

标准插件

在上一章中，我们了解了如何在 Aurelia 框架中使用默认配置。如果您使用默认配置，则可以使用一组标准插件。

defaultBindingLanguage() - 此插件提供了一种将视图模型与视图连接的简单方法。您已经看到了单向数据绑定语法(${someValue})。即使您可以使用其他绑定语言，也建议使用默认绑定语言。
defaultResources() - 默认资源为我们提供了一些基本结构，例如if、repeat、compose等。您甚至可以自己构建这些结构，但由于它们使用得如此普遍，Aurelia 已经在该库中创建了它们。
Router() - 大多数应用程序都使用某种路由。因此，Router 是标准插件的一部分。您可以在后续章节中查看有关路由的更多信息。
History() - History 插件通常与router一起使用。
eventAggregator() - 此插件用于跨组件通信。它处理在应用程序内部发布和订阅消息或通道。

官方插件

这些插件不是默认配置的一部分，但经常使用。

fetch() - Fetch 插件用于处理 HTTP 请求。如果需要，您可以使用其他 AJAX 库。
animatorCSS() - 此插件提供了一种处理 CSS 动画的方法。
animator-velocity() - 您可以使用 Velocity 动画库而不是 CSS 动画。这些插件使我们能够在 Aurelia 应用程序中使用 Velocity。
dialog() - Dialog 插件提供了一个高度可定制的模态窗口。
i18n() - 这是用于国际化和本地化的插件。
ui-virtualization() - 虚拟化是一个用于处理大型性能密集型 UI 任务的有用库。
validation() - 当您需要验证数据时，请使用此插件。

在撰写本教程时，上面解释的所有插件均由 Aurelia 核心团队官方维护。将来会添加一些其他有用的插件。以下示例展示了如何配置应用程序以使用插件。

安装插件

例如，如果我们想使用animator-css和animator-velocity，我们需要先安装它们。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

在上一章中，您学习了如何使用手动配置。我们可以在main.js文件中添加我们的插件。

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}

Aurelia - 数据绑定

Aurelia 有自己的数据绑定系统。在本章中，您将学习如何使用 Aurelia 绑定数据，并解释不同的绑定机制。

简单绑定

您已经在我们之前的一些章节中看到了简单绑定。${...}语法用于链接视图模型和视图。

app.js

export class App {  
   constructor() {
      this.myData = 'Welcome to Aurelia app!';
   }
}

app.html

<template>
   <h3>${myData}</h3>
</template>

双向绑定

Aurelia 的优势在于其简单性。当我们绑定到input字段时，双向数据绑定会自动设置。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData" />
   <h3>${myData}</h3>
</template>

现在，我们的视图模型和视图已链接。每当我们在input字段中输入一些文本时，视图都会更新。

Aurelia - 绑定行为

在本章中，您将学习如何使用行为。您可以将绑定行为视为一个过滤器，它可以更改绑定数据并以不同的格式显示它。

节流

此行为用于设置某些绑定更新应该发生的频率。我们可以使用throttle来降低更新输入视图模型的速率。考虑上一章中的示例。默认速率为200 毫秒。我们可以通过在我们的输入中添加& throttle:2000将其更改为2 秒。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & throttle:2000" />
   <h3>${myData}</h3>
</template>

去抖动

debounce与throttle几乎相同。不同之处在于，去抖动将在用户停止键入后更新绑定。以下示例将在用户停止键入两秒钟后更新绑定。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & debounce:2000" />
   <h3>${myData}</h3>
</template>

一次性

oneTime是性能方面最有效的行为。当您知道数据应该只绑定一次时，应始终使用它。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & oneTime" />
   <h3>${myData}</h3>
</template>

以上示例会将文本绑定到视图。但是，如果我们更改默认文本，则不会发生任何事情，因为它只绑定了一次。

Aurelia - 转换器

如果需要在 Aurelia 应用程序中转换某些值，可以使用转换器，而不是手动将值转换为所需的格式。

转换日期

当我们想要将默认日期值转换为某些特定格式时，可以使用momentJS库。这是一个用于操作日期的小型库。

C:\Users\username\Desktop\aureliaApp>jspm install moment

让我们创建一个新文件converters.js。我们将使用此文件添加转换器特定的代码。使用以下命令或手动创建文件。

C:\Users\username\Desktop\aureliaApp>touch converters.js

converter.js

在此文件中，我们将导入moment库并将DateFormatValueConverter设置为仅返回月、日和年值，而无需其他数据。需要注意的重要一点是，Aurelia 可以识别任何以ValueConverter结尾的类。这就是我们的类名为DateFormatValueConverter的原因。此类将注册为dateFormat，我们以后可以在视图中使用它。

converters.js

import moment from 'moment';

export class DateFormatValueConverter {
   toView(value) {
      return moment(value).format('M/D/YYYY');
   }
}

在app.js中，我们将只使用当前日期。这将是我们的视图模型。

app.js

export class App {
   constructor() {
      this.currentDate = new Date();
   }
}

我们已经在自定义元素章节中讨论过require。管道符号 | 用于应用转换器。我们仅使用dateFormat，因为这是 Aurelia 注册DateFormatValueConverter的方式。

app.html

<template>
   <require from = "./converters"></require>

   <h3>${currentDate | dateFormat}</h3>
</template>

转换货币

这是货币格式化的示例。您会注意到该概念与以上示例相同。首先，我们需要从命令提示符安装numeral库。

C:\Users\username\Desktop\aureliaApp>jspm install numeral

转换器将设置货币格式。

converters.js

import numeral from 'numeral';

export class CurrencyFormatValueConverter {
   toView(value) {
      return numeral(value).format('($0,0.00)');
   }
}

视图模型只会生成一个随机数。我们将将其用作货币值并每秒更新一次。

app.js

export class App {
   constructor() {
      this.update();
      setInterval(() => this.update(), 1000);
   }
   update() {
      this.myCurrency = Math.random() * 1000;
   }
}

我们的视图将显示转换后的随机生成的数字，作为货币。

app.html

<template>
   <require from = "./converters"></require>

   <h3>${myCurrency | currencyFormat}</h3>
</template>

Aurelia - 事件

在本章中，您将学习有关 Aurelia 事件的知识。

事件委托

事件委托是一个有用的概念，其中事件处理程序附加到一个顶级元素，而不是 DOM 上的多个元素。这将提高应用程序的内存效率，应尽可能使用。

这是一个使用 Aurelia 框架进行事件委托的简单示例。我们的视图将有一个带有click.delegate事件附加的按钮。

app.html

<template>
   <button click.delegate = "myFunction()">CLICK ME</button>
</template>

单击按钮后，将调用myFunction()。

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

我们将获得以下输出。

事件触发

在某些情况下，您无法使用委托。某些 JavaScript 事件不支持委托；IOS 对某些元素支持它。要了解哪些事件允许委托，您可以搜索任何事件的bubble属性此处。在这些情况下，您可以使用trigger()方法。

以上示例中的相同功能可以使用click.trigger创建。

app.html

<template>
   <button click.trigger = "myFunction()">CLICK ME</button>
</template>

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

Aurelia - 事件聚合器

当您的事件需要附加到更多侦听器或当您需要观察应用程序的某些功能并等待数据更新时，应使用事件聚合器。

Aurelia 事件聚合器有三种方法。publish方法将触发事件，并且可以被多个订阅者使用。要订阅事件，我们可以使用subscribe方法。最后，我们可以使用dispose方法分离订阅者。以下示例演示了这一点。

我们的视图将仅为这三个功能中的每一个提供三个按钮。

app.html

<template>
   <button click.delegate = "publish()">PUBLISH</button><br/>
   <button click.delegate = "subscribe()">SUBSCRIBE</button><br/>
   <button click.delegate = "dispose()">DISPOSE</button>
</template>

我们需要导入eventAggregator并在能够使用它之前注入它。

app.js

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
   constructor(eventAggregator) {
      this.eventAggregator = eventAggregator;
   }
   publish() {
      var payload = 'This is some data...';
      this.eventAggregator.publish('myEventName', payload);
   }
   subscribe() {
      this.subscriber = this.eventAggregator.subscribe('myEventName', payload => {
         console.log(payload);
      });
   }
   dispose() {
      this.subscriber.dispose();
      console.log('Disposed!!!');
   }
}

我们需要单击SUBSCRIBE按钮以侦听将来发布的数据。一旦订阅者附加，每当发送新数据时，控制台都会记录它。如果我们单击PUBLISH按钮五次，我们会看到它每次都被记录。

我们还可以通过单击DISPOSE按钮分离我们的订阅者。

Aurelia - 表单

在本章中，您将学习如何在 Aurelia 框架中使用表单。

文本输入

首先，我们将了解如何提交input表单。该视图将有两个用于用户名和密码的输入表单。我们将使用value.bind进行数据绑定。

app.html

<template>  
   <form role = "form" submit.delegate = "signup()">
      
      <label for = "email">Email</label>
      <input type = "text" value.bind = "email" placeholder = "Email">

      <label for = "password">Password</label>
      <input type = "password" value.bind = "password" placeholder = "Password">

      <button type = "submit">Signup</button>
   </form>
</template>

signup 函数将只从输入中获取用户名和密码值，并在开发人员控制台中记录它。

export class App {
   email = '';
   password = '';

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

复选框

以下示例将演示如何使用 Aurelia 框架提交复选框。我们将创建一个复选框并将checked值绑定到我们的视图模型。

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
   
      <label for = "checkbox">Checkbox</label>
      <input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
      <button type = "submit">SUBMIT</button>
      
   </form>
</template>

表单提交将只在控制台中记录checked值。

app.js

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

单选按钮

以下示例将演示如何提交单选按钮。语法repeat.for = "option of options"将遍历对象数组并为每个对象创建一个单选按钮。这是在 Aurelia 框架中动态创建元素的一种简洁方法。其余部分与前面的示例相同。我们正在绑定model和checked值。

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
	
      <label repeat.for = "option of options">
         <input type = "radio" name = "myOptions" 
            model.bind = "option" checked.bind = "$parent.selectedOption"/>
            ${option.text}
      </label>
      <br/>
		
      <button type = "submit">SUBMIT</button>
   </form>
</template>

在我们的视图模型中，我们将创建一个对象数组this.options并指定第一个单选按钮被选中。同样，SUBMIT按钮将只在控制台中记录哪个单选按钮被选中。

app.js

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text:'First'}, 
         {id:2, text:'Second'}, 
         {id:3, text:'Third'}
      ]; 
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log('checked: ' + this.selectedOption.id);
   }
}

如果我们选中第三个单选按钮并提交表单，控制台将显示它。

Aurelia - HTTP

在本章中，您将学习如何在 Aurelia 框架中处理 HTTP 请求。

步骤 1 - 创建视图

让我们创建四个按钮，用于将请求发送到我们的 API。

app.html

<template>
   <button click.delegate = "getData()">GET</button>
   <button click.delegate = "postData()">POST</button>
   <button click.delegate = "updateData()">PUT</button>
   <button click.delegate = "deleteData()">DEL</button>
</template>

步骤 2 - 创建视图模型

为了将请求发送到服务器，Aurelia 建议使用fetch客户端。我们正在为我们需要的每个请求（GET、POST、PUT 和 DELETE）创建函数。

import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';

let httpClient = new HttpClient();

export class App {
   getData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myPostData = { 
      id: 101
   }
	postData(myPostData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts', {
         method: "POST",
         body: JSON.stringify(myPostData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myUpdateData = {
      id: 1
   }
	updateData(myUpdateData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "PUT",
         body: JSON.stringify(myUpdateData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   deleteData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "DELETE"
      })
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
}

我们可以运行应用程序并分别点击GET、POST、PUT和DEL按钮。我们可以在控制台中看到每个请求都成功，并且结果已记录。

Aurelia - Refs

在本章中，您将看到一些Aurelia refs的简单示例。您可以使用它来创建对特定对象的引用。您可以创建对元素或属性的引用，如下表所示。

引用表

序号	示例 & 描述
1	ref = "myRef" 用于创建对DOM元素的引用。
2	attribute-name.ref = "myRef" 用于创建对自定义属性的视图模型的引用。
3	view-model.ref = "myRef 用于创建对自定义元素的视图模型的引用。
4	view.ref = "myRef" 用于创建对自定义元素视图实例的引用。
5	rcontroller.ref = "myRef" 用于创建对自定义元素的控制器实例的引用。

在以下示例中，我们将创建对input元素的引用。我们将使用默认的类语法作为view-model。

app.js

export class App { }

我们通过添加ref = "name"属性来创建对input元素的引用。

app.html

<template>
   <input type = "text" ref = "name"><br/>
   <h3>${name.value}</h3>
</template>

当我们运行应用程序时，我们将看到输入字段中输入的文本显示在屏幕上。

Aurelia - 路由

路由是每个应用程序的重要组成部分。在本章中，您将学习如何在Aurelia框架中使用路由器。

步骤 1 - 创建页面

我们已经在前面章节中创建了一个components文件夹。如果您还没有创建它，则应将其放在src文件夹内。

C:\Users\username\Desktop\aureliaApp\src>mkdir components

在这个文件夹中，我们将创建home和about目录。

C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
C:\Users\username\Desktop\aureliaApp\src\components>mkdir about

在home文件夹中，我们需要创建view和view-model文件。

C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html

我们还需要view和view-model用于about页面。

C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html

注意 - 您也可以手动创建所有上述文件夹。

步骤 2 - 页面

接下来，我们需要向我们创建的文件添加一些默认代码。

home.html

<template>
   <h1>HOME</h1>
</template>

home.js

export class Home {}

about.html

<template>
   <h1>ABOUT</h1>
</template>

about.js

export class About {}

步骤 3 - 路由器

我们将在app.js文件中为router创建view-model。

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
		
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './components/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',
            moduleId: './components/about/about',    nav: true, title:'About' }
      ]);

      this.router = router;
   }
}

我们的路由器view将放置在app.html中。

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>	
   <router-view></router-view>
</template>

当我们运行应用程序时，可以通过点击home或about链接来更改路由。

Aurelia - 历史记录

在本章中，您将学习如何使用aurelia-history插件。

步骤 1 - 安装插件

此插件作为标准配置的一部分已可用。如果您已将aurelia.use.standardConfiguration()作为手动配置的一部分设置，那么您就可以开始了。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

步骤 2 - 使用历史记录

我们将使用上一章（Aurelia - 路由）中的一个示例。如果我们想要设置导航后退或前进的功能，我们可以使用带有back()和forward()方法的history对象。我们将在路由器配置之后添加它。

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './pages/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',    
            moduleId: './pages/about/about',    nav: true, title:'About' }
      ]);
      this.router = router;
   }
   goBack() {
      history.back();
   }
	goForward() {
      history.forward();
   }
}

现在，让我们向我们的view添加两个按钮。

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">      
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>
	
   <button click.delegate = "goBack()"></button> 
   //The button used for navigationg back...
	
   <button click.delegate = "goForward()"></button> 
   //The button used for navigationg forward...
	
   <router-view></router-view>
</template>

用户可以通过点击我们添加的按钮来前后导航。

Aurelia - 动画

在本章中，您将学习如何在Aurelia框架中使用CSS动画。

步骤 1 - 视图

我们的视图将有一个将被动画化的元素和一个用于触发animateElement()函数的按钮。

app.html

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

步骤 2 - 视图模型

在我们的JavaScript文件中，我们将导入CssAnimator插件并将其注入为依赖项。animateElement函数将调用动画器以启动动画。动画将在下一步创建。

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

步骤 3 - 样式

我们将在styles/styles.css文件中编写CSS。.myAnimation-add是动画的起点，而.myAnimation-remove是在动画完成后调用的。

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

一旦点击ANIMATE按钮，背景颜色将从浅蓝色更改为深色阴影。当此动画在三秒后完成时，元素将淡入其初始状态。

Aurelia - 对话框

Aurelia提供了一种实现对话框（模态）窗口的方法。在本章中，我们将向您展示如何使用它。

步骤 1 - 安装对话框插件

对话框插件可以从命令提示符窗口安装。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog

为了使此插件能够工作，我们需要使用手动引导。我们在配置章节中介绍了这一点。在main.js文件中，我们需要添加aurelia-dialog插件。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-dialog'); 

   aurelia.start().then(() => aurelia.setRoot());
}

步骤 2 - 创建文件夹和文件

首先，我们将创建一个名为modal的新目录。让我们将其放在components文件夹内。打开命令提示符并运行以下代码。

C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal

在这个文件夹中，我们将创建两个新文件。这些文件将代表我们模态的view和view-model。

C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.html
C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.js

步骤 3 - 创建模态

首先，让我们添加view-model代码。我们需要导入并注入dialog-controller。此控制器用于处理模态特定的功能。在以下示例中，我们使用它来水平居中模态。

my-modal.js

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

@inject(DialogController)

export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   }
   activate(message) {
      this.message = message;
   }
}

view代码如下所示。按钮被点击时将打开或关闭模态。

my-modal.html

<template>
   <ai-dialog>
      <ai-dialog-body>
         <h2>${message}</h2>
      </ai-dialog-body>

      <ai-dialog-footer>
         <button click.trigger = "controller.cancel()">Cancel</button>
         <button click.trigger = "controller.ok(message)">Ok</button>
      </ai-dialog-footer>	
   </ai-dialog>	
</template>

步骤 4 - 触发模态

最后一步是触发模态的函数。我们需要导入并注入DialogService。此服务具有方法open，我们可以在其中传递my-modal文件中的view-model和model，以便我们可以动态绑定数据。

app.js

import {DialogService} from 'aurelia-dialog';
import {inject} from 'aurelia-framework';
import {Prompt} from './components/modal/my-modal';

@inject(DialogService)

export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   }
   openModal() {
      this.dialogService.open( {viewModel: Prompt, model: 'Are you sure?' }).then(response => {
         console.log(response);
			
         if (!response.wasCancelled) {
            console.log('OK');
         } else {
            console.log('cancelled');
         }
         console.log(response.output);
      });
   }
};

最后，我们将创建一个按钮，以便我们可以调用openModal函数。

app.html

<template>
   <button click.trigger = "openModal()">OPEN MODAL</button>
<template>

如果我们运行应用程序，我们可以点击OPEN MODAL按钮来触发一个新的模态窗口。

Aurelia - 本地化

Aurelia提供i18n插件。在本章中，您将学习如何使用此插件本地化您的应用程序。

步骤 1 - 安装插件

打开命令提示符窗口并运行以下代码以安装i18n插件。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

我们还需要安装后端插件。

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

步骤 2 - 创建文件夹和文件

在项目根文件夹中，我们需要创建一个locale目录。

C:\Users\username\Desktop\aureliaApp>mkdir locale

在此文件夹中，您需要为所需的任何语言添加新文件夹。我们将创建en并在其中包含translation.js文件。

C:\Users\username\Desktop\aureliaApp\locale>mkdir en
C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json

步骤 3 - 使用插件

您需要使用手动引导才能使用此插件。有关更多信息，请查看配置章节。我们需要将i18n插件添加到main.js文件中。

main.js

import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
	
   .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {                                  
            loadPath: '/locales/{{lng}}/{{ns}}.json',
         },
				
         lng : 'de',
         attributes : ['t','i18n'],
         fallbackLng : 'en',
         debug : false
      });
   });

   aurelia.start().then(a => a.setRoot());
}

步骤 4 - 翻译JSON文件

这是您可以设置翻译值的文件。我们将使用官方文档中的一个示例。de-DE文件夹实际上应该用于翻译成德语，但是为了便于理解，我们将使用英语短语。

translation.json

{
   "score": "Score: {{score}}",
   "lives": "{{count}} life remaining",
   "lives_plural": "{{count}} lives remaining",
   "lives_indefinite": "a life remaining",
   "lives_plural_indefinite": "some lives remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

步骤 5 - 设置语言环境

我们只需要导入i18n插件并将其设置为使用de-DE文件夹中的JSON代码。

app.js

import {I18N} from 'aurelia-i18n';

export class App {
   static inject = [I18N];
	
   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale('de-DE')
		
      .then( () => {
         console.log('Locale is ready!');
      });
   }
}

步骤 6 - 视图

有几种方法可以翻译数据。我们将使用名为t的自定义ValueConverter。您可以在以下示例中看到各种格式化数据的方法。将其与translation.json文件进行比较，您将注意到用于格式化的模式。

<template>
   <p>
      Translation with Variables: <br />
      ${ 'score' | t: {'score': 13}}
   </p>

   <p>
      Translation singular: <br />
      ${ 'lives' | t: { 'count': 1 } }
   </p>

   <p>
      Translation plural: <br />
      ${ 'lives' | t: { 'count': 2 } }
   </p>

   <p>  
      Translation singular indefinite: <br />
      ${ 'lives' | t: { 'count': 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br />
      ${ 'lives' | t: { 'count': 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br />
      ${ 'friend' | t } <br />
      ${ 'friend' | t: { context: 'male' } } <br />
      ${ 'friend' | t: { context: 'female' } }
   </p>
	
</template>

当我们运行应用程序时，我们将获得以下输出。

Aurelia - 工具

在本章中，您将学习如何设置和使用aurelia-tools。

步骤 1 - 根文件夹

让我们创建一个根文件夹，我们将在其中保存所有Aurelia应用程序。

C:\Users\username\Desktop>mkdir aurelia-projects

步骤 2 - Aurelia工具

在aurelia-projects文件夹内，我们将从github克隆aurelia-tools存储库。

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/tools.git

步骤 3 - 创建新项目

要启动一个新的Aurelia项目，建议的方法是使用其中一个aurelia-skeletons。让我们从git克隆Aurelia skeletons。

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/skeleton-navigation.git

我们还需要安装包、模块和依赖项。您可以在各种skeleton应用程序之间进行选择。我们将使用skeleton-es2016。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>npm install
C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>jspm install

最后，我们需要运行以下代码来构建开发环境。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp build-dev-env

步骤 4 - 更新

使用以下命令更新本地存储库。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp update-own-deps

步骤 5 - 拉取

我们也可以在不构建的情况下拉取Aurelia依赖项。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp pull-dev-env

Aurelia - 打包

在本章中，您将学习如何在Aurelia框架中使用捆绑。

步骤 1 - 安装先决条件

您可以通过在命令提示符中运行以下命令来安装aurelia-bundler。

C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

如果您没有安装gulp，则可以通过运行此代码来安装它。

C:\Users\username\Desktop\aureliaApp>npm install gulp

您还可以从npm安装require-dir包。

C:\Users\username\Desktop\aureliaApp>npm install require-dir

步骤 2 - 创建文件夹和文件

首先，在应用程序根目录中创建gulpfile.js文件。

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

您将需要build文件夹。在此目录中，添加另一个名为tasks的文件夹。

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

您需要在tasks文件夹内创建bundle.js文件。

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

步骤 3 - Gulp

使用gulp作为任务运行器。您需要告诉它运行build\tasks\bundle.js中的代码。

gulpfile.js

require('require-dir')('build/tasks');

现在，创建您需要的任务。此任务将获取应用程序，创建dist/appbuild.js和dist/vendor-build.js文件。捆绑过程完成后，config.js文件也将更新。您可以包含所有想要注入和压缩的文件和插件。

bundle.js

var gulp = require('gulp');
var bundle = require('aurelia-bundler').bundle;

var config = {
   force: true,
   baseURL: '.',
   configPath: './config.js',
	
   bundles: {
      "dist/app-build": {
         includes: [
            '[*.js]',
            '*.html!text',
            '*.css!text',
         ],
         options: {
            inject: true,
            minify: true
         }
      },
		"dist/vendor-build": {
         includes: [
            'aurelia-bootstrapper',
            'aurelia-fetch-client',
            'aurelia-router',
            'aurelia-animator-css',
         ],
         options: {
            inject: true,
            minify: true
         }
      }
   }
};

gulp.task('bundle', function() {
   return bundle(config);
});

命令提示符将在捆绑完成后通知我们。

Aurelia - 调试

在本章中，您将学习如何将Aurelia上下文调试器添加为Chrome扩展程序。

注意 - 在添加扩展程序之前，您需要拥有aurelia-tools文件。如果您没有它，可以查看工具章节。

步骤 1 - 打开Chrome扩展程序

打开Chrome扩展程序最简单的方法是在浏览器的URL栏中运行以下代码。

chrome://extensions

步骤 2 - 添加扩展程序

由于此扩展程序尚未从Chrome网上应用店提供，请选中开发者模式复选框并点击加载未打包的扩展程序。这将打开一个小窗口，您可以在其中选择要添加的扩展程序。

对于此示例，让我们选择Desktop/aurelia-projects/tools/context-debugger文件夹并打开它。

现在，我们可以看到扩展程序已加载到浏览器中。

我们还可以检查开发者控制台。当我们点击元素选项卡时，我们将在右下角看到aurelia-properties。

Aurelia - 社区

在选择框架时，社区是最重要的因素之一。Aurelia为其客户提供了极好的支持。在本章中，您将学习在遇到问题时如何获得帮助。

Aurelia - 官方文档

您可以在此链接上找到Aurelia文档 - https://aurelia.io/docs.html

Aurelia Gitter - 频道

如果您需要快速解答，您可以随时向aurelia gitter频道提交问题。此频道可以在以下链接中找到 - https://gitter.im/Aurelia/Discuss

Aurelia - Github

您也可以向官方Aurelia github存储库提交问题 https://github.com/aurelia

Aurelia - 博客

如果您想了解 Aurelia 的任何更新和更改，可以关注 Durandal 的官方博客 http://blog.durandal.io/

Aurelia - Rob Eisenberg 博客

您还可以关注 Aurelia 框架创建者 Rob Eisenberg 的官方博客 http://eisenbergeffect.bluespire.com/

Aurelia - 企业支持

Aurelia 为团队和个人提供企业支持。如果您有兴趣，请发送电子邮件到以下地址：

support@durandal.io

Aurelia - 聘用开发团队

您可以通过发送电子邮件到此地址聘用 Aurelia 专家开发人员。

consulting@durandal.io

Aurelia - 培训

如果您想为您的团队提供 Aurelia 官方培训，可以发送电子邮件到此地址。

training@durandal.io

Aurelia - 最佳实践

Aurelia 是一个新的框架，因此最佳实践尚未建立。在本章中，您将找到一些有用的指导方针。

启动新项目

Aurelia 提供了 **aurelia-skeletons**。您可以从几个框架骨架中进行选择。Aurelia 背后的团队积极支持这些骨架，并且它们始终与框架的最新版本保持同步。

Aurelia 骨架

**skeleton-es2016-webpack** 允许您编写 **ES2016** 代码并使用 **npm** 进行包管理以及使用 **webpack** 进行打包。
**skeleton-es2016** 允许您编写 **ES2016** 代码并使用 **jspm** 进行包管理以及使用 **SystemJS** 进行加载和打包。
**skeleton-typescript-webpack** 允许您编写 **TypeScript** 代码并使用 **npm** 进行包管理以及使用 **webpack** 进行打包。
**skeleton-typescript** 允许您编写 **TypeScript** 代码并使用 **jspm** 进行包管理以及使用 **SystemJS** 进行加载和打包。
**skeleton-typescript-asp.net5** 允许您编写 **TypeScript** 代码并使用 **jspm** 进行包管理以及使用 **SystemJS** 进行加载和打包。**ASP.NET** 后端也已集成。
**skeleton-es2016-asp.net5** 允许您编写 **ES2016** 代码并使用 **jspm** 进行包管理以及使用 **SystemJS** 进行加载和打包。**ASP.NET** 后端也已集成。

您可以从 **GitHub** 克隆所有骨架。安装说明可以在每个骨架的 **README.md** 文件中找到。

C:\Users\username\Desktop>git clone https://github.com/aurelia/skeleton-navigation.git

文件夹结构

您可以自由使用任何文件夹结构。如果您不确定从哪里开始，可以使用以下文件夹结构。该图片表示 **src** 目录中的文件和文件夹。

Web 标准

Aurelia 是一个面向 Web 标准的框架。这是其背后团队的主要目标之一。他们将确保框架始终遵循现代 Web。这对开发人员来说非常有利，因为我们可以在将来依赖框架的可用性。它还有助于我们了解浏览器和 Web 的最新动态。

EcmaScript 6

这不仅对于 Aurelia 而且对于任何其他 JavaScript 框架来说都是一个好的实践。**ES6** 提供了可以帮助开发过程的新功能。如果您喜欢强类型语言，也可以使用 **TypeScript**。

打印页面