Στοιχεία ένεσης εξαρτήσεων AngularJS

Τι είναι το Dependency Injection στο AngularJS;

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

Αντιστροφή Ελέγχου: Σημαίνει ότι τα αντικείμενα δεν δημιουργούν άλλα αντικείμενα στα οποία βασίζονται για να κάνουν τη δουλειά τους. Αντίθετα, παίρνουν αυτά τα αντικείμενα από μια εξωτερική πηγή. Αυτό αποτελεί τη βάση του AngularJS Dependency Injection όπου αν ένα αντικείμενο εξαρτάται από ένα άλλο. το πρωτεύον αντικείμενο δεν αναλαμβάνει την ευθύνη να δημιουργήσει το εξαρτημένο αντικείμενο και στη συνέχεια να χρησιμοποιήσει τις μεθόδους του. Αντίθετα, μια εξωτερική πηγή (η οποία στο AngularJS, είναι το ίδιο το πλαίσιο AngularJS) δημιουργεί το εξαρτημένο αντικείμενο και το δίνει στο αντικείμενο προέλευσης για περαιτέρω χρήση.

⚠️ Σημείωση έκδοσης: Η υποστήριξη AngularJS έληξε τον Ιανουάριο του 2022, χωρίς ενημερώσεις ασφαλείας. Οι σύγχρονες ενέσεις Angular γίνονται μέσω παρόχων @Injectable και κάνω ένεση()Ο παρακάτω κώδικας παραμένει ιστορικός.

Ας καταλάβουμε λοιπόν πρώτα τι είναι η εξάρτηση.

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

• Το πλαίσιο «Μοντέλο» απεικονίζει την «Κλάση Μοντέλου» που συνήθως δημιουργείται για να αλληλεπιδρά με τη βάση δεδομένων. Έτσι τώρα η βάση δεδομένων είναι μια εξάρτηση για τη λειτουργία της "Κλάσης Μοντέλων".
• Με την ένεση εξάρτησης, δημιουργούμε μια υπηρεσία για να συλλάβουμε όλες τις πληροφορίες από τη βάση δεδομένων και να εισέλθουμε στην κατηγορία μοντέλου.

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

Ποιο στοιχείο μπορεί να εισαχθεί ως εξάρτηση στο AngularJS

Στο AngularJS, οι εξαρτήσεις εισάγονται χρησιμοποιώντας μια «μέθοδο injectable factory» ή «συνάρτηση κατασκευαστή».

Αυτά τα στοιχεία μπορούν να εγχυθούν με στοιχεία «υπηρεσίας» και «αξίας» ως εξαρτήσεις. Το έχουμε δει σε προηγούμενο θέμα με την υπηρεσία $http.

Ένα AngularJS ενότητα καταγράφει ενέσιμα αντικείμενα μέσω πέντε συνταγών.

Έχουμε ήδη δει ότι η υπηρεσία $http μπορεί να χρησιμοποιηθεί στο AngularJS για τη λήψη δεδομένων από ένα MySQL ή MS SQL Βάση δεδομένων διακομιστή μέσω α PHP εφαρμογή ιστού.

Η υπηρεσία $http συνήθως ορίζεται από τον ελεγκτή με τον ακόλουθο τρόπο.

sampleApp.controller ('AngularJSController', function ($scope, $http)

Τώρα, όταν η υπηρεσία $http ορίζεται στον ελεγκτή όπως φαίνεται παραπάνω. Σημαίνει ότι ο ελεγκτής έχει πλέον μια εξάρτηση από την υπηρεσία $http.

Έτσι, όταν εκτελεστεί ο παραπάνω κώδικας, το AngularJS θα εκτελέσει τα ακόλουθα βήματα.

1. Ελέγξτε για να δείτε εάν η υπηρεσία "$http" έχει δημιουργηθεί. Δεδομένου ότι ο "ελεγκτής" μας εξαρτάται πλέον από την υπηρεσία "$http", ένα αντικείμενο αυτής της υπηρεσίας πρέπει να είναι διαθέσιμο στον ελεγκτή μας.
2. Εάν το AngularJS ανακαλύψει ότι η υπηρεσία $http δεν είναι εγκατεστημένη, το AngularJS χρησιμοποιεί τη συνάρτηση "εργοστάσιο" για να δημιουργήσει ένα αντικείμενο $http.
3. Ο injector μέσα στο AngularJS παρέχει στη συνέχεια μια παρουσία της υπηρεσίας $http στον ελεγκτή μας για περαιτέρω επεξεργασία.

Μορφές σχολιασμού: Έμμεση σχολίαση Η εντολή διαβάζει ονόματα παραμέτρων, επομένως η ελαχιστοποίηση την διακόπτει. Η σημειογραφία inline array και η εντολή $inject επιβιώνουν. Η εντολή ng-strict-di στο ng-app απορρίπτει την έμμεση σχολίαση.

Τώρα που η εξάρτηση έχει εγχυθεί στον ελεγκτή μας, μπορούμε τώρα να καλέσουμε τις απαραίτητες λειτουργίες στην υπηρεσία $http για περαιτέρω επεξεργασία.

Παράδειγμα Έγχυσης Εξάρτησης

Σε αυτό το παράδειγμα, θα μάθουμε πώς να χρησιμοποιούμε την ένεση εξάρτησης στο AngularJS.

Η ένεση εξάρτησης μπορεί να εφαρμοστεί με 2 τρόπους

1. Το ένα είναι μέσω του "Στοιχείου αξίας"
2. Ένα άλλο είναι μέσω μιας "Υπηρεσίας"

Ας δούμε την υλοποίηση και των δύο τρόπων με περισσότερες λεπτομέρειες.

1) Στοιχείο αξίας

Αυτή η ιδέα βασίζεται στη δημιουργία ενός απλού JavaΓραφή αντικείμενο και διαβίβασή του στον ελεγκτή για περαιτέρω επεξεργασία.

Αυτό υλοποιείται χρησιμοποιώντας τα παρακάτω δύο βήματα

Βήμα 1) Δημιουργία JavaΑντικείμενο script χρησιμοποιώντας το στοιχείο value και συνδέστε το στην κύρια ενότητα AngularJS.

Η συνιστώσα αξίας λαμβάνει δύο παραμέτρους: η μία είναι το κλειδί και η άλλη είναι η τιμή του JavaΑντικείμενο σεναρίου που δημιουργείται.

Βήμα 2) Δείτε το JavaΑντικείμενο σεναρίου από το Ελεγκτής AngularJS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

Ο παραπάνω κώδικας εκτελεί τα παρακάτω βήματα

1. sampleApp.value("TutorialID", 5);

   Η συνάρτηση value της ενότητας AngularJS χρησιμοποιείται για τη δημιουργία ενός ζεύγους κλειδιού-τιμής που ονομάζεται "TutorialID" και η τιμή "5".

2. sampleApp.controller('AngularJSController', function ($scope,TutorialID)

   Η μεταβλητή TutorialID γίνεται πλέον προσβάσιμη στον ελεγκτή ως παράμετρος συνάρτησης.

3.  $scope.ID =TutorialID;

   Η τιμή του TutorialID, η οποία είναι 5, αντιστοιχίζεται τώρα σε μια άλλη μεταβλητή που ονομάζεται ID στο $πεδίο αντικείμενο. Αυτό γίνεται έτσι ώστε η τιμή 5 να μπορεί να μεταβιβαστεί από τον ελεγκτή στην προβολή.

4. {{ID}}

   Η παράμετρος ID εμφανίζεται στην προβολή ως έκφραση. Έτσι η έξοδος του '5' θα εμφανιστεί στη σελίδα.

Όταν εκτελεστεί ο παραπάνω κώδικας, η έξοδος θα εμφανιστεί όπως παρακάτω

2) Υπηρεσία

Η υπηρεσία ορίζεται ως singleton JavaΑντικείμενο σεναρίου που αποτελείται από ένα σύνολο συναρτήσεων που θέλετε να εκθέσετε και να εισαγάγετε στον ελεγκτή σας.

Για παράδειγμα, το "$http" είναι μια υπηρεσία στο AngularJS η οποία όταν εισάγεται στους ελεγκτές σας παρέχει τις απαραίτητες λειτουργίες

( get() , query() , save() , remove(), delete() ).

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

Ας δούμε ένα απλό παράδειγμα για το πώς μπορείτε να δημιουργήσετε τη δική σας υπηρεσία. Θα δημιουργήσουμε μια απλή υπηρεσία πρόσθεσης που προσθέτει δύο αριθμούς.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

Στο παραπάνω παράδειγμα, εκτελούνται τα ακόλουθα βήματα

1.  mainApp.service('AdditionService', function()

   Εδώ δημιουργούμε μια νέα υπηρεσία που ονομάζεται 'AdditionService' χρησιμοποιώντας την παράμετρο service της κύριας ενότητας AngularJS.

2.  this.ADDITION = function(a,b)

   Εδώ δημιουργούμε μια νέα συνάρτηση που ονομάζεται ADDITION μέσα στην υπηρεσία μας. Αυτό σημαίνει ότι όταν το AngularJS δημιουργεί την AdditionService μέσα στον ελεγκτή μας, θα μπορούμε να έχουμε πρόσβαση στη συνάρτηση 'ADDITION'. Σε αυτόν τον ορισμό συνάρτησης, λέμε ότι αυτή η συνάρτηση δέχεται δύο παραμέτρους, a και b.

3.  return a+b;

   Εδώ ορίζουμε το σώμα της συνάρτησης ADDITION, η οποία απλώς προσθέτει τις παραμέτρους και επιστρέφει την προστιθέμενη τιμή.

4.  mainApp.controller('DemoController', function($scope, AdditionService)

   Αυτό είναι το κύριο βήμα που περιλαμβάνει την εισαγωγή εξαρτήσεων. Στον ορισμό του ελεγκτή μας, αναφερόμαστε τώρα στην υπηρεσία 'AdditionService'. Όταν το AngularJS το δει αυτό, θα δημιουργήσει ένα αντικείμενο τύπου 'AdditionService'.

5.  $scope.result = AdditionService.ADDITION(5,6);

   Τώρα έχουμε πρόσβαση στη συνάρτηση 'ADDITION' η οποία ορίζεται στην υπηρεσία μας και την αντιστοιχίζουμε στο αντικείμενο $scope του ελεγκτή.

Αυτό είναι λοιπόν ένα απλό παράδειγμα του πώς μπορούμε να ορίσουμε την υπηρεσία μας και να εισάγουμε τη λειτουργικότητα αυτής της υπηρεσίας μέσα στον ελεγκτή μας.

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