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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <html> <head> <title>YAZILIM BİLİŞİM</title> <script src="angular.js"></script> <script src="script.js"></script> <link href="tasarim.css" rel="stylesheet" /> </head> <body ng-app="servisOrnek"> <div ng-controller="servisControl"> <table> <tr> <td>Sayı 1</td> <td><input type="text" ng-model="sayi1" /> </td> </tr> <tr> <td>Sayı 2</td> <td><input type="text" ng-model="sayi2" /></td> </tr> <tr> <td>Operatör</td> <td> <select ng-model="opt"> <option value="+">Topla</option> <option value="-">Çıkarma</option> <option value="*">Çarpma</option> <option value="/">Bölme</option> </select> </tr> <tr> <td>Sonuç</td> <td><input type="text" ng-model="sonuc" /></td> </tr> <tr> <td></td> <td> <input type="button" ng-click="hesapla(sayi1,sayi2,opt)" value="Hesapla" /> </td> </tr> </table> </div> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var app = angular .module("servisOrnek", []) .controller("servisControl", function ($scope) { $scope.hesapla = function (s1,s2,opt) { var sonuc; s1=Number(s1); s2=Number(s2); if (opt=="+") sonuc= s1+s2; else if(opt=="-") sonuc= s1-s2; else if(opt=="*") sonuc= s1*s2; else if(opt=="/") sonuc= s1/s2; else sonuc= "Doğru Operatör Seçin"; $scope.sonuc = sonuc; }; }); |
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.
- parametre servis adını ifade etmektedir.
- servis tarafından çalıştırılacak fonksiyonu ifade etmektedir.
|
1 2 3 4 5 6 7 8 9 |
app.factory('Islem', function () { return { /* servis için oluşturulan metodlar ve özellikler*/ }; }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
app.factory('Islem', function () { return { dortIslem: function (s1,s2,opt) { s1=Number(s1); s2=Number(s2); if (opt=="+") return s1+s2; else if(opt=="-") return s1-s2; else if(opt=="*") return s1*s2; else if(opt=="/") return s1/s2; else return "Doğru Operatör Seçin"; } }; }); |
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.
|
1 2 3 4 5 6 7 8 9 10 |
var app = angular .module("servisOrnek", []) .controller("servisControl", function ($scope, Islem) { $scope.hesapla = function (s1,s2,opt) { $scope.sonuc = Islem.dortIslem(s1,s2,opt); }; }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
var app = angular .module("servisOrnek", []) .controller("servisControl", function ($scope, Islem) { $scope.hesapla = function (s1,s2,opt) { $scope.sonuc = Islem.dortIslem(s1,s2,opt); }; }); app.factory('Islem', function () { return { dortIslem: function (s1,s2,opt) { s1=Number(s1); s2=Number(s2); if (opt=="+") return s1+s2; else if(opt=="-") return s1-s2; else if(opt=="*") return s1*s2; else if(opt=="/") return s1/s2; else return "Doğru Operatör Seçin"; } }; }); |
[…] Konu 20: AngularJS Özel Servis Oluşturma […]