Ενότητες AngularJS

Τι είναι ένα AngularJS Module;

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

Σε όλα τα προηγούμενα σεμινάρια μας, θα είχατε παρατηρήσει την οδηγία ng-app που χρησιμοποιείται για τον ορισμό της κύριας Angular εφαρμογής σας. Αυτή είναι μια από τις βασικές έννοιες των μονάδων στο Angular.JS.

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

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

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

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

Στον παραπάνω κώδικα, δημιουργήσαμε μια συνάρτηση που ονομάζεται "DemoController" η οποία πρόκειται να λειτουργεί ως ελεγκτής στην εφαρμογή μας.

Σε αυτόν τον ελεγκτή, απλώς εκτελούμε την προσθήκη 2 μεταβλητών a και b και εκχωρούμε την προσθήκη αυτών των μεταβλητών σε μια νέα μεταβλητή, c, και την εκχωρούμε ξανά στο αντικείμενο scope.

Τώρα ας δημιουργήσουμε το βασικό μας Sample.html, το οποίο θα είναι η κύρια εφαρμογή μας. Ας εισαγάγουμε το παρακάτω απόσπασμα κώδικα στη σελίδα HTML μας.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

Στον παραπάνω κώδικα, συμπεριλαμβάνουμε τον DemoController και, στη συνέχεια, καλούμε την τιμή της μεταβλητής $scope.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 μας δεν θα φαίνεται όπως φαίνεται παρακάτω

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

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

<body ng-app="'sampleApp'">

Στην ετικέτα του σώματός μας,

Αντί να έχουμε μια άδεια οδηγία ng-app, καλούμε τώρα τη μονάδα sampleApp.
Καλώντας αυτήν την ενότητα εφαρμογής, μπορούμε πλέον να έχουμε πρόσβαση στον ελεγκτή «DemoController» και στη λειτουργικότητα που υπάρχει στον ελεγκτή επίδειξης.

Modules και Controllers στο AngularJS

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

Κανονικά οι μονάδες θα αποθηκεύονται χωριστά Javascript αρχεία, τα οποία θα ήταν διαφορετικά από το κύριο αρχείο εφαρμογής.

Ας δούμε ένα παράδειγμα για το πώς μπορεί να επιτευχθεί αυτό.

Στο παρακάτω παράδειγμα,

Θα δημιουργήσουμε ένα αρχείο που ονομάζεται Utilities.js το οποίο θα περιέχει 2 ενότητες, το ένα για την εκτέλεση της λειτουργικότητας της πρόσθεσης και το άλλο για την εκτέλεση της λειτουργίας της αφαίρεσης.
Στη συνέχεια θα δημιουργήσουμε 2 ξεχωριστά αρχεία εφαρμογής και θα αποκτήσουμε πρόσβαση στο αρχείο Utility από κάθε αρχείο εφαρμογής.
Στο ένα αρχείο εφαρμογής θα έχουμε πρόσβαση στο module για πρόσθεση και στο άλλο, θα έχουμε πρόσβαση στο module για αφαίρεση.

Βήμα 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 ξεχωριστά Angular Module, το ένα στο οποίο δίνεται το όνομα «AdditionApp» και στο δεύτερο το όνομα «SubtractionApp».
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
Υπάρχουν 2 ξεχωριστοί ελεγκτές που ορίζονται για κάθε ενότητα, ο ένας ονομάζεται DemoAddController και ο άλλος είναι DemoSubtractController. Κάθε ελεγκτής έχει ξεχωριστή λογική για πρόσθεση και αφαίρεση αριθμών.

Βήμα 2) Δημιουργήστε τα κύρια αρχεία εφαρμογής σας. Ας δημιουργήσουμε ένα αρχείο που ονομάζεται ApplicationAddition.html και ας προσθέσουμε τον παρακάτω κώδικα

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

Ας σημειώσουμε τα βασικά σημεία στον κώδικα που γράφτηκε παραπάνω

```
<script src="/lib/Utilities.js"></script>
```
Αναφέρουμε το αρχείο Utilities.js στο κύριο αρχείο εφαρμογής μας. Αυτό μας επιτρέπει να αναφέρουμε τυχόν λειτουργικές μονάδες AngularJS που ορίζονται σε αυτό το αρχείο.
```
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
```
Έχουμε πρόσβαση στην ενότητα "AdditionApp" και στο DemoAddController χρησιμοποιώντας την οδηγία ng-app και την ng-ελεγκτής αντίστοιχα.
```
{{c}}
```
Εφόσον αναφερόμαστε στην προαναφερθείσα μονάδα και τον ελεγκτή, μπορούμε να αναφέρουμε τη μεταβλητή $scope.c μέσω μιας έκφρασης. Η έκφραση θα είναι το αποτέλεσμα της προσθήκης των 2 μεταβλητών εύρους a και b που πραγματοποιήθηκε στον ελεγκτή 'DemoAddController'

Με τον ίδιο τρόπο θα κάνουμε και για τη συνάρτηση αφαίρεσης.

Βήμα 3) Δημιουργήστε τα κύρια αρχεία εφαρμογής σας. Ας δημιουργήσουμε ένα αρχείο που ονομάζεται “ApplicationSubtraction.html” και ας προσθέσουμε τον παρακάτω κώδικα

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

Ας σημειώσουμε τα βασικά σημεία στον κώδικα που γράφτηκε παραπάνω

```
<script src="/lib/Utilities.js"></script>
```
Αναφέρουμε το αρχείο Utilities.js στο κύριο αρχείο εφαρμογής μας. Αυτό μας επιτρέπει να αναφερθούμε σε οποιεσδήποτε λειτουργικές μονάδες που ορίζονται σε αυτό το αρχείο.
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
Έχουμε πρόσβαση στη λειτουργική μονάδα «SubtractionApp» και στο DemoSubtractController χρησιμοποιώντας την οδηγία ng-app και τον ελεγκτή ng αντίστοιχα.
```
{{d}}
```
Εφόσον αναφερόμαστε στην προαναφερθείσα μονάδα και ελεγκτή, μπορούμε να αναφέρουμε τη μεταβλητή $scope.d μέσω μιας έκφρασης. Η έκφραση θα είναι το αποτέλεσμα της αφαίρεσης των 2 μεταβλητών εύρους a και b που πραγματοποιήθηκε στο 'DemoSubtractController' ελεγκτής

Σύνοψη

Χωρίς τη χρήση μονάδων AngularJS, οι ελεγκτές αρχίζουν να έχουν ένα παγκόσμιο εύρος που οδηγεί σε κακές πρακτικές προγραμματισμού.
Οι ενότητες χρησιμοποιούνται για τον διαχωρισμό της επιχειρηματικής λογικής. Μπορούν να δημιουργηθούν πολλαπλές ενότητες ώστε να διαχωρίζονται λογικά μέσα σε αυτές τις διαφορετικές ενότητες.
Κάθε λειτουργική μονάδα AngularJS μπορεί να έχει το δικό της σύνολο ελεγκτών που ορίζονται και της εκχωρούνται.
Κατά τον καθορισμό μονάδων και ελεγκτών, συνήθως ορίζονται ξεχωριστά JavaΓραφή αρχεία. Αυτοί JavaΣτη συνέχεια, τα αρχεία δέσμης ενεργειών αναφέρονται στο κύριο αρχείο εφαρμογής.

Τι είναι ένα AngularJS Module;

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

Modules και Controllers στο AngularJS

Σύνοψη

Ημερήσιο ενημερωτικό δελτίο Guru99