AngularJS'de Dependency Injection ve Servisler

AngularJS, bir JavaScript framework'üdür ve modern web uygulamalarını geliştirmek için kullanılır. AngularJS, modüler ve sürdürülebilir bir kod tabanı oluşturmayı amaçlayan bir dizi özellik sunar. Bu özelliklerden biri de Dependency Injection (Bağımlılık Enjeksiyonu) ve Servislerdir.

Bağımlılık Enjeksiyonu (Dependency Injection)

AngularJS'de Dependency Injection (DI), bir bileşenin başka bir bileşene olan bağımlılıklarını yönetme yöntemidir. Bu, kodun daha okunabilir, test edilebilir ve sürdürülebilir olmasını sağlar. AngularJS, bağımlılıkları enjekte etmek ve yönetmek için iki temel yol sunar: Implicit (İma edilen) ve Explicit (Açıkça belirtilen) enjeksiyon.

Implicit (İma edilen) Enjeksiyon

Implicit enjeksiyon, AngularJS'in otomatik olarak bağımlılıkları belirleyip enjekte ettiği bir süreçtir. Örneğin, bir controller fonksiyonunun parametre isimleri, AngularJS tarafından otomatik olarak çözümlenir ve ilgili servislerle eşleştirilir.

// Implicit enjeksiyon örneği app.controller('MyController', function($scope, MyService) { // $scope ve MyService, AngularJS tarafından otomatik olarak enjekte edilir. });

Explicit (Açıkça belirtilen) Enjeksiyon

Explicit enjeksiyon, bağımlılıkları açıkça belirterek gerçekleşir. Bu yöntem, kodun daha açık ve anlaşılır olmasına olanak tanır.

// Explicit enjeksiyon örneği app.controller('MyController', ['$scope', 'MyService', function($scope, MyService) { // $scope ve MyService, açıkça belirtilen sırayla enjekte edilir. }]);

Servisler

AngularJS'de servisler, uygulama mantığı ve veri paylaşımı için kullanılan en önemli yapıdır. Servisler, bağımsız, tekrar kullanılabilir ve genellikle dependency injection ile yönetilir.

Özel Servisler

Özel servisler, AngularJS tarafından sağlanan veya geliştiriciler tarafından oluşturulan servislerdir. Bu servisler, uygulama içinde farklı bileşenler arasında veri ve mantık paylaşımını sağlar.

// Özel servis örneği app.service('MyService', function() { this.getData = function() { // Servis fonksiyonu }; });

Dahili Servisler

AngularJS, bir dizi dahili servis sağlar. $http, $rootScope, $routeParams gibi servisler, geniş bir işlevsellik yelpazesi sunar ve uygulamanın temelini oluşturur.

// Dahili servis örneği app.controller('MyController', ['$scope', '$http', function($scope, $http) { $http.get('api/data') .then(function(response) { // Veri işleme }); }]);

AngularJS'de Dependency Injection ve Servisler, uygulamanın geliştirilmesi ve bakımı için önemli araçlardır. Doğru kullanıldığında, bu özellikler, kodunuzun daha organize, okunabilir ve test edilebilir olmasına katkı sağlar.

Servislerin Kullanımı ve Avantajları

AngularJS'de servisler, genellikle veri yönetimi, iş mantığı ve diğer ortak görevler için kullanılır. Bu servislerin kullanımının bazı avantajları şunlardır:

1. Kodun Tekrar Kullanılabilirliği

Servisler, uygulama içinde farklı bileşenler arasında paylaşılabilir. Bu, aynı işlevselliği birden çok yerde kullanmanıza olanak tanır ve kodunuzu tekrar kullanılabilir hale getirir.

// Veri paylaşımı için servis kullanımı app.controller('Controller1', ['DataService', function(DataService) { DataService.getData(); }]); app.controller('Controller2', ['DataService', function(DataService) { var data = DataService.getData(); // Veriyi kullanma }]);

2. Bağımlılıkların Yönetimi

Dependency Injection sayesinde, uygulama içindeki bağımlılıklar açıkça belirtilir ve yönetilir. Bu, kodun daha test edilebilir ve sürdürülebilir olmasını sağlar.

// Dependency Injection kullanımı app.controller('MyController', ['$scope', 'MyService', function($scope, MyService) { // $scope ve MyService, açıkça belirtilen sırayla enjekte edilir. }]);

3. Global Veri Paylaşımı

Servisler, uygulama genelinde veri paylaşımını kolaylaştırır. Örneğin, bir kullanıcının oturum durumu, kullanıcı bilgileri gibi veriler servisler aracılığıyla tüm uygulama bileşenleri arasında paylaşılabilir.

// Kullanıcı oturum durumu servisi app.service('AuthService', function() { var isLoggedIn = false; this.login = function() { isLoggedIn = true; }; this.logout = function() { isLoggedIn = false; }; this.isLoggedIn = function() { return isLoggedIn; }; });

4. Uygulama Modülerliği

Servisler, uygulamayı modüler hale getirmenizi sağlar. Her servis, belirli bir işlevselliği yönetir ve bu, uygulamanızın parçalara bölünmesini ve daha kolay yönetilmesini sağlar.

// Modüler servis kullanımı app.service('UserService', function() { // Kullanıcı işlemleri }); app.service('ProductService', function() { // Ürün işlemleri });

AngularJS'de Dependency Injection ve Servisler, uygulama geliştirmenin temel taşlarından biridir. Bu konseptleri anlamak ve doğru bir şekilde kullanmak, kodunuzun daha düzenli, okunabilir ve bakımı daha kolay hale gelmesine katkı sağlar. AngularJS resmi dokümantasyonu ve örnek uygulamalarla bu konuları daha derinlemesine inceleyerek, AngularJS uygulamalarınızı daha etkili bir şekilde geliştirebilirsiniz.

Servislerin İleri Düzey Kullanımları

AngularJS'de servisler, daha karmaşık uygulamaların ihtiyaçlarını karşılamak için çeşitli özellikler ve teknikler sunar. İşte servislerin ileri düzey kullanımlarından bazıları:

1. Servis Ömrü (Service Lifecycle)

AngularJS'de servislerin ömrü, servisin nasıl oluşturulduğu, kullanıldığı ve yok edildiği konularını kapsar. AngularJS, servislerin ömrünü yönetmek için iki temel strateji sunar: "Singleton" ve "Prototype".

• Singleton: AngularJS, varsayılan olarak servisleri singleton olarak oluşturur. Bu, bir servisin yalnızca bir kopyasının oluşturulduğu ve tüm uygulama boyunca paylaşıldığı anlamına gelir.

app.service('MySingletonService', function() { // Singleton servis });

• Prototype: Bir servisin prototip olarak oluşturulması durumunda, her bağlamda yeni bir örnek oluşturulur.

app.service('MyPrototypeService', ['$rootScope', function($rootScope) { // Prototype servis }]);

2. Servisleri Bağımlılıklar Arasında Paylaşma

AngularJS, servisleri bağımlılıklar arasında paylaşmak için $injector servisini kullanmanıza olanak tanır. Bu, servisleri başka bir servise inject etmek ve paylaşmak için kullanışlıdır.

app.service('SharedService', function() { this.sharedData = 'Paylaşılan Veri'; }); app.controller('Controller1', ['$scope', 'SharedService', function($scope, SharedService) { $scope.dataFromService = SharedService.sharedData; }]); app.controller('Controller2', ['$scope', 'SharedService', function($scope, SharedService) { $scope.dataFromService = SharedService.sharedData; }]);

3. Fabrika Fonksiyonları (Factory Functions)

AngularJS'de servis oluşturmanın bir başka yolu, fabrika fonksiyonları kullanmaktır. Bu, daha fazla kontrol ve özelleştirme sağlar.

app.factory('MyFactoryService', function() { var privateData = 'Gizli Veri'; function getData() { return privateData; } return { getData: getData }; });

4. $inject Servisi

AngularJS, $inject servisi aracılığıyla bir fonksiyonun bağımlılıklarını el ile belirleme olanağı sunar. Bu, bağımlılıkları açıkça belirtme ve minimize edilmiş JavaScript dosyalarında daha etkili bir şekilde çalışma imkanı tanır.

app.controller('MyController', MyController); MyController.$inject = ['$scope', 'MyService']; function MyController($scope, MyService) { // Controller kodu }

Bu ileri düzey kullanımlar, AngularJS uygulamanızın karmaşıklığına uygun olarak servislerinizi yönetmenize ve geliştirmenize yardımcı olacaktır. Bu konseptleri daha iyi anlamak ve kullanmak için AngularJS resmi dokümantasyonunu inceleyebilir ve örnek uygulamalar üzerinde pratik yapabilirsiniz.