English
ng-focus and ng-blur Directives
It specifies the functions to be triggered when an input element is fired by the user (ng-focus) or focuses out of a focused input element or when the cursor focuses on another element (ng-blur).
Animation at AngularJS
In addition to the core package, AngularJS offers optional packages (modules) that the developer will want to use in some cases.
We will talk about many of these packages. The first package we'll talk about is the nAnimate module, which facilitates animation and transition actions on the elements.
Adding the nGAnimate Module to the Project
Since nGAnimate is an additional package, we need to add this module to the page we want to use first. To do this, run the javascript file that contains the module below the code,
Türkçe
ng-focus ve ng-blur Direktifleri
Bir input elementine kullanıcının imleç ile odaklanması (ng-focus) veya odaklanmış bir input elementinden dışarıya veya başka bir elemente imlecin odaklanması (ng-blur) durumunda tetiklenecek fonksiyonları belirler.
Bir örnek ile nasıl çalıştrğını görelim:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
İnput: <input type="text" ng-focus="f1()" ng-blur="f2()"/>
<hr>
{{durum}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.durum = "Sayfa yüklendi!";
$scope.f1 = function(){
$scope.durum = "İnput'a focuslandı!";
}
$scope.f2 = function(){
$scope.durum = "İnput dışında!";
}
});
</script>
</body>
</html>
Örnekte, focus ve blur olaylarında, durum değişkeninin nasıl değiştiğini görselde görebilirsiniz.
AngularJS'de Animasyon
AngularJS, temel paketinin yanında geliştiricinin bazı durumlarda kullanmak isteyeceği opsiyonel paketler (modüller) sunmaktadir.
Bu paketlerin çok kullanılanlarından bahsedeceğiz. Üzerinde konuşacağımız ilk paket, elementıer üzerinde animasyon ve transition aksiyonlarını kolaylaştıran ngAnimate modülü olacak.
ngAnimate Modülünü Projeye Eklemek
ngAnimate ek bir paket olduğundan dolayı, kullanmak istediğimiz sayfaya öncelikle bu modülü eklememiz gerekiyor. Bunun için modülün bulunduğu Javascript dosyasını çalışma klasörümüze aşağıdaki kodu,
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Merhaba Dünya
</div>
</body>
</html>
şeklinde, hem angular hem de angular-animate modüllerini kullanacağımız HTML dosyasına ekleyelim.
Dosyayı Indirmek için: http://code.angularjs.org/1.5.8/angular-animate.js
Not: Bu ve bunun gibi diğer birçok AngularJS paketini daha hızlı bir şekilde indirip sayfanıza eklemek için geliştirilmiş, NPM veya Bower gibi paket yönetim sistemlerini kullanarak zamandan tasarruf edebilirsiniz.
HTML sayfamiza modülleri ekledikten sonra, uygulama modülü oluştururken ngAnimate modülünü bağımlı modül olarak atamamız gerekiyor.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Merhaba Dünya
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", ['ngAnimate']);
uygulama.controller("ngKontrol", function($scope){
//...
});
</script>
</body>
</html>
Önceki bölümlerde bahsettiğimiz gibi, module tanımlayıcısı içerisindeki köşeli parantezler bu modüle bağımlı olarak atamak istediğimiz modülleri aktarmak için kullanılmakta. Birden fazla modül eklemek istediğimizde virgül iıe ekleme yapacağlz. Örnek vermek gerekirse:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Merhaba Dünya
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", ['ngAnimate', "ngRoute"]);
</script>
</body>
</html>
ngAnimate Kullanımı ve Çalışma Mantığı
ngAnimate, CSS animasyon ve transition özelliklerini, AngularJS için daha kolay kullanılabilir hale getiren bir modüldür denilebilir. Ng-hide/ng-show, ng-if, ng-repeat gibi direktifleri kullanırken, DOM objesinin çıktısı ve bu çıktının sahip olduğu-olacağı sınıf değerlerine tam olarak hakim olamıyoruz. NgAnimate, bu direktiflerin değerlerine göre alakalı DOM elementıerine sınıf vererek CSS üzerinde bu sınıf için animasyon atamamıza izin verir.
Bir kaç örnek ile nasıl kullanııdığını ve hangi özelliklere sahip olduğunu inceleyelim; Hatırlarsanız ilk bölümler de ng-hide ve ng-show direktiflerinin nasıl çalıştığından bahsetmiştik. Burada eğer ngAnimate modülü, uygulamamıza ekliyse, bu direktifler için css üzerinde animasyon ataması yapabiliyoruz.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.6.8/angular-animate.js"></script>
<style>
.kutu {
border: 1px solid #ccc;
margin-top: 10px; padding: 10px;
transition: all 500ms;
opacity:1;
}
.kutu.ng-hide {
opacity:0;
display: none;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<input type="checkbox" ng-model="goster" />Göster
<div class="kutu" ng-show="goster">
Div içeriği!
</div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", ["ngAnimate"]);
uygulama.controller("ngKontrol", function($scope){
$scope.goster = true;
});
</script>
</body>
</html>
Posted on Utopian.io - Rewarding Open Source Contributors