AngularJS ng-view με Παράδειγμα: Πώς να εφαρμόσετε την προβολή

Σήμερα, όλοι θα έχουν ακούσει για τις «Εφαρμογές μιας σελίδας». Πολλοί από τους γνωστούς ιστότοπους όπως το Gmail χρησιμοποιούν την έννοια των Εφαρμογών Μονής Σελίδας (SPA's).

Τα SPA's είναι η έννοια κατά την οποία όταν ένας χρήστης ζητά μια διαφορετική σελίδα, η εφαρμογή δεν θα πλοηγηθεί σε αυτήν τη σελίδα, αλλά θα εμφανίσει την προβολή της νέας σελίδας μέσα στην ίδια την υπάρχουσα σελίδα.

Δίνει την αίσθηση στον χρήστη ότι δεν έφυγε ποτέ από τη σελίδα. Το ίδιο μπορεί να επιτευχθεί στο Angular με τη βοήθεια των Views σε συνδυασμό με τις Routes.

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

Τι είναι η Προβολή;
Οδηγία ng-view στο AngularJS
Πώς να εφαρμόσετε το ng-view στο AngularJS με Παράδειγμα

Τι είναι η Προβολή;

Προβολή είναι το περιεχόμενο που εμφανίζεται στον χρήστη. Βασικά αυτό που θέλει να δει ο χρήστης, κατά συνέπεια αυτή η προβολή της εφαρμογής θα εμφανίζεται στον χρήστη.

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

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

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

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

Τώρα, αντί να υπάρχουν δύο διαφορετικές ιστοσελίδες, μία για "Προβολή παραγγελιών" και άλλη για "Νέες παραγγελίες", στο AngularJS, θα δημιουργήσετε αντ 'αυτού δύο διαφορετικές προβολές που ονομάζονται "Προβολή παραγγελιών" και "Νέες παραγγελίες" στην ίδια σελίδα.

Θα έχουμε επίσης 2 συνδέσμους αναφοράς στην εφαρμογή μας που ονομάζονται #show και #new.

Όταν λοιπόν η εφαρμογή πάει στο MyApp/#show, θα δείχνει την προβολή των Παραγγελιών Προβολής, ταυτόχρονα δεν θα βγαίνει από τη σελίδα. Απλώς θα ανανεώσει την ενότητα της υπάρχουσας σελίδας με τις πληροφορίες "Προβολή παραγγελιών". Το ίδιο ισχύει και για την προβολή "Νέες παραγγελίες".

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

Και κάθε προβολή θα έχει έναν αντίστοιχο ελεγκτή για τον έλεγχο της επιχειρηματικής λογικής για αυτήν τη λειτουργικότητα.

Οδηγία ng-view στο AngularJS

Το "ngView" είναι μια οδηγία που συμπληρώνει την υπηρεσία $route συμπεριλαμβάνοντας το αποδοθέν πρότυπο της τρέχουσας διαδρομής στο αρχείο κύριας διάταξης (index.html).

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

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

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

Πώς να εφαρμόσετε το ng-view στο AngularJS

Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να εφαρμόσουμε το ng-view στο AngularJS. Στο παράδειγμά μας, πρόκειται να παρουσιάσουμε δύο επιλογές στον χρήστη,

Το ένα είναι να εμφανίσετε ένα "Συμβάν" και το άλλο είναι να προσθέσετε ένα "Συμβάν".
Όταν ο χρήστης κάνει κλικ στο σύνδεσμο Προσθήκη συμβάντος, θα εμφανιστεί η προβολή για την "Προσθήκη συμβάντος" και το ίδιο ισχύει για την "Εμφάνιση συμβάντος".

Ακολουθήστε τα παρακάτω βήματα για να εφαρμόσετε αυτό το παράδειγμα.

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

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

Βήμα 2) Προσθήκη ετικετών href και ετικέτας div.

Στο στάδιο αυτό,

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

Βήμα 3) Στην ετικέτα σεναρίου για το Angular JS, προσθέστε τον ακόλουθο κώδικα.

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

Αυτή η ενότητα κώδικα σημαίνει ότι όταν ο χρήστης κάνει κλικ στην ετικέτα href "NewEvent" που είχε οριστεί νωρίτερα στην ετικέτα div. Θα μεταβεί στην ιστοσελίδα add_event.html και θα πάρει τον κώδικα από εκεί και θα τον εισάγει στην προβολή. Δεύτερον, για την επεξεργασία της επιχειρηματικής λογικής για αυτήν την προβολή, μεταβείτε στο "AddEventController".
Αυτή η ενότητα κώδικα σημαίνει ότι όταν ο χρήστης κάνει κλικ στην ετικέτα href "DisplayEvent" που είχε οριστεί νωρίτερα στην ετικέτα div. Θα μεταβεί στην ιστοσελίδα show_event.html, θα πάρει τον κώδικα από εκεί και θα τον εισάγει στην προβολή. Δεύτερον, για την επεξεργασία της επιχειρηματικής λογικής για αυτήν την προβολή, μεταβείτε στο "ShowDisplayController".
Αυτή η ενότητα κώδικα σημαίνει ότι η προεπιλεγμένη προβολή που εμφανίζεται στον χρήστη είναι η προβολή DisplayEvent

Βήμα 4) Προσθέστε ελεγκτές για την επεξεργασία της επιχειρηματικής λογικής.

Στη συνέχεια, πρέπει να προσθέσετε ελεγκτές για την επεξεργασία της επιχειρηματικής λογικής τόσο για τη λειτουργία "DisplayEvent" και "Add New Event".

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

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

Βήμα 5) Δημιουργήστε σελίδες που ονομάζονται add_event.html και show_event.html

Στη συνέχεια, Δημιουργήστε σελίδες που ονομάζονται add_event.html και show_event.html. Διατηρήστε τις σελίδες απλές, όπως φαίνεται παρακάτω.

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

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

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

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

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

<h2>Show Event</h2>
	
{{message}}

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

Παραγωγή:

Από την έξοδο, μπορούμε να παρατηρήσουμε 2 πράγματα

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

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

Παραγωγή:

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

Τι είναι η Προβολή;

Οδηγία ng-view στο AngularJS

Πώς να εφαρμόσετε το ng-view στο AngularJS

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

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