AngularJS ng-include: HTML Dosyalarını Örnekle Dahil Etme
James Hartman
⚡ Akıllı Özet
AngularJS'deki `ng-include`, harici bir HTML parçasını alır, derler ve ana sayfaya ekler; böylece tablo, başlık veya altbilgi gibi paylaşılan işaretlemeler tek bir yeniden kullanılabilir kısmi dosyada yer alır.
Varsayılan olarak HTML, diğer dosyalardan istemci tarafı kodu ekleme olanağını sağlamaz. Herhangi bir uygulama için işlevselliği çeşitli dosyalara dağıtmak normalde herhangi bir programlama dilinde iyi bir uygulamadır.
Örneğin, sayısal işlemler için mantığınız varsa, normalde bu işlevselliğin ayrı bir dosyada tanımlanmasını istersiniz. Bu ayrı dosya daha sonra yalnızca bu dosyanın eklenmesiyle birden fazla uygulamada yeniden kullanılabilir.
Bu normalde kavramdır İfadeleri dahil et hangileri mevcuttur Programlama dilleri .Net gibi Java.
Bu eğitimde, harici içerik içeren dosyalara (dosyalara) ilişkin diğer yöntemler incelenmektedir. HTML Kod, ana HTML dosyasına dahil edilebilir.
İstemci Tarafı Şunları İçerir:
HTML kodunu eklemenin en yaygın yollarından biri şu şekildedir: JavaSenaryo. JavaSenaryo anında bir HTML sayfasındaki içeriği değiştirmek için kullanılabilecek bir programlama dilidir. Buradan, JavaKomut dosyası, diğer dosyalardan kod eklemek için de kullanılabilir.
Aşağıdaki adımlar bunun nasıl gerçekleştirilebileceğini göstermektedir.
) 1 Adım Sub.html adında bir dosya tanımlayın ve dosyaya aşağıdaki kodu ekleyin.
<div> This is an included file </div>
) 2 Adım Ana uygulama dosyanız olan Sample.html adında bir dosya oluşturun ve aşağıdaki kod parçasını ekleyin.
Aşağıdaki kodla ilgili dikkat edilmesi gereken ana hususlar aşağıda verilmiştir,
- Body etiketinde Content kimliğini taşıyan bir div etiketi bulunur. Burası 'Sub.html' harici dosyasındaki kodun ekleneceği yerdir.
- Burada jQuery betiğine bir atıf var. jQuery, üzerine kurulu bir betik dilidir. JavaDOM manipülasyonunu daha da kolaylaştıran bir komut dosyası.
- içinde JavaKomut dosyası fonksiyonunda, '$(“#Content”).load(“Sub.html”);' ifadesi yer almaktadır; bu ifade, Sub.html dosyasındaki kodun Content kimliğine sahip div etiketine enjekte edilmesini sağlar.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Sunucu tarafı içerir
Sunucu Tarafı İçerikleri ayrıca bir siteye 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
- Gezinme menüsü.
Bir web sunucusunun sunucu tarafı dahil etme (Server Side Include) dosyasını tanıması için dosya adlarının özel uzantılara sahip olması gerekir. Bunlar genellikle web sunucusu tarafından kabul edilen uzantılardır; örneğin .shtml, .stm, .shtm, .cgi.
İçerik eklemek için kullanılan yönerge "include yönergesi"dir. Include yönergesine bir örnek aşağıda gösterilmiştir:
<!--#include virtual="navigation.cgi" -->
- Yukarıdaki direktif bir belgenin içeriğinin diğerine dahil edilmesine izin verir.
- Kodun üstündeki “sanal” komutu, uygulamanın etki alanı köküne göre hedefi belirtmek için kullanılır.
- Ayrıca sanal parametrenin yanında kullanılabilecek dosya parametresi de bulunmaktadır. Geçerli dosyanın dizinine göre yolun belirtilmesi gerektiğinde “dosya” parametreleri kullanılır.
Not:
Virtual parametresi, eklenmesi gereken dosyayı (HTML sayfası, metin dosyası, komut dosyası vb.) belirtmek için kullanılır. Web sunucusu işleminin dosyayı okuma veya betiği yürütme erişimi yoksa, include komutu başarısız olur. 'Sanal' kelimesi, include yönergesine yerleştirilmesi gereken bir anahtar kelimedir.
AngularJS'e HTML dosyası nasıl eklenir?
angularjs `ng-include` kullanarak diğer AngularJS dosyalarındaki işlevselliği dahil etme olanağı sağlar. Direktifler.
"ng-include yönergesinin" temel amacı, harici bir HTML parçasını alıp derlemek ve ana AngularJS uygulamasına dahil etmektir.
Sürüm notu: AngularJS 1.x, 31 Aralık 2021 tarihinde uzun vadeli destekten çıkarıldı ve çerçeve ekibi şu açıklamayı yaptı: AngularJS desteği resmen sona erdi. Ocak 2022'de yayınlandı, bu nedenle herhangi bir sürüm veya güvenlik yaması takip etmiyor. Aşağıdaki her adım ve kod bloğu, tarihsel referans olarak yayınlandığı gibi aynen kalıyor. Modern Angular'ın doğrudan bir alternatifi yok: işaretleme bileşenlerden oluşuyor ve çalışma zamanında seçilen bir parça ile işleniyor. ng-konteyner ve ngComponentOutlet.
Aşağıdaki kod tabanına bakalım ve bunun AngularJS kullanılarak nasıl gerçekleştirilebileceğini açıklayalım.
) 1 Adım Aşağıdaki kodu Table.html adlı bir dosyaya yazalım. Bu, ng-include direktifi kullanılarak ana uygulama dosyamıza enjekte edilecek dosyadır.
Aşağıdaki kod parçası, "tutorial" adında bir kapsam değişkeni olduğunu varsayar. Ardından bunu kullanır. ng-tekrar "Eğitim" değişkenindeki her konuyu tek tek inceleyen ve 'Ad' ve ' değerlerini görüntüleyen yönerge.Descriptiyon' anahtar/değer çifti.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
) 2 Adım Aşağıdaki kodu Main.html adlı bir dosyaya yazalım. Bu, aşağıdaki özelliklere sahip basit bir AngularJS uygulamasıdır.
- Kodu 'Table.html' harici dosyasına enjekte etmek için “ng-include yönergesini” kullanın. İfade aşağıdaki kodda koyu renkle vurgulanmıştır. Yani div etiketi ' ' 'Table.html' dosyasındaki kodun tamamıyla değiştirilecektir.
- içinde kontrolör$scope nesnesinin bir parçası olarak "tutorial" adında bir değişken oluşturulur. Bu değişken, anahtar-değer çiftlerinden oluşan bir liste içerir.
Örneğimizde anahtar değer çiftleri şunlardır:
- Ad – Bu, Denetleyiciler, Modeller ve Yönergeler gibi bir konunun adını belirtir.
- Description – Bu, her bir konu hakkında bir açıklama verir
Öğretici değişkene 'Table.html' dosyasından da erişilir.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
<h3> Guru99 Global Event</h3>
<div ng-include="'Table.html'"></div>
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController', function($scope) {
$scope.tutorial =[
{Name: "Controllers" , Description : "Controllers in action"},
{Name: "Models" , Description : "Models and binding data"},
{Name: "Directives" , Description : "Flexibility of Directives"}
];
});
</script>
</body>
</html>
Yukarıdaki kodu çalıştırdığınızda aşağıdaki çıktıyı alacaksınız.
Çıktı:
Aşağıdaki ekran görüntüsü, oluşturulan sonucu göstermektedir: tarayıcı sekmesinde "Etkinlik Kaydı" başlığı yer almaktadır, başlık eklenen tablonun üzerinde bulunmaktadır ve üç satır, Main.html dosyasındaki tutorial dizisinden partial aracılığıyla alınmıştır. Açıklamalı ekran görüntüsünde başlık "Gur99" olarak yazılırken, kod şu şekilde yazmaktadır: Guru99
ng-include Özellikleri: src, onload ve autoscroll
Dosya adının ötesinde, yönerge iki isteğe bağlı öznitelik kabul eder ve üç şekilde yazılabilir: herhangi bir öğe üzerinde bir öznitelik olarak, bir <ng-include> Bir öğe veya bir CSS sınıfı olarak. Aşağıdaki referans resmi olanı takip eder. ngInclude dokümantasyonu.
| özellik | gereklidir | Ne yapar |
|---|---|---|
| src veya ng-include | Evet | Şablona karşılık gelen ifade URL |
| yükleme | Yok hayır | Yeni bir kısmi yükleme tamamlandığında ifade her seferinde değerlendirilir. |
| otomatik kaydırma | Yok hayır | İçerik yüklendikten sonra `$anchorScroll` fonksiyonunu çağırır; bu özelliği atlamak kaydırmayı devre dışı bırakır. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
En sık yapılan hata ilk satırdan kaynaklanmaktadır: src alır ifadeBu, düz bir metin dizesi değil. Dolayısıyla, tam bir yolun öznitelik içinde kendi tırnak işaretlerine ihtiyacı vardır; bu nedenle yukarıdaki örnek şu şekilde okunur: ng-include="'Table.html'". yazı ng-include="Table.html" AngularJS'nin değerlendirme yapmasını sağlar Table Bir kapsam özelliği olarak, hiçbir şey bulamazsa öğeyi boş bırakın.
ng-include neden yeni bir alt kapsam oluşturuyor?
Bu yönerge, çevreleyen kapsama alanına işaretleme kodu yapıştırmaz. Her include ifadesi yeni bir alt öğe oluşturur. kapsam Bu durum, ilan edildiği kapsamdan prototipik olarak miras alır ve bu tek gerçek, bağlayıcı sürprizlerin çoğunu açıklar.
Okuma işlemi beklendiği gibi çalışıyor. Yukarıdaki kısmi metin şu şekilde okunuyor: tutorial doğrudan ebeveynden geliyor, bu yüzden ng-repeat Diziyi bulur. Yazma işlemi burada bozulur: kısmi bir atama işlemi, örneğin şu şekilde, temel bir türe atama yaptığında: ng-model="topic"AngularJS, topic Çocuk kapsamındaki kopyada değişiklik olmaz ve üst kopyada da değişiklik olmaz.
İki alışkanlık bu tuzağa düşmekten kaçınmanızı sağlar:
- Bir nesne aracılığıyla bağlamak, örneğin
ng-model="data.topic"Böylece ebeveyn ve çocuk aynı referansa ulaşır. - Durumu bir denetleyici veya servis içinde tutun ve temel veri tipleri yerine fonksiyonları kullanıma sunun.
Bu içerik ayrıca şunları da yayar: $includeContentRequested, $includeContentLoaded hem de $includeContentErrorböylece bir ebeveyn şu şekilde tepki verebilir: $scope.$on Çocuk konusuna hiç değinmeden.
Boş veya Başarısız Olan ng-include Komutunu Nasıl Düzeltirsiniz?
Hiçbir şey oluşturmayan bir include işlemi genellikle birkaç nedenden dolayı başarısız olur. Bunları şu sırayla inceleyin.
- Fiyat tekliflerini kontrol edin. Dosya adının öznitelik değerinin içinde tek tırnak bulunması gerekir. Tırnak işareti olmadan ifade tanımsız olarak sonuçlanır ve hiçbir istek gönderilmez.
- Sayfayı HTTP üzerinden sunun. Bu yönerge, kısmi dosya için bir XHR isteği gönderir; bu nedenle Main.html dosyasını doğrudan diskten dosya adresi üzerinden açmak çoğu tarayıcıda başarısız olur. Herhangi bir yerel web sunucusu bu sorunu çözer.
- Yolun doğru şekilde çalıştığını doğrulayın. İsteği görmek için ağ panelini izleyin. 404 hatası, yolun, onu referans alan kısmi şablona değil, dahil edilen dosyayı barındıran sayfaya göre göreceli olduğunu gösterir.
- Aynı menşei kuralına saygı gösterin. Varsayılan olarak şablon URL AngularJS bunu bir kanal üzerinden geçirdiği için, bu alan adı ve protokol uygulama belgesinin alan adı ve protokolüyle eşleşmelidir. $sce.getTrustedResourceUrlBaşka bir yerden alınan bir şablonun güvenilir kaynaklar listesine eklenmesi gerekir. URL Liste veya açık bir trustAsResourceUrl sarmalayıcısı kullanıldığında bile, uzak sunucunun yine de CORS başlıklarını göndermesi gerekir.
- Arızayı dinleyin. $includeContentError, yanıt durumu 200 ile 299 aralığının dışında kaldığında tetiklenir ve sessizce boş olan bir alanı kaydedilmeye değer bir mesaja dönüştürür.
Gözden kaçması kolay bir diğer neden de şu: AngularJS, getirilen her parçayı `$templateCache`'te saklar, bu nedenle düzenlenmiş bir dosya, önbellek girdisi kaldırılana veya sayfa kaynaktan yeniden yüklenene kadar eski işaretlemeyi sunmaya devam edebilir. Bir parçanın yalnızca işaretleme yerine kendi davranışına ihtiyaç duyduğu durumlarda, özel yönerge Kendi şablonu ve izole kapsamıyla daha iyi bir araçtır.
