1. WIKI教程
2. 学习Aurelia
3. Aurelia - 快速指南

Aurelia - 快速指南

Aurelia - Overview

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

嗯，它实际上很简单。 Aurelia只是JavaScript。 然而，它不是昨天的JavaScript，而是明天的JavaScript。 通过使用现代工具，我们已经能够在ECMAScript 2016中从头开始编写Aurelia。这意味着我们可以使用原生模块，类，装饰器等等......您也可以使用它们。

Aurelia不仅用现代和未来的JavaScript编写，而且还采用现代的架构方法。 在过去，框架一直是单一的野兽。 不过Aurelia。 它是作为一系列协作库构建的。 总之，它们构成了构建单页应用程序（SPA）的强大而强大的框架。 但是，Aurelia的库通常可以单独使用，在传统网站中使用，甚至可以通过NodeJS等技术在服务器端使用。

Aurelia - 特色

• Components - 组件是Aurelia框架的构建块。 它由HTML视图和JavaScript视图模型对组成。

• Web Standards - 这是最干净的现代框架之一，完全专注于Web标准而没有不必要的抽象。

• Extensible - 该框架提供了一种与其他所需工具集成的简便方法。

• Commercial Support - Aurelia提供商业和企业支持。 它是Durandal Inc.的官方产品。

• License - Aurelia根据MIT许可证开源并获得许可。

Aurelia - 优势

• Aurelia非常干净。 如果您遵循框架约定，您可以专注于您的应用程序，而不会让框架妨碍您。

• 它也很容易扩展。 您可以添加或删除框架提供的任何工具，也可以添加不属于框架的任何其他工具。

• Aurelia非常容易使用。 它针对开发人员的体验。 它为您节省了大量时间。

• 框架本身是针对Web标准的，因此您将始终了解最新的现代概念。

• Aurelia没有最大的社区，但它非常灵活，知识渊博并愿意在短时间内提供帮助。

限制 (Limitations)

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

Aurelia - Environment Setup

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

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

第1步 - 下载Aurelia包

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

C:\Users\username\Desktop>mkdir aureliaApp

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

Aurelia支持ES2016和TypeScript 。 我们将使用ES2016 。 在我们上面创建的aureliaApp文件夹中提取下载的文件。

第2步 - 安装Web服务器

首先，我们需要从command prompt窗口安装Web服务器。

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

第3步 - 启动Web服务器

要启动Web服务器，我们需要在command prompt下运行以下代码。

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

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

Aurelia - First Application

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

文件夹结构

• package.json表示有关安装的npm软件包的文档。 它还显示了这些软件包的版本，并提供了一种简单的方法来添加，删除，更改版本或在应用程序需要在开发人员之间共享时自动安装所有软件包。

• index.html是应用程序的默认页面，就像大多数基于HTML的应用程序一样。 这是一个加载脚本和样式表的地方。

• config.js是Aurelia loader配置文件。 您不会花太多时间处理此文件。

• jspm_packages是SystemJS加载模块的目录。

• styles是默认的样式目录。 您可以随时更改保留样式文件的位置。

• src文件夹是您将花费大部分开发时间的地方。 它保留HTML和js文件。

源文件

正如我们已经说过的那样， src目录是您的app逻辑所在的位置。 如果您查看默认应用程序，您会发现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>

正如我们在上一章中已经讨论过的，我们可以通过在command prompt窗口中运行以下命令来启动服务器。

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

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

Aurelia - Components

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

简单组件

正如前一章中已经讨论过的，每个组件都包含用JavaScript编写的view-model和用HTML编写的view 。 您可以看到以下view-model定义。 这是一个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>

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

组件功能 (Component Functions)

如果要在用户单击按钮时更新页眉和页脚，可以使用以下示例。 这次我们在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 - Component Lifecycle

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 - Custom Elements

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文件中，我们需要require custom-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 - Dependency Injections

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

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

src/dependency-test.js

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

Inject

在我们的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 - Configuration

在本章中，我们将向您展示如何根据您的需求配置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 function允许手动设置配置。 我们设置use属性来指定我们需要的东西。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();
   aurelia.start().then(() => aurelia.setRoot());
}

第3步 - 高级配置

我们可以使用很多配置选项。 为了向您展示所有内容超出了本文的范围，因此我们将在以下示例中解释配置的工作原理。 我们基本上告诉Aurelia使用default data binding language, default resources, development logging, router, history和event aggregator 。 这些是标准的插件集。

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();
   aurelia.start().then(() => aurelia.setRoot());
}

Note - 这些设置将在下一章中详细说明。

Aurelia - Plugins

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

标准插件

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

• defaultBindingLanguage() - 此插件提供了一种将view-model与view连接起来的简便方法。 您已经看到了单向数据绑定语法(${someValue}) 。 即使您可以使用其他一些绑定语言，建议使用默认绑定语言。

• defaultResources() - 默认资源为我们提供了一些原始结构，如if, repeat, compose等。你甚至可以自己构建这些结构，但由于它们是如此常用，Aurelia已经在这个库中创建了它。

• Router() - 大多数应用程序使用某种路由。 因此， Router是标准插件的一部分。 您可以在后续章节中查看有关路由的更多信息。

• 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 - Data Binding

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

简单的绑定

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

app.js

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

app.html

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

Two-Way Binding

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 - Binding Behavior

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

Throttle

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

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

debounce与throttle差不多。 区别在于，debounce将在用户停止输入后更新绑定。 如果用户停止键入两秒钟，以下示例将更新绑定。

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

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 - Converters

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

转换日期

当我们想要将默认日期值转换为某种特定格式时，我们可以使用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();
   }
}

我们已经在custom-elements章节中讨论过require 。 管道符号| 用于应用转换器。 我们只使用dateFormat因为这是Aurelia注册DateFormatValueConverter 。

app.html

<template>
   <require from = "./converters"></require>
   <h3>${currentDate | dateFormat}</h3>
</template>

转换货币

这是货币格式的一个示例。 您会注意到该概念与上例中的概念相同。 首先，我们需要从command prompt安装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 - Events

在本章中，您将了解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支持某些元素。 要找出哪些事件允许委派，您可以here搜索任何事件的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 - Event Aggregator

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

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 - Forms

在本章中，您将学习如何在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>

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

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

复选框 (Checkbox)

以下示例将演示如何使用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);
   }
}

单选按钮

以下示例将演示如何提交radio buttons 。 语法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的一些简单示例。 您可以使用它来创建对特定对象的引用。 您可以创建对元素或属性的引用，如下表所示。

参考表

Sr.No	示例和说明
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元素的ref = "name" 。

app.html

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

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

Aurelia - Routing

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

第1步 - 创建页面

我们已经在之前的章节中创建了一个组件文件夹。 如果您尚未创建它，则应将其放在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

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

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

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

第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或链接来更改路径。

Aurelia - History

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

第1步 - 安装插件

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

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();
   aurelia.start().then(() => aurelia.setRoot());
}

第2步 - 使用历史记录

我们将使用上一章（ Aurelia - Routing ）中的一个例子。 如果我们想要设置向后或向前导航的功能，我们可以使用带有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 - Animations

在本章中，您将学习如何在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 - Dialog

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

第1步 - 安装Dialog插件

可以从command prompt窗口安装Dialog插件。

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文件夹中。 打开command prompt并运行以下代码。

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文件和model传递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 - Localization

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

第1步 - 安装插件

打开command prompt窗口并运行以下代码以安装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

在此文件夹中，您需要为所需的任何语言添加新文件夹。 我们将在里面创建带有translation.js文件的en 。

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 - Tools

在本章中，您将学习如何设置和使用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骷髅。

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

我们还需要安装包，模块和依赖项。 您可以选择各种骨架应用程序。 我们将使用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 - Bundling

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

第1步 - 安装先决条件

您可以通过在command prompt运行以下命令来安装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步 - 创建文件夹和文件

首先，在apps根目录中创建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作为任务运行器。 您需要告诉它运行build\tasks\bundle.js的代码。

gulpfile.js

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

现在，创建您需要的任务。 此任务将使用app，创建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);
});  

捆绑完成后， command prompt将通知我们。

Aurelia - Debugging

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

Note - 在添加扩展之前，您需要拥有aurelia-tools文件。 如果没有，可以查看“工具”一章。

第1步 - 打开Chrome扩展程序

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

chrome://extensions

第2步 - 添加扩展

由于Chrome商店尚未提供此扩展程序，请选中“ developermode复选框，然后点击“ Load Unpacked Extensions 。 这将打开一个小窗口，您可以在其中选择要添加的扩展名。

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

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

我们还可以查看开发人员控制台。 当我们点击elements标签时，我们会在右下角看到aurelia-properties 。

Aurelia - Community

社区是选择框架时要考虑的最重要因素之一。 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 - 企业支持

support@durandal.io

Aurelia - 雇用开发团队

您可以通过向此地址发送电子邮件来聘请Aurelia Expert Developers。

consulting@durandal.io

Aurelia - 训练

如果您希望Aurelia为您的团队提供正式培训，您可以发送电子邮件至该地址。

training@durandal.io

Aurelia - Best Practices

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

开始一个新项目

Aurelia提供aurelia-skeletons 。 有几种骷髅可供选择。 Aurelia背后的团队正在积极支持骨架，他们总是与最新版本的框架保持同步。

Aurelia Skeletons

• 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目录中的文件和文件夹。

网络标准

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

EcmaScript 6

这不仅适用于Aurelia，也适用于任何其他JavaScript框架。 ES6提供了可以帮助开发过程的新功能。 如果您喜欢强类型语言，也可以使用TypeScript 。