Merhaba sonradan baktığımda video bayağı eski kalmış.... O yüzden şöyle başlayalım. Angularjsde mvc yapısı şu şekilde, 2. derste anlattığım klasör yapısındaki gibi controller ve view bildiğiniz üzere kullanıcının eylemlerini takip etmek için yapılmıştır. Bu yapıda dikkat çeken bir yapı var, model yok onun yerine service diye bir yapı kullanılmış. Service yazan yerde 2 tane tip kullanılabiliyor... bir factory iki service nedir bu yapılar ? aslında model anlamına geliyor ikiside. Buradaki önemli nokta şu
Mvc hakkında biraz bilgi sahibiyseniz dediklerimi anlamışsınızdır. Olay bundan ibaret bunu bir örnekle anlatabiliriz. Basit bir kullanıcı listesini uygulama açılır açılmaz ekrana yazdıran bir sistem yapalım.
index.html şöyle olsun
<!DOCTYPE html>
<html lang="en" ng-app="proje">
<head>
<meta charset="UTF-8">
<title>Proje</title>
<script src="resources/angular.min.js"></script>
<script src="app.js"></script>
<!-- controller -->
<script src="controller/AppCtrl.js"></script>
<script src="service/UserServ.js"></script>
</head>
<body ng-controller="AppCtrl">
<table>
<!-- ng-repeat ile kayıtları basıyoruz -->
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
</tr>
</table>
</body>
</html>
AppCtrl.js şöyle olsun
Proje.controller('AppCtrl', function($scope, UserServ){
$scope.users = [];
// burada fonksiyonu çalıştırıp geriye
// bir aksamanın olduğunu belirtmiştik
// onun bittiğini then fonksiyonu
// tetiklendiğinde anlıyoruz
UserServ.getUsers().then(function(res) {
// burada data geldiğinde ya artık users'a atıyoruz
$scope.users = res;
});
})
UserServ.js şöyle olsun
Proje.service('UserServ', function ($q) { // $q geçikmelerde kullanılır
return {
getUsers: function() {
// eğer ajax işlemi yapılacaksa buradan ulaşılması gerekir
// ben şuan için ajax işlemini sonraya bırakıyorum
// zaten users gelmiş gibi geriye dönderiyorum
// burada bir defer (aksama) tanımlayoruz
var deferred = $q.defer();
// döndereceğimiz dizi ajaxtan gelmiş gibi
var users = [
{
name: "Hüsamettin"
},
{
name: "Şerafettin"
},
{
name: "Necmettin"
},
{
name: "Gıyasettin"
}
];
// burada artık datamız gelmiş
// artık kullanıcıya aksama bittiğini
// işaret ediyoruz
deferred.resolve(users);
// bunun olumsuz bittiği olursa yani istek dönmedi ya da
// internet kesik o zaman ise aksamanın
// hata ile bittiğini anlatmak için deferred.reject
// kullanırız
// burada geriye aksamalı bir method gönderiyoruz
return deferred.promise;
}
}
})
Evet kullanıcılar artık ekranda :) bir sıkıntı olursa yorum yaparak sorunlarınızı söyleyebilirsiniz
Düşündüklerin nedir ?
Yorumlar ({{totalCommentCount}})
{{commentLike44Count}} beğenme 7 yıl önce
{{commentLike47Count}} beğenme 7 yıl önce