Apa itu templateUrls dan styleUrls di Angular?

Pelajari dasar rendering HTML dan CSS, dengan cara Angular.

Menggunakan Angular, Anda dapat memisahkan halaman, dialog, atau bagian lain dari aplikasi Anda ke dalam komponen. Komponen dalam aplikasi Angular sebagian besar terdiri dari file HTML, CSS, dan TypeScript.

Dalam file TypeScript, Anda dapat menambahkan logika apa pun yang diperlukan agar UI berfungsi, seperti mengambil data dari server.

Anda juga dapat merender HTML dan CSS komponen menggunakan TypeScript, dengan menentukan atribut template dan gayanya. Anda dapat menggunakan templateUrl atau styleUrls untuk menautkan ke file HTML atau CSS eksternal.

Apa itu template dan templateUrl di Angular?

Ketika kamu buat komponen Anda sendiri di Angular, Anda dapat merender HTML untuk itu menggunakan template. Ada dua cara untuk menulis template HTML Anda:

• Anda dapat menulis kode HTML Anda di dalam template di file TypeScript itu sendiri.
• Anda dapat menulis kode HTML Anda di file eksternal, dan menautkan file TypeScript ke file HTML ini.

Di komponen baru, Anda dapat menyetel atribut “template” atau “templateUrl” tergantung di mana Anda menulis HTML.

1. Membuat aplikasi Sudut baru.
2. Di terminal aplikasi Anda, jalankan ng menghasilkan komponen perintah untuk membuat komponen baru. Panggil komponen baru “about-page”.

   ng generate component about-page

3. Di aplikasi.komponen.html, ganti kode saat ini dengan tag untuk komponen baru Anda:

   <app-about-page></app-about-page>

4. Buka about-page.component.ts mengajukan. Jika Anda tidak memiliki banyak kode HTML, Anda dapat menggunakan atribut template untuk menulisnya langsung di dalam file TypeScript. Ganti dekorator @Component dengan yang berikut ini:

   @Component({
   selector: 'app-about-page',
   template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
   })
   

5. Jika Anda ingin menyertakan template multi-baris, Anda dapat menggunakan tanda kutip back-tick sebagai gantinya:

   @Component({
   selector: 'app-about-page',
   template: `<h2>About Page</h2>
   <br>
   <p>This is rendering the HTML from the TypeScript file!</p>`
   })

6. Di terminal, ketik melayani untuk mengkompilasi kode Anda dan menjalankannya di browser web. Buka aplikasi Anda di http://localhost:4200/. Kode HTML Anda dari file TypeScript akan ditampilkan di halaman.

7. Di about-page.component.ts, ganti “template” dengan “templateUrl” sebagai gantinya. Sertakan tautan ke file HTML eksternal komponen. Anda dapat menggunakan “templateUrl” jika Anda memiliki kode HTML yang lebih kompleks yang memerlukan filenya sendiri.

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

8. Tambahkan beberapa kode HTML ke about-page.component.html mengajukan:

   <h2>About Page</h2>
   <p>This is rendering the HTML from the HTML file!</p>

9. Kembali ke browser Anda atau jalankan kembali melayani untuk mengkompilasi ulang kode Anda. Buka aplikasi Anda di http://localhost:4200/. Browser sekarang merender HTML dari about-page.component.html mengajukan.

Apa itu style dan styleUrls di Angular?

Sama halnya dengan HTML, Anda dapat menggunakan “style” atau “styleUrls” tergantung di mana Anda memilih untuk menyimpan CSS Anda.

Anda dapat memasukkan CSS dalam kode TypeScript jika Anda memiliki deklarasi CSS yang sangat sederhana. Jika tidak, Anda dapat menggunakan “styleUrls” untuk menautkan file TypeScript ke CSS eksternal yang berisi lebih banyak gaya.

1. Di aplikasi Angular yang Anda buat sebelumnya, buka about-page.component.ts mengajukan. Tambahkan atribut “gaya” ke komponen. Di dalam “gaya”, tambahkan gaya CSS Anda untuk halaman:

   @Component({
   selector: 'app-about-page',
   templateUrl: './about-page.component.html',
   styles: ['h2 {color:red}','p {color:green}']
   })

2. Di terminal, ketik melayani untuk mengkompilasi kode Anda dan menjalankannya di browser web. Buka aplikasi Anda di http://localhost:4200/ untuk melihat gaya yang ditentukan dalam file TypeScript.

3. Jika Anda memiliki banyak CSS, gunakan “styleUrls” alih-alih “styles”, untuk menautkan file TypeScript ke file CSS eksternal. Di about-page.component.tsganti dekorator @Component dengan yang berikut:

   @Component({
   selector: 'app-about-page',
   templateUrl: './about-page.component.html',
   styleUrls: ['./about-page.component.css']
   })

4. Tambahkan beberapa gaya CSS ke about-page.component.css:

   h2 {
   color: blue
   }
   p {
   color: darkorange
   }

5. Kembali ke browser Anda atau jalankan kembali melayani untuk mengkompilasi ulang kode Anda. Buka aplikasi Anda di http://localhost:4200/ untuk melihat gaya yang digunakan dari file CSS eksternal.

Merender HTML Komponen dalam Angular

Sekarang Anda tahu berbagai cara untuk merender konten HTML dan CSS Anda dalam aplikasi Angular. Anda dapat menentukan pendekatan mana yang ingin Anda gunakan berdasarkan kompleksitas HTML dan CSS Anda.

Jika tertarik, Anda dapat menjelajahi cara meneruskan data antara file HTML dan TypeScript dari komponen Angular.