Çarşamba , 26 Nisan 2017
Anasayfa » JavaScript » AngularJS » AngularJS Özel Servis Oluşturma

AngularJS Özel Servis Oluşturma

AngularJS ile 4 işlemi gerçekleştiren özel bir servis oluşturup angular projemize dahil edeceğiz.  

Öncelikle neden özel servis kullanmak gerekir. Bu konuya değinmek gerekiyor. Yazdığımız servisin farklı projelerde de kullanılabilir olmasına olanak verir. Ana programda yazılması gereken kodu azaltarak kodların okunabilirliğini arttır.

Örneğin ilk olarak servis kullanmadan nasıl yapıldığını ve kodların sonra da servise nasıl dönüştürüldüğünü inceleyeceğiz. Kodların daha rahat okunması için ayrı bir JS dosyası hazırlayıp servis ve ana program kodlarını bu dosya içinde oluşturacağım.

Adım 1: Temel HTML kodlarının oluşturulması

Hesapla butonuna tıklandığında opt değeri ile sayi1 ve sayi2 değerleri toplanıp sonuc modeline yazdırılacaktır.

 

Adım 2: 4 İşlemi gerçekleştiren AngularJS Kodları

$scope.hesapla anahtarına fonksiyon atayıp işlem sonucundaki değeri $scope.sonuc ile modeli güncellemiş oluyoruz.

 

Adım 3: Özel servis iskeletinin oluşturulması

Yazdığımız kod şuan için sade görünüyor olabilir. Ama yazılması gereken metot, model sayısı arttığında kontrol etme zorlaşacaktır.  Farklı bir projede kullanmak gerektiğinde kodları buradan alıp yeni projeye dahil etmeye çalışmak da işimizi zorlaştıracaktır.

Gelelim servis kodlarına, factory metodunu oluşturduğumuz angularjs modulune bağlayarak kodları yazıyoruz.

factory metodu iki tane parametre almaktadır.

  1. parametre servis adını ifade etmektedir.
  2. servis tarafından çalıştırılacak fonksiyonu ifade etmektedir.

Adım 4: dortIslem fonksiyonunun servis içinde oluşturulması

return { ………. } şeklinde tanımadığımız bölüm içine  javascript nesne özellikleri şeklinde metot ve fonksiyonlarımızı oluşturuyoruz.

dortIslem metodunu oluşturduk. Artık Islem servisinde dortIslem adında bir metod var.

 

Adım 5: Servisin angular projesine kaydettirilmesi

Oluşturulan servisin modüle bağlanması gerekir. $http, $scope gibi  servis adımız projeye kaydedilir.

HTML kodlarında hiç bir değişiklik yapmadan $scope.hesapla fonksiyonunda $scope.sonuc  değerine işlem sonucu aktarılıyor. Servis içindeki metod Islem.dortIslem şeklinde kullanılıyor.

Adım 6: Servis ve ana program kodunun birlikte yazılması

Servis kodlarının ve ana program kodları aşağıda oluşturuldu. Dikkat ederseniz $scope.sonuc sadece servisten gelen değeri almaktadır. Bizim için serviste kullanılan metodun kaç parametre aldığı ve dönen değeri ilgilendiriyor.  Servis metodunun çalışması ve içindeki kodlar hakkında bilgimizin olması önemli değil.

Uygulama Dosyasını İndir

Hakkında Hayri

İlginizi Çekebilir

AngularJS Route Yapma

Bu yazıda Angularjs route yapma (Angularjs routing) kavramını inceleyeceğiz.  Bu yazı ve bundan sonraki bir …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir