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

Τι είναι η έγχυση εξάρτησης στο AngularJS;

Το Dependency Injection είναι ένα σχέδιο σχεδιασμού λογισμικού που εφαρμόζει την αντιστροφή του ελέγχου για την επίλυση εξαρτήσεων.

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

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

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

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

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

Σε αυτό το σεμινάριο, θα μάθετε-

Ποιο συστατικό μπορεί να εγχυθεί ως εξάρτηση στο AngularJS
Παράδειγμα Έγχυσης Εξάρτησης

Στοιχείο τιμής
Υπηρεσία

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

Στο Angular.JS, οι εξαρτήσεις εγχύονται χρησιμοποιώντας μια "μέθοδος ενέσιμου εργοστασίου" ή "συνάρτηση κατασκευαστή".

Αυτά τα στοιχεία μπορούν να εγχυθούν με εξαρτήματα "service" και "value" ως εξαρτήσεις. Αυτό το είδαμε σε παλαιότερο θέμα με την υπηρεσία $ http.

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

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

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

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

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

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

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

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

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

Το ένα είναι μέσω του "Value Component"
Ένα άλλο είναι μέσω "υπηρεσίας"

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

1) Στοιχείο τιμής

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

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

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

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

Βήμα 2) Πρόσβαση στο αντικείμενο JavaScript από τον ελεγκτή Angular.JS

Event Registration
Guru99 Global Event
{{ID}}

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

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

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

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

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

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

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

```
{{ΤΑΥΤΟΤΗΤΑ}}
```

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

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

2) Υπηρεσία

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

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

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

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

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

Event Registration
Guru99 Global Event

Result: {{result}}

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

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

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

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

Περίληψη:

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