Varsayılan olarak HTML, diğer dosyalardan istemci tarafı kodu dahil etme olanağı sağlamaz. İşlevselliği herhangi bir uygulama için çeşitli dosyalar arasında dağıtmak normalde herhangi bir programlama dilinde iyi bir uygulamadır.
Örneğin, sayısal işlemler için mantığınız olsaydı, normalde bu işlevselliğin ayrı bir dosyada tanımlanmasını istersiniz. Bu ayrı dosya daha sonra yalnızca o dosya dahil edilerek birden çok uygulamada yeniden kullanılabilir.
Bu, normalde .Net ve Java gibi programlama dillerinde bulunan Include deyimleri konseptidir .
Bu eğitici, dosyaların (harici HTML kodu içeren dosyalar) ana HTML dosyasına dahil edilebileceği diğer yolları inceler.
Bu eğitimde öğreneceksiniz-
- İstemci Tarafı şunları içerir:
- Sunucu Tarafı İçerir
- AngularJS'ye HTML dosyası nasıl eklenir?
İstemci Tarafı şunları içerir:
En yaygın yollardan biri, HTML kodunu eklemenin Javascript aracılığıyladır. JavaScript, bir HTML sayfasındaki içeriği anında değiştirmek için kullanılabilen bir programlama dilidir. Bu nedenle, Javascript diğer dosyalardan kod eklemek için de kullanılabilir.
Aşağıdaki adımlar bunun nasıl gerçekleştirilebileceğini göstermektedir.
Adım 1) Sub.html adlı bir dosya tanımlayın ve aşağıdaki kodu dosyaya ekleyin.
Bu, dahil edilen bir dosyadır
Adım 2) Ana uygulama dosyanız olan Sample.html adlı bir dosya oluşturun ve aşağıdaki kod parçacığını ekleyin.
Aşağıdaki kodla ilgili dikkat edilmesi gereken ana hususlar aşağıdadır:
- Gövde etiketinde, İçerik kimliğine sahip bir div etiketi vardır. Bu, harici 'Sub.html' dosyasındaki kodun ekleneceği yerdir.
- Bir jquery betiğine referans var. JQuery, DOM manipülasyonunu daha da kolaylaştıran Javascript üzerine inşa edilmiş bir betik dilidir.
- Javascript işlevinde, '$ ("# İçerik"). Load ("Alt.html");' ifadesi vardır. Bu, Sub.html dosyasındaki kodun Content id olan div etiketine enjekte edilmesine neden olur.
Sunucu Tarafı İçerir
Sunucu Tarafı Kodları, bir sitenin her yerine ortak bir kod parçası eklemek için de mevcuttur. Bu normalde bir HTML belgesinin aşağıdaki bölümlerine içerik eklemek için yapılır.
- Sayfa başlığı
- Sayfa altbilgisi
- Navigasyon menüsü.
Bir web sunucusunun Sunucu Tarafı Kodlarını tanıması için dosya adlarının özel uzantıları vardır. Genellikle .shtml, .stm, .shtm, .cgi gibi web sunucusu tarafından kabul edilirler.
İçeriği dahil etmek için kullanılan yönerge "include yönergesi" dir. İnclude direktifinin bir örneği aşağıda gösterilmiştir;
- Yukarıdaki yönerge, bir belgenin içeriğinin diğerine dahil edilmesine izin verir.
- Kodun üzerindeki "sanal" komut, uygulamanın etki alanı köküne göre hedefi belirtmek için kullanılır.
- Ayrıca, sanal parametreye, kullanılabilecek dosya parametresi de vardır. Mevcut dosyanın dizinine göre yolu belirtmek gerektiğinde "dosya" parametreleri kullanılır.
Not:
Sanal parametre, dahil edilmesi gereken dosyayı (HTML sayfası, metin dosyası, komut dosyası, vb.) Belirtmek için kullanılır. Web sunucusu işleminin dosyayı okuma veya komut dosyasını yürütme erişimi yoksa, include komutu başarısız olur. 'Sanal' kelime, include direktifine yerleştirilmesi gereken bir anahtar kelimedir.
AngularJS'ye HTML dosyası nasıl eklenir?
Angular, ng-include direktifini kullanarak diğer AngularJS dosyalarındaki işlevselliği dahil etme işlevi sağlar.
"Ng-include direktifinin" birincil amacı, ana AngularJS uygulamasına harici bir HTML parçası getirmek, derlemek ve dahil etmek için kullanılır.
Aşağıdaki kod tabanına bakalım ve bunun Angular kullanılarak nasıl elde edilebileceğini açıklayalım.
Adım 1) Aşağıdaki kodu Table.html adlı bir dosyaya yazalım. Bu, ng-include yönergesi kullanılarak ana başvuru dosyamıza eklenecek dosyadır.
Aşağıdaki kod parçacığı, "öğretici" adında bir kapsam değişkeni olduğunu varsayar. Daha sonra, "Eğitim" değişkenindeki her konuyu ele alan ve "ad" ve "açıklama" anahtar / değer çifti değerlerini görüntüleyen ng-tekrar yönergesini kullanır.
| {{Konu.Adı}} | {{Topic.Country}} |
Adım 2) Aşağıdaki kodu Main.html adlı bir dosyaya yazalım. Bu, aşağıdaki yönlere sahip basit bir açısal.JS uygulamasıdır.
- Kodu harici 'Table.html' dosyasına enjekte etmek için "ng-include direktifini" kullanın. İfade, aşağıdaki kodda kalın olarak vurgulanmıştır. Dolayısıyla, ' ' div etiketi , 'Table.html' dosyasındaki kodun tamamı ile değiştirilecektir.
- Denetleyicide, $ kapsam nesnesinin parçası olarak bir "öğretici" değişkeni oluşturulur. Bu değişken, anahtar / değer çiftlerinin bir listesini içerir.
Örneğimizde, anahtar değer çiftleri
- Ad - Bu, Denetleyiciler, Modeller ve Yönergeler gibi bir konunun adını belirtir.
- Açıklama - Bu, her konunun bir açıklamasını verir
Eğitim değişkenine ayrıca 'Table.html' dosyasından da erişilebilir.
Etkinlik Kaydı Guru99 Global Etkinliği
Yukarıdaki kodu çalıştırdığınızda, aşağıdaki çıktıyı alacaksınız.
Çıktı :
Özet:
- Varsayılan olarak, HTML'nin diğer programlama dilleri gibi diğer dosyalardan HTML içeriğini dahil etmenin doğrudan bir yolunu sağlamadığını biliyoruz.
- JQuery ile birlikte Javascript, diğer dosyalardan HTML içeriğini gömmek için en çok tercih edilen seçenektir.
- Diğer dosyalardan HTML içeriğini eklemenin bir başka yolu da
yönergesini ve virtual parametre anahtar sözcüğünü kullanmaktır. Virtual parameter anahtar sözcüğü, gömülmesi gereken dosyayı belirtmek için kullanılır. Bu, sunucu tarafı dahil etme olarak bilinir. - Angular ayrıca tesise ng-include direktifini kullanarak dosyaları dahil etme olanağı sağlar. Bu yönerge, kodu harici dosyalardan doğrudan ana HTML dosyasına enjekte etmek için kullanılabilir.