AngularJS Controllers with ng-Controller Παράδειγμα

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

Ένας ελεγκτής στο AngularJS διατηρεί την επιχειρηματική λογική μιας οθόνης. Λαμβάνει δεδομένα μέσω του αντικειμένου scope, τα επεξεργάζεται και εκθέτει το αποτέλεσμα πίσω στην προβολή, διατηρώνταςping σήμανση παρουσίασης χωρίς λογική εφαρμογής.

🎯 Βασική ευθύνη: Ένας ελεγκτής συμπληρώνει το αντικείμενο scope και εκθέτει μεθόδους στην προβολή· δεν χειρίζεται το DOM.
🔗 Καλωδίωση: Η οδηγία ng-controller συνδέει έναν επώνυμο ελεγκτή με ένα στοιχείο, δίνοντας σε αυτό το στοιχείο και στα παιδιά του πρόσβαση στο πεδίο εφαρμογής του ελεγκτή.
🔁 Διπλής κατεύθυνσης βιβλιοδεσία: Το ng-model συνδέει ένα πεδίο φόρμας με μια ιδιότητα εμβέλειας, επομένως οι επεξεργασίες στην προβολή ενημερώνουν τον ελεγκτή και το αντίστροφο.
🧩 Μέθοδοι: Οι συναρτήσεις που συνδέονται με το πεδίο εφαρμογής διαχωρίζουν ξεχωριστά κομμάτια λογικής και μπορούν να κληθούν απευθείας από τις εκφράσεις προβολής.
🏷️ Σύνταξη controllerAs: Προσθήκη ψευδωνύμου σε ελεγκτή και σύνδεση με αυτόν this εξαλείφει την ασάφεια όταν οι ελεγκτές είναι ενσωματωμένοι ο ένας μέσα στον άλλο.
📁 Διαχωρισμός: Η μετακίνηση των ελεγκτών σε ένα αποκλειστικό αρχείο app.js διατηρεί το επίπεδο προβολής ανεξάρτητο από το επίπεδο λογικής.

Περισσότερα

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

A ελεγκτής Στο AngularJS, το AngularJS λαμβάνει τα δεδομένα από την προβολή, τα επεξεργάζεται και στη συνέχεια τα στέλνει στην προβολή, η οποία εμφανίζεται στον τελικό χρήστη. Ο ελεγκτής διατηρεί την βασική επιχειρηματική λογική σας. Χρησιμοποιεί το μοντέλο δεδομένων, εκτελεί την απαιτούμενη επεξεργασία και στη συνέχεια μεταβιβάζει την έξοδο στην προβολή.

⚠️ Σημείωση έκδοσης: Το AngularJS (ο κλάδος 1.x) έφτασε στο τέλος της διάρκειας ζωής του στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις ασφαλείας. Οι παρακάτω έννοιες εξακολουθούν να ισχύουν για παλαιότερες εφαρμογές. Στο σύγχρονο Angular ο ίδιος ρόλος καλύπτεται από μια κλάση στοιχείων και όχι από έναν ελεγκτή.

Γνωρίζοντας τι είναι ένας ελεγκτής, αφήνουμε ένα ερώτημα ανοιχτό: πώς επικοινωνεί στην πραγματικότητα με την προβολή. Η επόμενη ενότητα απαντά σε αυτό.

Τι κάνει ο ελεγκτής από την οπτική γωνία της Angular

Ακολουθεί ένας απλός ορισμός της λειτουργίας ενός ελεγκτή AngularJS:

Η κύρια ευθύνη του ελεγκτή είναι να ελέγχει τα δεδομένα που μεταβιβάζονται στην προβολή. Το εύρος και η θέα έχουν αμφίδρομη επικοινωνία.
Οι ιδιότητες και τα συμβάντα προβολής μπορούν να καλέσουν συναρτήσεις στο πεδίο εφαρμογής. Το παρακάτω απόσπασμα δείχνει το συνάρτηση ($scope) δηλώνεται με τον ελεγκτή συν μια εσωτερική συνάρτηση που επιστρέφει $scope.firstName και $scope.lastName εντάχθηκε. Στο AngularJS, μια συνάρτηση που ορίζεται ως μεταβλητή είναι μια Μέθοδος.

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

Έχοντας κατανοήσει τον μηχανισμό, η επόμενη ενότητα κατασκευάζει έναν ελεγκτή από μια κενή σελίδα.

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

Παρακάτω θα βρείτε τα βήματα για να δημιουργήσετε έναν ελεγκτή στο AngularJS.

Βήμα 1) Δημιουργήστε μια βασική σελίδα HTML

Πριν από τη δημιουργία ενός ελεγκτή, πρέπει να υπάρχει η βασική σελίδα HTML. Το παρακάτω απόσπασμα είναι μια απλή σελίδα με τίτλο «Εγγραφή Συμβάντος» που αναφέρεται Bootstrap και AngularJS.

Αναφορές στο Bootstrap Φύλλο στυλ CSS, που χρησιμοποιείται μαζί με το Bootstrap βιβλιοθήκη.
Μια αναφορά στη βιβλιοθήκη AngularJS. Όλα όσα γίνονται με το AngularJS από εδώ και στο εξής επιλύονται από αυτό το αρχείο.
Μια αναφορά στο Bootstrap βιβλιοθήκη, η οποία κάνει ορισμένα στοιχεία ελέγχου να ανταποκρίνονται.

⚠️ διόρθωση: το αρχικά φορτωμένο jQuery και ανέφερε ότι το AngularJS εξαρτάται από αυτό. Δεν εξαρτάται. Το AngularJS συνοδεύεται από το jqLite, ένα ενσωματωμένο υποσύνολο του API jQuery, και αναβαθμίζεται σε πλήρες jQuery μόνο εάν φορτωθεί το jQuery. πριν Η αναφορά έχει αφαιρεθεί.

Βήμα 2) Ελέγξτε τα αρχεία και τη δομή των αρχείων

Τα αρχεία χωρίζονται σε δύο φακέλους όπως σε οποιαδήποτε συμβατική εφαρμογή ιστού: "css" για φύλλα στυλ και "lib" για JavaΓραφή αρχεία.
Το bootstrap.css βρίσκεται στον φάκελο css και δίνει στον ιστότοπο την εμφάνιση και την αίσθηση που του ταιριάζει.
Το angular.js είναι η κύρια βιβλιοθήκη, η οποία λαμβάνεται από τον ιστότοπο AngularJS και φυλάσσεται στη βιβλιοθήκη.
Το app.js θα περιέχει τον κώδικα για τους ελεγκτές.

Βήμα 3) Χρησιμοποιήστε τον κώδικα AngularJS για να εμφανίσετε την έξοδο

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Επεξήγηση:

ng-app σηματοδοτεί αυτό το στοιχείο ως τη ρίζα μιας εφαρμογής AngularJS. Τα χαρακτηριστικά έχουν πρόθεμα ng- είναι ενσωματωμένες οδηγίες. Το όνομα που δίνεται στην εφαρμογή είναι «DemoApp».
Το div κουβαλάει ng-ελεγκτής με το όνομα "DemoController", το οποίο δίνει σε αυτό το στοιχείο και σε όλα όσα περιέχει πρόσβαση στο πεδίο εφαρμογής του ελεγκτή.
ng-μοντέλο δημιουργεί τη σύνδεση του μοντέλου, συνδέοντας το πλαίσιο κειμένου Tutorial Name με την ιδιότητα scope (πεδίο εφαρμογής) tutorialName.
Το δομοστοιχείο DemoApp δημιουργείται και ο ελεγκτής αντιστοιχίζει μια προεπιλεγμένη τιμή "AngularJS" στο tutorialName.

⚠️ Εφαρμόστηκαν διορθώσεις. Η αρχική καταχώριση που ανακοινώθηκε chrset="UTF 8", το οποίο δεν είναι ούτε έγκυρο χαρακτηριστικό ούτε έγκυρο όνομα κωδικοποίησης, και φόρτωσε το AngularJS δύο φορές — μία από το CDN και μία από lib/angular.jsΗ φόρτωση της βιβλιοθήκης δύο φορές επανεγγράφει το σύστημα των μονάδων και παράγει απρόβλεπτη συμπεριφορά. Η σχολίαση του πίνακα εξαρτήσεων ['$scope', function($scope){…}] Προστέθηκε επίσης, χωρίς το οποίο ο ελεγκτής διακόπτεται τη στιγμή που ελαχιστοποιείται το αρχείο.

Παραγωγή:

Επειδή tutorialName του αποδόθηκε η τιμή «AngularJS», η οποία εμφανίζεται στο πλαίσιο κειμένου και στη γραμμή απλού κειμένου. Μία μόνο ιδιότητα είναι αρκετή για μια επίδειξη. Οι πραγματικοί ελεγκτές συνήθως εκθέτουν και τη συμπεριφορά, την οποία καλύπτει η επόμενη ενότητα.

Πώς να ορίσετε μεθόδους σε ελεγκτές AngularJS

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

Το παρακάτω παράδειγμα ορίζει μια προσαρμοσμένη μέθοδο μέσα σε έναν ελεγκτή AngularJS που επιστρέφει μια συμβολοσειρά.

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Επεξήγηση:

Μια συνάρτηση συνδέεται με το αντικείμενο scope ως μέλος tNameΕπιστρέφει την τρέχουσα τιμή του tutorialName.
Η προβολή καλεί τη μέθοδο με {{tName()}}Οι παρενθέσεις έχουν σημασία: χωρίς αυτές η παράσταση εμφανίζει την ίδια τη συνάρτηση και όχι το αποτέλεσμά της.

⚠️ διόρθωση: η αρχική μέθοδος ανάγνωσης $scope.tName = function() { return $scope.tName; };Αυτή η συνάρτηση επιστρέφει τον εαυτό της, όχι το όνομα του εκπαιδευτικού υλικού, επομένως η σελίδα απέδωσε ένα σώμα συνάρτησης αντί για κείμενο. Τώρα επιστρέφει $scope.tutorialName.

Παραγωγή:

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

Παράδειγμα ελεγκτή AngularJS με ng-Controller

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

Βήμα 1) Στο αρχείο app.js, προσθέστε τον ακόλουθο κώδικα για τον ελεγκτή σας.

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

Ο παραπάνω κώδικας κάνει τα εξής:

Ορίζει μια ενότητα που ονομάζεται «app» η οποία περιέχει τον ελεγκτή.
Δημιουργεί έναν ελεγκτή με το όνομα "HelloWorldCtrl" που εμφανίζει το μήνυμα "Hello World".
Χρησιμοποιεί το αντικείμενο scope για να μεταβιβάσει πληροφορίες από τον ελεγκτή στην προβολή, σε αυτήν την περίπτωση μια μεταβλητή που ονομάζεται message.

Βήμα 2) Στο Sample.html, προσθέστε ένα div που φέρει την οδηγία ng-controller και μια αναφορά στη μεταβλητή-μέλος messageΘυμηθείτε να ανατρέξετε στο app.js, το οποίο περιέχει τον πηγαίο κώδικα του ελεγκτή.

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ διόρθωση: Το app.js πρέπει να φορτωθεί μετά angular.js, αφού καλεί angular.moduleΤο πρωτότυπο φόρτωσε επίσης τη βιβλιοθήκη δύο φορές και μετέφερε το ίδιο chrset τυπογραφικό λάθος.

Παραγωγή:

Κάθε παράδειγμα μέχρι στιγμής έχει διαβάσει και γράψει ιδιότητες απευθείας στο $scopeΗ παρακάτω ενότητα καλύπτει την εναλλακτική λύση που προτείνει η ομάδα AngularJS.

Πώς να χρησιμοποιήσετε τη σύνταξη controllerAs στο AngularJS

Σύνδεση απευθείας με $scope λειτουργεί, αλλά γίνεται ασαφές μόλις οι ελεγκτές ενσωματωθούν. Μια έκφραση προβολής όπως {{name}} δεν δίνει καμία ένδειξη ποιος ελεγκτής κατέχει name, και επειδή τα θυγατρικά πεδία κληρονομούν από τα γονικά πεδία πρωτότυπα, ένας ένθετος ελεγκτής που γράφει σε ένα κληρονομημένο πρωτόγονο δημιουργεί σιωπηλά το δικό του σκιώδες αντίγραφο. controllerAs Η σύνταξη εξαλείφει και τα δύο προβλήματα δίνοντας σε κάθε ελεγκτή ένα ψευδώνυμο.

Βήμα 1) Ψευδώνυμο του ελεγκτή στην προβολή χρησιμοποιώντας το as λέξη-κλειδί και, στη συνέχεια, προσθέστε αυτό το ψευδώνυμο ως πρόθεμα σε κάθε σύνδεση.

Βήμα 2) Μέσα στον ελεγκτή, επισυνάψτε ιδιότητες σε this παρά να $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Ακολουθούν τρία οφέλη. Οι συνδέσεις γίνονται αυτο-τεκμηριούμενες, επειδή demo.tutorialName ονομάζει τον κάτοχό του. Οι ενσωματωμένοι ελεγκτές σταματούν να συγκρούονται, καθώς ένας γονέας έχει ψευδώνυμο outer και ένα παιδί με ψευδώνυμο inner μπορούν και τα δύο να εκθέσουν nameΟι τιμές συνδέονται επίσης μέσω ενός αντικειμένου και όχι μέσω ενός απλού πρωτόγονου, παράπλευρου βήματος.ping η παγίδα όπου μια επεξεργασία σε ένα παιδί δεν φτάνει ποτέ στον γονέα.

💡 Συμβουλή: σύλληψη this σε μια μεταβλητή όπως vm στο πάνω μέρος του χειριστηρίου. Μέσα σε μια επανάκληση, this αναφέρεται σε κάτι εντελώς διαφορετικό και η καταγεγραμμένη αναφορά διατηρεί τη σύνδεση σωστή.

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

Ελεγκτής έναντι υπηρεσίας στο AngularJS

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

Άποψη	ελεγκτής	Υπηρεσία
Διάρκεια ζωής	Δημιουργήθηκε και καταστράφηκε με τη θέα	Μία μόνο παρουσία για ολόκληρη την εφαρμογή
Σκοπός	Προετοιμασία δεδομένων για μία προβολή	Κοινή λογική, κατάσταση και κλήσεις διακομιστή
Επαναχρησιμοποιούμενες	Όχι, συνδέεται με την άποψή του	Ναι, ενέσιμο οπουδήποτε
Διατηρεί την κατάσταση μεταξύ των προβολών	Όχι, η κατάσταση χάνεται κατά την πλοήγηση	Ναι, το κράτος επιμένει
Τυπικό περιεχόμενο	Ιδιότητες πεδίου εφαρμογής και μέθοδοι προβολής	Κλήσεις HTTP, προσωρινή αποθήκευση, επιχειρηματικοί κανόνες

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

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

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

Δηλώστε το στη διαδρομή όταν ο ελεγκτής ανήκει σε μια ολόκληρη προβολή που φορτώνεται από δρομολόγησηΧρησιμοποιήστε το ng-controller για ένα στοιχείο που εμφανίζεται μέσα σε μια σελίδα ανεξάρτητα από την τρέχουσα διαδρομή. Ποτέ μην δηλώνετε και τα δύο, διαφορετικά ο ελεγκτής εκτελείται δύο φορές.

Χρησιμοποιήστε την σχολίαση πίνακα, αναφέροντας τα ονόματα των εξαρτήσεων ως συμβολοσειρές πριν από τη συνάρτηση. Οι ελαχιστοποιητές μετονομάζουν τα ορίσματα των συναρτήσεων, αλλά ποτέ τα κυριολεκτικά συμβολοσειρών, έτσι ώστε ο injector να εξακολουθεί να επιλύει σωστά το $scope και τυχόν υπηρεσίες.

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

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

AngularJS Controllers with ng-Controller Παράδειγμα

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

Τι κάνει ο ελεγκτής από την οπτική γωνία της Angular

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

Πώς να ορίσετε μεθόδους σε ελεγκτές AngularJS

Παράδειγμα ελεγκτή AngularJS με ng-Controller

Πώς να χρησιμοποιήσετε τη σύνταξη controllerAs στο AngularJS

Ελεγκτής έναντι υπηρεσίας στο AngularJS

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

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

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