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

注意 - 這些設定將在下一章中詳細解釋。

列印頁面

上一個

下一個