AngularJS $scope Nedir?

Scope, AngularJS için MVC gibi yazılım mimarilerindeki Controller ile View arasındaki bağlantımızdır diyebiliriz. Controller ile View arasında veri aktarımı veya Controller kısmında bulunan fonksiyonu tetiklememizi sağlamaktadır.

Bir örnek üzerinde incelersek:

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
	<meta charset="UTF-8">
	<title>AngularJS - Scope</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
 	
 	<script>
		var MyApp = angular.module("MyApp", []);
		   
		MyApp.controller("MyAppController", function($scope) {
		    $scope.name = "Akif";
		    $scope.job = "Developer";
		});
	</script>
</head>
<body>

	<div ng-controller = "MyAppController">
		<p>{{name}} - {{job}} </p>     
 	</div>

</body>
</html>

Örnek üzerinde kolay görülebilmesi için inline Javascript kullandım. Controller üzerindeki veri taşıma işlemini $scope ile gerçekleştirdik.

AngularJS Direktifleri (Directive)

Bu yazımızda AngularJS direktiflerini tanımlayıp kullanım alanlarını inceleyeceğiz.

    • ng-app: Bir önceki yazımızda açıkladığımız gibi AngularJS’in etki alanını belirlemek için kullanılır. Örnekte bütün sayfanın değil de sayfa içerisinde bulunan bir div’in etkilenmesi durumunu incelersek:
<!DOCTYPE html>
<html lang="en">
<head>
	<title> AngularJS - Directive</title>
</head>
<body>



<div ng-app>
	...
</div>


</body>
</html>
  • ng-bind:  {{ value }} şeklinde kullanımının aynısıdır. Verilen değeri Bind eder.

<div ng-app>
		
	
<li ng-bind="6 + 1"></li>

</div>

  • ng-model: Form elemanlarında oluşan değişiklikleri incelemek için kullanılır.

External Javascript dosyası oluşturup aşağıdaki gibi düzenleyelim:

Project.controller('MainController', function($scope){
	$scope.user= {
		name: "",
		password: ""
	};

	$scope.login = function (user) {
		if (user.name == "") {
			alert("Kullanıcı adı boş olamaz.");
		} else if (user.password == "") {
			alert("Kullanıcı şifresi boş olamaz.");
		} else {
			alert("Alanlar dolduruldu.");
		}
	};
})

HTML sayfasını da aşağıdaki gibi düzenleyip çalıştırıp değişiklik durumunu inceleyelim.

Username: <input type="text" ng-model="user.name"> 
Password: <input type="password" ng-model="user.password"> 
<button ng-click="login(user)">Login</button>

JS dosyasında username ve password’ün ilk değerler verilerek undefined hatası engellenmiştir.

AngularJS Nedir?

AngularJS, Google tarafından desteklenen güçlü bir JavaScript framework’üdür. HTML DOM’u ek niteliklerle genişletir ve daha duyarlı hale getirir. AngularJS açık kaynak kodlu, tamamen ücretsizdir.

Basit bir örnek ile AngularJS’e giriş yapalım.
index.html dosyası oluşturup angular.min.js‘i dahil edelim.

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>AngularJS - İlk Uygulama</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body>
	{{ 6 + 1 }}
</body>
</html>

ng-app ile AngularJS’in etki alanını belirliyoruz. Etki alanını belirlememe durumunda çıktıyı String olarak alacaktık.