Angularjs Dersleri - #5 MVC Mimarisi

angularjsyoutube

2 yıl önce 2 yorum

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 

controller sadece view ile iletişim kurup kullanıcının işlemlerini view'a yansıtan yapıdır.

service / factory controllerdan gönderilen parametreler doğrultusunda (eğer yapılacaksa) server request işlemlerini yapıp controllerdaki methoda geri dönüş yapar veya yapmaz.

view ise kullanıcının göreceği ve tekliklenecek elementleri içeren yapıdır.

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

Yorumlar ({{totalCommentCount}})

  • Ali

    {{commentLike44Count}} beğenme 1 yıl önce

    Kodlar controller.js:1 Uncaught ReferenceError: Proje is not defined service.js:1 Uncaught ReferenceError: Proje is not defined hatası veriyor
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike47Count}} beğenme 1 yıl önce

    Merhaba Ali, 2. derste app.js dosyasını oluşturmanın gerektiğini anlattım. Sanırsam bu adımı atlamış olabilirsin.
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?