Angular'da templateUrls ve styleUrls nedir?

Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.

Angular'ı kullanarak uygulamanızın sayfalarını, iletişim kutularını veya diğer bölümlerini bileşenlere ayırabilirsiniz. Bir Angular uygulamasındaki bileşenler temel olarak HTML, CSS ve TypeScript dosyalarından oluşur.

TypeScript dosyasına, bir sunucudan veri almak gibi kullanıcı arayüzünün çalışması için gereken herhangi bir mantığı ekleyebilirsiniz.

Şablon ve stil niteliklerini belirterek, TypeScript kullanarak bileşenin HTML ve CSS'sini de oluşturabilirsiniz. Harici HTML veya CSS dosyalarına bağlantı vermek için templateUrl veya styleUrls kullanabilirsiniz.

Angular'da şablon ve templateUrl nedir?

Sen ne zaman Angular'da kendi bileşeninizi oluşturun, bunun için HTML'yi bir şablon kullanarak oluşturabilirsiniz. HTML şablonunuzu yazmanın iki yolu vardır:

• HTML kodunuzu TypeScript dosyasındaki bir şablonun içine yazabilirsiniz.
• HTML kodunuzu harici bir dosyaya yazabilir ve TypeScript dosyasını bu HTML dosyasına bağlayabilirsiniz.

Yeni bir bileşende, HTML'nizi nereye yazdığınıza bağlı olarak "template" veya "templateUrl" niteliklerini ayarlayabilirsiniz.

1. Oluşturmak yeni Açısal uygulama.
2. Uygulamanızın terminalinde şunu çalıştırın: bileşen oluşturma Yeni bir bileşen oluşturmak için komut. Yeni bileşene "sayfa hakkında" adını verin.

   sayfa hakkında bileşen oluşturma

3. İçinde uygulama.bileşen.html, mevcut kodu, yeni bileşeniniz için etiketlerle değiştirin:

   <uygulama-hakkında-sayfası></app-about-page>

4. Aç about-page.component.ts dosya. Çok fazla HTML kodunuz yoksa, onu doğrudan TypeScript dosyasının içine yazmak için şablon niteliğini kullanabilirsiniz. @Component dekoratörünü aşağıdakiyle değiştirin:

   @Bileşen({
    seçici: 'uygulama-hakkında-sayfası',
    şablon: '<h2>Sayfa Hakkında</h2><br><P>Bu, HTML'yi TypeScript dosyasından oluşturuyor!</P>'
   })
   

5. Çok satırlı bir şablon eklemek istiyorsanız, bunun yerine tırnak işaretlerini kullanabilirsiniz:

   @Bileşen({
    seçici: 'uygulama-hakkında-sayfası',
    şablon: `<h2>Sayfa Hakkında</h2>
   <br>
   <P>Bu, HTML'yi TypeScript dosyasından oluşturuyor!</P>`
   })

6. Terminalde şunu yazın hizmet etmek kodunuzu derlemek ve bir web tarayıcısında çalıştırmak için. Uygulamanızı şu adreste açın: http://localhost: 4200/. TypeScript dosyasındaki HTML kodunuz sayfada görüntülenecektir.
7. İçinde about-page.component.ts, bunun yerine "template" ifadesini "templateUrl" ile değiştirin. Bağlantıyı bileşenin harici HTML dosyasına ekleyin. Kendi dosyasını gerektiren daha karmaşık HTML kodunuz varsa "templateUrl" kullanabilirsiniz.

   @Bileşen({
    seçici: 'uygulama-hakkında-sayfası',
    şablon URL'si: './about-page.component.html'
   })

8. Bazı HTML kodlarını ekleyin. about-page.component.html dosya:

   <h2>Sayfa Hakkında</h2>
   <P>Bu, HTML dosyasından HTML'yi oluşturuyor!</P>

9. Tarayıcınıza geri dönün veya yeniden çalıştırın hizmet etmek kodunuzu yeniden derlemek için. Uygulamanızı şu adreste açın: http://localhost: 4200/. Tarayıcı artık HTML'yi about-page.component.html dosya.

Angular'da stiller ve styleUrls nedir?

HTML'ye benzer şekilde, CSS'nizi nerede saklamayı seçtiğinize bağlı olarak "style" veya "styleUrls" kullanabilirsiniz.

Çok basit CSS bildirimleriniz varsa, CSS'yi TypeScript koduna dahil edebilirsiniz. Aksi takdirde, TypeScript dosyasını daha fazla stil içeren harici bir CSS'ye bağlamak için "styleUrls" kullanabilirsiniz.

1. Önceden oluşturduğunuz Açısal uygulamanızda, about-page.component.ts dosya. Bileşene bir "stil" özelliği ekleyin. "Stiller" içinde, sayfa için CSS stilinizi ekleyin:

   @Bileşen({
    seçici: 'uygulama-hakkında-sayfası',
    şablon URL'si: './about-page.component.html',
    stiller: ['h2 {renk: kırmızı}','p {renk: yeşil}']
   })

2. Terminalde şunu yazın hizmet etmek kodunuzu derlemek ve bir web tarayıcısında çalıştırmak için. Uygulamanızı şu adreste açın: http://localhost: TypeScript dosyasında belirtilen stili görüntülemek için 4200/.
3. Çok fazla CSS'niz varsa, TypeScript dosyasını harici bir CSS dosyasına bağlamak için "styles" yerine "styleUrls" kullanın. İçinde about-page.component.ts, @Component dekoratörünü aşağıdakiyle değiştirin:

   @Bileşen({
    seçici: 'uygulama-hakkında-sayfası',
    şablon URL'si: './about-page.component.html',
    stil URL'leri: ['./about-page.component.css']
   })

4. Bazı CSS stilleri ekleyin about-page.component.css:

   h2 {
    renk: mavi
   }
   P {
    renk: koyu turuncu
   }

5. Tarayıcınıza geri dönün veya yeniden çalıştırın hizmet etmek kodunuzu yeniden derlemek için. Uygulamanızı şu adreste açın: http://localhost: Harici CSS dosyasından kullanılan stilleri görüntülemek için 4200/.

Bir Bileşenin HTML'sini Açısal Olarak Oluşturma

Artık bir Angular uygulamasında HTML ve CSS içeriğinizi oluşturmanın farklı yollarını biliyorsunuz. HTML ve CSS'nizin karmaşıklığına bağlı olarak hangi yaklaşımı kullanmak istediğinizi belirleyebilirsiniz.

İlgileniyorsanız, bir Angular bileşeninin HTML ve TypeScript dosyaları arasında nasıl veri aktarılacağını keşfedebilirsiniz.