Angular 2 - Şablonlar

Bileşenler bölümünde, aşağıdaki şablonun bir örneğini görmüştük.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Bu bir inline template. Bir şablonu tanımlamanın başka yolları da vardır ve bu, templateURL komutu ile yapılabilir. Bunu bileşende kullanmanın en basit yolu aşağıdaki gibidir.

Sözdizimi

templateURL:
viewname.component.html

Parametreler

  • viewname - Bu, uygulama bileşeni modülünün adıdır.

Görünüm adından sonra, bileşenin dosya adına eklenmesi gerekir.

Satır içi bir şablon tanımlama adımları aşağıdadır.

Step 1- app.component.html adlı bir dosya oluşturun. Bu, görünümün html kodunu içerecektir.

Step 2 - Aşağıdaki kodu yukarıda oluşturulan dosyaya ekleyin.

<div>{{appTitle}} Tutorialspoint </div>

Bu, basit bir div etiketini tanımlar ve app.component sınıfından appTitle özelliğine başvurur.

Step 3 - app.component.ts dosyasına aşağıdaki kodu ekleyin.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

Yukarıdaki koddan, not edilebilecek tek değişiklik, uygulama klasöründe bulunan app.component.html dosyasına bağlantı veren templateURL'dendir.

Step 4 - Tarayıcıda kodu çalıştırın, aşağıdaki çıktıyı alacaksınız.

Çıktıdan, şablon dosyasının (app.component.html) buna göre çağrıldığı görülebilir.