Aurelia - การกำหนดค่า
ในบทนี้เราจะแสดงวิธีกำหนดค่า 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 - การตั้งค่าเหล่านี้จะอธิบายโดยละเอียดในบทถัดไป