Merhabalar herkese. Bu yazımda sizlere Angular.js’de Factory ve Service bileşenlerinin nasıl kullanıldığından bahsedeceğim. Bu bileşenlerin kullanım amacı oluşturduğumuz RESTful Servislere doğrudan erişmek yerine bir kere oluşturup onları her yerdin çağırıp kullanmak ve kod kalabalığını engellemektedir. Klasörleme tekniği sayesinde de daha derli toplu bir projemiz olur.
Kullanım amacını tekrar ele alırsak, bir örnek ile güzel bir şekilde detaylandırabiliriz.
$http.get("/api/UserType").then(function (result) {
$scope.lstUserType = result.data;
});Bu örnekte görüldüğü gibi, $http modülü sayesinde RESTful servislerimize doğrudan bir erişim imkanımız var ve her erişeceğimiz zaman böyle bir yapıyı kullanmamız gerekiyor, her erişeceğimiz zaman bu kodu tekrar tekrar yazmamız gerekiyor ayrıca. Bu hem maliyetli hemde okunabilirliği ciddi oradan azaltmaktadır. Şimdi servis ile erişim sağlanan kodu inceleyelim.
forumTopicService.getForumTopicList().then(function (result) {
$scope.lstForumTopics = result.data;
});forumTopicService adlı modül sayesinde gerekli angular servisine erişerek getForumTopicList() adlı metota ulaşıyoruz. Bu metot ise RESTful servisimize bağlanıp geriye o servisten gelen verileri döndürüyor. Hadi gelin bu yapıyı sistemimize kuralım.
1.Adım Gerekli Klasörleme Sistemini Oluşturmak
İlk adım olarak AngularJS modülünü oluşturmamız gerekiyor. AngularJS’in sistemimizde yüklü olduğunu ve gerekli RESTful servislerinin kodlandığını varsayıyorum. AngularJS’in kurulum dosyaları Scripts adlı dosyanın altında bulunur, bizde dosyalarımızı o klasör içerisinde oluşturabiliriz.
Klasörleme aslında bu şekilde, ben sadece örnek olması açısından bunu paylaşmak istedim.
- Scripts
- modules
- app.js
- factories
- factory.js
- services
- Users
- UserService
- userService.js
- UserPostService
- userPostService.js
- UserService
- Product
- ProductService
- productService.js
- ProductCategoryService
- productCategory.js
- ProductService
- Users
- controller
- controller.js
- modules
Klasörleme bu şekildedir. Diğer dosyalar ise AngularJS’in kendi oluşturduğu dosyalardır.
2.Adım AngularJS Modülü Oluşturmak
AngularJS Modülünü oluşturmamız gerekiyor ve bu modülün ismini Layout sayfasına vermemiz gerekiyor. Aslında bu adım bir önceki AngularJS ile ilgili yazılarımda çok daha detaylı bir şekilde bulunmaktadır. Gerekli AngularJS Modül örneği için modules klasörünün altına bir Angular.js module eklememiz gerekmektedir. Modülün ismi ise app olsun.
- Scripts
- modules
- app.js
- modules
var app = angular.module("startupController", ['ngRoute']);Modül ismine ben “startupController” olarak verdim siz istediğiniz herhangi bir ismi verebilirsiniz.
3.Adım AngularJS Servislerini Oluşturmak
1.Adım da klasörleme tekniğinden söz etmiştik. Services adı altında servislerimizi oluşturabiliriz. Örnek olması açısından services -> UserService klasörünün altına bir userService.js oluşturalım.
- Scripts
- modules
- app.js
- services
- UserService
- userService.js
- UserService
- modules
Adımlama şuana kadar böyle olmalı. Örnek bir userService kodlarımız şu şekildedir.
angular.module('startupController')
.service('userService', ['$http', function ($http) {
var urlBase = '/api/IdendityUsers';
var changePasswordUrl = '/api/ChangePassword';
this.getUsers = function () {
return $http.get(urlBase);
};
this.getUserRole = function (id) {
return $http.get(urlBase + '/' + id);
};
this.insertUpdateUser = function (user) {
return $http.post(urlBase, user);
};
this.deleteUser = function (id) {
return $http.delete(urlBase + '/' + id);
};
this.changePassword = function (change) {
return $http.post(changePasswordUrl, change);
};
}]);Gördüğünüz gibi metotlarımızı bu servisimizin içine yazdık ve her bir metotumuz geriye apiden gelen değerleri döndürmektedir. POST,GET ve DELETE işlemlerimiz burada tanımlanmıştır.
var urlBase = '/api/IdendityUsers';Gerekli api adresimizi de tanımlandıktan sonra bir sonraki aşamalar daha kolay hala gelmektedir.
4.Adım AngularJS Controller Oluşturmak
Şimdi gelelim AngularJS Controller’ımızı oluşturalım. Bu controllerda istediğimiz servisi çok kolay bir şekilde kullanacağız. Örnek bir user controller nesnesini inceleyelim.
//User Controller
app.controller('UserCtrl', ['$scope', 'userService',
function ($scope, userService) {
$scope.getAllUser();
//GetAllUser
$scope.getAllUser = function () {
userService.getUsers().then(function (result) {
$scope.lstUsers = result.data;
});
};
}]);UserCtrl adında bir controller ismi verdik ve gerekli modüllerimizi bu controller’ inject ettik. Gördüğünüz gibi oluşturduğumuz userService adlı nesneyi bu controllerda kullanmak oldukça basit ve bu userService içinde barındırdığı getAllUser adlı metotu da çalıştırmak oldukça kolay bir işlem. Apiden gelen değerlerimizi ise yani kullanıcı listemizi $scope.lstUsers adlı değişkene basıyoruz.
5.Adım Gerekli Linkleri Ayarlamak
Angular tarafındaki işlerimizi bitirdik şimdi bu işlemleri view tarafında göstermemiz gerekiyor. Öncelikle _Layout adlı sayfamızda Angular modülümüzün ismini vermemiz gerekiyor. Örnek;
<html lang="en" ng-app="startupController">
<head>
</head>
<body>
</body>
</html>Html etiketinin içinde ng-app=”startupController” olarak modülümüzün ismini verdik. Şimdi <body> etiketinin en altına artık AngularJS in gerekli kütüphanelerini, servislerini yerleştirmemiz gerekiyor.
<!-- Angular -->
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/modules/app.js"></script>
<script src="~/Scripts/controller/controller.js"></script>
<script src="~/Scripts/angular-sanitize.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<!-- AngularServices -->
<script src="~/Scripts/services/Users/userService.js"></script>angular-route.min.js en önemli linklermizden birisidir çünkü gerekli servislerimizi bu sınıf sayesinde hallediyoruz.
6.Adım Oluşturulan UserCtrl Adlı Controller’ı Bir View’de Kullanmak
Herhangi bir Razor View’inde oluşturmuş olduğumuz bu controller’ı çağırabilir ve controller’ın içinde fonksiyonlara erişim sağlayabiliriz. Örneğin oluşturduğumuz fonksiyon sayesinde User Listesine ulaşalım.
<div ng-controller="UserCtrl"> //bütün hepsini kapsaması gerekmekte
//Gerekli html kodları buraya
<div class="box-body">
<div class="">
<table id="userTable" class="table table-bordered table-striped">
<thead>
<tr>
<td>User Name</td>
<td>Email</td>
<td>Registered Date</td>
<td>Status</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in lstUsers">
<td>{{item.UserName}}</td>
<td>{{item.Email}} </td>
<td>{{item.RegisteredDate|date:'MMM d, yyyy HH:mm:ss'}} </td>
<td>
<span ng-if="item.Status=='Active'" class="label label-success">{{item.Status}}</span>
<span ng-if="item.Status=='Unconfirmed'" class="label label-warning">{{item.Status}}</span>
<span ng-if="item.Status=='Banned'" class="label label-danger">{{item.Status}}</span>
</td>
<td>
<a href="#" class="btn btn-info btn-circle" ng-click="viewUser(item)" title="" data-toggle="tooltip" data-placement="top" data-original-title="View User">
<i class="glyphicon glyphicon-eye-open"></i>
</a>
<a href="#" class="btn btn-primary btn-circle" ng-mouseenter="deneme()" ng-click="editUser(item)" title="" data-toggle="tooltip" data-placement="top" data-original-title="Edit User">
<i class="glyphicon glyphicon-pencil"></i>
</a>
<a href="#" class="btn btn-danger btn-circle" ng-click="deleteUser(item)" title="" data-toggle="tooltip" data-placement="top" data-original-title="Delete User">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>ÖZET
Özet olarak AngularJS’de servislerin önemini tekrar edecek olursak gerekli RESTful servislerine doğrudan erişmek yerine bir servis kullanarak dolaylı yoldan erişmemize olanak sağlar. Http metotlarını sürekli yazmak yerine servis yardımıyla ne ihtiyacımız varsa onu çağırmamız yeterlidir ayrıca bunu bütün controller’da yapabiliriz. Yani neye ihtiyacınız varsa çağır ve kullan mantığı ile ilerleyebiliriz. Bir yazının daha sonuna gelmiş bulunuyoruz. Eğer anlatımımda bir sorun veya bir problem olmuşsa lütfen bağışlayın. İyi kodlamalar 🙂
