Angularjs Dersleri - #2 $scope Nedir ?

Kategoriler

Angularjs Dersleri - #2 $scope Nedir ?

7 yıl önce 1 yorum

Merhabalar şuanki konuda biraz ileri gidip konu ile bütün olarak bir anlatım yapmak istedim, videolarda bayağı yanlış gittimişim. Artık daha profesyonel bir açıdan bakalım.

Evet $scope nedir ? Bizim html arasında gezip işlem yapıp, onları şekillerdiren controller ile view arasındaki köprüdür. Service den bir veri çektiniz mesela kullanıcılar, onu ekrana yazdırmak istiyorsunuz, işte tam burada $scope karşımıza çıkıyor. Peki controller nedir ? örnek olarak kullanıcı profil sayfası için ayrı bir yapı arama sayfası, hakkında, etiketler için ayrı bir yapı kullanırsınız değil mi ? Yani yöneteceğimiz hangi sayfa ise orada controller tanımlarız. O zaman şöyle bir şey diyebiliriz: "controller her sayfa için tanımlanır". Tabi sayfa içinde ayırma yapacaksak mesela header footer vb. onlar için ise isteğe bağlı olarak gene kullanabiliriz. Ama asıl şart her sayfaya başka controller tanımlamak bu yönetimi kolaylaştırır. Şimdi ise şöyle bir klasör yapısı oluşturalım:

proje
- controller
  - AppCtrl.js
- service
  - UserServ.js
- view
- resources
  - angular.min.js
- app.js
- index.html

Bundan sonraki derslerde bu yapıyı kullanacağız, şimdi gelelim kullanıma. Biz index.html dosyamızda belirlediğimiz bir butona tıklama işlemi gerçekleştirelim ve bize alert ile cevap versin. İlk önce app.js'e bir module tanımlayıp o module altında AppCtrl'ı yükleyelim. app.js

var Proje = angular.module('proje', []);

şimdi module oluştu artık bunun altına controller service factory ... ekleyebiliriz. AppCtrl'yi ise Proje değişkeninin altına eklememiz gerekiyor. AppCtrl.js

Proje.controller('AppCtrl', function($scope){
	
	$scope.tiklanma = function () {
		alert("butona tıkladın");	
	};

})

ve ayrıca tiklanma diyede bir $scope eylemi tanımladık. Artık index hazırlayabiliriz. index.html

<!DOCTYPE html>
<html lang="en" ng-app="proje"> <!-- app.js'deki module adı -->
<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>
</head>
<body ng-controller="AppCtrl"> <!-- ng-controller ile artık hüküm sahibiyim -->
	
	<button ng-click="tiklanma()">Kezzo dan bu cd</button>

</body>
</html>

dikkat edilmesi gereken nokta AppCtrl'in içindeki $scope değişkeni sadece o tag'ın içinde kullanılabilir. Artık tag'a hükmettiğimize göre onun içinde tanımladığımız eylemler çalışabilir durumda. Butona tıkladığı anda fonksiyon çalışır. Makalenin sonuna geldik diğer derste görüşmek üzere :)