Τι είναι μια ενότητα AngularJS;
Μια ενότητα καθορίζει τη λειτουργικότητα της εφαρμογής που εφαρμόζεται σε ολόκληρη τη σελίδα HTML χρησιμοποιώντας την οδηγία ng-app. Προσδιορίζει τη λειτουργικότητα, όπως υπηρεσίες, οδηγίες και φίλτρα, με τρόπο που το καθιστά εύκολο να το επαναχρησιμοποιήσετε σε διαφορετικές εφαρμογές.
Σε όλα τα προηγούμενα σεμινάριά μας, θα έχετε παρατηρήσει την οδηγία ng-app που χρησιμοποιείται για τον καθορισμό της κύριας γωνιακής εφαρμογής σας. Αυτή είναι μια από τις βασικές έννοιες των ενοτήτων στο Angular.JS.
Σε αυτό το σεμινάριο, θα μάθετε-
- Πώς να δημιουργήσετε μια ενότητα στο AngularJS
- Ενότητες και ελεγκτές
Πώς να δημιουργήσετε μια ενότητα στο AngularJS
Πριν ξεκινήσουμε με το τι είναι μια ενότητα, ας δούμε ένα παράδειγμα μιας εφαρμογής AngularJS χωρίς μια ενότητα και στη συνέχεια να κατανοήσουμε την ανάγκη ύπαρξης λειτουργικών μονάδων στην εφαρμογή σας.
Ας σκεφτούμε να δημιουργήσουμε ένα αρχείο με το όνομα "DemoController.js" και να προσθέσουμε τον παρακάτω κώδικα στο αρχείο
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
Στον παραπάνω κώδικα, έχουμε δημιουργήσει μια συνάρτηση που ονομάζεται "DemoController" η οποία θα λειτουργεί ως ελεγκτής στην εφαρμογή μας.
Σε αυτόν τον ελεγκτή, πραγματοποιούμε απλώς την προσθήκη 2 μεταβλητών a και b και εκχωρούμε την προσθήκη αυτών των μεταβλητών σε μια νέα μεταβλητή, c και την αναθέτουμε πίσω στο αντικείμενο πεδίου.
Τώρα ας δημιουργήσουμε το κύριο Sample.html, το οποίο θα είναι η κύρια εφαρμογή μας. Ας εισάγουμε το παρακάτω απόσπασμα κώδικα στη σελίδα HTML.
Παγκόσμιο συμβάν Guru99
{{ντο}}Στον παραπάνω κωδικό, συμπεριλαμβάνουμε το DemoController και στη συνέχεια επικαλούμεθα την τιμή της μεταβλητής $ lingkup.c μέσω μιας έκφρασης.
Αλλά παρατηρήστε την οδηγία ng-app, έχει μια κενή τιμή.
- Αυτό ουσιαστικά σημαίνει ότι όλοι οι ελεγκτές που καλούνται στο πλαίσιο της οδηγίας ng-app μπορούν να έχουν πρόσβαση παγκοσμίως. Δεν υπάρχει όριο που χωρίζει πολλούς ελεγκτές ο ένας από τον άλλο.
- Τώρα στον σύγχρονο προγραμματισμό, αυτή είναι μια κακή πρακτική να μην έχετε συνδεδεμένους ελεγκτές σε καμία ενότητα και να τους καθιστά παγκοσμίως προσβάσιμους. Πρέπει να οριστεί κάποιο λογικό όριο για τους ελεγκτές.
Και εδώ μπαίνουν οι ενότητες. Οι ενότητες χρησιμοποιούνται για τη δημιουργία αυτού του διαχωρισμού των ορίων και βοηθούν στον διαχωρισμό των ελεγκτών με βάση τη λειτουργικότητα.
Ας αλλάξουμε τον παραπάνω κώδικα για να εφαρμόσουμε τις ενότητες και να συνδέσουμε τον ελεγκτή μας σε αυτήν την ενότητα
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Ας σημειώσουμε τις βασικές διαφορές στον κώδικα που γράφτηκε παραπάνω
var sampleApp = angular.module('sampleApp',[]);Δημιουργούμε συγκεκριμένα μια μονάδα AngularJS που ονομάζεται "sampleApp". Αυτό θα δημιουργήσει ένα λογικό όριο για τη λειτουργικότητα που θα περιέχει αυτή η ενότητα. Έτσι, στο παραπάνω παράδειγμα, έχουμε μια ενότητα που περιέχει έναν ελεγκτή που εκτελεί το ρόλο της προσθήκης 2 αντικειμένων πεδίου. Ως εκ τούτου, μπορούμε να έχουμε μια ενότητα με λογικό όριο που λέει ότι αυτή η ενότητα θα εκτελεί μόνο τη λειτουργικότητα των μαθηματικών υπολογισμών για την εφαρμογή.
sampleApp.controller('DemoController', function($scope)Συνδέουμε τώρα τον ελεγκτή στην ενότητα AngularJS "SampleApp". Αυτό σημαίνει ότι εάν δεν αναφέρουμε την ενότητα «sampleApp» στον κύριο κώδικα HTML, δεν θα μπορούμε να αναφέρουμε τη λειτουργικότητα του ελεγκτή μας.
Ο κύριος κώδικας HTML δεν θα φαίνεται όπως φαίνεται παρακάτω
Guru99 Global Event
{{c}}Ας σημειώσουμε τις βασικές διαφορές στον κώδικα που γράφτηκε παραπάνω και στον προηγούμενο κώδικα
Στην ετικέτα του σώματός μας,
- Αντί να έχουμε μια άδεια οδηγία ng-app, καλούμε τώρα την ενότητα sampleApp.
- Καλώντας αυτήν την ενότητα εφαρμογών, μπορούμε πλέον να αποκτήσουμε πρόσβαση στον ελεγκτή «DemoController» και τη λειτουργικότητα που υπάρχει στον ελεγκτή επίδειξης.
Ενότητες και ελεγκτές
Στο Angular.JS, το μοτίβο που χρησιμοποιείται για την ανάπτυξη σύγχρονων εφαρμογών ιστού είναι η δημιουργία πολλαπλών ενοτήτων και ελεγκτών για τον λογικό διαχωρισμό πολλαπλών επιπέδων λειτουργικότητας.
Κανονικά οι ενότητες θα αποθηκεύονται σε ξεχωριστά αρχεία Javascript, τα οποία θα ήταν διαφορετικά από το κύριο αρχείο εφαρμογής.
Ας δούμε ένα παράδειγμα για το πώς μπορεί να επιτευχθεί αυτό.
Στο παρακάτω παράδειγμα,
- Θα δημιουργήσουμε ένα αρχείο με το όνομα Utilities.js που θα περιέχει 2 ενότητες, μία για την εκτέλεση της λειτουργικότητας της προσθήκης και η άλλη για την εκτέλεση της λειτουργικότητας της αφαίρεσης.
- Στη συνέχεια πρόκειται να δημιουργήσουμε 2 ξεχωριστά αρχεία εφαρμογών και να αποκτήσουμε πρόσβαση στο αρχείο Utility από κάθε αρχείο εφαρμογής.
- Σε ένα αρχείο εφαρμογής θα έχουμε πρόσβαση στη λειτουργική μονάδα για προσθήκη και στο άλλο, θα έχουμε πρόσβαση στη λειτουργική μονάδα για αφαίρεση.
Βήμα 1) Ορίστε τον κωδικό για τις πολλαπλές μονάδες και τους ελεγκτές.
var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});Ας σημειώσουμε τα βασικά σημεία του κώδικα που γράφτηκε παραπάνω
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Δημιουργήθηκε 2 ξεχωριστή γωνιακή ενότητα, ένα στο οποίο έχει το όνομα «AdditionApp» και το δεύτερο έχει το όνομα «SubtractionApp».
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Υπάρχουν 2 ξεχωριστοί ελεγκτές που ορίζονται για κάθε ενότητα, ο ένας ονομάζεται DemoAddController και ο άλλος ο DemoSubtractController. Κάθε ελεγκτής έχει ξεχωριστή λογική για προσθήκη και αφαίρεση αριθμών.
Βήμα 2) Δημιουργήστε τα κύρια αρχεία της εφαρμογής σας. Ας δημιουργήσουμε ένα αρχείο που ονομάζεται ApplicationAddition.html και προσθέστε τον παρακάτω κώδικα
Addition Addition :{{c}}Ας σημειώσουμε τα βασικά σημεία του κώδικα που γράφτηκε παραπάνω
Αναφερόμαστε στο αρχείο Utilities.js στο κύριο αρχείο της εφαρμογής μας. Αυτό μας επιτρέπει να αναφέρουμε τυχόν μονάδες AngularJS που ορίζονται σε αυτό το αρχείο.
Έχουμε πρόσβαση στην ενότητα «AdditionApp» και στο DemoAddController χρησιμοποιώντας την οδηγία ng-app και το ng-controller αντίστοιχα.
{{c}}Εφόσον αναφερόμαστε στην παραπάνω αναφερόμενη ενότητα και ελεγκτή, μπορούμε να αναφέρουμε τη μεταβλητή $ lingkop.c μέσω μιας έκφρασης. Η έκφραση θα είναι το αποτέλεσμα της προσθήκης των 2 μεταβλητών πεδίου a και b που πραγματοποιήθηκαν στον ελεγκτή «DemoAddController»
Με τον ίδιο τρόπο που θα κάνουμε για τη λειτουργία αφαίρεσης.
Βήμα 3) Δημιουργήστε τα κύρια αρχεία της εφαρμογής σας. Ας δημιουργήσουμε ένα αρχείο με το όνομα "ApplicationSubtraction.html" και προσθέστε τον παρακάτω κώδικα
Addition Subtraction :{{d}}Ας σημειώσουμε τα βασικά σημεία του κώδικα που γράφτηκε παραπάνω
Αναφερόμαστε στο αρχείο Utilities.js στο κύριο αρχείο της εφαρμογής μας. Αυτό μας επιτρέπει να αναφέρουμε τυχόν ενότητες που ορίζονται σε αυτό το αρχείο.
Έχουμε πρόσβαση στη λειτουργική μονάδα SubtractionApp και στο DemoSubtractController χρησιμοποιώντας την οδηγία ng-app και τον ελεγκτή ng.
{{d}}Εφόσον αναφερόμαστε στην παραπάνω αναφερόμενη ενότητα και ελεγκτή, μπορούμε να αναφέρουμε τη μεταβλητή $ lingkup.d μέσω μιας έκφρασης. Η έκφραση θα είναι το αποτέλεσμα της αφαίρεσης των 2 μεταβλητών πεδίου a και b που πραγματοποιήθηκε στον ελεγκτή «DemoSubtractController»
Περίληψη
- Χωρίς τη χρήση μονάδων AngularJS, οι ελεγκτές αρχίζουν να έχουν παγκόσμιο εύρος που οδηγεί σε κακές πρακτικές προγραμματισμού.
- Οι ενότητες χρησιμοποιούνται για το διαχωρισμό της επιχειρηματικής λογικής. Μπορούν να δημιουργηθούν πολλαπλές ενότητες ώστε να διαχωρίζονται λογικά σε αυτές τις διαφορετικές ενότητες.
- Κάθε μονάδα AngularJS μπορεί να έχει το δικό της σύνολο ελεγκτών που έχει οριστεί και εκχωρηθεί σε αυτήν.
- Κατά τον ορισμό λειτουργικών μονάδων και ελεγκτών, συνήθως ορίζονται σε ξεχωριστά αρχεία JavaScript. Αυτά τα αρχεία JavaScript αναφέρονται στη συνέχεια στο κύριο αρχείο της εφαρμογής.