Πώς να εφαρμόσετε την εξάρτηση εγχύσεων σε AngularJs



Αυτό το artile θα σας παρέχει μια λεπτομερή και περιεκτική γνώση του πώς να εφαρμόσετε το Dependency Injection στο AngularJs.

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





Έγχυση εξάρτησης αξίας

Ένα απλό αντικείμενο στο AngularJs είναι γνωστό ως τιμή. Μπορεί να είναι μια συμβολοσειρά, ένας αριθμός ή ακόμη και ένα αντικείμενο JavaScript. Μπορεί να χρησιμοποιηθεί για τη μεταβίβαση τιμών σε εργοστάσια, υπηρεσίες ή ελεγκτές κατά τη φάση εκτέλεσης και διαμόρφωσης.

Παράδειγμα:



// ορίστε μια ενότητα

var firstModule = angular.module («firstModule», [])

// δημιουργήστε ένα αντικείμενο αξίας και μεταβιβάστε δεδομένα σε αυτό



firstModule.value ('numberValue', 50)

firstModule.value («stringValue», «xyz»)

firstModule.value ('αντικείμενοValue', {val1: 456, val2: 'xyz'})

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

Ένεση τιμής

διαφορά μεταξύ υπερφόρτωσης και υπέρβασης στην Java

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

Παράδειγμα:

var firstModule = angular.module («firstModule», [])

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', function ($ εύρος, numberValue) {

console.log (numberValue)

})

Εργοστασιακή έγχυση

Μια συνάρτηση που δημιουργεί τιμές είναι γνωστή ως εργοστάσιο. Μια τιμή κατ 'απαίτηση δημιουργείται από το εργοστάσιο, όποτε μια υπηρεσία ή ένας ελεγκτής χρειάζεται μια τιμή που εισάγεται από το εργοστάσιο. Μόλις δημιουργηθεί η τιμή, επαναχρησιμοποιείται για όλες τις υπηρεσίες και τους ελεγκτές.

Κάνει χρήση της εργοστασιακής λειτουργίας για τον υπολογισμό και την επιστροφή της τιμής.

Παράδειγμα:

var firstModule = angular.module («firstModule», [])

firstModule.factory ('firstFactory', συνάρτηση () {

επιστροφή 'μια τιμή'

})

firstModule.controller («FirstController», συνάρτηση ($ εύρος, firstFactory) {

console.log (firstFactory)

})

Έγχυση τιμών στο εργοστάσιο

Μια τιμή μπορεί να εισαχθεί στο εργοστάσιο με την ακόλουθη μέθοδο:

var firstModule = angular.module («firstModule», [])

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', function ($ εύρος, numberValue) {

console.log (numberValue)

})

Πρέπει να σημειωθεί ότι η τιμήπου παράγεται από την εργοστασιακή λειτουργία εγχύεται, όχι η ίδια η εργοστασιακή λειτουργία. Ας προχωρήσουμε με αυτό το άρθρο του Dependency Injection στο AngularJs.

Ένεση υπηρεσίας σε AngularJs

Ένα απλό αντικείμενο JavaScript που περιέχει ένα σύνολο λειτουργιών είναι γνωστό ως υπηρεσία στο AngularJs. Η λογική που απαιτείται για την εκτέλεση της υπηρεσίας περιλαμβάνεται στη συνάρτηση. Η υπηρεσία μπορεί να δημιουργηθεί χρησιμοποιώντας τη συνάρτηση service () σε μια ενότητα.

Παράδειγμα:

// ορίστε μια ενότητα

var firstApp = angular.module («firstApp», [])

...

// δημιουργήστε μια υπηρεσία που καθορίζει μια μέθοδο τετράγωνο για να επιστρέψει το τετράγωνο ενός αριθμού

firstApp.service ('CalciService', συνάρτηση (MathService) {

this.square = συνάρτηση (x) {

επιστροφή MathService.multiply (x, x)

}

})

// εισάγετε την υπηρεσία «CalciService» στον ελεγκτή

firstApp.controller ('CalciController', συνάρτηση ($ εύρος, CalciService,

defaultInput) {

$ lingkop.number = defaultInput

$ lingkop.result = CalciService.square ($ lingkup.number)

$ lingkop.square = συνάρτηση () {

$ lingkop.result = CalciService.square ($ lingkup.number)

}

})

Προμηθευτής

Για να δημιουργήσουμε εσωτερικά υπηρεσίες ή εργοστάσιο κατά τη φάση διαμόρφωσης, χρησιμοποιούμε τον Πάροχο. Ο πάροχος είναι μια ειδική εργοστασιακή μέθοδο με μια συνάρτηση get () που χρησιμοποιείται για την επιστροφή της τιμής / υπηρεσίας / εργοστασίου.

Παράδειγμα:

// ορίστε μια ενότητα

var firstApp = angular.module («firstApp», [])

...

// δημιουργήστε μια υπηρεσία χρησιμοποιώντας πάροχο που καθορίζει ένα τετράγωνο μεθόδου για να επιστρέψετε το

τετράγωνο ενός αριθμού.

firstApp.config (συνάρτηση ($ παρέχει) {

$ provider.provider ('MathService', συνάρτηση () {

μετατροπή από διπλό σε int java

αυτό. $ get = function () {

var εργοστάσιο =

factory.multiply = συνάρτηση (x, y) {

επιστροφή x * y

}

εργοστάσιο επιστροφής

}

})

})

Συνεχής

Επειδή ο χρήστης δεν μπορεί να εισάγει τιμές στη συνάρτηση module.config (), χρησιμοποιούμε σταθερές. Οι σταθερές χρησιμοποιούνται για τη μετάδοση τιμών στη φάση διαμόρφωσης.

firstApp.constant ('configParam', 'σταθερή τιμή')

Παράδειγμα:

Οι οδηγίες που αναφέρονται παραπάνω μπορούν να χρησιμοποιηθούν με τον ακόλουθο τρόπο:

Ενεση εξάρτησης

Παράδειγμα AngularJS Squaring

Εισαγάγετε οποιονδήποτε αριθμό:

Χ2

Αποτέλεσμα: {{result}}

var firstApp = angular.module («firstApp», [])

firstApp.config (συνάρτηση ($ παρέχει) {

$ provider.provider ('MathService', συνάρτηση () {

αυτό. $ get = function () {

var εργοστάσιο =

factory.multiply = συνάρτηση (x, y) {

επιστροφή x * y

}

εργοστάσιο επιστροφής

}

})

})

firstApp.value ('defaultInput', 6)

firstApp.factory ('MathService', συνάρτηση () {

var εργοστάσιο =

factory.multiply = συνάρτηση (x, y) {

επιστροφή x * y

}

εργοστάσιο επιστροφής

})

firstApp.service ('CalciService', συνάρτηση (MathService) {

this.square = συνάρτηση (x) {

επιστροφή MathService.multiply (x, x)

}

})

τι είναι η πολλαπλή κληρονομιά στην Ιάβα

firstApp.controller ('CalciController', συνάρτηση ($ εύρος, CalciService, defaultInput) {

$ lingkop.number = defaultInput

$ lingkop.result = CalciService.square ($ lingkup.number)

$ lingkop.square = συνάρτηση () {

$ lingkop.result = CalciService.square ($ lingkup.number)

}

})

ΠΑΡΑΓΩΓΗ:

ένεση εξάρτησης σε γωνιακά

Με αυτό, φτάνουμε στο τέλος αυτής της έγχυσης εξάρτησης στο άρθρο AngularJs. ντο διάλεξε το από την Edureka, μια αξιόπιστη διαδικτυακή εταιρεία εκμάθησης με δίκτυο περισσότερων από 250.000 ικανοποιημένων μαθητών σε όλο τον κόσμο.

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων αυτής της Έγχυσης Εξάρτησης στο AngularJs και θα επικοινωνήσουμε μαζί σας.