Δρομολόγηση AngularJS με παράμετροι: Παράδειγμα εφαρμογής μίας σελίδας

Πριν ξεκινήσουμε με τη δρομολόγηση, ας ρίξουμε μια γρήγορη επισκόπηση για Εφαρμογές μίας σελίδας.

Τι είναι οι Εφαρμογές Μίας Σελίδας;

Οι εφαρμογές μιας σελίδας ή (SPA) είναι εφαρμογές ιστού που φορτώνουν μία σελίδα HTML και ενημερώνουν δυναμικά τη σελίδα με βάση την αλληλεπίδραση του χρήστη με την εφαρμογή ιστού.

Τι είναι η δρομολόγηση στο AngularJS;

Στο AngularJS, η δρομολόγηση είναι αυτό που σας επιτρέπει να δημιουργήσετε εφαρμογές μίας σελίδας.

• Οι διαδρομές AngularJS σάς επιτρέπουν να δημιουργείτε διαφορετικές διευθύνσεις URL για διαφορετικό περιεχόμενο στην εφαρμογή σας.
• Οι διαδρομές AngularJS επιτρέπουν σε κάποιον να εμφανίζει πολλαπλά περιεχόμενα ανάλογα με το ποια διαδρομή επιλέγεται.
• Μια διαδρομή καθορίζεται στη διεύθυνση URL μετά το σύμβολο #.

Ας πάρουμε ένα παράδειγμα ιστότοπου που φιλοξενείται μέσω της διεύθυνσης URL http://example.com/index.html .

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

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

Το σύμβολο # θα χρησιμοποιηθεί μαζί με τις διαφορετικές διαδρομές (ShowEvent, DisplayEvent και DeleteEvent).

• Επομένως, εάν ο χρήστης ήθελε να δει όλα τα συμβάντα, θα κατευθυνόταν στον σύνδεσμο ( http://example.com/index.html#ShowEvent ), αλλιώς
• Εάν ήθελαν απλώς να δουν ένα συγκεκριμένο συμβάν, θα κατευθυνόταν ξανά στον σύνδεσμο ( http://example.com/index.html#DisplayEvent ) ή
• Εάν ήθελαν να διαγράψουν ένα συμβάν, θα κατευθυνόταν στον σύνδεσμο http://example.com/index.html#DeleteEvent .

Σημειώστε ότι το κύριο URL παραμένει το ίδιο.

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

• Προσθήκη γωνιακής διαδρομής ($ routeProvider)
• Δημιουργία προεπιλεγμένης διαδρομής
• Πρόσβαση σε παραμέτρους από τη διαδρομή
• Χρήση της υπηρεσίας διαδρομής Angular $
• Ενεργοποίηση δρομολόγησης HTML5

Προσθήκη γωνιακής διαδρομής ($ routeProvider)

Έτσι, όπως συζητήσαμε νωρίτερα, οι διαδρομές στο AngularJS χρησιμοποιούνται για τη δρομολόγηση του χρήστη σε διαφορετική προβολή της εφαρμογής σας. Και αυτή η δρομολόγηση γίνεται στην ίδια σελίδα HTML, έτσι ώστε ο χρήστης να έχει την εμπειρία ότι δεν έχει αφήσει τη σελίδα.

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

1. Αναφορά στο angular-route.js. Αυτό είναι ένα αρχείο JavaScript που αναπτύχθηκε από την Google και έχει όλες τις λειτουργίες της δρομολόγησης. Αυτό πρέπει να τοποθετηθεί στην εφαρμογή σας, ώστε να μπορεί να αναφέρεται σε όλες τις κύριες ενότητες που απαιτούνται για τη δρομολόγηση.

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

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

var module = angular.module("sampleApp", ['ngRoute']);

3. Το επόμενο βήμα θα ήταν να διαμορφώσετε το $ routeProvider. Αυτό απαιτείται για την παροχή των διαφόρων διαδρομών στην εφαρμογή σας.

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

when(path, route)

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

 Διαδρομή 1 

5. Τέλος θα ήταν η συμπερίληψη της οδηγίας ng-view, η οποία κανονικά θα ήταν σε ετικέτα div. Αυτό θα χρησιμοποιηθεί για την έγχυση του περιεχομένου της προβολής όταν επιλέγεται η σχετική διαδρομή.

Τώρα, ας δούμε ένα παράδειγμα δρομολόγησης χρησιμοποιώντας τα παραπάνω βήματα.

Στο παράδειγμά μας,

Θα παρουσιάσουμε 2 συνδέσμους στον χρήστη,

• Το ένα είναι να εμφανίσετε τα θέματα για ένα μάθημα Angular JS και το άλλο για το μάθημα Node.js.
• Όταν ο χρήστης κάνει κλικ σε έναν από τους δύο συνδέσμους, θα εμφανιστούν τα θέματα για το μάθημα

Βήμα 1) Συμπεριλάβετε το αρχείο γωνιακής διαδρομής ως αναφορά σεναρίου.

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

Βήμα 2) Προσθέστε ετικέτες href που θα αντιπροσωπεύουν συνδέσμους για τα "Γωνιακά θέματα JS" και "Θέματα κόμβου JS."

Βήμα 3) Προσθέστε μια ετικέτα div με την οδηγία ng-view που θα αντιπροσωπεύει την προβολή.

Αυτό θα επιτρέψει την ένεση της αντίστοιχης προβολής κάθε φορά που ο χρήστης κάνει κλικ είτε στα "Γωνιακά θέματα JS" είτε στο "Θέματα κόμβου JS".

Βήμα 4) Στην ετικέτα του σεναρίου σας για AngularJS, προσθέστε την υπηρεσία "ngRoute module" και την υπηρεσία "$ routeProvider".

Επεξήγηση κώδικα:

1. Το πρώτο βήμα είναι να διασφαλιστεί η συμπερίληψη του "ngRoute module." Με αυτό στη θέση του, το Angular θα χειρίζεται αυτόματα τη δρομολόγηση στην εφαρμογή σας. Η μονάδα ngRoute που έχει αναπτυχθεί από την Google διαθέτει όλες τις λειτουργίες που επιτρέπουν τη δρομολόγηση. Με την προσθήκη αυτής της μονάδας, η εφαρμογή θα κατανοήσει αυτόματα όλες τις εντολές δρομολόγησης.
2. Το $ routeprovider είναι μια υπηρεσία που χρησιμοποιεί γωνιακή για να ακούει στο παρασκήνιο τις διαδρομές που καλούνται. Έτσι, όταν ο χρήστης κάνει κλικ σε έναν σύνδεσμο, ο δρομολογητής θα το εντοπίσει και στη συνέχεια θα αποφασίσει ποια διαδρομή θα ακολουθήσει.
3. Δημιουργήστε μια διαδρομή για τον γωνιακό σύνδεσμο - Αυτό το μπλοκ σημαίνει ότι όταν κάνετε κλικ στον γωνιακό σύνδεσμο, εισάγετε το αρχείο Angular.html και χρησιμοποιήστε επίσης τον ελεγκτή «AngularController» για να επεξεργαστείτε οποιαδήποτε επιχειρησιακή λογική.
4. Δημιουργία μίας διαδρομής για τον σύνδεσμο Node - Αυτό το μπλοκ σημαίνει ότι όταν κάνετε κλικ στον σύνδεσμο Node, εισάγετε το αρχείο Node.html και χρησιμοποιήστε επίσης τον Ελεγκτή «NodeController» για να επεξεργαστείτε οποιαδήποτε επιχειρησιακή λογική.

Βήμα 5) Επόμενο είναι να προσθέσετε ελεγκτές για να επεξεργαστείτε την επιχειρησιακή λογική τόσο για το AngularController όσο και για το NodeController.

Σε κάθε ελεγκτή, δημιουργούμε μια σειρά ζευγών κλειδιών-τιμών για να αποθηκεύσουμε τα ονόματα και τις περιγραφές των θεμάτων για κάθε μάθημα. Η μεταβλητή πίνακα «φροντιστήριο» προστίθεται στο αντικείμενο πεδίου για κάθε ελεγκτή.

Guru99 Global Event


Angular JS Topics
Node JS Topics

Βήμα 6) Δημιουργήστε σελίδες που ονομάζονται Angular.html και Node.html. Για κάθε σελίδα ακολουθούμε τα παρακάτω βήματα.

Αυτά τα βήματα θα διασφαλίσουν ότι όλα τα ζεύγη τιμών-κλειδιών του πίνακα εμφανίζονται σε κάθε σελίδα.

1. Χρησιμοποιώντας την οδηγία ng-repeat για να περάσετε από κάθε ζεύγος κλειδιού-τιμής που ορίζεται στη μεταβλητή του οδηγού.
2. Εμφάνιση του ονόματος και της περιγραφής κάθε ζεύγους κλειδιού-τιμής.

• Angular.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Node.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

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

Παραγωγή:

Εάν κάνετε κλικ στο σύνδεσμο AngularJS Topics, θα εμφανιστεί η παρακάτω έξοδος.

Η έξοδος δείχνει ξεκάθαρα ότι,

• Όταν κάνετε κλικ στο σύνδεσμο "Γωνιακά θέματα JS", η διαδρομήProvider που δηλώσαμε στον κώδικα μας αποφασίζει ότι ο κώδικας Angular.html πρέπει να εισαχθεί.
• Αυτός ο κωδικός θα εισαχθεί στην ετικέτα "div", η οποία περιέχει την οδηγία ng-view. Επίσης, το περιεχόμενο για την περιγραφή του μαθήματος προέρχεται από την "μεταβλητή tutorial" που αποτελούσε μέρος του αντικειμένου πεδίου που ορίστηκε στο AngularController.
• Όταν κάποιος κάνει κλικ στα Θέματα Node.js, θα πραγματοποιηθεί το ίδιο αποτέλεσμα και θα εμφανιστεί η προβολή για τα θέματα Node.js.
• Επίσης, παρατηρήστε ότι το URL της σελίδας παραμένει το ίδιο, αλλάζει μόνο η διαδρομή μετά την ετικέτα #. Και αυτή είναι η έννοια των εφαρμογών μιας σελίδας. Η ετικέτα #hash στη διεύθυνση URL είναι ένα διαχωριστικό που διαχωρίζει τη διαδρομή (η οποία στην περίπτωσή μας είναι «Γωνιακή» όπως φαίνεται στην παραπάνω εικόνα) και την κύρια σελίδα HTML (Sample.html)

Δημιουργία προεπιλεγμένης διαδρομής

Η δρομολόγηση στο AngularJS παρέχει επίσης τη δυνατότητα να έχει μια προεπιλεγμένη διαδρομή. Αυτή είναι η διαδρομή που επιλέγεται εάν δεν υπάρχει αντιστοιχία για την υπάρχουσα διαδρομή.

Η προεπιλεγμένη διαδρομή δημιουργείται προσθέτοντας την ακόλουθη συνθήκη κατά τον καθορισμό της υπηρεσίας $ routeProvider.

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

otherwise ({redirectTo: 'page'});

Ας χρησιμοποιήσουμε το ίδιο παράδειγμα παραπάνω και προσθέστε μια προεπιλεγμένη διαδρομή στην υπηρεσία $ routeProvider.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Επεξήγηση κώδικα:

1. Εδώ χρησιμοποιούμε τον ίδιο κωδικό όπως παραπάνω με τη μόνη διαφορά είναι ότι χρησιμοποιούμε την άλλη δήλωση και την επιλογή "redirectTo" για να καθορίσουμε ποια προβολή πρέπει να φορτωθεί εάν δεν έχει καθοριστεί διαδρομή. Στην περίπτωσή μας θέλουμε να εμφανίζεται η προβολή «/ Γωνιακή».

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

Παραγωγή:

Από την έξοδο,

• Μπορείτε να δείτε καθαρά ότι η προεπιλεγμένη προβολή που εμφανίζεται είναι η γωνιακή προβολή JS.
• Αυτό συμβαίνει επειδή όταν φορτώνεται η σελίδα πηγαίνει στην επιλογή «διαφορετικά» στη συνάρτηση $ routeProvider και φορτώνει την προβολή «/ Γωνιακή».

Πρόσβαση σε παραμέτρους από τη διαδρομή

Το Angular παρέχει επίσης τη δυνατότητα παροχής παραμέτρων κατά τη δρομολόγηση. Οι παράμετροι προστίθενται στο τέλος της διαδρομής στη διεύθυνση URL, για παράδειγμα, http: //guru99/index.html#/Angular/1 . Σε αυτό το παράδειγμα

1. , http: //guru99/index.html είναι η κύρια διεύθυνση URL της εφαρμογής μας
2. Το σύμβολο # είναι το διαχωριστικό μεταξύ της κύριας διεύθυνσης URL της εφαρμογής και της διαδρομής.
3. Η γωνιακή είναι η διαδρομή μας
4. Και τέλος το «1» είναι η παράμετρος που προστίθεται στη διαδρομή μας

Η σύνταξη του τρόπου εμφάνισης των παραμέτρων στη διεύθυνση URL εμφανίζεται παρακάτω:

HTMLPage # / διαδρομή / παράμετρος

Εδώ θα παρατηρήσετε ότι η παράμετρος περνά μετά τη διαδρομή στη διεύθυνση URL.

Έτσι, στο παράδειγμά μας, παραπάνω για τα θέματα Angular JS, μπορούμε να περάσουμε μια παράμετρο όπως φαίνεται παρακάτω

Sample.html # / Γωνιακό / 1

Sample.html # / Γωνιακό / 2

Sample.html # / Γωνιακό / 3

Εδώ οι παράμετροι των 1, 2 και 3 μπορούν πραγματικά να αντιπροσωπεύουν το θέμα.

Ας δούμε λεπτομερώς πώς μπορούμε να το εφαρμόσουμε αυτό.

Βήμα 1) Προσθέστε τον ακόλουθο κώδικα στην προβολή σας

1. Προσθέστε έναν πίνακα για να εμφανίσετε στον χρήστη όλα τα θέματα για το πρόγραμμα Angular JS

2. Προσθέστε μια σειρά πίνακα για εμφάνιση του θέματος "Ελεγκτές". Για αυτήν τη σειρά, αλλάξτε την ετικέτα href σε "Γωνιακή / 1" που σημαίνει ότι όταν ο χρήστης κάνει κλικ σε αυτό το θέμα, η παράμετρος 1 θα περάσει στη διεύθυνση URL μαζί με τη διαδρομή.

3. Προσθέστε μια σειρά πίνακα για εμφάνιση του θέματος "Μοντέλα". Για αυτήν τη σειρά, αλλάξτε την ετικέτα href σε "Angular / 2" που σημαίνει ότι όταν ο χρήστης κάνει κλικ σε αυτό το θέμα, η παράμετρος 2 θα περάσει στη διεύθυνση URL μαζί με τη διαδρομή.

4. Προσθέστε μια σειρά πίνακα για να εμφανίσετε το θέμα "Οδηγίες". Για αυτήν τη σειρά, αλλάξτε την ετικέτα href σε "Γωνιακή / 3" που σημαίνει ότι όταν ο χρήστης κάνει κλικ σε αυτό το θέμα, η παράμετρος 3 θα περάσει στη διεύθυνση URL μαζί με τη διαδρομή.

Βήμα 2) Στη συνάρτηση υπηρεσίας routeprovider, προσθέστε το: topicId για να υποδηλώσετε ότι οποιαδήποτε παράμετρος πέρασε στη διεύθυνση URL μετά τη διαδρομή πρέπει να αντιστοιχιστεί στη μεταβλητή topicId.

Βήμα 3) Προσθέστε τον απαραίτητο κωδικό στον ελεγκτή

1. Φροντίστε να προσθέσετε πρώτα το "$ routeParams" ως παράμετρο κατά τον καθορισμό της λειτουργίας του ελεγκτή. Αυτή η παράμετρος θα έχει πρόσβαση σε όλες τις παραμέτρους διαδρομής που έχουν περάσει στη διεύθυνση URL.
2. Η παράμετρος "routeParams" έχει μια αναφορά στο αντικείμενο topicId, το οποίο περνά ως παράμετρος διαδρομής. Εδώ επισυνάπτουμε τη μεταβλητή «$ routeParams.topicId» στο αντικείμενο πεδίου μας ως τη μεταβλητή «$ lingkup.tutotialid». Αυτό γίνεται έτσι ώστε να μπορεί να αναφέρεται στην άποψή μας μέσω της μεταβλητής tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Βήμα 4) Προσθέστε την έκφραση για να εμφανιστεί η μεταβλητή tutorialid στη σελίδα Angular.html.

Anguler


{{tutorialid}}

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

Παραγωγή:

Στην οθόνη εξόδου,

• Εάν κάνετε κλικ στο σύνδεσμο Θέματα λεπτομερειών για το πρώτο θέμα, ο αριθμός 1 προσαρτάται στη διεύθυνση URL.
• Αυτός ο αριθμός θα ληφθεί στη συνέχεια ως επιχείρημα "routeparam" από την υπηρεσία δρομολογητή Angular.JS και μπορεί στη συνέχεια να έχει πρόσβαση από τον ελεγκτή μας.

Χρήση της υπηρεσίας διαδρομής Angular $

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

myApp.controller('MyController',function($scope,$route)

1. Το myApp είναι η γωνιακή ενότητα JS που ορίζεται για τις εφαρμογές σας
2. Το MyController είναι το όνομα του ελεγκτή που ορίζεται για την εφαρμογή σας
3. Ακριβώς όπως η μεταβλητή εύρους $ διατίθεται για την εφαρμογή σας, η οποία χρησιμοποιείται για τη μετάδοση πληροφοριών από τον ελεγκτή στην προβολή. Η παράμετρος $ route χρησιμοποιείται για την πρόσβαση στις ιδιότητες της διαδρομής.

Ας ρίξουμε μια ματιά στο πώς μπορούμε να χρησιμοποιήσουμε την υπηρεσία δρομολόγησης $.

Σε αυτό το παράδειγμα,

• Θα δημιουργήσουμε μια απλή προσαρμοσμένη μεταβλητή που ονομάζεται "mytext", η οποία θα περιέχει τη συμβολοσειρά "Αυτό είναι γωνιακό."
• Θα επισυνάψουμε αυτήν τη μεταβλητή στη διαδρομή μας. Και αργότερα θα έχουμε πρόσβαση σε αυτήν τη συμβολοσειρά από τον ελεγκτή μας χρησιμοποιώντας την υπηρεσία $ route και στη συνέχεια θα χρησιμοποιήσουμε το αντικείμενο εύρους για να το εμφανίσουμε στην άποψή μας.

Ας δούμε λοιπόν τα βήματα που πρέπει να κάνουμε για να το επιτύχουμε.

Βήμα 1) Προσθέστε ένα προσαρμοσμένο ζεύγος κλειδιού-τιμής στη διαδρομή. Εδώ, προσθέτουμε ένα κλειδί που ονομάζεται «mytext» και του αποδίδουμε μια τιμή «Αυτό είναι γωνιακό».

Βήμα 2) Προσθέστε τον σχετικό κωδικό στον ελεγκτή

1. Προσθέστε την παράμετρο $ route στη λειτουργία του ελεγκτή. Η παράμετρος $ route είναι μια βασική παράμετρος που ορίζεται σε γωνιακή, που επιτρέπει σε κάποιον να έχει πρόσβαση στις ιδιότητες της διαδρομής.
2. Η μεταβλητή "mytext" που ορίστηκε στη διαδρομή μπορεί να προσεγγιστεί μέσω της αναφοράς $ route.current. Στη συνέχεια, αντιστοιχεί στη μεταβλητή «κειμένου» του αντικειμένου πεδίου. Στη συνέχεια, η μεταβλητή κειμένου μπορεί να προσεγγιστεί από την προβολή ανάλογα.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Βήμα 3) Προσθέστε μια αναφορά στη μεταβλητή κειμένου από το αντικείμενο πεδίου ως έκφραση. Αυτό θα προστεθεί στη σελίδα μας Angular.html όπως φαίνεται παρακάτω.

Αυτό θα προκαλέσει την εισαγωγή του κειμένου "Αυτό είναι γωνιακό" στην προβολή. Η έκφραση {{tutorialid}} είναι η ίδια με αυτή του προηγούμενου θέματος και θα εμφανιστεί ο αριθμός "1".

Anguler


{{text}}

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

Παραγωγή:

Από την έξοδο,

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

Ενεργοποίηση δρομολόγησης HTML5

Η δρομολόγηση HTML5 χρησιμοποιείται βασικά για τη δημιουργία καθαρού URL. Αυτό σημαίνει την κατάργηση του hashtag από τη διεύθυνση URL. Έτσι, οι διευθύνσεις URL δρομολόγησης, όταν χρησιμοποιείται η δρομολόγηση HTML5, θα εμφανίζονται όπως φαίνεται παρακάτω

Δείγμα.html / Γωνιακό / 1

Sample.html / Γωνιακό / 2

Δείγμα.html / Γωνιακό / 3

Αυτή η έννοια είναι συνήθως γνωστή ως παρουσίαση όμορφου URL στον χρήστη.

Υπάρχουν 2 βασικά βήματα που πρέπει να εκτελεστούν για δρομολόγηση HTML5.

1. Διαμόρφωση $ locationProvider
2. Ορισμός της βάσης μας για σχετικούς συνδέσμους

Ας δούμε τις λεπτομέρειες για το πώς να πραγματοποιήσουμε τα παραπάνω βήματα στο παραπάνω παράδειγμά μας

Βήμα 1) Προσθέστε τον σχετικό κώδικα στη γωνιακή μονάδα

1. Προσθέστε μια σταθερά baseURL στην εφαρμογή - Αυτό απαιτείται για τη δρομολόγηση HTML5, έτσι ώστε η εφαρμογή να γνωρίζει ποια είναι η θέση βάσης της εφαρμογής.
2. Προσθέστε τις υπηρεσίες $ locationProvider. Αυτή η υπηρεσία σας επιτρέπει να ορίσετε το html5Mode.
3. Ορίστε την html5Mode της υπηρεσίας $ locationProvider σε true.

Βήμα 2) Καταργήστε όλα τα #tags για τους συνδέσμους ('Angular / 1', 'Angular / 2', 'Angular / 3') για να δημιουργήσετε ένα ευανάγνωστο URL.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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

Παραγωγή:

Από την έξοδο,

• Μπορείτε να δείτε ότι η ετικέτα # δεν υπάρχει εκεί κατά την πρόσβαση στην εφαρμογή.

Περίληψη

• Η δρομολόγηση χρησιμοποιείται για την παρουσίαση διαφορετικών προβολών στον χρήστη στην ίδια ιστοσελίδα. Αυτή είναι βασικά η έννοια που χρησιμοποιείται σε εφαρμογές μιας σελίδας που εφαρμόζονται για όλες σχεδόν τις σύγχρονες εφαρμογές ιστού
• Μια προεπιλεγμένη διαδρομή μπορεί να ρυθμιστεί για γωνιακή.JS δρομολόγιο. Χρησιμοποιείται για τον προσδιορισμό της προεπιλεγμένης προβολής που θα εμφανίζεται στον χρήστη
• Οι παράμετροι μπορούν να περάσουν στη διαδρομή μέσω του URL ως παράμετροι διαδρομής. Στη συνέχεια, αυτές οι παράμετροι αποκτούν πρόσβαση χρησιμοποιώντας την παράμετρο $ routeParams στον ελεγκτή
• Η υπηρεσία δρομολόγησης $ μπορεί να χρησιμοποιηθεί για τον καθορισμό προσαρμοσμένων ζευγών κλειδιού-τιμής στη διαδρομή που μπορούν στη συνέχεια να έχουν πρόσβαση από την προβολή
• Η δρομολόγηση HTML5 χρησιμοποιείται για να αφαιρέσει το #tag από τη διεύθυνση URL δρομολόγησης σε γωνιακή μορφή για να σχηματίσει όμορφη διεύθυνση URL