Ενότητες AngularJS

Με: Τζέιμς Χάρτμαν Τζέιμς Χάρτμαν
Hours Ενημερώθηκε

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

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

  • 🔘 Ορισμός: Η συνάρτηση angular.module καταχωρεί και ανακτά κάθε στοιχείο που χρησιμοποιεί μια εφαρμογή.
  • ☑️ Δημιουργία: Ένας πίνακας εξάρτησης δημιουργεί μια ενότητα. Η παράλειψή του ανακτά μία.
  • ✅ Bootstrapping: Το ng-app ονομάζει την ενότητα Angular φορτώνει για αυτήν την περιοχή.
  • 🧪 Διαχωρισμός: Οι ελεγκτές με εμβέλεια μονάδας αποφεύγουν τα καθολικά ονόματα και τις συγκρούσεις μεταξύ ελεγκτών.
  • 📊 Σημείωση έκδοσης: Η υποστήριξη του AngularJS έληξε τον Ιανουάριο του 2022. Το AngularJS προτιμά τα αυτόνομα στοιχεία.
Περισσότερα

Ομάδα μονάδων AngularJSping ελεγκτές, υπηρεσίες, οδηγίες και φίλτρα κάτω από ένα όριο ng-app

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

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

Το παραπάνω παράδειγμα συνοψίζει αυτό το όριο.

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

⚠️ Σημείωση έκδοσης: Η υποστήριξη AngularJS έληξε τον Ιανουάριο του 2022. Μοντέρνο Γωνιώδης χρησιμοποιεί το @NgModule και τα ανεξάρτητα στοιχεία είναι τα προεπιλεγμένα. Ο παρακάτω κώδικας είναι ιστορικός.

Πώς να δημιουργήσετε μια λειτουργική μονάδα στο 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 μας.

<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;
                         });

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

  1. var sampleApp = angular.module('sampleApp',[]);

    Δημιουργούμε συγκεκριμένα μια λειτουργική μονάδα AngularJS που ονομάζεται «sampleApp». Αυτό θα αποτελέσει ένα λογικό όριο για τη λειτουργικότητα που θα περιέχει αυτή η ενότητα. Έτσι, στο παραπάνω παράδειγμά μας, έχουμε μια ενότητα που περιέχει έναν ελεγκτή που εκτελεί το ρόλο της προσθήκης 2 αντικειμένων εμβέλειας. Ως εκ τούτου, μπορούμε να έχουμε μια ενότητα με ένα λογικό όριο που λέει ότι αυτή η ενότητα θα εκτελεί μόνο τη λειτουργικότητα των μαθηματικών υπολογισμών για την εφαρμογή.

  2. sampleApp.controller('DemoController', function($scope)

    Τώρα συνδέουμε τον ελεγκτή στη λειτουργική μονάδα AngularJS "sampleApp". Αυτό σημαίνει ότι αν δεν αναφέρουμε τη λειτουργική μονάδα 'sampleApp' στον κύριο κώδικα HTML, δεν θα μπορούμε να αναφέρουμε τη λειτουργικότητα του ελεγκτή μας.

Setter εναντίον getter: γωνιακός.ενότητα δημιουργεί μια ενότητα μόνο όταν η εξάρτηση διαβιβάζεται ένας πίνακας· χωρίς αυτόν, η κλήση ανακτά μια υπάρχουσα ενότητα.

Ο κύριος κώδικας 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 AngularJS, το μοτίβο που χρησιμοποιείται για την ανάπτυξηping Οι σύγχρονες εφαρμογές ιστού συνίστανται στη δημιουργία πολλαπλών ενοτήτων και ελεγκτών για τον λογικό διαχωρισμό πολλαπλών επιπέδων λειτουργικότητας.

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

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

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

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

Βήμα 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;
});

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

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Δημιουργήθηκαν 2 ξεχωριστές ενότητες AngularJS, η μία με το όνομα 'AdditionApp' και η δεύτερη με το όνομα 'Sub'.tracΕφαρμογή tion'.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    Υπάρχουν 2 ξεχωριστοί ελεγκτές που ορίζονται για κάθε ενότητα, ο ένας ονομάζεται DemoAddController και ο άλλος είναι το DemoSub.tractController. Κάθε ελεγκτής έχει ξεχωριστή λογική για πρόσθεση και υποδιαίρεση.tracση αριθμών.

Βήμα 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>

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

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

  1. <script src="/lib/Utilities.js"></script>

    Αναφέρουμε το αρχείο Utilities.js στο κύριο αρχείο εφαρμογής μας. Αυτό μας επιτρέπει να αναφέρουμε τυχόν λειτουργικές μονάδες AngularJS που ορίζονται σε αυτό το αρχείο.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    Έχουμε πρόσβαση στην ενότητα "AdditionApp" και στο DemoAddController χρησιμοποιώντας την οδηγία ng-app και την ng-ελεγκτής αντίστοιχα.

  3. {{c}}

    Εφόσον αναφερόμαστε στην προαναφερθείσα μονάδα και τον ελεγκτή, μπορούμε να αναφέρουμε τη μεταβλητή $scope.c μέσω μιας έκφρασης. Η έκφραση θα είναι το αποτέλεσμα της προσθήκης των 2 μεταβλητών εύρους a και b που πραγματοποιήθηκε στον ελεγκτή 'DemoAddController'

    Το ίδιο θα κάνουμε και για το subtracλειτουργία σης.

Βήμα 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>

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

  1. <script src="/lib/Utilities.js"></script>

    Αναφέρουμε το αρχείο Utilities.js στο κύριο αρχείο εφαρμογής μας. Αυτό μας επιτρέπει να αναφερθούμε σε οποιεσδήποτε λειτουργικές μονάδες που ορίζονται σε αυτό το αρχείο.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Αποκτούμε πρόσβαση στο «Υπο-tracενότητα tionApp και DemoSubtractController χρησιμοποιώντας την οδηγία ng-app και τον ng-controller αντίστοιχα.

  3. {{d}}

    Δεδομένου ότι αναφερόμαστε στην προαναφερθείσα ενότητα και ελεγκτή, μπορούμε να αναφέρουμε τη μεταβλητή $scope.d μέσω μιας έκφρασης. Η έκφραση θα είναι το αποτέλεσμα της δευτερεύουσας συνάρτησης.tracη ανάλυση των 2 μεταβλητών πεδίου εφαρμογής a και b, η οποία πραγματοποιήθηκε στο 'DemoSub'tracΕλεγκτής tController

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

Η παροχή του πίνακα δημιουργεί μια ενότητα. Η παράλειψή του ανακτά την καταχωρημένη ενότητα, επομένως πολλά αρχεία επεκτείνονται σε μία ενότητα. ένεση χώρος ονομάτων

Όχι. Το AngularJS εκκινεί μόνο την πρώτη εφαρμογή ng που βρέθηκε. Οι περαιτέρω ενότητες χρειάζονται μια χειροκίνητη κλήση της εντολής angular.bootstrap στο στοιχείο τους.

Η συνάρτηση config() εκτελείται ενώ οι πάροχοι εγγράφονται, επομένως μόνο οι πάροχοι και οι σταθερές εισάγονται εκεί. Η συνάρτηση run() εκτελείται μόλις ο εγχυτήρας είναι έτοιμος.

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

Φορτώστε το μέσω του angular.mock.module και, στη συνέχεια, επιλύστε τους ελεγκτές με inject(). Η κάλυψη σε επίπεδο προγράμματος περιήγησης οδηγεί τη σελίδα, ιστορικά με ProtracTor.

@NgModule ανέλαβε το Angular 2 και τα αυτόνομα στοιχεία είναι πλέον η προεπιλεγμένη ρύθμιση, δηλώνοντας εξαρτήσεις μέσω του δικού τους πίνακα εισαγωγών.

Τα εργαλεία μηχανικής μάθησης διαβάζουν κάθε κλήση του angular.module, δημιουργούν ένα γράφημα εξάρτησης και κατατάσσουν τις ενότητες με βάση τον κίνδυνο μετεγκατάστασης. RevΟι θεατές επαληθεύουν το καθένα Οδηγιών χάρτηping.

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

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