THT DUYURU

chat
ugursuz reklam
takipci
Seçenekler

AngularJS - $scope Kullanımı

LosT - ait Kullanıcı Resmi (Avatar)
VIP Bronz Üye
Üyelik tarihi:
02/2015
Nereden:
-
Yaş:
21
Mesajlar:
8.274
Konular:
1399
Teşekkür (Etti):
1905
Teşekkür (Aldı):
2145
Ticaret:
(0) %
6
286
2 Hafta önce
#1


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.

---------------------
improve_yourself

Konu LosT tarafından ( 2 Hafta önce Saat 01:23 ) değiştirilmiştir.
Slyfer, 'ReDLiNe, exploratorem Teşekkür etti.
Profesör - ait Kullanıcı Resmi (Avatar)
Uzman Üye
Üyelik tarihi:
04/2020
Nereden:
-Türkistan-
Mesajlar:
1.723
Konular:
183
Teşekkür (Etti):
555
Teşekkür (Aldı):
582
Ticaret:
(0) %
2 Hafta önce
#2
Elinize sağlık
---------------------



SELAM SANA
EY YILLARI HEBA OLAN GENÇ!



BH80
Reiɴα
Rey


Slyfer - ait Kullanıcı Resmi (Avatar)
Stajyer Moderatör
Üyelik tarihi:
03/2016
Nereden:
Unknown
Yaş:
25
Mesajlar:
3.158
Konular:
141
Teşekkür (Etti):
390
Teşekkür (Aldı):
688
Ticaret:
(0) %
2 Hafta önce
#3
Elinize sağlık hocam
---------------------
ZuL-RaA
P4RS
LosT
M3m0ry
Ghost Killer - ait Kullanıcı Resmi (Avatar)
Hesap Askıya Alındı
Üyelik tarihi:
01/2019
Nereden:
J İ T E M
Mesajlar:
2.097
Konular:
99
Teşekkür (Etti):
86
Teşekkür (Aldı):
523
Ticaret:
(0) %
2 Hafta önce
#4
eline sağlık güzel konu olmuş.
'ReDLiNe - ait Kullanıcı Resmi (Avatar)
Stajyer Moderatör
Üyelik tarihi:
06/2015
Nereden:
Ankara
Yaş:
19
Mesajlar:
5.521
Konular:
325
Teşekkür (Etti):
2034
Teşekkür (Aldı):
1145
Ticaret:
(0) %
2 Hafta önce
#5
Elinize sağlık hocam
---------------------
Açıkçası ne yazacağımı daha bulamadım neyse. Arkadaşlar arkalara ilerleyelim!
LosT - ait Kullanıcı Resmi (Avatar)
VIP Bronz Üye
Üyelik tarihi:
02/2015
Nereden:
-
Yaş:
21
Mesajlar:
8.274
Konular:
1399
Teşekkür (Etti):
1905
Teşekkür (Aldı):
2145
Ticaret:
(0) %
2 Hafta önce
#6
Alıntı:
Profesör´isimli üyeden Alıntı Mesajı göster
Elinize sağlık
Alıntı:
Slyfer´isimli üyeden Alıntı Mesajı göster
Elinize sağlık hocam
Alıntı:
Ghost Killer´isimli üyeden Alıntı Mesajı göster
eline sağlık güzel konu olmuş.
Alıntı:
'ReDLiNe´isimli üyeden Alıntı Mesajı göster
Elinize sağlık hocam
Teşekkür ederim
---------------------
improve_yourself

bay404 - ait Kullanıcı Resmi (Avatar)
Moderatör
Üyelik tarihi:
03/2020
Nereden:
Antalya
Mesajlar:
1.363
Konular:
118
Teşekkür (Etti):
66
Teşekkür (Aldı):
536
Ticaret:
(0) %
2 Hafta önce
#7
elinize sağlık
--------------------- Instagram | Telegram | Twitter | Discord | Mail
404 came back..
LosT Teşekkür etti.

Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler