Τι είναι ο ελεγκτής στο AngularJs;
Οι Ελεγκτές στο AngularJs λαμβάνουν τα δεδομένα από την Προβολή, επεξεργάζονται τα δεδομένα και, στη συνέχεια, στέλνουν αυτά τα δεδομένα στην προβολή που εμφανίζεται στον τελικό χρήστη. Ο Ελεγκτής θα έχει τη βασική επιχειρηματική λογική σας.
Ο ελεγκτής θα χρησιμοποιήσει το μοντέλο δεδομένων, θα πραγματοποιήσει την απαιτούμενη επεξεργασία και στη συνέχεια θα περάσει την έξοδο στην προβολή που με τη σειρά της θα εμφανίζεται στον τελικό χρήστη.
Σε αυτό το σεμινάριο, θα μάθετε-
- Τι κάνει ο ελεγκτής από την οπτική γωνία
- Πώς να δημιουργήσετε έναν βασικό ελεγκτή
- Τρόπος ορισμού μεθόδων στον ελεγκτή
- Χρήση του ελεγκτή ng σε εξωτερικά αρχεία
- Η κύρια ευθύνη του ελεγκτή είναι να ελέγχει τα δεδομένα που μεταδίδονται στην προβολή. Το πεδίο και η άποψη έχουν αμφίδρομη επικοινωνία.
- Οι ιδιότητες της προβολής μπορούν να καλέσουν "συναρτήσεις" στο εύρος. Επιπλέον, τα συμβάντα στην προβολή μπορούν να καλέσουν "μεθόδους" στο πεδίο εφαρμογής. Το παρακάτω απόσπασμα κώδικα δίνει ένα απλό παράδειγμα μιας συνάρτησης.
- Η συνάρτηση (εύρος $) που ορίζεται κατά τον ορισμό του ελεγκτή και μια εσωτερική συνάρτηση που χρησιμοποιείται για την επιστροφή της συνένωσης των $ lingkup.firstName και $ lingkup.lastName.
- Στο AngularJS όταν ορίζετε μια συνάρτηση ως μεταβλητή, είναι γνωστή ως μέθοδος.
- Τα δεδομένα με αυτόν τον τρόπο περνούν από τον ελεγκτή στο εύρος και στη συνέχεια τα δεδομένα περνούν εμπρός και πίσω από το πεδίο στην προβολή.
- Το εύρος χρησιμοποιείται για την έκθεση του μοντέλου στην προβολή. Το μοντέλο μπορεί να τροποποιηθεί μέσω μεθόδων που ορίζονται στο πεδίο εφαρμογής, οι οποίες θα μπορούσαν να ενεργοποιηθούν μέσω συμβάντων από την προβολή. Μπορούμε να ορίσουμε αμφίδρομη σύνδεση μοντέλου από το πεδίο εφαρμογής στο μοντέλο.
- Οι ελεγκτές δεν πρέπει ιδανικά να χρησιμοποιούνται για χειρισμό του DOM. Αυτό πρέπει να γίνει με τις οδηγίες που θα δούμε αργότερα.
- Βέλτιστη πρακτική είναι να βασίζεται ο ελεγκτής στη λειτουργικότητα. Για παράδειγμα, εάν έχετε μια φόρμα εισαγωγής και χρειάζεστε έναν ελεγκτή για αυτό, δημιουργήστε έναν ελεγκτή που ονομάζεται "ελεγκτής φόρμας".
- Προσθέτουμε αναφορές στα φύλλα στυλ CSS bootstrap, τα οποία θα χρησιμοποιηθούν σε συνδυασμό με τις βιβλιοθήκες bootstrap.
- Προσθέτουμε αναφορές στις βιβλιοθήκες angularjs. Τώρα, ό, τι κάνουμε με το angular.js προς τα εμπρός θα αναφέρεται από αυτήν τη βιβλιοθήκη.
- Προσθέτουμε αναφορές στη βιβλιοθήκη bootstrap για να κάνουμε την ιστοσελίδα μας πιο αποκριτική για ορισμένα στοιχεία ελέγχου.
- Έχουμε προσθέσει αναφορές σε βιβλιοθήκες jquery που θα χρησιμοποιηθούν για χειρισμό DOM. Αυτό απαιτείται από την Angular επειδή ορισμένες από τις λειτουργίες του Angular εξαρτώνται από αυτήν τη βιβλιοθήκη.
- Αρχικά διαχωρίζουμε τα αρχεία μας σε 2 φακέλους όπως γίνεται με οποιαδήποτε συμβατική εφαρμογή ιστού. Έχουμε το φάκελο "CSS". Θα περιέχει όλα τα διαδοχικά αρχεία φύλλων στυλ και στη συνέχεια θα έχουμε τον φάκελο "lib" που θα έχει όλα τα αρχεία JavaScript.
- Το αρχείο bootstrap.css τοποθετείται στο φάκελο CSS και χρησιμοποιείται για την προσθήκη μιας καλής εμφάνισης και αίσθησης για τον ιστότοπό μας.
- Το angular.js είναι το κύριο αρχείο μας που κατεβάστηκε από τον ιστότοπο angularJS και διατηρήθηκε στον φάκελο lib.
- Το αρχείο app.js θα περιέχει τον κωδικό μας για τους ελεγκτές.
- Το αρχείο bootstrap.js χρησιμοποιείται για να συμπληρώσει το αρχείο bootstrap.cs για να προσθέσει τη λειτουργικότητα του bootstrap στην εφαρμογή μας στο web.
- Το αρχείο jquery θα χρησιμοποιηθεί για την προσθήκη λειτουργιών χειρισμού DOM στον ιστότοπό μας.
Τι κάνει ο Ελεγκτής από την οπτική γωνία
Ακολουθεί ένας απλός ορισμός της λειτουργίας του Angular JS Controller.
Πώς να δημιουργήσετε έναν βασικό ελεγκτή
Πριν ξεκινήσουμε με τη δημιουργία ενός ελεγκτή, πρέπει πρώτα να εφαρμόσουμε τη βασική ρύθμιση σελίδας HTML.
Το παρακάτω απόσπασμα κώδικα είναι μια απλή σελίδα HTML που έχει τίτλο "Εγγραφή συμβάντων" και αναφέρεται σε σημαντικές βιβλιοθήκες όπως το Bootstrap, το jquery και το Angular.
Από προεπιλογή, το παραπάνω απόσπασμα κώδικα θα υπάρχει σε όλα μας τα παραδείγματα, έτσι ώστε να μπορούμε να δείξουμε μόνο τον συγκεκριμένο γωνιακό κώδικα JS στις επόμενες ενότητες.
Δεύτερον, ας δούμε τα αρχεία και τη δομή αρχείων με τα οποία πρόκειται να ξεκινήσουμε κατά τη διάρκεια του μαθήματος.
Ας δούμε ένα παράδειγμα για τον τρόπο χρήσης του angular.js,
Αυτό που θέλουμε να κάνουμε εδώ είναι απλώς να εμφανίσουμε τις λέξεις "AngularJS" σε μορφή κειμένου και σε πλαίσιο κειμένου όταν προβάλλεται η σελίδα στο πρόγραμμα περιήγησης.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Επεξήγηση κώδικα:
- Η λέξη - κλειδί ng-app χρησιμοποιείται για να δηλώσει ότι αυτή η εφαρμογή πρέπει να θεωρείται ως γωνιακή εφαρμογή. Οτιδήποτε ξεκινά με το πρόθεμα «ng» είναι γνωστό ως οδηγία. Το "DemoApp" είναι το όνομα που δίνεται στην εφαρμογή Angular.JS.
- Έχουμε δημιουργήσει μια ετικέτα div και σε αυτήν την ετικέτα έχουμε προσθέσει μια οδηγία ng-controller μαζί με το όνομα του ελεγκτή μας "DemoController". Αυτό κάνει βασικά την ετικέτα div μας τη δυνατότητα πρόσβασης στα περιεχόμενα του Demo Controller. Πρέπει να αναφέρετε το όνομα του ελεγκτή σύμφωνα με την οδηγία για να βεβαιωθείτε ότι έχετε πρόσβαση στη λειτουργικότητα που ορίζεται στον ελεγκτή.
- Δημιουργούμε δεσμευτικό μοντέλο χρησιμοποιώντας την οδηγία ng-model. Αυτό που κάνει είναι ότι δεσμεύει το πλαίσιο κειμένου για το όνομα Tutorial να δεσμεύεται στη μεταβλητή μέλους "tutorialName".
- Δημιουργούμε μια μεταβλητή μέλους που ονομάζεται "tutorialName" η οποία θα χρησιμοποιηθεί για την εμφάνιση των πληροφοριών που πληκτρολογεί ο χρήστης στο πλαίσιο κειμένου για το όνομα του εκπαιδευτικού προγράμματος.
- Δημιουργούμε μια ενότητα που θα επισυνάπτεται στην εφαρμογή DemoApp. Έτσι αυτή η ενότητα γίνεται πλέον μέρος της εφαρμογής μας.
- Στην ενότητα, ορίζουμε μια συνάρτηση που εκχωρεί μια προεπιλεγμένη τιμή του "AngularJS" στη μεταβλητή του tutorialName.
Εάν η εντολή εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Αφού εκχωρήσαμε τη μεταβλητή tutorialName μια τιμή "Angular JS", αυτό εμφανίζεται στο πλαίσιο κειμένου και στη γραμμή απλού κειμένου.
Τρόπος ορισμού μεθόδων στον ελεγκτή
Κανονικά, θα θέλαμε να ορίσουμε πολλές μεθόδους στον ελεγκτή για να διαχωρίσουμε τη λογική της επιχείρησης.
Για παράδειγμα, ας υποθέσουμε ότι αν θέλετε ο ελεγκτής σας να κάνει 2 βασικά πράγματα,
- Εκτελέστε την προσθήκη 2 αριθμών
- Εκτελέστε την αφαίρεση 2 αριθμών
Στη συνέχεια, θα δημιουργούσατε ιδανικά 2 μεθόδους μέσα στον ελεγκτή σας, μία για την εκτέλεση της προσθήκης και η άλλη για την εκτέλεση της αφαίρεσης.
Ας δούμε ένα απλό παράδειγμα για το πώς μπορείτε να ορίσετε προσαρμοσμένες μεθόδους σε έναν ελεγκτή Angular.JS. Ο ελεγκτής θα επιστρέψει απλώς μια συμβολοσειρά.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Επεξήγηση κώδικα:
- Εδώ, απλά ορίζουμε μια συνάρτηση που επιστρέφει μια συμβολοσειρά "AngularJS". Η συνάρτηση προσαρτάται στο αντικείμενο πεδίου μέσω μιας μεταβλητής μέλους που ονομάζεται tutorialName.
- Εάν η εντολή εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Χρήση του ελεγκτή ng σε εξωτερικά αρχεία
Ας δούμε ένα παράδειγμα του "HelloWorld" όπου όλες οι λειτουργίες τοποθετήθηκαν σε ένα μόνο αρχείο. Τώρα ήρθε η ώρα να τοποθετήσετε τον κωδικό για τον ελεγκτή σε ξεχωριστά αρχεία.
Ακολουθήστε τα παρακάτω βήματα για να το κάνετε αυτό.
Βήμα 1) Στο αρχείο app.js, προσθέστε τον ακόλουθο κώδικα για τον ελεγκτή σας
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Ο παραπάνω κώδικας κάνει τα ακόλουθα πράγματα,
- Ορίστε μια λειτουργική μονάδα που ονομάζεται "app" η οποία θα συγκρατεί τον ελεγκτή μαζί με τη λειτουργικότητα του ελεγκτή.
- Δημιουργήστε έναν ελεγκτή με το όνομα "HelloWorldCtrl". Αυτός ο ελεγκτής θα χρησιμοποιηθεί για να έχει μια λειτουργικότητα για την εμφάνιση ενός μηνύματος "Hello World".
- Το αντικείμενο πεδίου χρησιμοποιείται για τη μετάδοση πληροφοριών από τον ελεγκτή στην προβολή. Έτσι, στην περίπτωσή μας, το αντικείμενο πεδίου θα χρησιμοποιηθεί για τη διατήρηση μιας μεταβλητής που ονομάζεται "μήνυμα".
- Ορίζουμε το μεταβλητό μήνυμα και του αποδίδουμε την τιμή "Hello World".
Βήμα 2) Τώρα, στο αρχείο Sample.html προσθέστε μια κλάση div που θα περιέχει την οδηγία ng-controller και, στη συνέχεια, προσθέστε μια αναφορά στη μεταβλητή μέλους "μήνυμα"
Επίσης, μην ξεχάσετε να προσθέσετε μια αναφορά στο αρχείο script app.js που έχει τον πηγαίο κώδικα για τον ελεγκτή σας.
Event Registration Guru99 Global Event
{{message}}
Εάν ο παραπάνω κωδικός εισαχθεί σωστά, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Περίληψη
- Η κύρια ευθύνη του ελεγκτή είναι να δημιουργήσει ένα αντικείμενο πεδίου το οποίο με τη σειρά του μεταφέρεται στην προβολή
- Πώς να δημιουργήσετε έναν απλό ελεγκτή χρησιμοποιώντας τις οδηγίες ng-app, ng-controller και ng-model
- Πώς να προσθέσετε προσαρμοσμένες μεθόδους σε έναν ελεγκτή που μπορεί να χρησιμοποιηθεί για να διαχωρίσετε διάφορες λειτουργίες μέσα σε μια γωνιακή μονάδα.
- Οι ελεγκτές μπορούν να οριστούν σε εξωτερικά αρχεία για να διαχωριστεί αυτό το επίπεδο από το επίπεδο προβολής. Αυτή είναι συνήθως μια βέλτιστη πρακτική κατά τη δημιουργία εφαρμογών ιστού.