Ng-include στο AngularJS: Τρόπος συμπερίληψης αρχείου HTML (Παράδειγμα)

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

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

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

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

Σε αυτό το σεμινάριο, θα μάθετε-

• Το Client Side περιλαμβάνει
• Περιλαμβάνει πλευρά διακομιστή
• Πώς να συμπεριλάβετε αρχείο HTML στο AngularJS

Το Client Side περιλαμβάνει

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

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

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

Αυτό είναι ένα συμπεριλαμβανόμενο αρχείο

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

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

1. Στην κύρια ετικέτα, υπάρχει μια ετικέτα div που έχει ένα αναγνωριστικό του Περιεχομένου. Αυτό είναι το μέρος όπου θα εισαχθεί ο κωδικός από το εξωτερικό αρχείο «Sub.html».
2. Υπάρχει μια αναφορά σε ένα σενάριο jquery. Το JQuery είναι μια γλώσσα δέσμης ενεργειών που έχει δημιουργηθεί πάνω από το Javascript που κάνει τον χειρισμό DOM ακόμα πιο εύκολο.
3. Στη συνάρτηση Javascript, υπάρχει μια δήλωση '$ ("# Content"). Load ("Sub.html");' που προκαλεί την έγχυση του κώδικα στο αρχείο Sub.html στην ετικέτα div που έχει το αναγνωριστικό του Περιεχομένου.

   <κεφάλι><άτομο>
    

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

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

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

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

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

• Η παραπάνω οδηγία επιτρέπει στο περιεχόμενο ενός εγγράφου να συμπεριληφθεί σε άλλο.
• Η παραπάνω εντολή "εικονικός" χρησιμοποιείται για τον καθορισμό του στόχου σε σχέση με τη ρίζα τομέα της εφαρμογής.
• Επίσης, στην εικονική παράμετρο, υπάρχει επίσης η παράμετρος αρχείου που μπορεί να χρησιμοποιηθεί. Οι παράμετροι "αρχείο" χρησιμοποιούνται όταν κάποιος πρέπει να καθορίσει τη διαδρομή σε σχέση με τον κατάλογο του τρέχοντος αρχείου.

Σημείωση:

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

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

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

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

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

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

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

<Πίνακας>
 {{Topic.Name}}  {{Topic.Country}} 

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

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

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

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

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

<κεφάλι>

Παγκόσμιο συμβάν Guru99
 

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

Έξοδος :

Περίληψη:

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