AngularJS, Google tarafından geliştirilmi bir JS Framework'üdür. jQuery'ye göre bence daha güzel bir kütüphane. AngularJS JavaScript kullanılarak geliştirilmiştir. İstemci taraflı çalışır. Bu yazıda ise AngularJS'de çok işimize yaracak bir özellik olan $scope özelliğini anlatacağım.
$scope Nedir?
MVC (Model-View-Controller) yapısını kullanan AngularJS, bu yapıda Scope özelliğini Controller ve View arasında veri alışverişini sağlamak amacıyla kullanır. Bizler ise bu yazıda özel bir JS nesnesi olan $scope'u öğreneceğiz. $scope bizlere Controller'da, Model verisine erişim sağlamamıza yarar.
Kullanımı
AngularJS uygulamamızı başlatmak için bir elemente ng-app="uygulama_ismi" ve bir de Controller için ng-controller="controller_ismi" veriyoruz. Ben HTML'e ekleme yaptım. Sizler bir div içerisinde de uygulama başlatabilirisiniz.
Kod:
<html ng-app="thtders" ng-controller="thtController">
<head>
<title>Deneme AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<!-- Burada çalışma yapacağız -->
</body>
</html>
index.js yani Controller dosyamıza uygulamayı tanımlıyoruz.
Kod:
var app = angular.module('thtders', []);
app.controller('thtController', function ($scope) {
$scope.deneme = "TurkHackTeam"; // deneme adında bir $scope değişkeni oluşturduk
});
Şimdi bu değişkeni View'de kullanalım. Bu kodu HTML Body içerisine ekleyelim ve sayfayı yenileyelim.
Kod:
{{ deneme }}
Çıktı:
$scope Fonksiyon
$scope ile bir fonskiyon çağırmak istiyorsanız;
Kod:
$scope.denemeFn = function(){
// çalıştıralacak kodlar
}
ng-click Event'i ile $scope Değişkeni Atama
Öncelikle bir buton oluşturalım. Normal JS kullanımında biz onlick="fonksiyon()" ile fonksiyonu çağırırdık. AngularJS kullanımı ise ng-click="fonksiyon()" şeklindedir.
HTML Body içeriği:
Kod:
<button ng-click="denemeFn()">Değişkeni Ata</button>
{{degisken}}
index.js içeriği:
Kod:
var app = angular.module('thtders', []);
app.controller('thtController', function ($scope) {
$scope.denemeFn = function(){
$scope.degisken = "THT $scope Uygulaması";
}
});
Çıktılar:
Basit Bir $http Uygulaması ile $scope Örneği
$http ile bir dosyadan veri çekebiliyoruz. Örneğin veritabanından veri çeken bir PHP dosyasından veri çekerken kullanabiliriz. JQuery bilenler için $.ajax'ı örnek gösterebiliriz.
Bir deneme.php dosyası oluşturalım. Basit ilerlemek amacıyla içerisinden sadece bir veri çekelim.
Kod:
<?php
echo "Bu veri PHP dosyasından geldi.";
?>
index.php içeriği:
Kod:
<html ng-app="thtders" ng-controller="thtController">
<head>
<title>Deneme AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<button ng-click="veriCek()">PHP Dosyasından Veriyi Çek</button><br>
Gelen Veri: {{degisken}}
</body>
</html>
index.js içeriği:
Kod:
var app = angular.module('thtders', []);
app.controller('thtController', function ($scope, $http) {
$scope.veriCek = function(){
$http.get("deneme.php")
.then(function (sonuc) {
$scope.degisken = sonuc.data;
});
}
});
Çıktılar:
Bu konuda AngularJS $scope kullanımını öğrendik. AngularJS derslerinin devamı gelecek.
Son düzenleme: