ng-include στο AngularJS: Πώς να συμπεριλάβετε αρχείο HTML [Παράδειγμα]

Από προεπιλογή, η HTML δεν παρέχει τη δυνατότητα να συμπεριλάβει κώδικα από την πλευρά του πελάτη από άλλα αρχεία. Είναι συνήθως μια καλή πρακτική σε οποιαδήποτε γλώσσα προγραμματισμού η διανομή λειτουργικότητας σε διάφορα αρχεία για οποιαδήποτε εφαρμογή.

Για παράδειγμα, εάν είχατε λογική για αριθμητικές πράξεις, θα θέλατε κανονικά να οριστεί αυτή η λειτουργικότητα σε ένα ξεχωριστό αρχείο. Αυτό το ξεχωριστό αρχείο θα μπορούσε στη συνέχεια να επαναχρησιμοποιηθεί σε πολλαπλές εφαρμογές απλώς συμπεριλαμβάνοντας αυτό το αρχείο.

Αυτή είναι συνήθως η έννοια του Συμπεριλάβετε δηλώσεις τα οποία είναι διαθέσιμα σε γλώσσες προγραμματισμού όπως .Net και Java.

Αυτό το σεμινάριο εξετάζει άλλους τρόπους με τους οποίους τα αρχεία (αρχεία που περιέχουν εξωτερικό κώδικα HTML) μπορούν να συμπεριληφθούν στο κύριο αρχείο HTML.

Η πλευρά του πελάτη περιλαμβάνει

Ένας από τους πιο συνηθισμένους τρόπους είναι η συμπερίληψη κώδικα HTML είναι μέσω Javascript. JavaΓραφή είναι μια γλώσσα προγραμματισμού που μπορεί να χρησιμοποιηθεί για τον χειρισμό του περιεχομένου σε μια σελίδα HTML εν κινήσει. Οθεν, Javascript μπορεί επίσης να χρησιμοποιηθεί για να συμπεριλάβει κώδικα από άλλα αρχεία.

Τα παρακάτω βήματα δείχνουν πώς μπορεί να επιτευχθεί αυτό.

Βήμα 1) Ορίστε ένα αρχείο που ονομάζεται Sub.html και προσθέστε τον ακόλουθο κώδικα στο αρχείο.

<div>
	This is an included file
</div>

Βήμα 2) Δημιουργήστε ένα αρχείο με το όνομα Sample.html, το οποίο είναι το κύριο αρχείο εφαρμογής σας και προσθέστε το παρακάτω απόσπασμα κώδικα.

Παρακάτω είναι οι κύριες πτυχές που πρέπει να σημειώσετε σχετικά με τον παρακάτω κώδικα,

  1. Στην ετικέτα σώματος, υπάρχει μια ετικέτα div που έχει ένα αναγνωριστικό περιεχομένου. Αυτό είναι το μέρος όπου θα εισαχθεί ο κώδικας από το εξωτερικό αρχείο 'Sub.html'.
  2. Υπάρχει αναφορά σε σενάριο jquery. Το JQuery είναι μια γλώσσα δέσμης ενεργειών χτισμένη πάνω σε Javascript γεγονός που κάνει τη χειραγώγηση DOM ακόμα πιο εύκολη.
  3. Στο Javascript συνάρτηση, υπάρχει μια δήλωση '$("#Content").load("Sub.html");' που προκαλεί την ένεση του κώδικα στο αρχείο Sub.html στην ετικέτα div που έχει το αναγνωριστικό περιεχομένου.
    <html> 
    	  <head> 
    	    <script src="jquery.js"></script> 
    	    <script> 
    	    $(function(){
    	      $("#Content").load("Sub.html"); 
    	    });
        </script> 
      </head> 
    
    <body> 
         <div id="Content"></div>
      </body> 
    </html>

Η πλευρά του διακομιστή περιλαμβάνει

Τα Περιλαμβάνει από την πλευρά του διακομιστή είναι επίσης διαθέσιμα για τη συμπερίληψη ενός κοινού τμήματος κώδικα σε έναν ιστότοπο. Αυτό γίνεται συνήθως για τη συμπερίληψη περιεχομένου στα παρακάτω μέρη ενός εγγράφου HTML.

  1. Κεφαλίδα σελίδας
  2. Υποσέλιδο σελίδας
  3. Μενού πλοήγησης.

Για να αναγνωρίσει ένας διακομιστής ιστού ένα στοιχείο διακομιστή που περιλαμβάνει, τα ονόματα αρχείων έχουν ειδικές επεκτάσεις. Συνήθως γίνονται αποδεκτά από τον διακομιστή ιστού όπως .shtml, .stm, .shtm , .cgi.

Η οδηγία που χρησιμοποιείται για τη συμπερίληψη περιεχομένου είναι η «οδηγία συμπερίληψης». Ένα παράδειγμα της οδηγίας συμπερίληψης φαίνεται παρακάτω.

<!--#include virtual="navigation.cgi" -->
  • Η παραπάνω οδηγία επιτρέπει τη συμπερίληψη του περιεχομένου ενός εγγράφου σε άλλο.
  • Η "εικονική" εντολή πάνω από τον κώδικα χρησιμοποιείται για τον καθορισμό του στόχου σε σχέση με τη ρίζα τομέα της εφαρμογής.
  • Επίσης, στην εικονική παράμετρο, υπάρχει και η παράμετρος αρχείου που μπορεί να χρησιμοποιηθεί. Οι παράμετροι "αρχείο" χρησιμοποιούνται όταν χρειάζεται να καθορίσετε τη διαδρομή σε σχέση με τον κατάλογο του τρέχοντος αρχείου.

Σημείωση:

Η εικονική παράμετρος χρησιμοποιείται για τον καθορισμό του αρχείου (σελίδα HTML, αρχείο κειμένου, σενάριο κ.λπ.) που πρέπει να συμπεριληφθεί. Εάν η διαδικασία διακομιστή web δεν έχει πρόσβαση για την ανάγνωση του αρχείου ή την εκτέλεση του σεναρίου, η εντολή συμπερίληψης θα αποτύχει. Η «εικονική» λέξη είναι μια λέξη-κλειδί που απαιτείται να τοποθετηθεί στην οδηγία συμπερίληψης.

Πώς να συμπεριλάβετε αρχείο HTML στο AngularJS

Το Angular παρέχει τη λειτουργία για να περιλαμβάνει τη λειτουργικότητα από άλλα αρχεία AngularJS χρησιμοποιώντας την οδηγία ng-include.

Ο πρωταρχικός σκοπός της «οδηγίας ng-include» χρησιμοποιείται για την ανάκτηση, τη μεταγλώττιση και τη συμπερίληψη ενός εξωτερικού τμήματος HTML στην κύρια εφαρμογή AngularJS.

Ας δούμε την παρακάτω βάση κώδικα και ας εξηγήσουμε πώς μπορεί να επιτευχθεί αυτό χρησιμοποιώντας το Angular.

Βήμα 1) Ας γράψουμε τον παρακάτω κώδικα σε ένα αρχείο που ονομάζεται Table.html. Αυτό είναι το αρχείο που θα εισαχθεί στο κύριο αρχείο εφαρμογής μας χρησιμοποιώντας την οδηγία ng-include.

Το παρακάτω απόσπασμα κώδικα προϋποθέτει ότι υπάρχει μια μεταβλητή εμβέλειας που ονομάζεται "tutorial". Στη συνέχεια, χρησιμοποιεί την οδηγία ng-repeat, η οποία περνά από κάθε θέμα στη μεταβλητή "Tutorial" και εμφανίζει τις τιμές για το ζεύγος κλειδιού-τιμής "όνομα" και "περιγραφή".

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Βήμα 2) Ας γράψουμε τον παρακάτω κώδικα σε ένα αρχείο που ονομάζεται Main.html. Αυτή είναι μια απλή εφαρμογή angular.JS που έχει τις ακόλουθες πτυχές

  1. Χρησιμοποιήστε την οδηγία «ng-include» για να εισάγετε τον κώδικα στο εξωτερικό αρχείο «Table.html». Η δήλωση έχει τονιστεί με έντονους χαρακτήρες στον παρακάτω κώδικα. Έτσι η ετικέτα div ' ' θα αντικατασταθεί από ολόκληρο τον κώδικα στο αρχείο "Table.html".
  2. Στον ελεγκτή, δημιουργείται μια μεταβλητή "tutorial" ως μέρος του αντικειμένου $scope. Αυτή η μεταβλητή περιέχει μια λίστα ζευγών κλειδιών-τιμών.

Στο παράδειγμά μας, τα ζεύγη τιμών κλειδιών είναι

  1. Όνομα – Αυτό υποδηλώνει το όνομα ενός θέματος όπως Ελεγκτές, Μοντέλα και Οδηγίες.
  2. Description – Αυτό δίνει μια περιγραφή κάθε θέματος

Η μεταβλητή του tutorial έχει επίσης πρόσβαση στο αρχείο "Table.html".

<!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>

Όταν εκτελέσετε τον παραπάνω κώδικα, θα λάβετε την ακόλουθη έξοδο.

Παραγωγή:

Συμπεριλάβετε αρχείο HTML στο AngularJS

Σύνοψη

  • Από προεπιλογή, γνωρίζουμε ότι η HTML δεν παρέχει έναν άμεσο τρόπο συμπερίληψης περιεχομένου HTML από άλλα αρχεία όπως άλλα γλώσσες προγραμματισμού.
  • Javascript μαζί με το JQuery είναι η καλύτερη επιλογή για την ενσωμάτωση περιεχομένου HTML από άλλα αρχεία.
  • Ένας άλλος τρόπος συμπερίληψης HTML περιεχόμενο από άλλα αρχεία είναι να χρησιμοποιήσετε το οδηγία και η λέξη-κλειδί εικονικής παραμέτρου. Η λέξη-κλειδί εικονικής παραμέτρου χρησιμοποιείται για να υποδηλώσει το αρχείο που πρέπει να ενσωματωθεί. Αυτό είναι γνωστό ως περιλαμβάνει περιλαμβάνει από την πλευρά του διακομιστή.
  • Το Angular παρέχει επίσης τη δυνατότητα συμπερίληψης αρχείων χρησιμοποιώντας την οδηγία ng-include. Αυτή η οδηγία μπορεί να χρησιμοποιηθεί για την εισαγωγή κώδικα από εξωτερικά αρχεία απευθείας στο κύριο αρχείο HTML.