כיצד ליישם הזרקת תלות ב- AngularJs



סעיף זה יספק לך ידע מפורט ומקיף כיצד ליישם הזרקת תלות ב- AngularJs.

הזרקת תלות היא תבנית עיצוב תוכנה המציינת את הדרך בה רכיבים תופסים את התלות שלהם. המרכיבים מקבלים את התלות שלהם במקום לקודד אותם קשה. ניתן להשיג שימוש חוזר ותחזוקה באמצעות הזרקת תלות. הזרקת תלות עליונה ב יכול להיעשות על ידי המרכיבים הבאים:





הזרקת תלות בערך

אובייקט פשוט ב- AngularJs ידוע כערך. זה יכול להיות מחרוזת, מספר או אפילו אובייקט JavaScript. ניתן להשתמש בו להעברת ערכים במפעלים, שירותים או בקרים בשלב הריצה והתצורה.

דוגמא:



// להגדיר מודול

var firstModule = angular.module ('firstModule', [])

// ליצור אובייקט ערך ולהעביר אליו נתונים



firstModule.value ('numberValue', 50)

firstModule.value ('stringValue', 'xyz')

firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})

בדוגמה זו, ערכים מוגדרים באמצעות הפונקציה value (). שם הערך מצוין על ידי הפרמטר הראשון, והפרמטר השני מציין את הערך. זה מאפשר למפעלים, שירותים ובקרים להתייחס לערכים אלה בשמם עצמו.

הזרקת ערך

אנו יכולים להזרים ערך לפונקציית הבקר AngularJs על ידי הוספת פרמטר בשם זהה לערך.

דוגמא:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', פונקציה ($ scope, numberValue) {

console.log (numberValue)

})

הזרקת מפעל

פונקציה שיוצרת ערכים מכונה מפעל. ערך לפי דרישה נוצר על ידי המפעל בכל פעם ששירות או בקר זקוקים לערך המוזרק מהמפעל. לאחר יצירת הערך, נעשה בו שימוש חוזר לכל השירותים והבקרים.

זה עושה שימוש בפונקציית המפעל כדי לחשב ולהחזיר את הערך.

דוגמא:

var firstModule = angular.module ('firstModule', [])

firstModule.factory ('firstFactory', פונקציה () {

להחזיר 'ערך'

})

firstModule.controller ('FirstController', פונקציה ($ scope, firstFactory) {

console.log (firstFactory)

})

הזרקת ערכים למפעל

ניתן להזרים ערך למפעל בשיטה הבאה:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', פונקציה ($ scope, numberValue) {

console.log (numberValue)

})

יש לציין כי הערךמיוצר על ידי פונקציית המפעל מוזרק, ולא פונקציית המפעל עצמה. בואו נמשיך עם מאמר זה של הזרקת תלות ב- 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', פונקציה ($ scope, CalciService,

קלט ברירת מחדל) {

$ scope.number = ברירת מחדל

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = פונקציה () {

$ scope.result = CalciService.square ($ scope.number)

}

})

ספק

כדי ליצור שירותים או מפעל באופן פנימי בשלב התצורה, אנו משתמשים בספק. ספק הוא שיטת מפעל מיוחדת עם פונקציית get () המשמשת להחזרת הערך / שירות / מפעל.

דוגמא:

// להגדיר מודול

var firstApp = angular.module ('firstApp', [])

...

// ליצור שירות באמצעות ספק המגדיר ריבוע שיטה להחזרת ה-

ריבוע של מספר.

firstApp.config (פונקציה ($ לספק) {

$ provide.provider ('MathService', פונקציה () {

זה. $ get = function () {

מפעל var =

factory.multiply = פונקציה (x, y) {

החזר x * y

}

מפעל החזרה

}

})

})

קָבוּעַ

מכיוון שהמשתמש אינו יכול להזרים ערכים לפונקציה module.config (), אנו משתמשים בקבועים. קבועים משמשים להעברת ערכים בשלב התצורה.

firstApp.constant ('configParam', 'ערך קבוע')

דוגמא:

ניתן להשתמש בהוראות המוזכרות לעיל באופן הבא:

הזרקת תלות

כיצד להשתמש ב -

דוגמה לריבוע AngularJS

הזן מספר כלשהו:

איקס2

תוצאה: {{result}}

var firstApp = angular.module ('firstApp', [])

firstApp.config (פונקציה ($ לספק) {

$ provide.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', פונקציה ($ scope, CalciService, defaultInput) {

$ scope.number = ברירת מחדל

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = פונקציה () {

$ scope.result = CalciService.square ($ scope.number)

}

})

תְפוּקָה:

הזרקת תלות ב- angularjs

בכך אנו מגיעים לסוף של הזרקת תלות זו במאמר AngularJs. ג לעזאזל עם מאת אדוריקה, חברת למידה מקוונת מהימנה עם רשת של יותר מ -250,000 לומדים מרוצים הפרוסים ברחבי העולם.

יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות של הזרקת תלות זו ב- AngularJs ונחזור אליך.