AngularJS Notlarım – 4

Bu yazımda sizlere $http servisinin kullanımını göstermek istiyorum.
AngularJS’de amaç JSON olarak datayı almak ve DOM’da neler olacağını belirlemektir.

Örneğin jQuery’de get metodu nasıldı önce kullanımını bir hatırlayalım;

$.get('/request-url', function(response){
    console.log(response);
}, 'json');

AngularJS’de de mantık aynı sonuçta. Ancak bunu controllerımın içinde $scope gibi $http parametresini aldıktan sonra yapacağım.
İlk olarak html yapımıza bir göz atalım;

<div ng-app="github">
    <div ng-controller="getUserInfo">
        <img src="{{ user.avatar_url }}" alt="" title="{{ user.name }}" /><br />
        Ad: {{ user.name }}<br />
        E-posta: {{ user.email }}<br />
        Lokasyon: {{ user.location }}
    </div>
</div>

Evet şimdi github adında modülümüzü oluşturalım. Sonra getUserInfoadında bir controller tanımlayıp $http servisi ile github’a bir get request yapalım. Gelen değeride user data modeline aktaralım.

var github = angular.module('github', []);
github.controller('getUserInfo', ['$scope', '$http', function($scope, $http){
  
  $http.get('https://api.github.com/users/tayfunerbilen').then(function(response){
    $scope.user = response.data;
  });
  
}]);

Aslında böyle çok okunaklı değil. Örneğin hata aldığında 2. bir fonksiyonda bunu anlıyoruz ancak böyle iç içe yazmak sağlıklı olmuyor. Bunu daha okunaklı bir hale getirelim;

var github = angular.module('github', []);
github.controller('getUserInfo', ['$scope', '$http', function($scope, $http){
  
  var onComplete = function(response){
	$scope.user = response.data;
  };
  
  var onError = function(response){
	$scope.error = 'Github kullanıcısı bulunamadı!';
  };
  
  $http.get('https://api.github.com/users/tayfunerbilen')
       .then(onComplete, onError);
  
}]);

Şimdi ng-show ve ng-hide direktifleri ile html çıktımızı daha mantıklı hale getirelim.
Yani error var ise hatayı gösterip kullanıcı bilgilerini gizleyelim, tam tersi ise kullanıcı bilgilerini gösterip hatayı gizleyelim.

<div ng-app="github">
    <div ng-controller="getUserInfo">
	
        <div class="error" ng-show="error">
            {{ error }}
        </div>
	
        <div ng-hide="error">
            <img src="{{ user.avatar_url }}" alt="" title="{{ user.name }}" /><br />
            Ad: {{ user.name }}<br />
            E-posta: {{ user.email }}<br />
            Lokasyon: {{ user.location }}
        </div>
		
    </div>
</div>

AngularJS Direktiflerini Kullanarak Tab Örneği

Angularjs direktiflerini kullanarak hiç javascript kodu yazmadan tab örneği hazırladık.

Örnekte kullanılan direktifler şunlardır;

  • ng-app
  • ng-init
  • ng-class
  • ng-click
  • ng-switch
  • ng-switch-when

Kısaca kodlarımız

<body ng-app ng-init="tab = 'tab1'">

	<div id="tab">
	
		<ul class="tab">
			<li ng-class="{active: tab == 'tab1'}">
				<a href="#" ng-click="tab = 'tab1'">1. tab</a>
			</li>
			<li ng-class="{active: tab == 'tab2'}">
				<a href="#" ng-click="tab = 'tab2'">2. tab</a>
			</li>
			<li ng-class="{active: tab == 'tab3'}">
				<a href="#" ng-click="tab = 'tab3'">3. tab</a>
			</li>
		</ul>
	
		<div ng-switch="tab">
			<div class="tab-content" ng-switch-when="tab1">
				1. tab içeriği
			</div>
			<div class="tab-content" ng-switch-when="tab2">
				2. tab içeriği
			</div>
			<div class="tab-content" ng-switch-when="tab3">
				3. tab içeriği
			</div>
		</div>
	
	</div>

</body>

AngularJS Notlarım – 2

AngularJS

AngularJS’de MVC yapısı olduğunu söyledim mi bilmiyorum. Bunu en temelden öğrenmek gerekirse size ilk olarak bir controller’ın nasıl oluşturulacağını göstermek istiyorum.

AngularJS Controller Yapısı

İlk olarak ng-app direktifini uyguluyorum.

<div ng-app>
    kodlar..
</div>

Bir controllerı kullanmak için ng-controller direktifini kullanıyoruz.

<div ng-app>
     <div ng-controller="testController">
         {{ mesaj }}
     </div>
<iv>

Şimdi testController adında bir controller kullanacağımı söylüyorum. Ve mesaj değerini ekrana yazdırıyorum. Bu mesaj değerini controller içerisinde modelde tanımlayacağız. Hemen bir js dosyası oluşturup controllerı yazmaya başlayalım.

var testController = function($scope){
    $scope.mesaj = "Merhaba AngularJS!";
};

Evet gördüğünüz gibi $scope adında bir parametre aldı fonksiyonumuz. $scope bizim modelimiz. Daha aldığı birçok parametre var, bunlar servis olarak adlandırılıyor. Ayrıntılı olarak şuradan bakabilirsiniz: https://docs.angularjs.org/api/ng/service

Kısaca özetlemek gerekirse;

angularjs-mvc

AngularJS Notlarım – 1

AngularJS

AngularJS öğrenirken bazı notlar alıyorum. Bunu bloğumda da zaman zaman paylaşacağım.
İlk olarak EngılırCeyEs diye okunmasıyla başlayalım olaya 🙂 Ve devam edelim..

AngularJS’i kullanmak için 2 şey gerekli.
1) angular.js dosyasını sayfaya dahil etmek
2) HTML’de ng-app direktifini angular kullanacağımız alan için belirlemek
– Bu arada ng Angular‘ın kısaltılmış halidir.

<script src="angular.js"></script>
<div ng-app>
   bu alan Angular tarafından yorumlanmaktadır..
</div>

Artık div içerisine küçük bir angular kodu yazabilirim.

<script src="angular.js"></script>
<div ng-app>
   5 * 10 = {{ 5 * 10 }}
</div>

Bize çıktıda 5 * 10 = 50 sonucunu gösterecektir.
{{ ve }} karakterleri AngularJS’e özeldir. Bu yüzden bunu görüyorsanız bilin ki orada bir Angular olayı mevcut.

Evet sizinle küçük bir başlangıç yaptık, tebrikler 🙂

Daha fazlası için: https://angularjs.org/

jQuery .trigger() Metodu

Bir nesne için atadığımız olayın gerçekleşmesini sağlıyor. Örneğin yukarı çık örneğimiz olsun.

$('#up').on('click', function(e){
    $('html, body').animate({
        scrollTop: 0
    }, 1500);
    e.preventDefault();
});

Şimdi #up nesnesinin click eventını tıklamadan nasıl tetiklerim? Tabi ki trigger ile.. Yani;

$('#up').trigger('click');

dediğim zaman sanki #up nesnesine tıklanmış gibi yazdığım click eventım çalışacaktır.
Bunu özellikle slider’da çok kullanıyorum ben, sizinde işinize yarayacağına eminim 🙂

Daha geniş kullanımı için: http://api.jquery.com/trigger/

kolay gelsin 🙂

jQuery .not() Metodu

Hariç anlamına gelir. Mesela bir nesne seçtik ama atıyorum 2. indexli nesne hariç. Ya da atıyorum .active classı olan nesne hariç. Hariçler haricinde bize kalan nesnede işlem yapmamızı sağlıyor.
Mesela seçtiğimiz nesneler içinde active classı yoksa tıklama işlemi yaptıralım;

<ul>
    <li>test</li>
    <li>test2</li>
    <li class="active">test3</li>
    <li>test4</li>
</ul>
$('.menu li').not('.active').on('click', function(e){
    alert('ta da!');
});

Verdiğim örnekte 3. lide click işlemi olmayacaktır çünkü active sınıfına sahip ve benim istediğim olayım ona sahip olmayan nesnelerde çalışıyor not sayesinde.

jQuery .filter() Metodu

jQuery’de bulunan metodlar içinde en sevdiğimdir. Çünkü büyük ölçüde işimi kolaylaştırıyor.
Örneğin bir nesneyi değişkene aktardım.

var tab = $('.tab li');

Şimdi burada ilk elemanı seçip addClass metodunu uygulamam gerektiğinde bunu filter ile belirtiyorum.

tab.filter(':first').addClass('active');

Böylece değişkenin taşıdığı nesnelerde filtreleme işlemi yapıp ilk elemanı seçmemi sağlıyor.
Tabi sadece ilk eleman için değil :not(), :eq(), this vb. bir çok şey için geçerlidir. Örneğin küçük bir tab uygulaması yapacak olsaydık işimiz çok kısa olacaktı;

var tab = $('.tab li'),
content = $('.tab-content');

content.filter(':not(:first)').hide();
tab.filter(':first').addClass('active').end().on('click', function(e){
    tab.removeClass('active').filter(this).addClass('active');
    content.hide().filter(':eq(' + $(this).index() + ')').show();
    e.preventDefault();
});

Ya da örneğin daha farklı bir örnek verelim;

$('.item').filter(function(index){
    return $( this ).hasClass('boxed');
}).addClass('active');

http://api.jquery.com/filter/

İşte böyle, kolay gelsin 🙂

jQuery .end() Metodu

Sıkça kullandığım bir metoddur kendisi.
Yaptığı iş ise, ilk seçilen elemana geri dönmesi. Yani örnek vermek gerekirse;

$('.item').find('a').addClass('external-url').end().on('click', function(e) {
   alert('test');
});

Burada item içerisinde a nesnelerini bulup sınıf atadık. Eğer end metodunu kullanmamış olsaydık click işlemi a nesneleri için geçerli olacaktı. Ancak end kullandığımız için tekrar başa sardık ve filtreleme işlemlerini önemsemeden eventımızı uyguladık.
http://api.jquery.com/end/

Kolay gelsin.

jQuery Scrollbar Eklentisi

Sizlere perfectScrollbar adında bir jquery scrollbar eklentisini tanıtacağım.. Uzun zamandır kendi projelerimde kullanıyorum, jquery ile özel scrollbar yapmak isteyenler için ideal bir eklenti.

Öncelikle eklentiyi şuradan indirebilirsiniz.. İçerisinde src klasörü altında bize lazım olacaklar bulunuyor.. Bunlar;

  • jquery.mousewheel.js
  • perfect-scrollbar.js
  • perfect-scrollbar.css

Nasıl kullanacağız?

İlk olarak jquery kütüphanesi lazım tabi, bunu söylememe gerek yok 🙂 Bir html oluşturalım hemen..

<div id="content">
 … içerik …
</div>

Basitte bir css yazalım. CSS’de olması gerekenler overflow: hidden ve position: relative bunları koymayı unutmayın 🙂

.content {
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
}

Ve tabi ki eklentiyi kullanmaya geldi sıra..

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="perfect-scrollbar/jquery.mousewheel.js"></script>
 <script src="perfect-scrollbar/perfect-scrollbar.js"></script>
 <link href="perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function(){
      $('#content').perfectScrollbar();
 });
 </script>

İsterseniz parametrelerde kullanabilirsiniz.. Örneğin scroll hızını ayarlayabilirsiniz.. Ya da scroll’un sadece x ya da y ekseninde çıkmasını sağlayabilirsiniz..

$('#content').perfectScrollbar({
	suppressScrollX: true,
	wheelSpeed:100
});

Nesneye yeni içerikler eklendiğinde scroll’u update etmek içinse şu şekilde bir kullanım gerekiyor;

$("#content").scrollTop(0);
$("#content").perfectScrollbar('update');

jQuery cursorWatcher Eklentisi

Bir nesne düşünün.. Ve bu nesneye göre fare nesnenin neresinde kalıyor, bunu öğrenmemiz gerek.. Temelde 9 farklı konumu hesaba katarak küçük bir eklenti hazırladım.. Eklenti nesneye göre farenin 9 farklı konumunu tespit edip bir şeyler yapmanızı sağlıyor.

Nesneye göre konumlar:

  • Yukarı
  • Aşağı
  • Sol
  • Sağ
  • Yukarı Sol
  • Yukarı Sağ
  • Aşağı Sol
  • Aşağı Sağ
  • Orta

İndir (Github)

https://github.com/tayfunerbilen/cursorWatcher