Παράδειγμα δρομολόγησης AngularJS με παραμέτρους

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

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

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

Τι είναι το Routing στο 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 παραμένει η ίδια.

Προσθήκη διαδρομής AngularJS χρησιμοποιώντας $routeProvider

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

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

Αναφορά στο angular-route.js. Αυτό είναι ένα JavaΓραφή αρχείο που αναπτύχθηκε από την Google που έχει όλες τις λειτουργίες της δρομολόγησης. Αυτό πρέπει να τοποθετηθεί στην εφαρμογή σας, ώστε να μπορεί να αναφέρεται σε όλες τις κύριες μονάδες που απαιτούνται για τη δρομολόγηση.
Το επόμενο σημαντικό βήμα είναι να προσθέσετε μια εξάρτηση στη λειτουργική μονάδα ngRoute μέσα από την εφαρμογή σας. Αυτή η εξάρτηση απαιτείται για να μπορεί να χρησιμοποιηθεί η λειτουργία δρομολόγησης εντός της εφαρμογής. Εάν δεν προστεθεί αυτή η εξάρτηση, τότε δεν θα είναι δυνατή η χρήση δρομολόγησης εντός της εφαρμογής angular.JS.

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

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

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

when(path, route)

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

<a href="#/route1">Route 1</a><br/>

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

Παράδειγμα δρομολόγησης AngularJS

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

Στο παράδειγμα δρομολόγησης AngularJS με παραμέτρους,

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

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

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

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

Βήμα 2) Προσθέστε ετικέτες href που θα αντιπροσωπεύουν συνδέσμους προς "Θέματα Angular JS" και "Node JS Topics".

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

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

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

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

Το πρώτο βήμα είναι να βεβαιωθείτε ότι έχετε συμπεριλάβει τη «μονάδα ngRoute». Με αυτό στη θέση του, το Angular θα χειριστεί αυτόματα τη δρομολόγηση στην εφαρμογή σας. Η λειτουργική μονάδα ngRoute που έχει αναπτυχθεί από την Google έχει όλες τις λειτουργίες που επιτρέπουν τη δρομολόγηση. Με την προσθήκη αυτής της ενότητας, η εφαρμογή θα κατανοήσει αυτόματα όλες τις εντολές δρομολόγησης.
Το $routeprovider είναι μια υπηρεσία που χρησιμοποιεί το angular για να ακούει στο παρασκήνιο τις διαδρομές που καλούνται. Έτσι, όταν ο χρήστης κάνει κλικ σε έναν σύνδεσμο, ο πάροχος δρομολογίων στο AngularJS θα το εντοπίσει και στη συνέχεια θα αποφασίσει ποια διαδρομή θα ακολουθήσει.
Δημιουργήστε μία διαδρομή για τη σύνδεση Angular – Αυτό το μπλοκ σημαίνει ότι όταν κάνετε κλικ στον σύνδεσμο Angular, εισάγετε το αρχείο Angular.html και χρησιμοποιήστε επίσης τον ελεγκτή 'AngularController' για να επεξεργαστείτε οποιαδήποτε επιχειρηματική λογική.
Δημιουργήστε μία διαδρομή για τη σύνδεση Node – Αυτό το μπλοκ σημαίνει ότι όταν κάνετε κλικ στον σύνδεσμο Node, εισάγετε το αρχείο Node.html και χρησιμοποιήστε επίσης τον ελεγκτή «NodeController» για να επεξεργαστείτε οποιαδήποτε επιχειρηματική λογική.

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

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

        function($routeProvider){
        $routeProvider.
        when('/Angular',{
            templateUrl : '/Angular.html',
            controller: 'AngularController'
        }).
        when("/Node", {
            templateUrl: '/Node.html',
            controller: 'NodeController'
        });
    }]);
    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"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

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

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

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

Angular.html

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Node.html

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

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

Παραγωγή:

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

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

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

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

Η δρομολόγηση στο 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'
});
}]);

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

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

Παραγωγή:

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

Μπορείτε να δείτε ξεκάθαρα ότι η προεπιλεγμένη προβολή που εμφανίζεται είναι η γωνιακή προβολή JS.
Αυτό οφείλεται στο γεγονός ότι όταν η σελίδα φορτώνει, πηγαίνει στην επιλογή 'αλλιώς' στη συνάρτηση $routeProvider και φορτώνει την προβολή '/Angular'.

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

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

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

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

HTMLPage#/route/parameter

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

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

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

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

Ας δούμε αναλυτικά πώς μπορούμε να εφαρμόσουμε τη γωνιακή διαδρομή με την παράμετρο:

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Παραγωγή:

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

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

Πώς να χρησιμοποιήσετε την υπηρεσία Angular $route

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

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

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

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

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

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

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

Βήμα 1) Προσθέστε ένα προσαρμοσμένο ζεύγος κλειδιού-τιμής στη διαδρομή. Εδώ, προσθέτουμε ένα κλειδί που ονομάζεται "mytext" και του εκχωρούμε την τιμή "This is angular".

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

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

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

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

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Παραγωγή:

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

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

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

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

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

Παραγωγή:

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

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

Περίληψη

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

Παράδειγμα δρομολόγησης AngularJS με παραμέτρους

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

Τι είναι το Routing στο AngularJS;

Προσθήκη διαδρομής AngularJS χρησιμοποιώντας $routeProvider

Παράδειγμα δρομολόγησης AngularJS

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

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

Πώς να χρησιμοποιήσετε την υπηρεσία Angular $route

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

Περίληψη

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο

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

Τι είναι το Routing στο AngularJS;

Προσθήκη διαδρομής AngularJS χρησιμοποιώντας $routeProvider

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

Παράδειγμα δρομολόγησης AngularJS

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

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

Πώς να χρησιμοποιήσετε την υπηρεσία Angular $route

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

Περίληψη

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο