Apa itu templateUrls dan styleUrls di Angular?

Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.

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.

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

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

Apa 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 menghasilkan halaman tentang komponen

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

   <aplikasi-tentang-halaman></app-about-page>

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

   @Komponen({
    pemilih: 'aplikasi-tentang-halaman',
    templat: '<h2>Tentang Halaman</h2><br><P>Ini merender HTML dari file TypeScript!</P>'
   })
   

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

   @Komponen({
    pemilih: 'aplikasi-tentang-halaman',
    templat: `<h2>Tentang Halaman</h2>
   <br>
   <P>Ini merender HTML dari file TypeScript!</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 dalam about-page.component.ts, ganti "template" dengan "templateUrl". Sertakan tautan ke file HTML eksternal komponen. Anda dapat menggunakan "templateUrl" jika Anda memiliki kode HTML yang lebih kompleks yang memerlukan file sendiri.

   @Komponen({
    pemilih: 'aplikasi-tentang-halaman',
    TemplatUrl: './about-page.component.html'
   })

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

   <h2>Tentang Halaman</h2>
   <P>Ini merender HTML dari file HTML!</P>

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

Apa itu style dan styleUrls di Angular?

Mirip dengan HTML, Anda dapat menggunakan "style" atau "styleUrls" tergantung di mana Anda memilih untuk menyimpan CSS.

Anda dapat menyertakan CSS di 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:

   @Komponen({
    pemilih: 'aplikasi-tentang-halaman',
    TemplatUrl: './about-page.component.html',
    gaya: ['h2 {warna: merah}','p {warna: hijau}']
   })

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 dalam about-page.component.ts, ganti dekorator @Component dengan yang berikut:

   @Komponen({
    pemilih: 'aplikasi-tentang-halaman',
    TemplatUrl: './about-page.component.html',
    styleUrl: ['./about-page.component.css']
   })

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

   h2 {
    warna biru
   }
   P {
    warna: 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.