Aurelia - คู่มือฉบับย่อ

คำจำกัดความที่ดีที่สุดของกรอบสามารถพบได้ในเอกสารอย่างเป็นทางการของ Aurelia -

มันง่ายจริงๆ Aurelia เป็นเพียง JavaScript อย่างไรก็ตามไม่ใช่ JavaScript ของเมื่อวาน แต่เป็น JavaScript ของวันพรุ่งนี้ ด้วยการใช้เครื่องมือที่ทันสมัยเราสามารถเขียน Aurelia ได้ตั้งแต่เริ่มต้นใน ECMAScript 2016 ซึ่งหมายความว่าเรามีโมดูลดั้งเดิมคลาสมัณฑนากรและอื่น ๆ ตามที่เราต้องการ ... และคุณก็มีเช่นกัน

Aurelia ไม่เพียง แต่เขียนด้วย JavaScript สมัยใหม่และอนาคตเท่านั้น แต่ยังใช้แนวทางที่ทันสมัยสำหรับสถาปัตยกรรมด้วย ในอดีตโครงร่างเป็นสัตว์ประหลาดเสาหิน ไม่ใช่ Aurelia สร้างขึ้นเป็นชุดของไลบรารีที่ทำงานร่วมกัน เมื่อนำมารวมกันแล้วจะสร้างกรอบการทำงานที่มีประสิทธิภาพและแข็งแกร่งสำหรับการสร้าง Single Page Apps (SPAs) อย่างไรก็ตามไลบรารีของ Aurelia สามารถใช้งานทีละรายการได้ในเว็บไซต์แบบดั้งเดิมหรือแม้แต่บนเซิร์ฟเวอร์ผ่านเทคโนโลยีเช่น NodeJS

Aurelia - คุณสมบัติ

  • Components- ส่วนประกอบเป็นส่วนประกอบของกรอบ Aurelia ประกอบด้วยมุมมอง HTML และคู่รูปแบบการดู JavaScript

  • Web Standards - นี่คือหนึ่งในเฟรมเวิร์กที่ทันสมัยที่สุดโดยเน้นที่มาตรฐานเว็บอย่างสมบูรณ์โดยไม่ต้องใช้นามธรรมที่ไม่จำเป็น

  • Extensible - เฟรมเวิร์กนำเสนอวิธีง่ายๆในการรวมเข้ากับเครื่องมือที่จำเป็นอื่น ๆ

  • Commercial Support- Aurelia ให้การสนับสนุนเชิงพาณิชย์และองค์กร เป็นผลิตภัณฑ์อย่างเป็นทางการของ Durandal Inc.

  • License - Aurelia เป็นโอเพ่นซอร์สและได้รับอนุญาตภายใต้ใบอนุญาตของ MIT

Aurelia - ข้อดี

  • ออเรเลียสะอาดมาก หากคุณทำตามแบบแผนของกรอบคุณสามารถมุ่งเน้นไปที่แอปของคุณได้โดยที่เฟรมเวิร์กไม่มาขวางทางคุณ

  • นอกจากนี้ยังสามารถขยายได้ง่าย คุณสามารถเพิ่มหรือลบเครื่องมือใด ๆ ที่เฟรมเวิร์กเสนอและคุณยังสามารถเพิ่มเครื่องมืออื่น ๆ ที่ไม่ได้เป็นส่วนหนึ่งของเฟรมเวิร์ก

  • Aurelia ใช้งานง่ายมาก มุ่งเน้นไปที่ประสบการณ์ของนักพัฒนา ช่วยให้คุณประหยัดเวลาได้มาก

  • เฟรมเวิร์กนั้นมุ่งไปที่มาตรฐานเว็บดังนั้นคุณจะได้รับข้อมูลล่าสุดเกี่ยวกับแนวคิดที่ทันสมัยอยู่เสมอ

  • Aurelia ไม่มีชุมชนที่ใหญ่ที่สุด แต่มีความคล่องตัวมีความรู้และเต็มใจที่จะช่วยเหลือภายในระยะสั้น ๆ

ข้อ จำกัด

  • ไม่มีข้อ จำกัด ที่สำคัญ Framework มีประสิทธิภาพและใช้งานง่าย

ในบทนี้คุณจะได้เรียนรู้วิธีเริ่มต้นใช้งาน Aurelia framework ก่อนที่จะทำคุณจะต้องNodeJS ติดตั้งในระบบของคุณ

ซีเนียร์ No ซอฟต์แวร์และคำอธิบาย
1

NodeJS and NPM

NodeJS เป็นแพลตฟอร์มที่จำเป็นสำหรับการพัฒนา Aurelia กร้าของเราติดตั้ง NodeJS สิ่งแวดล้อม

ขั้นตอนที่ 1 - ดาวน์โหลด Aurelia Package

ก่อนที่เราจะดาวน์โหลดแพ็คเกจ Aurelia มาสร้างโฟลเดอร์บนเดสก์ท็อปที่จะวางแอพของเรา

C:\Users\username\Desktop>mkdir aureliaApp

ตอนนี้เราสามารถดาวน์โหลดแพคเกจอย่างเป็นทางการจากเว็บไซต์ Aurelia

Aurelia รองรับ ES2016 และ TypeScript. เราจะใช้ES2016. แตกไฟล์ที่ดาวน์โหลดภายในไฟล์aureliaApp โฟลเดอร์ที่เราสร้างไว้ด้านบน

ขั้นตอนที่ 2 - ติดตั้งเว็บเซิร์ฟเวอร์

ก่อนอื่นเราต้องติดตั้งเว็บเซิร์ฟเวอร์จาก command prompt หน้าต่าง.

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

ขั้นตอนที่ 3 - เริ่มเว็บเซิร์ฟเวอร์

ในการเริ่มต้นเว็บเซิร์ฟเวอร์เราจำเป็นต้องเรียกใช้รหัสต่อไปนี้ใน command prompt.

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

เราสามารถเห็นแอป 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 คุณสมบัติถูกผูกไว้กับเทมเพลต HTML โดยใช้ ${message}ไวยากรณ์ ไวยากรณ์นี้แสดงถึงการผูกแบบทางเดียวที่แปลงเป็นสตริงและแสดงภายในมุมมองเทมเพลต

app.html

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

ดังที่เราได้กล่าวไปแล้วในบทที่แล้วเราสามารถเริ่มเซิร์ฟเวอร์ได้โดยเรียกใช้คำสั่งต่อไปนี้ในไฟล์ command prompt หน้าต่าง.

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

แอปพลิเคชันจะแสดงบนหน้าจอ

ส่วนประกอบเป็นส่วนประกอบหลักของ Aurelia framework ในบทนี้คุณจะได้เรียนรู้วิธีสร้างส่วนประกอบง่ายๆ

ส่วนประกอบที่เรียบง่าย

ตามที่กล่าวไว้แล้วในบทที่แล้วส่วนประกอบแต่ละส่วนประกอบด้วย view-model ซึ่งเขียนใน JavaScriptและ view เขียนใน HTML. คุณสามารถดูสิ่งต่อไปนี้view-modelนิยาม. มันคือES6 ตัวอย่าง แต่คุณยังสามารถใช้ TypeScript.

app.js

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

เราสามารถผูกค่าของเราเข้ากับมุมมองดังที่แสดงในตัวอย่างต่อไปนี้ ${header}ไวยากรณ์จะผูกที่กำหนดไว้ header มูลค่าจาก MyComponent. ใช้แนวคิดเดียวกันนี้content.

app.html

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

โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้

ฟังก์ชั่นส่วนประกอบ

หากคุณต้องการอัปเดตส่วนหัวและส่วนท้ายเมื่อผู้ใช้คลิกปุ่มคุณสามารถใช้ตัวอย่างต่อไปนี้ เวลานี้เรากำลังกำหนดheader และ footer ภายใน EC6 ตัวสร้างคลาส

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 ใช้วิธีวงจรชีวิตของส่วนประกอบเพื่อจัดการวงจรชีวิตของส่วนประกอบ ในบทนี้เราจะแสดงวิธีการเหล่านั้นและอธิบายวงจรชีวิตของส่วนประกอบ

  • 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 เสนอวิธีการเพิ่มส่วนประกอบแบบไดนามิก คุณสามารถใช้องค์ประกอบเดียวซ้ำในส่วนต่างๆของแอปได้โดยไม่จำเป็นต้องรวม HTML หลายครั้ง ในบทนี้คุณจะได้เรียนรู้วิธีบรรลุเป้าหมายนี้

ขั้นตอนที่ 1 - สร้างส่วนประกอบที่กำหนดเอง

มาสร้างใหม่ components ไดเรกทอรีภายใน src โฟลเดอร์

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 ข้อความแสดงผลจาก myComponent ภายใน app.js. ข้อความเพิ่มเติมแสดงจากไฟล์custom-component.js.

ในบทนี้คุณจะได้เรียนรู้วิธีใช้ไลบรารีการฉีดพึ่งพา Aurelia

ขั้นแรกเราต้องสร้างไฟล์ใหม่ dependency-test.js ภายใน srcโฟลเดอร์ ในไฟล์นี้เราจะสร้างคลาสง่ายๆ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 dependency injection ในบทถัดไป

ในบทนี้เราจะแสดงวิธีกำหนดค่า Aurelia framework ตามความต้องการของคุณ บางครั้งคุณจะต้องตั้งค่าการกำหนดค่าเริ่มต้นหรือเรียกใช้โค้ดก่อนที่แอปจะแสดงผลให้กับผู้ใช้

ขั้นตอนที่ 1 - สร้าง main.js

มาสร้างกันเถอะ main.js ไฟล์ภายใน srcโฟลเดอร์ ภายในไฟล์นี้เราจะกำหนดค่า 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 ใช้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 framework

ปลั๊กอินมาตรฐาน

ในบทที่แล้วเราได้เห็นวิธีการใช้การกำหนดค่าเริ่มต้นใน Aurelia framework หากคุณกำลังใช้การกำหนดค่าเริ่มต้นชุดปลั๊กอินมาตรฐานจะพร้อมใช้งาน

  • defaultBindingLanguage() - ปลั๊กอินนี้มีวิธีง่ายๆในการเชื่อมต่อ view-model ด้วย view. คุณเห็นไวยากรณ์การผูกข้อมูลทางเดียวแล้ว(${someValue}). แม้ว่าคุณจะสามารถใช้ภาษาผูกอื่น ๆ ได้บ้าง แต่ขอแนะนำให้ใช้ภาษาการผูกเริ่มต้น

  • defaultResources() - ทรัพยากรเริ่มต้นทำให้เรามีโครงสร้างดั้งเดิมเช่น if, repeat, composeฯลฯ คุณยังสามารถสร้างโครงสร้างเหล่านี้ได้ด้วยตัวเอง แต่เนื่องจากเป็นสิ่งที่ใช้กันทั่วไป Aurelia จึงสร้างมันขึ้นมาภายในไลบรารีนี้

  • Router()- แอปพลิเคชันส่วนใหญ่ใช้การกำหนดเส้นทางบางประเภท ดังนั้นRouterเป็นส่วนหนึ่งของปลั๊กอินมาตรฐาน คุณสามารถตรวจสอบเพิ่มเติมเกี่ยวกับการกำหนดเส้นทางได้ในบทถัดไป

  • History() - มักใช้ปลั๊กอินประวัติร่วมกับ router.

  • eventAggregator()- ปลั๊กอินนี้ใช้สำหรับการสื่อสารข้ามองค์ประกอบ จัดการการเผยแพร่และสมัครรับข้อความหรือช่องภายในแอปของคุณ

ปลั๊กอินอย่างเป็นทางการ

ปลั๊กอินเหล่านี้ไม่ได้เป็นส่วนหนึ่งของการกำหนดค่าเริ่มต้น แต่มักใช้

  • fetch()- ปลั๊กอิน Fetch ใช้สำหรับจัดการคำขอ HTTP คุณสามารถใช้ไลบรารี AJAX อื่น ๆ ได้หากต้องการ

  • animatorCSS() - ปลั๊กอินนี้นำเสนอวิธีจัดการภาพเคลื่อนไหว CSS

  • animator-velocity()- แทนที่จะใช้ภาพเคลื่อนไหว CSS คุณสามารถใช้ไลบรารีภาพเคลื่อนไหว Velocity ปลั๊กอินเหล่านี้ช่วยให้เราใช้ Velocity ภายในแอพ Aurelia

  • dialog() - ปลั๊กอินไดอะล็อกมีหน้าต่างโมดอลที่ปรับแต่งได้สูง

  • i18n() - นี่คือปลั๊กอินสำหรับการทำให้เป็นภายในและการแปลเป็นภาษาท้องถิ่น

  • ui-virtualization() - Virtualization เป็นไลบรารีที่มีประโยชน์สำหรับการจัดการงาน UI ขนาดใหญ่ที่มีประสิทธิภาพสูง

  • validation() - ใช้ปลั๊กอินนี้เมื่อคุณต้องการตรวจสอบข้อมูลของคุณ

ปลั๊กอินทั้งหมดที่อธิบายข้างต้นได้รับการดูแลอย่างเป็นทางการโดย Aurelia Core Team ในขณะที่เขียนบทช่วยสอนนี้ จะมีปลั๊กอินที่มีประโยชน์อื่น ๆ เพิ่มเข้ามาในอนาคต ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าแอปของคุณให้ใช้ปลั๊กอิน

การติดตั้งปลั๊กอิน

ตัวอย่างเช่นหากเราต้องการใช้ 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 และอธิบายกลไกการผูกข้อมูลต่างๆ

การผูกแบบง่าย

คุณได้เห็นการผูกมัดอย่างง่ายในบางบทก่อนหน้านี้แล้ว ${...}ไวยากรณ์ใช้เพื่อเชื่อมโยง veiw-model และ view

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 มุมมองจะได้รับการอัปเดต

ในบทนี้คุณจะได้เรียนรู้วิธีการใช้งาน behaviors. คุณสามารถคิดว่าพฤติกรรมการผูกเป็นตัวกรองที่สามารถเปลี่ยนข้อมูลการโยงและแสดงในรูปแบบอื่นได้

เค้น

ลักษณะการทำงานนี้ใช้เพื่อกำหนดความถี่ในการอัปเดตการเชื่อมโยงบางอย่าง เราสามารถใช้throttleเพื่อชะลออัตราการอัปเดตมุมมองอินพุตโมเดล ลองพิจารณาตัวอย่างจากบทสุดท้าย อัตราเริ่มต้นคือ200 ms. เราสามารถเปลี่ยนเป็น2 sec โดยการเพิ่ม & throttle:2000 กับข้อมูลของเรา

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เป็นการแสดงพฤติกรรมที่มีประสิทธิภาพสูงสุด คุณควรใช้ข้อมูลนี้เสมอเมื่อคุณรู้ว่าควรผูกข้อมูลเพียงครั้งเดียว

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 แทนที่จะแปลงค่าเป็นรูปแบบที่ต้องการด้วยตนเอง

แปลงวันที่

เมื่อเราต้องการแปลงค่าวันที่เริ่มต้นเป็นรูปแบบเฉพาะบางอย่างเราสามารถใช้ 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 ใน custom-elementsบท. สัญลักษณ์ท่อ | ใช้เพื่อใช้ตัวแปลง เรากำลังใช้dateFormat เนื่องจากนี่คือวิธีการลงทะเบียน Aurelia DateFormatValueConverter.

app.html

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

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

แปลงสกุลเงิน

นี่คือตัวอย่างของการจัดรูปแบบสกุลเงิน คุณจะสังเกตเห็นว่าแนวคิดนั้นเหมือนกับในตัวอย่างข้างต้น ขั้นแรกเราต้องติดตั้งnumeral ห้องสมุดจากไฟล์ command prompt.

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)');
   }
}

View-model จะสร้างตัวเลขสุ่ม เราจะใช้สิ่งนี้เป็นมูลค่าสกุลเงินและอัปเดตทุกวินาที

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

ตัวแทนกิจกรรม

แม้แต่การมอบสิทธิ์ก็เป็นแนวคิดที่มีประโยชน์ซึ่งตัวจัดการเหตุการณ์จะเชื่อมต่อกับองค์ประกอบระดับบนสุดหนึ่งรายการแทนที่จะเป็นหลายองค์ประกอบบน DOM สิ่งนี้จะปรับปรุงประสิทธิภาพหน่วยความจำของแอปพลิเคชันและควรใช้ทุกครั้งที่ทำได้

นี่เป็นตัวอย่างง่ายๆของการใช้การมอบหมายเหตุการณ์กับ Aurelia framework มุมมองของเราจะมีปุ่มด้วย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 มีสามวิธี 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 framework

การป้อนข้อความ

ขั้นแรกเราจะดูวิธีการส่งไฟล์ 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);
   };
}

ช่องทำเครื่องหมาย

ตัวอย่างต่อไปนี้จะสาธิตวิธีการส่งช่องทำเครื่องหมายด้วย Aurelia framework เราจะสร้างช่องทำเครื่องหมายหนึ่งช่องและผูกไฟล์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);
   }
}

หากเราตรวจสอบปุ่มตัวเลือกที่สามและส่งแบบฟอร์มของเราคอนโซลจะแสดงขึ้นมา

ในบทนี้คุณจะได้เรียนรู้วิธีการทำงานกับคำขอ HTTP ใน Aurelia framework

ขั้นตอนที่ 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 - สร้าง View-model

สำหรับการส่งคำขอไปยังเซิร์ฟเวอร์ 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 คุณสามารถใช้เพื่อสร้างการอ้างอิงไปยังวัตถุเฉพาะ คุณสามารถสร้างการอ้างอิงถึงองค์ประกอบหรือแอตทริบิวต์ดังที่เห็นในตารางต่อไปนี้

ตารางอ้างอิง

ซีเนียร์ No ตัวอย่างและคำอธิบาย
1

ref = "myRef"

ใช้สำหรับสร้างการอ้างอิงถึงองค์ประกอบ DOM

2

attribute-name.ref = "myRef"

ใช้สำหรับสร้างการอ้างอิงไปยัง view-model ของแอตทริบิวต์ที่กำหนดเอง

3

view-model.ref = "myRef

ใช้สำหรับสร้างการอ้างอิงถึงมุมมองแบบจำลองขององค์ประกอบที่กำหนดเอง

4

view.ref = "myRef"

ใช้สำหรับสร้างการอ้างอิงไปยังอินสแตนซ์มุมมององค์ประกอบที่กำหนดเอง

5

rcontroller.ref = "myRef"

ใช้สำหรับสร้างการอ้างอิงอินสแตนซ์ตัวควบคุมขององค์ประกอบที่กำหนดเอง

ในตัวอย่างต่อไปนี้เราจะสร้างการอ้างอิงไปยังไฟล์ inputธาตุ. เราจะใช้ไวยากรณ์คลาสเริ่มต้นเป็นไฟล์view-model.

app.js

export class App { }

เรากำลังสร้างข้อมูลอ้างอิงไปยังไฟล์ input องค์ประกอบโดยการเพิ่ม ref = "name" แอตทริบิวต์

app.html

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

เมื่อเราเรียกใช้แอปเราจะเห็นว่าข้อความที่ป้อนลงในช่องป้อนข้อมูลจะแสดงบนหน้าจอ

การกำหนดเส้นทางเป็นส่วนสำคัญของทุกแอปพลิเคชัน ในบทนี้คุณจะได้เรียนรู้วิธีใช้เราเตอร์ใน Aurelia framework

ขั้นตอนที่ 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

เรายังต้องการ 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

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 - เราเตอร์

เราจะสร้าง view-model สำหรับ router ภายใน app.js ไฟล์.

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 เสียบเข้าไป.

ขั้นตอนที่ 1 - ติดตั้งปลั๊กอิน

ปลั๊กอินนี้พร้อมใช้งานแล้วโดยเป็นส่วนหนึ่งของการกำหนดค่ามาตรฐาน หากคุณได้ตั้งค่าaurelia.use.standardConfiguration() ในฐานะที่เป็นส่วนหนึ่งของการกำหนดค่าด้วยตนเองคุณก็พร้อมใช้งาน

main.js

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

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

ขั้นตอนที่ 2 - การใช้ประวัติ

เราจะใช้ตัวอย่างจากบทสุดท้าย (Aurelia - Routing). หากเราต้องการตั้งค่าฟังก์ชันสำหรับการนำทางย้อนกลับหรือไปข้างหน้าเราสามารถใช้ไฟล์history วัตถุด้วย back() และ forward()วิธีการ เราจะเพิ่มสิ่งนี้หลังจากการกำหนดค่าเราเตอร์

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>

ผู้ใช้สามารถย้อนกลับและไปข้างหน้าโดยคลิกปุ่มที่เราเพิ่ม

ในบทนี้คุณจะได้เรียนรู้วิธีใช้ภาพเคลื่อนไหว CSS ในกรอบงาน Aurelia

ขั้นตอนที่ 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 - สไตล์

เราจะเขียน CSS ไว้ข้างใน styles/styles.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 เสนอวิธีการใช้งานหน้าต่างโต้ตอบ (โมดอล) ในบทนี้เราจะแสดงวิธีการใช้งาน

ขั้นตอนที่ 1 - ติดตั้งปลั๊กอินไดอะล็อก

สามารถติดตั้งปลั๊กอินไดอะล็อกจากไฟล์ command prompt หน้าต่าง.

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 - สร้าง Modal

ก่อนอื่นมาเพิ่ม 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 - เรียก Modal

ขั้นตอนสุดท้ายคือฟังก์ชั่นสำหรับทริกเกอร์โมดอลของเรา เราจำเป็นต้องนำเข้าและฉีดDialogService. บริการนี้มีวิธีการopenที่เราผ่านไปได้ view-model จาก my-modal ไฟล์และ 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 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

ในโฟลเดอร์นี้คุณต้องเพิ่มโฟลเดอร์ใหม่สำหรับภาษาที่คุณต้องการ เราจะสร้าง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 ปลั๊กอินและตั้งค่าให้ใช้รหัส JSON จาก de-DE โฟลเดอร์

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 - ดู

มีสองวิธีในการแปลข้อมูล เราจะใช้ ValueConverter ที่กำหนดเองชื่อt. คุณสามารถดูวิธีการจัดรูปแบบข้อมูลในตัวอย่างต่อไปนี้ เปรียบเทียบสิ่งนี้กับไฟล์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.

ขั้นตอนที่ 1 - โฟลเดอร์รูท

มาสร้างโฟลเดอร์รูทที่เราจะเก็บแอพ Aurelia ทั้งหมดไว้

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

ขั้นตอนที่ 2 - เครื่องมือ Aurelia

ข้างใน aurelia-projects โฟลเดอร์เราจะโคลน aurelia-tools ที่เก็บจาก github

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

ขั้นตอนที่ 3 - สร้างโครงการใหม่

ในการเริ่มโครงการ Aurelia ใหม่วิธีที่แนะนำคือใช้หนึ่งในไฟล์ aurelia-skeletons. มาโคลนโครงกระดูก 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 framework

ขั้นตอนที่ 1 - การติดตั้งข้อกำหนดเบื้องต้น

คุณสามารถติดตั้ง aurelia-bundler โดยรันคำสั่งต่อไปนี้ในไฟล์ command prompt.

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

หากคุณไม่ได้ติดตั้งอึกคุณสามารถติดตั้งได้โดยเรียกใช้รหัสนี้

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

คุณยังสามารถติดตั้ง require-dir แพคเกจจาก npm.

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

คุณต้องสร้าง bundle.js ไฟล์ภายใน tasks โฟลเดอร์

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

ขั้นตอนที่ 3 - อึก

ใช้ gulpในฐานะนักวิ่งงาน คุณต้องบอกให้เรียกใช้รหัสจากbuild\tasks\bundle.js.

gulpfile.js

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

ตอนนี้สร้างงานที่คุณต้องการ งานนี้จะใช้แอพสร้างdist/appbuild.js และ dist/vendor-build.jsไฟล์. หลังจากขั้นตอนการรวมกลุ่มเสร็จสมบูรณ์ไฟล์config.jsไฟล์จะได้รับการอัปเดตด้วย คุณสามารถรวมไฟล์และปลั๊กอินทั้งหมดที่คุณต้องการฉีดและย่อขนาดได้

มัด 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 context debugger เป็นส่วนขยายของ Chrome

Note - ก่อนที่จะเพิ่มส่วนขยายคุณต้องมีไฟล์ aurelia-toolsไฟล์. หากคุณยังไม่มีคุณสามารถตรวจสอบบทเครื่องมือ

ขั้นตอนที่ 1 - เปิดส่วนขยายของ Chrome

วิธีที่ง่ายที่สุดในการเปิดส่วนขยายของ Chrome คือเรียกใช้โค้ดต่อไปนี้ในแถบ URL ของเบราว์เซอร์

chrome://extensions

ขั้นตอนที่ 2 - เพิ่มส่วนขยาย

เนื่องจากยังไม่มีส่วนขยายนี้จาก Chrome store ให้ตรวจสอบ developermode ช่องทำเครื่องหมายแล้วคลิก Load Unpacked Extensions. ซึ่งจะเปิดหน้าต่างเล็ก ๆ ที่คุณสามารถเลือกส่วนขยายที่จะเพิ่มได้

สำหรับตัวอย่างนี้ให้เราเลือกโฟลเดอร์ Desktop / aurelia-projects / tools / context-debugger แล้วเปิดขึ้นมา

ตอนนี้เราจะเห็นว่าส่วนขยายถูกโหลดในเบราว์เซอร์

นอกจากนี้เรายังตรวจสอบคอนโซลนักพัฒนาได้อีกด้วย เมื่อเราคลิกelements เราจะเห็น aurelia-properties ที่มุมล่างขวา

ชุมชนเป็นปัจจัยที่สำคัญที่สุดอย่างหนึ่งที่ต้องพิจารณาในการเลือกกรอบ Aurelia ให้การสนับสนุนที่ยอดเยี่ยมสำหรับลูกค้า ในบทนี้คุณจะได้เรียนรู้วิธีการขอความช่วยเหลือเมื่อคุณติดขัด

Aurelia - เอกสารอย่างเป็นทางการ

คุณสามารถค้นหาเอกสาร Aurelia ได้ที่ลิงค์นี้ - https://aurelia.io/docs.html

Aurelia Gitter - ช่อง

หากคุณต้องการคำตอบที่รวดเร็วคุณสามารถส่งคำถามไปที่ช่อง aurelia gitter ได้ตลอดเวลา ช่องนี้สามารถพบได้ในลิงค์ต่อไปนี้ -https://gitter.im/Aurelia/Discuss

ออเรเลีย - Github

คุณยังสามารถส่งปัญหาไปยังที่เก็บอย่างเป็นทางการของ Aurelia github https://github.com/aurelia

Aurelia - บล็อก

หากคุณต้องการติดตามการอัปเดตและการเปลี่ยนแปลงใด ๆ ของ Aurelia คุณสามารถติดตามบล็อกทางการของ Durandal http://blog.durandal.io/

Aurelia - บล็อกของ Rob Eisenberg

คุณยังสามารถติดตามบล็อกอย่างเป็นทางการของ Rob Eisenberg ผู้สร้าง Aurelia framework http://eisenbergeffect.bluespire.com/

Aurelia - การสนับสนุนระดับองค์กร

Aurelia ให้การสนับสนุนระดับองค์กรสำหรับทีมและบุคคล หากคุณสนใจส่งอีเมลไปยังที่อยู่ต่อไปนี้ -

[email protected]

Aurelia - จ้างทีม Dev

คุณสามารถจ้าง Aurelia Expert Developers โดยส่งอีเมลไปยังที่อยู่นี้

[email protected]

Aurelia - การฝึกอบรม

หากคุณต้องการการฝึกอบรมอย่างเป็นทางการของ Aurelia สำหรับทีมของคุณคุณสามารถส่งอีเมลไปยังที่อยู่นี้

[email protected]

Aurelia เป็นกรอบการทำงานใหม่ดังนั้นจึงยังไม่มีการกำหนดแนวทางปฏิบัติที่ดีที่สุด ในบทนี้คุณจะพบแนวทางที่เป็นประโยชน์ในการปฏิบัติตาม

การเริ่มโครงการใหม่

ข้อเสนอของ Aurelia aurelia-skeletons. มีโครงกระดูกให้เลือกสองสามแบบ ทีมที่อยู่เบื้องหลัง 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 ไดเรกทอรี

มาตรฐานเว็บ

Aurelia เป็นกรอบที่มุ่งเน้นไปที่มาตรฐานเว็บ นี่เป็นหนึ่งในเป้าหมายหลักของทีมที่อยู่เบื้องหลัง พวกเขาจะตรวจสอบให้แน่ใจว่าเฟรมเวิร์กเป็นไปตามเว็บที่ทันสมัยเสมอ นี่เป็นสิ่งที่ดีอย่างยิ่งสำหรับนักพัฒนาเนื่องจากเราสามารถพึ่งพาความสามารถในการใช้งานของกรอบงานในอนาคต นอกจากนี้ยังช่วยให้เราอัปเดตเบราว์เซอร์และเว็บได้อีกด้วย

EcmaScript 6

นี่เป็นแนวทางปฏิบัติที่ดีไม่เพียง แต่สำหรับ Aurelia แต่สำหรับกรอบงาน JavaScript อื่น ๆ ES6นำเสนอฟังก์ชันใหม่ที่สามารถช่วยในกระบวนการพัฒนา คุณยังสามารถใช้TypeScriptหากคุณชอบภาษาที่พิมพ์มาก