Aurelia - Yapılandırma

Bu bölümde, ihtiyaçlarınız için Aurelia çerçevesini nasıl yapılandıracağınızı göstereceğiz. Bazen uygulama kullanıcılara sunulmadan önce bir başlangıç yapılandırması ayarlamanız veya bazı kodlar çalıştırmanız gerekir.

Adım 1 - main.js'yi oluşturun

Oluşturalım main.js içindeki dosya srcKlasör. Bu dosyanın içinde Aurelia'yı yapılandıracağız.

Ayrıca Aurelia'ya konfigürasyon modülünü yüklemesini söylemelisiniz. Yorumlu kısmı aşağıdaki örnekte görebilirsiniz.

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>

Adım 2 - Varsayılan Yapılandırma

Aşağıdaki kod, varsayılan yapılandırmanın nasıl kullanılacağını gösterir. configureişlevi yapılandırmanın manuel olarak ayarlanmasına izin verir. Biz ayarlıyoruzuse ihtiyacımız olanı belirtmek için özellik.

main.js

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

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

Adım 3 - Gelişmiş Yapılandırma

Kullanabileceğimiz birçok yapılandırma seçeneği var. Size hepsini göstermek bu makalenin kapsamı dışındadır, bu nedenle aşağıdaki örnekte yapılandırmanın nasıl çalıştığını açıklayacağız. Aurelia'ya temelde şunu kullanmasını söylüyoruz:default data binding language, default resources, development logging, router, history ve event aggregator. Bunlar standart eklenti setidir.

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();

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

Note - Bu ayarlar sonraki bölümde ayrıntılı olarak açıklanacaktır.