Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kullan\u0131m \u00d6rnekleriyle Tam K\u0131lavuz<\/p>\n
Angular uygulamalar\u0131n\u0131z\u0131n karma\u015f\u0131kla\u015ft\u0131k\u00e7a, kodunuzun s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve test edilebilirli\u011fini sa\u011flamak i\u00e7in g\u00fc\u00e7l\u00fc bir mimariye ihtiyac\u0131n\u0131z vard\u0131r. Bu sorunu \u00e7\u00f6zmenin en etkili yollar\u0131ndan biri de Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (DI) desenidir. Bu k\u0131lavuzda, Angular’da DI’n\u0131n temellerini, avantajlar\u0131n\u0131, farkl\u0131 kullan\u0131m senaryolar\u0131n\u0131 ve ileri d\u00fczey tekniklerini ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Angular’da DI’n\u0131n nas\u0131l uygulanaca\u011f\u0131n\u0131 ve kodunuzun daha temiz, daha mod\u00fcler ve daha test edilebilir hale nas\u0131l getirilece\u011fini ke\u015ffedece\u011fiz. Haz\u0131rsan\u0131z, ba\u015flayal\u0131m!<\/p>\n
Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (DI), bir nesnenin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 (di\u011fer nesneleri) do\u011frudan olu\u015fturmak yerine, d\u0131\u015far\u0131dan sa\u011flamas\u0131n\u0131 sa\u011flayan bir tasar\u0131m deseni olarak tan\u0131mlayabiliriz. Basit\u00e7e s\u00f6ylemek gerekirse, bir s\u0131n\u0131f\u0131n ihtiya\u00e7 duydu\u011fu nesneleri, s\u0131n\u0131f\u0131n kendisi de\u011fil de, d\u0131\u015far\u0131dan bir kaynak (genellikle bir framework veya container) taraf\u0131ndan temin edilmesidir. Bu, kodun daha mod\u00fcler, daha test edilebilir ve daha s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flar. Angular, DI’y\u0131 temel bir mimari prensip olarak kullan\u0131r ve bu sayede bile\u015fenler aras\u0131nda ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
\u00d6rne\u011fin, bir Angular’da DI, genellikle <\/code><\/p>\n Bir bile\u015fende Kullan\u0131c\u0131 bilgileri: {{userData}}<\/p><\/code>\n})\nexport class UserComponent {\n userData: any;\n\n constructor(private userService: UserService) {\n this.userData = this.userService.getUserData();\n }\n}<\/pre>\n <\/code><\/p>\n Bu kod blo\u011funda, Yukar\u0131da g\u00f6sterilen y\u00f6ntem, en yayg\u0131n kullan\u0131lan enjeksiyon y\u00f6ntemidir. Ba\u011f\u0131ml\u0131l\u0131klar, s\u0131n\u0131f\u0131n constructor'\u0131nda tan\u0131mlan\u0131r. Bu y\u00f6ntem, ba\u011f\u0131ml\u0131l\u0131klar\u0131n a\u00e7\u0131k\u00e7a belirtilmesini ve kodun daha okunabilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n Setter enjeksiyonu, ba\u011f\u0131ml\u0131l\u0131klar\u0131n bir setter metodu arac\u0131l\u0131\u011f\u0131yla sa\u011fland\u0131\u011f\u0131 bir y\u00f6ntemdir. Bu, ba\u011f\u0131ml\u0131l\u0131klar\u0131n \u00e7al\u0131\u015fma zaman\u0131nda de\u011fi\u015ftirilmesine olanak tan\u0131r. Ancak, constructor enjeksiyonu kadar s\u0131k kullan\u0131lmaz ve genellikle daha karma\u015f\u0131k senaryolarda tercih edilir.<\/p>\n <\/code><\/p>\n Method enjeksiyonu, ba\u011f\u0131ml\u0131l\u0131klar\u0131n bir metodun parametresi olarak sa\u011fland\u0131\u011f\u0131 bir y\u00f6ntemdir. Bu y\u00f6ntem, ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n yaln\u0131zca belirli bir metod taraf\u0131ndan kullan\u0131lmas\u0131 gerekti\u011finde tercih edilebilir. Ancak, bu y\u00f6ntemin y\u00f6netimi constructor enjeksiyonuna g\u00f6re daha zordur ve kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131rabilir.<\/p>\n Bir e-ticaret uygulamas\u0131nda, \u00fcr\u00fcn verilerini y\u00f6neten bir Bir blog uygulamas\u0131nda, blog g\u00f6nderilerini y\u00f6neten bir Angular'da DI kullanman\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r: Mod\u00fclerlik:<\/strong> Kodunuz daha k\u00fc\u00e7\u00fck, daha y\u00f6netilebilir par\u00e7alara b\u00f6l\u00fcn\u00fcr. Test Edilebilirlik:<\/strong> Mock nesneler kullanarak servislerinizi kolayca test edebilirsiniz. Yeniden Kullan\u0131labilirlik:<\/strong> Servisleriniz farkl\u0131 bile\u015fenlerde yeniden kullan\u0131labilir. S\u00fcrd\u00fcr\u00fclebilirlik:<\/strong> Kodunuz daha kolay anla\u015f\u0131l\u0131r, bak\u0131m\u0131 daha kolayd\u0131r ve uzun vadede daha iyi \u00f6l\u00e7eklenir. Ba\u011f\u0131ms\u0131zl\u0131k:<\/strong> Bile\u015fenleriniz birbirine s\u0131k\u0131 s\u0131k\u0131ya ba\u011fl\u0131 de\u011fildir, bu sayede de\u011fi\u015fiklikler yaparken daha az sorun ya\u015fars\u0131n\u0131z.<\/p>\nUserService<\/code> s\u0131n\u0131f\u0131n\u0131z oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn. Bu s\u0131n\u0131f, kullan\u0131c\u0131 verilerini almaktan sorumlu olsun. DI kullanmadan, UserService<\/code> s\u0131n\u0131f\u0131 kendi i\u00e7inde bir veri taban\u0131 ba\u011flant\u0131s\u0131 olu\u015fturabilir ve verileri do\u011frudan alabilir. Ancak, DI kullanarak, UserService<\/code> s\u0131n\u0131f\u0131 veri taban\u0131na eri\u015fim sa\u011flayan bir DatabaseService<\/code> s\u0131n\u0131f\u0131na ba\u011f\u0131ml\u0131 hale gelir ve bu ba\u011f\u0131ml\u0131l\u0131k d\u0131\u015far\u0131dan sa\u011flan\u0131r. Bu, UserService<\/code> s\u0131n\u0131f\u0131n\u0131n test edilmesini kolayla\u015ft\u0131r\u0131r \u00e7\u00fcnk\u00fc test s\u0131ras\u0131nda mock bir DatabaseService<\/code> kullanabiliriz.<\/p>\nAngular’da DI’y\u0131 Uygulama: Ad\u0131m Ad\u0131m<\/h2>\n
Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Tan\u0131mlama<\/h3>\n
@Injectable()<\/code> dekorat\u00f6r\u00fc kullan\u0131larak uygulan\u0131r. Bu dekorat\u00f6r, bir s\u0131n\u0131f\u0131n DI taraf\u0131ndan y\u00f6netilece\u011fini belirtir. A\u015fa\u011f\u0131daki \u00f6rnekte, bir LoggerService<\/code> ve buna ba\u011fl\u0131 bir UserService<\/code> s\u0131n\u0131f\u0131 tan\u0131ml\u0131yoruz:<\/p>\nimport { Injectable } from '@angular\/core';\n\n@Injectable({\n providedIn: 'root' \/\/ root seviyesinde sa\u011flanacak\n})\nexport class LoggerService {\n log(message: string) {\n console.log(message);\n }\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class UserService {\n constructor(private logger: LoggerService) { }\n\n getUserData() {\n this.logger.log('Kullan\u0131c\u0131 verileri al\u0131n\u0131yor...');\n \/\/ Kullan\u0131c\u0131 veri alma i\u015flemi\n }\n}<\/pre>\nBa\u011f\u0131ml\u0131l\u0131klar\u0131 Enjekte Etme<\/h3>\n
UserService<\/code>'i kullanmak i\u00e7in, constructor'da UserService<\/code>'i ba\u011f\u0131ml\u0131l\u0131k olarak belirtmeliyiz. Angular, bu ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 otomatik olarak enjekte eder:<\/p>\nimport { Component } from '@angular\/core';\nimport { UserService } from '.\/user.service';\n\n@Component({\n selector: 'app-user-component',\n template: UserComponent<\/code>'in constructor'\u0131nda UserService<\/code> enjekte edilmi\u015ftir. Angular, UserService<\/code> \u00f6rne\u011fini otomatik olarak olu\u015fturur ve UserComponent<\/code>'e sa\u011flar.<\/p>\nFarkl\u0131 Enjeksiyon Y\u00f6ntemleri<\/h2>\n
Constructor Enjeksiyonu<\/h3>\n
Setter Enjeksiyonu<\/h3>\n
@Injectable()\nexport class MyService {\n private myDependency: MyDependency;\n\n @Inject(MyDependency)\n set dependency(dependency: MyDependency) {\n this.myDependency = dependency;\n }\n \n \/\/ ... metodlari\n}<\/pre>\nMethod Enjeksiyonu<\/h3>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131<\/h2>\n
E-Ticaret Uygulamas\u0131<\/h3>\n
ProductService<\/code> ve \u00f6deme i\u015flemlerini y\u00f6neten bir PaymentService<\/code> oldu\u011funu varsayal\u0131m. Bu servisler, birbirinden ba\u011f\u0131ms\u0131zd\u0131r ancak bir sipari\u015f olu\u015fturma i\u015flemi s\u0131ras\u0131nda birlikte \u00e7al\u0131\u015f\u0131rlar. DI kullanarak, OrderService<\/code>'in hem ProductService<\/code>'e hem de PaymentService<\/code>'e ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 y\u00f6netebilir ve bu servisleri kolayca test edebiliriz. <\/p>\nBlog Uygulamas\u0131<\/h3>\n
PostService<\/code> ve yorumlar\u0131 y\u00f6neten bir CommentService<\/code> olabilir. PostService<\/code>, blog g\u00f6nderilerini listelemek ve ayr\u0131nt\u0131lar\u0131n\u0131 almak i\u00e7in CommentService<\/code>'e ihtiya\u00e7 duyabilir. DI kullanarak, bu iki servis aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 y\u00f6netebilir ve her bir servisi ayr\u0131 ayr\u0131 test edebiliriz. Bu, kodun daha mod\u00fcler ve daha s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nAngular'da DI'n\u0131n Avantajlar\u0131<\/h2>\n
\u0130leri D\u00fczey Konular<\/h2>\n
\u00c7oklu Provider'lar<\/h3>\n