Ποια είναι η διαφορά μεταξύ ng-include και ng-view;

Η ng-include εισάγει ένα τμήμα που ονομάζετε εσείς, οπουδήποτε στη σελίδα. Η ng-view αποδίδει όποιο πρότυπο αντιστοιχίζει ο δρομολογητής στο τρέχον URL, και μόνο μία προβολή ng ανήκει σε μια διάταξη.

AngularJS ng-include: Συμπερίληψη αρχείων HTML με παράδειγμα

⚡ Έξυπνη Σύνοψη

Η συνάρτηση ng-include στο AngularJS ανακτά, μεταγλωττίζει και εισάγει ένα εξωτερικό τμήμα HTML στην κύρια σελίδα, επομένως η κοινόχρηστη σήμανση, όπως ένας πίνακας, μια κεφαλίδα ή ένα υποσέλιδο, βρίσκεται σε ένα επαναχρησιμοποιήσιμο μερικό αρχείο.

🔘 Διευθυντικός ρόλος: Η συνάρτηση ng-include ανακτά ένα εξωτερικό τμήμα και το εισάγει ως θυγατρικούς κόμβους του στοιχείου υποδοχής του.
☑️ Διαδρομή με αναφορά: Η τιμή src είναι μια έκφραση, επομένως ένα όνομα αρχείου κυριολεκτικής γραμμής χρειάζεται μονά εισαγωγικά μέσα στο χαρακτηριστικό.
✅ Λειτουργικό παράδειγμα: Το Table.html αποδίδεται μέσω της εντολής ng-repeat μόλις το Main.html το εισάγει στο div του ελεγκτή.
🧪 Νέο θυγατρικό πεδίο εφαρμογής: Κάθε συμπερίληψη δημιουργεί ένα θυγατρικό πεδίο εφαρμογής, επομένως οι πρωτόγονες συνδέσεις απαιτούν σημειογραφία κουκκίδων.
️ Τα κενά περιλαμβάνουν: Οι κανόνες ίδιας προέλευσης, το $sce και η πρόσβαση σε αρχεία εξηγούν τα περισσότερα κενά αποτελέσματα.
📊 Σημείωση έκδοσης: Η υποστήριξη του AngularJS έληξε τον Ιανουάριο του 2022. Το σύγχρονο Angular συνθέτει στοιχεία αντ' αυτού.

Περισσότερα

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!--#include virtual="navigation.cgi" -->

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

Σημείωση:

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

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

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

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

Σημείωση έκδοσης: Το AngularJS 1.x αποχώρησε από τη Μακροπρόθεσμη Υποστήριξη στις 31 Δεκεμβρίου 2021 και η ομάδα του πλαισίου δηλώνει ότι Η υποστήριξη του AngularJS έληξε επίσημα τον Ιανουάριο του 2022, επομένως δεν ακολουθούν εκδόσεις ή ενημερώσεις ασφαλείας. Κάθε βήμα και μπλοκ κώδικα παρακάτω παραμένει ακριβώς όπως δημοσιεύτηκε, ως ιστορική αναφορά. Το Modern Angular δεν παρέχει άμεση αντικατάσταση: η σήμανση αποτελείται από στοιχεία και ένα τμήμα που επιλέγεται κατά τον χρόνο εκτέλεσης αποδίδεται με ng-container και ngComponentOutlet.

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

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

Το παρακάτω απόσπασμα κώδικα υποθέτει ότι υπάρχει μια μεταβλητή εμβέλειας που ονομάζεται "tutorial". Στη συνέχεια, χρησιμοποιεί το ng-επανάληψη οδηγία, η οποία εξετάζει κάθε θέμα στη μεταβλητή «tutorial» και εμφανίζει τις τιμές για τα «Όνομα» και «Descriptζεύγος κλειδιού-τιμής ion'.

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

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

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

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

Όνομα – Αυτό υποδηλώνει το όνομα ενός θέματος όπως Ελεγκτές, Μοντέλα και Οδηγίες.
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>

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

Παραγωγή:

Η παρακάτω καταγραφή δείχνει το αποτέλεσμα που αποδόθηκε: η καρτέλα του προγράμματος περιήγησης φέρει τον τίτλο Εγγραφή συμβάντος, η επικεφαλίδα βρίσκεται πάνω από τον πίνακα που έχει εισαχθεί και οι τρεις γραμμές προέρχονται από τον πίνακα οδηγιών στο Main.html μέσω του μερικού. Το σχολιασμένο στιγμιότυπο οθόνης γράφει την επικεφαλίδα Gur99 ενώ ο κώδικας γράφεται. Guru99.

Χαρακτηριστικά ng-include: src, onload και autoscroll

Πέρα από το όνομα αρχείου, η οδηγία δέχεται δύο προαιρετικά χαρακτηριστικά και μπορεί να γραφτεί με τρεις τρόπους: ως χαρακτηριστικό σε οποιοδήποτε στοιχείο, ως <ng-include> στοιχείο ή ως κλάση CSS. Η παρακάτω αναφορά ακολουθεί την επίσημη Τεκμηρίωση ngInclude.

Χαρακτηριστικό	Απαιτείται	Τι κάνει
src ή ng-include	Ναι	Έκφραση που αξιολογείται σύμφωνα με το πρότυπο URL
σε φορτίο	Οχι	Η έκφραση αξιολογείται κάθε φορά που ολοκληρώνεται η φόρτωση ενός νέου μερικού στοιχείου
αυτόματη κύλιση	Οχι	Καλεί το $anchorScroll μετά τη φόρτωση του περιεχομένου. Η παράλειψη του χαρακτηριστικού απενεργοποιεί την κύλιση.

<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div>
<ng-include src="templateUrl"></ng-include>

Το πιο συνηθισμένο λάθος προκύπτει από την πρώτη σειρά: src παίρνει ένα έκφραση, όχι μια απλή συμβολοσειρά. Επομένως, μια κυριολεκτική διαδρομή χρειάζεται τα δικά της εισαγωγικά μέσα στο χαρακτηριστικό, γι' αυτό και το παραπάνω παράδειγμα έχει την εξής μορφή: ng-include="'Table.html'". Γραφή ng-include="Table.html" κάνει το AngularJS να αξιολογεί Table ως ιδιότητα εμβέλειας, μην βρείτε τίποτα και αφήστε το στοιχείο κενό.

Γιατί το ng-include δημιουργεί ένα νέο θυγατρικό πεδίο εφαρμογής

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

Η ανάγνωση λειτουργεί όπως αναμένεται. Το παραπάνω μέρος διαβάζεται tutorial απευθείας από τον γονέα, γι' αυτό και ng-repeat βρίσκει τον πίνακα. Η γραφή είναι το σημείο όπου διακόπτεται: όταν ένα μερικό στοιχείο αναθέτει σε ένα πρωτεύον στοιχείο, όπως με το ng-model="topic", Το AngularJS δημιουργεί topic στο θυγατρικό πεδίο εφαρμογής και στο γονικό αντίγραφο δεν αλλάζει ποτέ.

Δύο συνήθειες αποφεύγουν την παγίδα:

Δέσμευση μέσω ενός αντικειμένου, όπως στο ng-model="data.topic", έτσι ώστε ο γονέας και το παιδί να φτάνουν στην ίδια αναφορά.
Διατηρήστε την κατάσταση σε έναν ελεγκτή ή μια υπηρεσία και εκθέστε συναρτήσεις αντί για γυμνά πρωτόγονα.

Το include εκπέμπει επίσης $includeContentRequested, $includeContentLoaded και $includeContentError, ώστε ένας γονέας να μπορεί να αντιδράσει μέσω $scope.$on χωρίς να εμβαθύνει καθόλου στο παιδικό πεδίο.

Πώς να διορθώσετε ένα κενό ή αποτυχημένο αρχείο ng-include

Ένα include που δεν αποδίδει τίποτα συνήθως αποτυγχάνει για έναν από τους λίγους λόγους. Επεξεργαστείτε τους με αυτήν τη σειρά.

Ελέγξτε τα αποσπάσματα. Ένα όνομα αρχείου κυριολεκτικής σημασίας χρειάζεται μονά εισαγωγικά μέσα στην τιμή του χαρακτηριστικού. Χωρίς αυτά, η έκφραση γίνεται απροσδιόριστη και δεν αποστέλλεται ποτέ κανένα αίτημα.
Προβολή της σελίδας μέσω HTTP. Η οδηγία εκδίδει ένα XHR για το μερικό, επομένως το άνοιγμα του Main.html απευθείας από τον δίσκο μέσω μιας διεύθυνσης αρχείου αποτυγχάνει στα περισσότερα προγράμματα περιήγησης. Οποιοσδήποτε τοπικός διακομιστής ιστού το διαγράφει.
Επιβεβαιώστε ότι η διαδρομή επιλύεται. Παρακολουθήστε τον πίνακα δικτύου για το αίτημα. Ένα 404 σημαίνει ότι η διαδρομή είναι σχετική με τη σελίδα που φιλοξενεί τη συμπερίληψη, όχι με το μερικό που την αναφέρει.
Σεβαστείτε τον κανόνα της ίδιας προέλευσης. Από προεπιλογή, το πρότυπο URL πρέπει να ταιριάζει με τον τομέα και το πρωτόκολλο του εγγράφου εφαρμογής, επειδή το AngularJS το διαβιβάζει $sce.getTrustedResourceUrlΈνα πρότυπο από αλλού χρειάζεται μια καταχώρηση στον αξιόπιστο πόρο URL λίστα ή ένα ρητό περιτύλιγμα trustAsResourceUrl και ο απομακρυσμένος διακομιστής πρέπει ακόμα να στείλει κεφαλίδες CORS.
Ακούστε την αποτυχία. Η συνάρτηση $includeContentError ενεργοποιείται κάθε φορά που η κατάσταση απόκρισης βρίσκεται εκτός των ορίων 200 έως 299, μετατρέποντας μια σιωπηλά κενή περιοχή σε ένα μήνυμα που αξίζει να καταγραφεί.

Μια ακόμη αιτία είναι εύκολο να παραβλεφθεί. Το AngularJS διατηρεί κάθε ανακτημένο μέρος στο $templateCache, επομένως ένα επεξεργασμένο αρχείο μπορεί να συνεχίσει να εμφανίζει παλιά σήμανση μέχρι να αφαιρεθεί η καταχώρηση cache ή να φορτωθεί ξανά η σελίδα από την πηγή. Όταν ένα τμήμα χρειάζεται δική του συμπεριφορά αντί για μόνο σήμανση, ένα προσαρμοσμένη οδηγία με το δικό του πρότυπο και απομονωμένο πεδίο εφαρμογής είναι το καλύτερο εργαλείο.

Συχνές Ερωτήσεις

Η συνάρτηση ng-include εισάγει ένα τμήμα που ονομάζετε τον εαυτό σας, οπουδήποτε στη σελίδα. Η συνάρτηση ng-view αποδίδει όποιο πρότυπο router χάρτες προς το τρέχον URL, και μόνο μία προβολή ng ανήκει σε μια διάταξη.

Όχι. Ένα μερικό περιέχει μόνο ένα θραύσμα. Αναδίπλωσηping Σε ετικέτες html, head ή body αφήνει πίσω του αδέσποτα στοιχεία, επειδή η σήμανση εισάγεται ως θυγατρικοί κόμβοι του στοιχείου host αντί να αναλύεται ως έγγραφο.

Όχι. Το τμήμα μεταγλωττίζεται και εισάγεται ως κόμβοι DOM, επομένως τα ενσωματωμένα στοιχεία σεναρίου δεν εκτελούνται ποτέ. Φορτώστε κοινόχρηστα σενάρια από τη σελίδα υποδοχής ή μετακινήστε τη συμπεριφορά σε έναν ελεγκτή ή μια οδηγία.

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

Ναι. Επειδή η τιμή είναι μια έκφραση, η τοποθέτηση της σε μια ιδιότητα εμβέλειας (scope) αλλάζει το τμήμα κάθε φορά που αλλάζει αυτή η ιδιότητα. Προστατέψτε το στοιχείο με την εντολή ng-if so, δεν φορτώνει τίποτα μέχρι η ιδιότητα να κρατήσει μια πραγματική διαδρομή.

Δεν υπάρχει ισοδύναμο. Η επαναχρησιμοποιήσιμη σήμανση γίνεται στοιχείο και ένα τμήμα που επιλέγεται κατά τον χρόνο εκτέλεσης αποδίδεται μέσω ngComponentOutlet ή ngTemplateOutlet μέσα σε ένα ng-container.

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

GitHub Copilot Η λειτουργία agent μετατρέπει ένα μερικό στοιχείο σε αυτόνομο με πληκτρολογημένες εισόδους και ξαναγράφει το πρότυπο κεντρικού υπολογιστή, ωστόσο οι δημιουργημένες συνδέσεις και οι δοκιμές εξακολουθούν να χρειάζονται ανθρώπινη αναθεώρηση.