Aurelia - Ứng dụng đầu tiên

Trong chương này, chúng tôi sẽ giải thích ứng dụng bắt đầu Aurelia được tạo trong chương trước của chúng tôi. Chúng tôi cũng sẽ hướng dẫn bạn cấu trúc thư mục, để bạn có thể nắm được các khái niệm cốt lõi đằng sau khung công tác Aurelia.

Cấu trúc thư mục

package.json đại diện cho tài liệu về npmcác gói được cài đặt. Nó cũng hiển thị phiên bản của các gói đó và cung cấp một cách dễ dàng để thêm, xóa, thay đổi phiên bản hoặc tự động cài đặt tất cả các gói khi ứng dụng cần được chia sẻ giữa các nhà phát triển.
index.htmllà trang mặc định của ứng dụng giống như trong hầu hết các ứng dụng dựa trên HTML. Nó là nơi mà các tập lệnh và bảng định kiểu được tải.
config.jslà tệp cấu hình trình tải Aurelia. Bạn sẽ không mất nhiều thời gian làm việc với tệp này.
jspm_packages là thư mục cho SystemJS các mô-đun đã tải.
styleslà thư mục tạo kiểu mặc định. Bạn luôn có thể thay đổi nơi lưu giữ các tệp tạo kiểu của mình.
srcthư mục là nơi bạn sẽ dành phần lớn thời gian để phát triển. Nó giữHTML và js các tập tin.

Tệp nguồn

Như chúng tôi đã nêu, srcthư mục là nơi chứa logic ứng dụng của bạn. Nếu bạn nhìn vào ứng dụng mặc định, bạn có thể thấy rằngapp.js và app.html rất đơn giản.

Aurelia cho phép chúng tôi sử dụng ngôn ngữ cốt lõi JavaScript cho các định nghĩa lớp. Ví dụ mặc định sau đây cho thấy lớp EC6.

app.js

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

Các message thuộc tính liên kết với mẫu HTML bằng cách sử dụng ${message}cú pháp. Cú pháp này đại diện cho liên kết một chiều được chuyển đổi thành chuỗi và hiển thị bên trong chế độ xem mẫu.

app.html

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

Như chúng ta đã thảo luận trong chương trước, chúng ta có thể khởi động máy chủ bằng cách chạy lệnh sau trong command prompt cửa sổ.

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

Ứng dụng sẽ được hiển thị trên màn hình.