{"id":33626,"date":"2025-11-05T07:40:52","date_gmt":"2025-11-05T04:40:52","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33626"},"modified":"2025-11-05T07:40:52","modified_gmt":"2025-11-05T04:40:52","slug":"angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/","title":{"rendered":"Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber<\/h2>\n

Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir \u00e7er\u00e7evedir. Bu \u00e7er\u00e7evenin temel ta\u015flar\u0131ndan biri, uygulaman\u0131n esnekli\u011fini, test edilebilirli\u011fini ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131ran Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (Dependency Injection – DI) mekanizmas\u0131d\u0131r. DI, bir s\u0131n\u0131f\u0131n ihtiya\u00e7 duydu\u011fu ba\u011f\u0131ml\u0131l\u0131klar\u0131 (di\u011fer s\u0131n\u0131flar veya hizmetler) do\u011frudan olu\u015fturmak yerine, d\u0131\u015far\u0131dan sa\u011flamas\u0131n\u0131 sa\u011flayan bir tasar\u0131m desenidir. Bu makalede, Angular’daki ba\u011f\u0131ml\u0131l\u0131k enjeksiyonunun derinliklerine inecek, temel kavramlar\u0131ndan geli\u015fmi\u015f kullan\u0131m senaryolar\u0131na kadar her y\u00f6n\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Giri\u015f: Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu Nedir ve Neden \u00d6nemlidir?<\/h3>\n

Yaz\u0131l\u0131m geli\u015ftirmede, bir s\u0131n\u0131f\u0131n i\u015flevini yerine getirebilmek i\u00e7in ba\u015fka bir s\u0131n\u0131f\u0131n veya mod\u00fcl\u00fcn i\u015flevselli\u011fine ihtiya\u00e7 duymas\u0131 olduk\u00e7a yayg\u0131nd\u0131r. Bu “ihtiya\u00e7 duyulan” di\u011fer s\u0131n\u0131f veya mod\u00fcle “ba\u011f\u0131ml\u0131l\u0131k” denir. Geleneksel yakla\u015f\u0131mlarda, bir s\u0131n\u0131f ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 genellikle kendi i\u00e7inde olu\u015fturur veya do\u011frudan referans al\u0131r. Ancak bu durum, s\u0131n\u0131flar aras\u0131nda s\u0131k\u0131 bir ba\u011f (tight coupling) olu\u015fturur. Bu s\u0131k\u0131 ba\u011f, kodun test edilmesini zorla\u015ft\u0131r\u0131r, yeniden kullan\u0131labilirli\u011fini azalt\u0131r ve uygulaman\u0131n bak\u0131m\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131r\u0131r.<\/p>\n

Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu, bu sorunu \u00e7\u00f6zmek i\u00e7in ortaya \u00e7\u0131km\u0131\u015f bir prensiptir. DI ile bir s\u0131n\u0131f, ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 do\u011frudan kendisi olu\u015fturmak yerine, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131n d\u0131\u015far\u0131dan (bir enjekt\u00f6r taraf\u0131ndan) kendisine “enjekte” edilmesini bekler. Bu sayede, s\u0131n\u0131flar ba\u011f\u0131ml\u0131l\u0131klar\u0131ndan haberdar olmak zorunda kalmaz, sadece onlara ihtiya\u00e7 duyduklar\u0131n\u0131 belirtirler. Bu yakla\u015f\u0131m, kodun daha esnek, mod\u00fcler ve test edilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n

Angular, bu prensibi \u00e7ekirde\u011fine entegre ederek geli\u015ftiricilere b\u00fcy\u00fck kolayl\u0131klar sunar. Angular uygulamalar\u0131nda servisler, bile\u015fenler ve hatta di\u011fer mod\u00fcller birbirlerine ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu arac\u0131l\u0131\u011f\u0131yla ba\u011flan\u0131r. Bu sayede, uygulaman\u0131n farkl\u0131 par\u00e7alar\u0131 aras\u0131nda gev\u015fek ba\u011fl\u0131l\u0131k sa\u011flan\u0131r ve uygulaman\u0131n \u00f6l\u00e7eklenmesi, test edilmesi ve bak\u0131m\u0131 \u00e7ok daha y\u00f6netilebilir hale gelir.<\/p>\n

Temel Kavramlar<\/h3>\n

Angular’daki ba\u011f\u0131ml\u0131l\u0131k enjeksiyonunu anlamak i\u00e7in baz\u0131 temel terimleri netle\u015ftirmek \u00f6nemlidir:<\/p>\n

Ba\u011f\u0131ml\u0131l\u0131k (Dependency)<\/h4>\n

Bir s\u0131n\u0131f\u0131n i\u015flevini yerine getirebilmek i\u00e7in ihtiya\u00e7 duydu\u011fu ba\u015fka bir s\u0131n\u0131f, hizmet, de\u011fer veya fonksiyon. \u00d6rne\u011fin, bir UserService<\/code> s\u0131n\u0131f\u0131, kullan\u0131c\u0131 verilerini almak i\u00e7in bir HttpClient<\/code>‘a ba\u011f\u0131ml\u0131 olabilir. Bu durumda HttpClient<\/code>, UserService<\/code>‘in bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131d\u0131r.<\/p>\n

Enjeksiyon (Injection)<\/h4>\n

Bir s\u0131n\u0131f\u0131n ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 d\u0131\u015far\u0131dan alma s\u00fcreci. Angular’da bu genellikle s\u0131n\u0131f\u0131n yap\u0131c\u0131 (constructor) metodu arac\u0131l\u0131\u011f\u0131yla veya daha yeni inject()<\/code> fonksiyonu ile ger\u00e7ekle\u015fir.<\/p>\n

Enjekt\u00f6r (Injector)<\/h4>\n

Ba\u011f\u0131ml\u0131l\u0131klar\u0131 olu\u015fturan ve sa\u011flayan mekanizma. Angular’da her bile\u015fen, direktif ve mod\u00fcl, kendi enjekt\u00f6r\u00fcne sahiptir ve bu enjekt\u00f6rler hiyerar\u015fik bir yap\u0131 olu\u015fturur. Bir ba\u011f\u0131ml\u0131l\u0131k istendi\u011finde, enjekt\u00f6r bu ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 nas\u0131l olu\u015fturaca\u011f\u0131n\u0131 (bir sa\u011flay\u0131c\u0131ya bakarak) bilir ve ilgili \u00f6rne\u011fi d\u00f6nd\u00fcr\u00fcr. E\u011fer kendi enjekt\u00f6r\u00fcnde bulamazsa, \u00fcst enjekt\u00f6rlere do\u011fru arama yapar.<\/p>\n

Sa\u011flay\u0131c\u0131 (Provider)<\/h4>\n

Bir enjekt\u00f6re belirli bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 veya sa\u011flanaca\u011f\u0131n\u0131 \u00f6\u011freten bir tariftir. Sa\u011flay\u0131c\u0131lar, bir token (genellikle bir s\u0131n\u0131f\u0131n kendisi) ile bu token’a kar\u015f\u0131l\u0131k gelen bir de\u011fer veya s\u0131n\u0131f \u00f6rne\u011fi aras\u0131ndaki e\u015fle\u015fmeyi tan\u0131mlar. \u00d6rne\u011fin, UserService<\/code> s\u0131n\u0131f\u0131n\u0131n bir \u00f6rne\u011finin nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 belirtir.<\/p>\n

Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n

Angular’\u0131n DI sistemi, hiyerar\u015fik bir yap\u0131 \u00fczerine kuruludur ve bu, uygulaman\u0131n farkl\u0131 seviyelerinde farkl\u0131 ba\u011f\u0131ml\u0131l\u0131k \u00f6rnekleri sa\u011flamam\u0131za olanak tan\u0131r.<\/p>\n

Hiyerar\u015fik Enjeksiyon Sistemi<\/h4>\n

Angular’da bir enjekt\u00f6r a\u011fac\u0131 bulunur. Bu a\u011fa\u00e7, uygulaman\u0131n bile\u015fen a\u011fac\u0131na paraleldir. Her NgModule<\/code> ve her Component<\/code> kendi enjekt\u00f6r\u00fcne sahip olabilir. Bir bile\u015fen bir ba\u011f\u0131ml\u0131l\u0131k istedi\u011finde, Angular \u00f6nce o bile\u015fenin kendi enjekt\u00f6r\u00fcnde bu ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 arar. Bulamazsa, \u00fcst bile\u015fenin enjekt\u00f6r\u00fcne, oradan da mod\u00fcl\u00fcn enjekt\u00f6r\u00fcne ve en sonunda k\u00f6k (root) enjekt\u00f6r\u00fcne kadar yukar\u0131 do\u011fru arama yapar.<\/p>\n

Bu hiyerar\u015fi, ba\u011f\u0131ml\u0131l\u0131klar\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve kapsam\u0131n\u0131 kontrol etmek i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r:<\/p>\n

* Root Seviyesi (providedIn: 'root'<\/code>):<\/strong> Bir servis, uygulaman\u0131n k\u00f6k enjekt\u00f6r\u00fcnde sa\u011fland\u0131\u011f\u0131nda, t\u00fcm uygulama boyunca tek bir \u00f6rne\u011fi (singleton) olur. Bu, uygulaman\u0131n her yerinden eri\u015filebilen ve durumunu payla\u015fan servisler i\u00e7in idealdir. Angular 6 ve sonras\u0131 ile birlikte, providedIn: 'root'<\/code> kullan\u0131m\u0131 yayg\u0131nla\u015fm\u0131\u015ft\u0131r ve bu, kullan\u0131lmayan servislerin \u00fcretim paketine dahil edilmemesini (tree-shaking) sa\u011flayarak uygulama boyutunu optimize eder.
\n* Mod\u00fcl Seviyesi (@NgModule<\/code>‘daki providers<\/code> dizisi):<\/strong> Bir mod\u00fcl\u00fcn providers<\/code> dizisinde tan\u0131mlanan servisler, o mod\u00fcl i\u00e7inde ve o mod\u00fcl\u00fc i\u00e7e aktaran (import eden) mod\u00fcller taraf\u0131ndan kullan\u0131labilir. E\u011fer bir mod\u00fcl birden fazla kez y\u00fcklenirse (\u00f6rne\u011fin lazy-loaded mod\u00fcller), her y\u00fcklemede servisin yeni bir \u00f6rne\u011fi olu\u015fturulabilir.
\n* Bile\u015fen Seviyesi (@Component<\/code>‘daki providers<\/code> dizisi):<\/strong> Bir bile\u015fenin providers<\/code> dizisinde tan\u0131mlanan servisler, sadece o bile\u015fen ve onun alt bile\u015fenleri i\u00e7in ge\u00e7erlidir. Her bile\u015fen \u00f6rne\u011fi kendi servisini al\u0131r, yani her bile\u015fen \u00f6rne\u011fi i\u00e7in servisin yeni bir \u00f6rne\u011fi olu\u015fturulur. Bu, bile\u015fene \u00f6zg\u00fc durum y\u00f6netimi gerektiren servisler i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n

Sa\u011flay\u0131c\u0131lar\u0131n Tan\u0131mlanmas\u0131<\/h4>\n

Bir servisi Angular’\u0131n DI sistemine kaydetmek i\u00e7in sa\u011flay\u0131c\u0131lar\u0131 kullan\u0131r\u0131z.<\/p>\n

* @Injectable()<\/code> Dekorasyonu:<\/strong> Bir s\u0131n\u0131f\u0131n enjekte edilebilir bir servis oldu\u011funu belirtmek i\u00e7in kullan\u0131l\u0131r. Bu dekorat\u00f6r, Angular’\u0131n meta veri yayma mekanizmas\u0131n\u0131n bir par\u00e7as\u0131d\u0131r ve \u00f6zellikle providedIn: 'root'<\/code> gibi yap\u0131land\u0131rmalarla birlikte tree-shaking optimizasyonlar\u0131 i\u00e7in \u00f6nemlidir.<\/p>\n

import { Injectable } from '@angular\/core';\n\n    @Injectable({\n      providedIn: 'root' \/\/ Servisin uygulaman\u0131n k\u00f6k enjekt\u00f6r\u00fcnde sa\u011flanaca\u011f\u0131n\u0131 belirtir\n    })\n    export class UserService {\n      \/\/ ...\n    }<\/code><\/pre>\n
    providedIn: 'root'<\/code> kullanmak, servisi do\u011frudan k\u00f6k enjekt\u00f6r\u00fcne kaydeder ve mod\u00fcl\u00fcn providers<\/code> dizisinde manuel olarak belirtme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Bu, servisin sadece ger\u00e7ekten kullan\u0131ld\u0131\u011f\u0131nda uygulamaya dahil edilmesini sa\u011flayarak bundle boyutunu k\u00fc\u00e7\u00fclt\u00fcr.<\/p>\n
*   @Component()<\/code> veya @NgModule()<\/code> i\u00e7indeki providers<\/code> Dizisi:<\/strong> Daha eski Angular s\u00fcr\u00fcmlerinde veya belirli kapsamlar i\u00e7in, servisler do\u011frudan NgModule<\/code> veya Component<\/code> dekorat\u00f6rlerinin providers<\/code> dizisinde tan\u0131mlan\u0131rd\u0131.<\/p>\n
\/\/ app.module.ts\n    import { NgModule } from '@angular\/core';\n    import { UserService } from '.\/user.service';\n\n    @NgModule({\n      providers: [UserService], \/\/ UserService mod\u00fcl seviyesinde sa\u011flan\u0131r\n      \/\/ ...\n    })\n    export class AppModule { }\n\n    \/\/ my-component.ts\n    import { Component } from '@angular\/core';\n    import { MyComponentService } from '.\/my-component.service';\n\n    @Component({\n      selector: 'app-my-component',\n      templateUrl: '.\/my-component.component.html',\n      providers: [MyComponentService] \/\/ MyComponentService sadece bu bile\u015fen i\u00e7in sa\u011flan\u0131r\n    })\n    export class MyComponent { }<\/code><\/pre>\n
    Bu yakla\u015f\u0131mlar hala ge\u00e7erli olmakla birlikte, providedIn: 'root'<\/code> modern Angular uygulamalar\u0131nda servisler i\u00e7in tercih edilen y\u00f6ntemdir.<\/p>\n
Sa\u011flay\u0131c\u0131 T\u00fcrleri<\/h3>\n
Angular, bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n nas\u0131l sa\u011flanaca\u011f\u0131n\u0131 kontrol etmek i\u00e7in \u00e7e\u015fitli sa\u011flay\u0131c\u0131 yap\u0131land\u0131rmalar\u0131 sunar. Her birinin farkl\u0131 kullan\u0131m durumlar\u0131 vard\u0131r:<\/p>\n
useClass<\/code><\/h4>\n
Bu, bir token (genellikle bir s\u0131n\u0131f tipi) i\u00e7in farkl\u0131 bir s\u0131n\u0131f\u0131n \u00f6rne\u011fini sa\u011flaman\u0131za olanak tan\u0131r. Genellikle test ortamlar\u0131nda veya uygulaman\u0131n farkl\u0131 davran\u0131\u015flar sergilemesi gereken durumlarda kullan\u0131l\u0131r.<\/p>\n
\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { UserService } from '.\/user.service';\nimport { MockUserService } from '.\/mock-user.service';\n\n@NgModule({\n  providers: [\n    { provide: UserService, useClass: MockUserService } \/\/ UserService istendi\u011finde MockUserService \u00f6rne\u011fi ver\n  ],\n  \/\/ ...\n})\nexport class AppModule { }<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, bir bile\u015fen UserService<\/code>‘i enjekte etmek istedi\u011finde, Angular asl\u0131nda MockUserService<\/code>‘in bir \u00f6rne\u011fini sa\u011flayacakt\u0131r.<\/p>\n
useValue<\/code><\/h4>\n
Sabit bir de\u011fer, nesne veya fonksiyon sa\u011flamak i\u00e7in kullan\u0131l\u0131r. API anahtarlar\u0131, konfig\u00fcrasyon nesneleri veya basit veri yap\u0131lar\u0131 gibi durumlarda idealdir.<\/p>\n
\/\/ app.module.ts\nimport { NgModule, InjectionToken } from '@angular\/core';\n\nexport const APP_CONFIG = new InjectionToken('app.config');\n\n@NgModule({\n  providers: [\n    {\n      provide: APP_CONFIG,\n      useValue: {\n        apiUrl: 'https:\/\/api.example.com',\n        version: '1.0.0'\n      }\n    }\n  ],\n  \/\/ ...\n})\nexport class AppModule { }<\/code><\/pre>\n
Bu konfig\u00fcrasyonu enjekte etmek i\u00e7in:<\/p>\n
import { Component, Inject } from '@angular\/core';\nimport { APP_CONFIG } from '..\/app.module';\n\n@Component({ \/ ... <\/em>\/ })\nexport class MyComponent {\n  constructor(@Inject(APP_CONFIG) private config: any) {\n    console.log(this.config.apiUrl); \/\/ https:\/\/api.example.com\n  }\n}<\/code><\/pre>\n
useFactory<\/code><\/h4>\n
Bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n de\u011ferini dinamik olarak olu\u015fturmak i\u00e7in bir fabrika fonksiyonu kullanman\u0131z\u0131 sa\u011flar. Bu, ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n olu\u015fturulmas\u0131 s\u0131ras\u0131nda karma\u015f\u0131k mant\u0131k y\u00fcr\u00fctmeniz gerekti\u011finde veya ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n di\u011fer ba\u011f\u0131ml\u0131l\u0131klara ihtiya\u00e7 duydu\u011fu durumlarda kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { LoggerService } from '.\/logger.service';\nimport { EnvironmentService } from '.\/environment.service';\n\nexport function loggerFactory(envService: EnvironmentService) {\n  return new LoggerService(envService.isProduction());\n}\n\n@NgModule({\n  providers: [\n    EnvironmentService,\n    {\n      provide: LoggerService,\n      useFactory: loggerFactory,\n      deps: [EnvironmentService] \/\/ Fabrika fonksiyonunun ihtiya\u00e7 duydu\u011fu ba\u011f\u0131ml\u0131l\u0131klar\n    }\n  ],\n  \/\/ ...\n})\nexport class AppModule { }<\/code><\/pre>\n
Burada loggerFactory<\/code> fonksiyonu, EnvironmentService<\/code>‘in bir \u00f6rne\u011fine ihtiya\u00e7 duyar. deps<\/code> dizisi, Angular’a bu ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 nas\u0131l sa\u011flayaca\u011f\u0131n\u0131 s\u00f6yler.<\/p>\n
useExisting<\/code><\/h4>\n
Mevcut bir ba\u011f\u0131ml\u0131l\u0131\u011fa bir takma ad (alias) olu\u015fturman\u0131z\u0131 sa\u011flar. Bu, farkl\u0131 bir token kullanarak zaten sa\u011flanm\u0131\u015f bir ba\u011f\u0131ml\u0131l\u0131\u011fa referans vermek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { NewLoggerService } from '.\/new-logger.service';\nimport { OldLoggerService } from '.\/old-logger.service';\n\n@NgModule({\n  providers: [\n    NewLoggerService, \/\/ Yeni logger servisini sa\u011fla\n    { provide: OldLoggerService, useExisting: NewLoggerService } \/\/ OldLoggerService istendi\u011finde NewLoggerService'i ver\n  ],\n  \/\/ ...\n})\nexport class AppModule { }<\/code><\/pre>\n
Bu sayede, OldLoggerService<\/code>‘i enjekte eden eski kodlar, asl\u0131nda NewLoggerService<\/code>‘in \u00f6rne\u011fini al\u0131rken, kodu refactor etme s\u00fcrecinde uyumluluk sa\u011flanabilir.<\/p>\n
Ba\u011f\u0131ml\u0131l\u0131klar\u0131n Enjekte Edilmesi<\/h3>\n
Angular’da ba\u011f\u0131ml\u0131l\u0131klar\u0131 enjekte etmenin birka\u00e7 yolu vard\u0131r.<\/p>\n
Constructor Enjeksiyonu<\/h4>\n
Bu, Angular’da ba\u011f\u0131ml\u0131l\u0131klar\u0131 enjekte etmenin en yayg\u0131n ve \u00f6nerilen yoludur. Bir s\u0131n\u0131f\u0131n yap\u0131c\u0131 metodunda (constructor) ba\u011f\u0131ml\u0131l\u0131klar\u0131 tip ipucu (type hint) ile belirtirsiniz. Angular, bu tipleri kullanarak otomatik olarak ilgili servis \u00f6rneklerini bulur ve enjekte eder.<\/p>\n
import { Component } from '@angular\/core';\nimport { UserService } from '.\/user.service';\nimport { AuthService } from '.\/auth.service';\n\n@Component({\n  selector: 'app-dashboard',\n  templateUrl: '.\/dashboard.component.html',\n  styleUrls: ['.\/dashboard.component.css']\n})\nexport class DashboardComponent {\n  constructor(private userService: UserService, public authService: AuthService) {\n    \/\/ userService ve authService burada kullan\u0131ma haz\u0131rd\u0131r\n    console.log('User service initialized:', this.userService);\n  }\n}<\/code><\/pre>\n
Angular, yap\u0131c\u0131 metodundaki parametrelerin tiplerine bakar (UserService<\/code>, AuthService<\/code>) ve uygun sa\u011flay\u0131c\u0131lar\u0131 kullanarak bu tiplerdeki servislerin \u00f6rneklerini olu\u015fturur veya bulur. private<\/code> veya public<\/code> eri\u015fim belirte\u00e7lerini kullanmak, enjekte edilen ba\u011f\u0131ml\u0131l\u0131klar\u0131n otomatik olarak s\u0131n\u0131f\u0131n bir \u00f6zelli\u011fi haline gelmesini sa\u011flar.<\/p>\n
@Inject()<\/code> Dekorasyonu<\/h4>\n
Bazen enjekte etmek istedi\u011finiz ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n bir s\u0131n\u0131f tipi olmad\u0131\u011f\u0131n\u0131 (\u00f6rne\u011fin bir InjectionToken<\/code> veya bir de\u011fer oldu\u011funu) veya tip bilgisinin derleme zaman\u0131nda mevcut olmad\u0131\u011f\u0131n\u0131 belirtmeniz gerekebilir. Bu durumlarda @Inject()<\/code> dekorat\u00f6r\u00fcn\u00fc kullan\u0131rs\u0131n\u0131z.<\/p>\n
import { Component, Inject, InjectionToken } from '@angular\/core';\n\nexport const API_URL = new InjectionToken('API_URL');\n\n@Component({\n  selector: 'app-api-client',\n  template: API URL: {{ apiUrl }}<\/code>\n})\nexport class ApiClientComponent {\n  constructor(@Inject(API_URL) public apiUrl: string) {\n    console.log(this.apiUrl);\n  }\n}<\/code><\/pre>\n
Bu \u00f6rnekte, API_URL<\/code> bir InjectionToken<\/code> oldu\u011fu i\u00e7in do\u011frudan bir tip ipucu olarak kullan\u0131lamaz. @Inject(API_URL)<\/code> dekorat\u00f6r\u00fc, Angular’a API_URL<\/code> token’\u0131na kar\u015f\u0131l\u0131k gelen de\u011feri enjekte etmesini s\u00f6yler.<\/p>\n
inject()<\/code> Fonksiyonu (Angular 14+)<\/h4>\n
Angular 14 ile tan\u0131t\u0131lan inject()<\/code> fonksiyonu, constructor d\u0131\u015f\u0131nda ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu yapmaya olanak tan\u0131yan daha esnek ve modern bir yakla\u015f\u0131md\u0131r. Bu, fonksiyonlar, field initializer’lar veya hatta Angular’\u0131n kendi ya\u015fam d\u00f6ng\u00fcs\u00fc hook’lar\u0131 i\u00e7inde ba\u011f\u0131ml\u0131l\u0131klar\u0131 almay\u0131 m\u00fcmk\u00fcn k\u0131lar.<\/p>\n
import { Component, inject } from '@angular\/core';\nimport { UserService } from '.\/user.service';\n\n@Component({\n  selector: 'app-user-profile',\n  templateUrl: '.\/user-profile.component.html'\n})\nexport class UserProfileComponent {\n  \/\/ Field initializer ile enjeksiyon\n  private userService = inject(UserService);\n\n  \/\/ Bir metot i\u00e7inde veya ya\u015fam d\u00f6ng\u00fcs\u00fc hook'unda da kullan\u0131labilir\n  ngOnInit() {\n    const data = this.userService.getUserData();\n    console.log(data);\n  }\n\n  \/\/ Fonksiyon i\u00e7inde kullan\u0131m \u00f6rne\u011fi (bir yard\u0131mc\u0131 fonksiyon)\n  getUserName(): string {\n    return this.userService.getUserData().name;\n  }\n}<\/code><\/pre>\n
inject()<\/code> fonksiyonu, genellikle bir enjeksiyon ba\u011flam\u0131 (injection context) i\u00e7inde \u00e7a\u011fr\u0131lmal\u0131d\u0131r; bu da bir constructor, bir field initializer veya bir Angular ya\u015fam d\u00f6ng\u00fcs\u00fc hook’u gibi yerler anlam\u0131na gelir. Bu fonksiyon, ba\u011f\u0131ml\u0131l\u0131klar\u0131 daha az boilerplate ile ve daha esnek bir \u015fekilde alman\u0131z\u0131 sa\u011flar.<\/p>\n
Geli\u015fmi\u015f Konular ve En \u0130yi Uygulamalar<\/h3>\n
Angular DI sistemi, temel kullan\u0131m\u0131n \u00f6tesinde bir\u00e7ok geli\u015fmi\u015f \u00f6zelli\u011fi ve en iyi uygulama prensibini bar\u0131nd\u0131r\u0131r.<\/p>\n
InjectionToken<\/code> Kullan\u0131m\u0131<\/h4>\n
InjectionToken<\/code>‘lar, s\u0131n\u0131f olmayan ba\u011f\u0131ml\u0131l\u0131klar\u0131 (\u00f6rne\u011fin stringler, say\u0131lar, konfig\u00fcrasyon nesneleri) tip g\u00fcvenli bir \u015fekilde enjekte etmek i\u00e7in kullan\u0131l\u0131r. Ayr\u0131ca, birden fazla sa\u011flay\u0131c\u0131n\u0131n ayn\u0131 token i\u00e7in de\u011fer sa\u011flamas\u0131na (multi-providers) olanak tan\u0131r.<\/p>\n
import { InjectionToken } from '@angular\/core';\n\nexport const FEATURE_FLAGS = new InjectionToken('feature.flags');\n\n\/\/ app.module.ts\n@NgModule({\n  providers: [\n    { provide: FEATURE_FLAGS, useValue: ['new-ui', 'beta-feature'], multi: true },\n    { provide: FEATURE_FLAGS, useValue: ['experimental-mode'], multi: true }\n  ]\n})\nexport class AppModule { }\n\n\/\/ Bir bile\u015fende enjekte etme\nimport { Component, Inject } from '@angular\/core';\nimport { FEATURE_FLAGS } from '.\/app.module';\n\n@Component({ \/ ... <\/em>\/ })\nexport class FeatureComponent {\n  constructor(@Inject(FEATURE_FLAGS) private flags: string[][]) {\n    \/\/ flags de\u011feri: [['new-ui', 'beta-feature'], ['experimental-mode']]\n    \/\/ multi: true kullan\u0131ld\u0131\u011f\u0131nda, her useValue bir dizi olarak toplan\u0131r.\n    \/\/ D\u00fcz bir dizi almak isterseniz, factory fonksiyonu kullanman\u0131z gerekebilir.\n  }\n}<\/code><\/pre>\n
multi: true<\/code> ile farkl\u0131 sa\u011flay\u0131c\u0131lardan gelen de\u011ferler bir dizi i\u00e7inde toplan\u0131r. Bu, eklenti mimarileri veya birden fazla mod\u00fcl\u00fcn ayn\u0131 t\u00fcrden konfig\u00fcrasyon sa\u011flamas\u0131 gereken durumlarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\u0130ste\u011fe Ba\u011fl\u0131 Ba\u011f\u0131ml\u0131l\u0131klar (@Optional<\/code>)<\/h4>\n
Bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n her zaman mevcut olmayabilece\u011fi durumlar i\u00e7in @Optional()<\/code> dekorat\u00f6r\u00fcn\u00fc kullanabilirsiniz. E\u011fer ba\u011f\u0131ml\u0131l\u0131k bulunamazsa, Angular hata atmak yerine null<\/code> de\u011feri enjekte eder.<\/p>\n
import { Component, Optional } from '@angular\/core';\nimport { LoggerService } from '.\/logger.service';\n\n@Component({ \/ ... <\/em>\/ })\nexport class MyComponent {\n  constructor(@Optional() private logger: LoggerService) {\n    if (this.logger) {\n      this.logger.log('Logger is available.');\n    } else {\n      console.warn('LoggerService is not provided.');\n    }\n  }\n}<\/code><\/pre>\n
Kendi Kendine Sa\u011flama (@Self<\/code>, @Host<\/code>, @SkipSelf<\/code>)<\/h4>\n
Enjekt\u00f6r hiyerar\u015fisinde ba\u011f\u0131ml\u0131l\u0131k arama davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in @Self()<\/code>, @Host()<\/code> ve @SkipSelf()<\/code> dekorat\u00f6rlerini kullanabilirsiniz.<\/p>\n
*   @Self()<\/code>:<\/strong> Angular’a sadece bile\u015fenin kendi enjekt\u00f6r\u00fcnde ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 aramas\u0131n\u0131 s\u00f6yler. \u00dcst enjekt\u00f6rlere bak\u0131lmaz.
\n*   @Host()<\/code>:<\/strong> Angular’a bile\u015fenin kendi enjekt\u00f6r\u00fcnde ve “host” bile\u015fenin enjekt\u00f6r\u00fcnde (yani bile\u015fenin kendisinin tan\u0131mland\u0131\u011f\u0131 bile\u015fen) ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 aramas\u0131n\u0131 s\u00f6yler. Host bile\u015fenin \u00fcst\u00fcndeki enjekt\u00f6rlere bak\u0131lmaz.
\n*   @SkipSelf()<\/code>:<\/strong> Angular’a bile\u015fenin kendi enjekt\u00f6r\u00fcn\u00fc atlay\u0131p, ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 \u00fcst enjekt\u00f6rlerden itibaren aramas\u0131n\u0131 s\u00f6yler. Bu, bir bile\u015fenin kendi \u00fcst\u00fcndeki bir servisin \u00f6rne\u011fini almas\u0131n\u0131 ve kendi \u00f6rne\u011fini kullanmamas\u0131n\u0131 istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
import { Component, Optional, Self, Host, SkipSelf } from '@angular\/core';\nimport { UserService } from '.\/user.service';\n\n@Component({\n  selector: 'app-child',\n  template: \n    
User Service (Self): {{ selfUserService ? 'Available' : 'Not Available' }}<\/p>\n    
User Service (Host): {{ hostUserService ? 'Available' : 'Not Available' }}<\/p>\n    
User Service (SkipSelf): {{ skipSelfUserService ? 'Available' : 'Not Available' }}<\/p>\n  <\/code>,\n  providers: [{ provide: UserService, useValue: { name: 'Child User' } }] \/\/ Child i\u00e7in kendi UserService'i\n})\nexport class ChildComponent {\n  constructor(\n    @Optional() @Self() public selfUserService: UserService,\n    @Optional() @Host() public hostUserService: UserService,\n    @Optional() @SkipSelf() public skipSelfUserService: UserService\n  ) {\n    console.log('Self User:', this.selfUserService); \/\/ Child'\u0131n kendi UserService'i\n    console.log('Host User:', this.hostUserService); \/\/ Child'\u0131n kendi UserService'i (\u00e7\u00fcnk\u00fc Child kendisi host)\n    console.log('SkipSelf User:', this.skipSelfUserService); \/\/ Parent'\u0131n UserService'i (e\u011fer varsa)\n  }\n}<\/code><\/pre>\n
Bu dekorat\u00f6rler, ba\u011f\u0131ml\u0131l\u0131klar\u0131n kapsam\u0131n\u0131 hassas bir \u015fekilde kontrol etmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Dairesel Ba\u011f\u0131ml\u0131l\u0131klar (forwardRef<\/code>)<\/h4>\n
\u0130ki s\u0131n\u0131f\u0131n birbirine do\u011frudan veya dolayl\u0131 olarak ba\u011f\u0131ml\u0131 oldu\u011fu durumlarda dairesel ba\u011f\u0131ml\u0131l\u0131klar olu\u015fabilir. Angular’\u0131n derleme s\u00fcrecinde bu t\u00fcr durumlar sorun yaratabilir. forwardRef()<\/code> fonksiyonu, bu t\u00fcr dairesel ba\u011f\u0131ml\u0131l\u0131klar\u0131 \u00e7\u00f6zmek i\u00e7in bir referans\u0131 ileriye ertelemenizi sa\u011flar.<\/p>\n
import { forwardRef, Injectable, Inject } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class ServiceA {\n  constructor(@Inject(forwardRef(() => ServiceB)) private serviceB: ServiceB) { }\n  doSomethingA() {\n    this.serviceB.doSomethingB();\n  }\n}\n\n@Injectable({ providedIn: 'root' })\nexport class ServiceB {\n  constructor(@Inject(forwardRef(() => ServiceA)) private serviceA: ServiceA) { }\n  doSomethingB() {\n    this.serviceA.doSomethingA();\n  }\n}<\/code><\/pre>\n
forwardRef()<\/code> kullan\u0131larak, ServiceA<\/code>‘n\u0131n ServiceB<\/code>‘ye ve ServiceB<\/code>‘nin ServiceA<\/code>‘ya olan ba\u011f\u0131ml\u0131l\u0131klar\u0131 derleme zaman\u0131nda do\u011fru bir \u015fekilde \u00e7\u00f6z\u00fclebilir.<\/p>\n
Mod\u00fclerlik ve A\u011fa\u00e7 Sallama (Tree-Shaking)<\/h4>\n
providedIn: 'root'<\/code> veya providedIn: 'any'<\/code> ile servisleri sa\u011flamak, Angular’\u0131n tree-shaking optimizasyonlar\u0131ndan tam olarak yararlanmas\u0131n\u0131 sa\u011flar. Bu sayede, uygulaman\u0131n hi\u00e7bir yerinde kullan\u0131lmayan servisler nihai \u00fcretim paketine dahil edilmez, bu da uygulama boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde k\u00fc\u00e7\u00fclt\u00fcr.<\/p>\n
*   providedIn: 'root'<\/code>: Uygulaman\u0131n k\u00f6k enjekt\u00f6r\u00fcnde singleton olarak sa\u011flan\u0131r.
\n*   providedIn: 'any'<\/code>: Uygulamadaki herhangi bir lazy-loaded mod\u00fcl taraf\u0131ndan kullan\u0131ld\u0131\u011f\u0131nda, o mod\u00fcl\u00fcn k\u00f6k enjekt\u00f6r\u00fcnde sa\u011flan\u0131r. E\u011fer hi\u00e7bir lazy-loaded mod\u00fcl kullanmazsa ve sadece eagerly-loaded mod\u00fcller kullan\u0131rsa, root<\/code> ile ayn\u0131 davran\u0131\u015f\u0131 g\u00f6sterir.<\/p>\n
Bu modern yakla\u015f\u0131mlar, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda performans ve bundle boyutu a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n
Test Edilebilirlik<\/h4>\n
DI, test yaz\u0131m\u0131n\u0131 ola\u011fan\u00fcst\u00fc derecede kolayla\u015ft\u0131r\u0131r. Bir bile\u015feni veya servisi test ederken, ger\u00e7ek ba\u011f\u0131ml\u0131l\u0131klar\u0131 yerine sahte (mock) veya casus (spy) ba\u011f\u0131ml\u0131l\u0131klar enjekte edebilirsiniz. Bu, test etti\u011finiz birimin di\u011fer ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131ndan veya yan etkilerinden izole edilmesini sa\u011flar.<\/p>\n
\/\/ user.service.ts\n@Injectable({ providedIn: 'root' })\nexport class UserService {\n  getUserData() { return { name: 'Real User' }; }\n}\n\n\/\/ my.component.ts\n@Component({ \/ ... <\/em>\/ })\nexport class MyComponent {\n  constructor(private userService: UserService) {}\n  getDisplayUserName() {\n    return this.userService.getUserData().name;\n  }\n}\n\n\/\/ my.component.spec.ts (Test dosyas\u0131)\nimport { ComponentFixture, TestBed } from '@angular\/core\/testing';\nimport { MyComponent } from '.\/my.component';\nimport { UserService } from '.\/user.service';\n\ndescribe('MyComponent', () => {\n  let component: MyComponent;\n  let fixture: ComponentFixture;\n  let mockUserService: Partial; \/\/ K\u0131smi bir mock\n\n  beforeEach(async () => {\n    mockUserService = {\n      getUserData: () => ({ name: 'Mock User' }) \/\/ Sahte bir metot\n    };\n\n    await TestBed.configureTestingModule({\n      declarations: [MyComponent],\n      providers: [\n        { provide: UserService, useValue: mockUserService } \/\/ Ger\u00e7ek UserService yerine mock'u enjekte et\n      ]\n    }).compileComponents();\n\n    fixture = TestBed.createComponent(MyComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should display mock user name', () => {\n    expect(component.getDisplayUserName()).toBe('Mock User');\n  });\n});<\/code><\/pre>\n
Bu \u00f6rnekte, MyComponent<\/code> test edilirken ger\u00e7ek UserService<\/code> yerine, mockUserService<\/code> ad\u0131nda sahte bir nesne enjekte edilmi\u015ftir. Bu, MyComponent<\/code>‘in UserService<\/code>‘e ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131n testin d\u0131\u015f\u0131nda tutulmas\u0131n\u0131 sa\u011flar ve sadece MyComponent<\/code>‘in kendi mant\u0131\u011f\u0131n\u0131n do\u011fru \u00e7al\u0131\u015f\u0131p \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 kontrol etmemize olanak tan\u0131r.<\/p>\n
Neden Angular Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonunu Kullanmal\u0131y\u0131z?<\/h3>\n
Angular’\u0131n DI sistemi, geli\u015ftiricilere bir dizi \u00f6nemli avantaj sunar:<\/p>\n
*   Gev\u015fek Ba\u011fl\u0131l\u0131k (Loose Coupling):<\/strong> Bile\u015fenler ve servisler aras\u0131ndaki do\u011frudan ba\u011f\u0131ml\u0131l\u0131klar\u0131 azalt\u0131r. Bir s\u0131n\u0131f\u0131n ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kendisi olu\u015fturmak yerine, d\u0131\u015far\u0131dan almas\u0131, o s\u0131n\u0131f\u0131n ba\u011f\u0131ml\u0131l\u0131klar\u0131n i\u00e7 detaylar\u0131ndan habersiz kalmas\u0131n\u0131 sa\u011flar. Bu, kodu daha mod\u00fcler ve y\u00f6netilebilir hale getirir.
\n*   Test Edilebilirlik (Testability):<\/strong> Ba\u011f\u0131ml\u0131l\u0131klar\u0131n kolayca de\u011fi\u015ftirilebilmesi sayesinde birim testleri basitle\u015fir. Ger\u00e7ek servisler yerine sahte (mock) veya casus (spy) ba\u011f\u0131ml\u0131l\u0131klar enjekte ederek, bir bile\u015fenin veya servisin di\u011fer ba\u011f\u0131ml\u0131l\u0131klar\u0131ndan izole bir \u015fekilde test edilmesini sa\u011flayabilirsiniz.
\n*   Yeniden Kullan\u0131labilirlik (Reusability):<\/strong> Servisler, farkl\u0131 bile\u015fenlerde veya mod\u00fcllerde kolayca enjekte edilip kullan\u0131labilir. Ayn\u0131 servis \u00f6rne\u011fini farkl\u0131 yerlerde payla\u015fma veya her kullan\u0131m i\u00e7in yeni bir \u00f6rnek olu\u015fturma esnekli\u011fi sunar.
\n*   Bak\u0131m Kolayl\u0131\u011f\u0131 (Maintainability):<\/strong> Kod taban\u0131n\u0131n anla\u015f\u0131lmas\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclmesini kolayla\u015ft\u0131r\u0131r. Ba\u011f\u0131ml\u0131l\u0131klar a\u00e7\u0131k\u00e7a tan\u0131mland\u0131\u011f\u0131 i\u00e7in, bir s\u0131n\u0131f\u0131n neye ihtiya\u00e7 duydu\u011funu anlamak daha kolayd\u0131r. De\u011fi\u015fiklikler bir yerde yap\u0131ld\u0131\u011f\u0131nda, bu de\u011fi\u015fikliklerin di\u011fer bile\u015fenleri etkileme olas\u0131l\u0131\u011f\u0131 azal\u0131r.
\n*   Esneklik (Flexibility):<\/strong> Uygulaman\u0131n davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in farkl\u0131 uygulamalar veya konfig\u00fcrasyonlar enjekte edilebilir. \u00d6rne\u011fin, geli\u015ftirme ortam\u0131nda bir mock servisi, \u00fcretim ortam\u0131nda ise ger\u00e7ek bir servisi kullanabilirsiniz.<\/p>\n
Sonu\u00e7<\/h3>\n
Angular’daki Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu, modern, \u00f6l\u00e7eklenebilir ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirmenin temel ta\u015f\u0131d\u0131r. Gev\u015fek ba\u011fl\u0131l\u0131k, \u00fcst\u00fcn test edilebilirlik, y\u00fcksek yeniden kullan\u0131labilirlik ve kolay bak\u0131m gibi avantajlar sunarak geli\u015ftiricilerin daha kaliteli ve y\u00f6netilebilir kod yazmas\u0131na olanak tan\u0131r. Angular’\u0131n hiyerar\u015fik enjekt\u00f6r sistemi, \u00e7e\u015fitli sa\u011flay\u0131c\u0131 t\u00fcrleri ve @Injectable()<\/code>, @Optional()<\/code>, inject()<\/code> gibi g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131 sayesinde, ba\u011f\u0131ml\u0131l\u0131klar\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve kapsam\u0131n\u0131 hassas bir \u015fekilde kontrol edebilirsiniz.<\/p>\n
Angular geli\u015ftiricileri i\u00e7in Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu prensiplerini ve Angular’\u0131n bu prensibi nas\u0131l uygulad\u0131\u011f\u0131n\u0131 derinlemesine anlamak, \u00e7er\u00e7eveden en iyi \u015fekilde yararlanman\u0131n ve karma\u015f\u0131k uygulamalar\u0131 ba\u015far\u0131yla in\u015fa etmenin anahtar\u0131d\u0131r. Bu bilgiyle donanarak, daha sa\u011flam, esnek ve bak\u0131m\u0131 kolay Angular uygulamalar\u0131 geli\u015ftirebilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber\nAngular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir \u00e7er\u00e7eved","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-33626","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"Angular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir \u00e7er\u00e7eved\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-05T04:40:52+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-11-05T04:40:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/\"},\"wordCount\":2814,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/\",\"name\":\"Angular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-05T04:40:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber","og_description":"Angular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir \u00e7er\u00e7eved","og_url":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-05T04:40:52+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber","datePublished":"2025-11-05T04:40:52+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/"},"wordCount":2814,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/","name":"Angular'da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-05T04:40:52+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bagimlilik-enjeksiyonu-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular’da Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33626"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33626\/revisions"}],"predecessor-version":[{"id":33627,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33626\/revisions\/33627"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}