$scope/$rootScope
Bir kere oluşturulduklarında tüm uygulama boyunca kullanılırlar.
Controller’lar, modul’ler servislerden yararlanıyor.
Logic işlemler servislerde yapılır. Controller kullanılmamalı bu işler için.
1) $$LOCATİON SERVİSİ
Sayfa adresi ile ilgili okumalar yapmanızı sağlar. Javascript=window.location
<!DOCTYPE
html>
<html
ng-app="myApp">
<head>
<meta
charset="utf-8" />
<title>Sutuna Göre Sırala</title>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body>
<div
ng-controller="ngKontrol">
<b>Adres:</b> <span
ng-bind="sayfaAdresi"></span><br/>
<b>Protokol:</b> <span
ng-bind="sayfaProtokol"></span><br/>
</div>
<script >
var
uygulama = angular.module("myApp",
[]);
uygulama.controller('ngKontrol', function($scope, $location){
$scope.sayfaAdresi = $location.absUrl();
$scope.sayfaProtokol = $location.protocol();
});
</script>
</body>
</html>
2) $$http SERVİSİ
Sunucuya veri isteği yapıp dönen veri alınır. Javascript= XHR
<!DOCTYPE
html>
<html
ng-app="myApp">
<head>
<meta
charset="utf-8" />
<title>Sutuna Göre Sırala</title>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body>
<div
ng-app="ngUygulamam" ng-controller="ngKontrol">
{{icerik}}
</div>
<script type="text/javascript">
var
uygulama = angular.module("myApp",
[]);
uygulama.controller('ngKontrol', function($scope, $http){
$http.get("deneme.txt").then(function(response) {
$scope.icerik = response.data;
});
});
</script>
</body>
</html>
</html>
Deneme.txt
Get methodu ile get isteği yapacağımız adresi belirledik,
Then bu fonksiyonun bir değer dönmesini bekledi,
dönen değer içerik nesnesine aktarıldı
$$http Genel Yapısı
<script type="text/javascript">
var
uygulama = angular.module("ngApp",
[]);
uygulama.controller('ngKontrol', function($scope, $http){
$http({
method: 'GET',
url: '/sayfaUrl'
}).then(function successCallback(response)
{
// Cevap başarılı ve response değişkenine sayfanın
// cevap objesi
döndürüldü
console.log(response.data);
}, function errorCallback(response) {
// Bir sorun oluştu ve
bu sorun nedeni response
// değişkenine
döndürüldü.
console.log(response);
});
});
</script>
3) $$TIMEOUT SERVİSİ
Duruma göre yapılacak işlemlerin veya çalıştırılacak fonksiyonların ertelenmesi, Javascript= setTimeout()
<!DOCTYPE
html>
<html
ng-app="myApp">
<head>
<meta
charset="utf-8" />
<title>Sutuna Göre Sırala</title>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body>
<div
ng-app="myApp"
ng-controller="ngKontrol">
{{icerik}}
</div>
<script type="text/javascript">
var
uygulama = angular.module("myApp",
[]);
uygulama.controller('ngKontrol', function($scope, $timeout){
$scope.icerik = "Bu içerik 2 saniye sonra
değişecek!";
$timeout(function(){
$scope.icerik
= "İçerik Değiştirildi!!!";
}, 2000);
});
</script>
</body>
</html>
4) $$INTERVAL SERVİSİ
Duruma göre yapılacak işlemlerin veya çalıştırılacak fonksiyonların verilen sureye göre surekli devam eder
Javascript= setInterval()
<!DOCTYPE
html>
<html
ng-app="myApp">
<head>
<meta
charset="utf-8" />
<title>Sutuna Göre Sırala</title>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body>
<div
ng-app="myApp"
ng-controller="ngKontrol">
<b>Sayaç:</b> {{sayac}}
</div>
<script type="text/javascript">
var
uygulama = angular.module("myApp",
[]);
uygulama.controller('ngKontrol', function($scope, $interval){
$scope.sayac = 0;
$interval(function(){
$scope.sayac++;
}, 1000);
});
</script>
</body>
</html>
$$INTERVAL UYGULAMA (SAYAÇ
UYGULAMASI)
<!DOCTYPE
html>
<html
ng-app="myApp">
<head>
<meta
charset="utf-8" />
<title>Sutuna Göre Sırala</title>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body>
<div ng-controller="ngKontrol">
<b>Sayaç:</b> {{sayac}}<br>
<button ng-click="sayacBaslat()">Sayacı Başlat</button><br>
<button ng-click="sayacDurdur()">Sayacı Durdur</button><br>
<button ng-click="sayacSifirla()">Sayacı Sıfırla</button><br>
</div>
</body>
<script type="text/javascript">
var
uygulama = angular.module("myApp",
[]);
uygulama.controller('ngKontrol', function($scope, $interval){
var sayacDongu;
$scope.sayac = 0;
$scope.sayacBaslat = function(){
sayacDongu = $interval(function(){
$scope.sayac++;
}, 1000);
};
$scope.sayacDurdur = function(){
$interval.cancel(sayacDongu);
};
$scope.sayacSifirla = function(){
$scope.sayac = 0;
};
});
</script>
</html>
Hiç yorum yok:
Yorum Gönder