AngularJS'ye ng-include: HTML Dosyası nasıl eklenir [Örnek]

By: James Hartman James Hartman
Hours Güncellenmiş

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 .Net gibi programlama dillerinde mevcuttur ve Java.

Bu eğitimde, dosyaların (harici HTML kodu içeren dosyalar) ana HTML dosyasına dahil edilebileceği diğer yollar ele alınmaktadır.

İstemci Tarafı şunları içerir

HTML kodunu eklemenin en yaygın yollarından biri, Javascript. JavaSenaryo anında bir HTML sayfasındaki içeriği değiştirmek için kullanılabilecek bir programlama dilidir. Buradan, 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ım1) 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,

  1. Body etiketinde Content kimliğini taşıyan bir div etiketi bulunur. Burası 'Sub.html' harici dosyasındaki kodun ekleneceği yerdir.
  2. Bir jquery betiğine referans var. JQuery, bunun üzerine kurulmuş bir betik dilidir. Javascript bu da DOM manipülasyonunu daha da kolaylaştırır.
  3. içinde Javascript işlevinde '$(“#Content”).load(“Sub.html”);' ifadesi vardır. bu da Sub.html dosyasındaki kodun Content kimliğini taşıyan div etiketine eklenmesine neden olur. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

İLGİLİ MAKALELER

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.

  1. sayfa başlığı
  2. Sayfa altbilgisi
  3. Gezinme menüsü.

Bir web sunucusunun Sunucu Tarafı İçeriklerini tanıyabilmesi için dosya adlarının özel uzantıları vardır. Genellikle .shtml, .stm, .shtm, .cgi gibi web sunucuları tarafından kabul edilirler.

İçerik eklemek için kullanılan yönerge “include yönergesidir”. İnclude direktifinin bir örneği 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?

Angular, ng-include yönergesini kullanarak diğer AngularJS dosyalarının işlevselliğini ekleme işlevini sağlar.

“ng-include direktifinin” temel amacı, harici bir HTML parçasını ana AngularJS uygulamasına getirmek, derlemek ve eklemek için kullanılır.

Aşağıdaki kod tabanına bakalım ve bunun Angular kullanılarak nasıl başarılabileceğ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çacığı, "öğretici" adı verilen bir kapsam değişkeninin olduğunu varsayar. Daha sonra, "Eğitim" değişkenindeki her konunun üzerinden geçen ve 'ad' ve 'açıklama' anahtar/değer çiftinin değerlerini görüntüleyen ng-repeat yönergesini kullanır.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</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 angular.JS uygulamasıdır

  1. 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.
  2. Denetleyicide, $scope nesnesinin bir parçası olarak bir "öğretici" değişken oluşturulur. Bu değişken anahtar/değer çiftlerinin bir listesini içerir.

Örneğimizde anahtar değer çiftleri şunlardır:

  1. Ad – Bu, Denetleyiciler, Modeller ve Yönergeler gibi bir konunun adını belirtir.
  2. 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ı:

HTML dosyasını AngularJS'ye dahil et

ÖZET

  • Varsayılan olarak, HTML'nin diğer dosyalar gibi diğer dosyalardan HTML içeriği eklemek için doğrudan bir yol sağlamadığını biliyoruz. Programlama dilleri.
  • Javascript JQuery ile birlikte diğer dosyalardan HTML içeriğini gömmek için en çok tercih edilen seçenektir.
  • Dahil etmenin başka bir yolu HTML diğer dosyalardaki içeriği kullanmaktır direktif ve sanal parametre anahtar sözcüğü. Virtual parametre anahtar sözcüğü, gömülmesi gereken dosyayı belirtmek için kullanılır. Bu, sunucu tarafı içermeleri olarak bilinir.
  • Angular ayrıca ng-include direktifini kullanarak dosyaları dahil etme olanağı sağlar. Bu yönerge, harici dosyalardan kodu doğrudan ana HTML dosyasına enjekte etmek için kullanılabilir.

Bu yazıyı şu şekilde özetleyin: