AngularJS - $scope Kullanımı

LosT

Yaşayan Forum Efsanesi
5 Şub 2015
8,120
31
-
hrvGAN.jpg


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.

4dKDtQ.png


$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.

4dKDtQ.png


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ı:

4hclvN.png


4dKDtQ.png


$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:

QctXRu.png


ycczUN.png


4dKDtQ.png


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:

EJ85kw.png


RP7F5m.png


4dKDtQ.png


Bu konuda AngularJS $scope kullanımını öğrendik. AngularJS derslerinin devamı gelecek.

CckryH.gif
 
Son düzenleme:
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.