Έγχυση εξάρτησης AngularJS: Ποια εξαρτήματα έγχυσαν

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

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

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

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

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

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

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

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

Στο Angular.JS, οι εξαρτήσεις εγχέονται χρησιμοποιώντας μια "injectable factory method" ή "constructor function".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Το στοιχείο τιμής λαμβάνει δύο παραμέτρους. το ένα είναι το κλειδί και το άλλο είναι η τιμή του αντικειμένου javascript που δημιουργείται.

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

<! 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>

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

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

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

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

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

```
 $scope.ID =TutorialID;
```

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

```
{{ID}}
```

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

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

2) Υπηρεσία

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

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

( 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>

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

 mainApp.service('AdditionService', function()

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

```
 this.Addition = function(a,b)
```

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

```
 return a+b;
```

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

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

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

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

Τώρα έχουμε πρόσβαση στη συνάρτηση «Προσθήκη» που ορίζεται στην υπηρεσία μας και την εκχωρούμε στο αντικείμενο $scope του ελεγκτή.

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

Σύνοψη

Το Dependency Injection όπως υποδηλώνει το όνομα είναι η διαδικασία εισαγωγής εξαρτημένης λειτουργικότητας σε μονάδες κατά το χρόνο εκτέλεσης.
Η χρήση της ένεσης εξάρτησης βοηθά στην απόκτηση ενός πιο επαναχρησιμοποιήσιμου κώδικα. Εάν είχατε κοινή λειτουργικότητα που χρησιμοποιείται σε πολλαπλές λειτουργικές μονάδες εφαρμογών, ο καλύτερος τρόπος είναι να ορίσετε μια κεντρική υπηρεσία με αυτήν τη λειτουργικότητα και στη συνέχεια να εισάγετε αυτήν την υπηρεσία ως εξάρτηση στις λειτουργικές μονάδες της εφαρμογής σας.
Το αντικείμενο τιμής του AngularJS μπορεί να χρησιμοποιηθεί για την ένεση απλών JavaΚάντε δέσμες ενεργειών στον ελεγκτή σας χρησιμοποιώντας το $inject in AngularJS.
Η λειτουργική μονάδα υπηρεσίας μπορεί να χρησιμοποιηθεί για τον καθορισμό των προσαρμοσμένων υπηρεσιών σας που μπορούν να επαναχρησιμοποιηθούν σε πολλαπλές λειτουργικές μονάδες AngularJS.

Μπορεί να σας αρέσει: