Kategori: JavaScript

Biraz daha direktiflerden bahsetmek istiyorum.. ng-click, ng-model ve ng-repeat direktifleri ile devam edebiliriz yazımıza.

ng-click

ng-click direktifi elemana tıkladığımızda özel bir davranış belirlememizi sağlar. Örneğin elemana tıklanınca ne yapılması gerektiğini belirleyebiliriz. Ya da bir fonksiyon çalıştırabiliriz gibi..

<div ng-app ng-init="site='erbilen.net'">
  <a href="#" ng-click="site = 'prototurk.com'">[Siteyi değiştir!]</a>
  {{ site }}
</div>

ng-model

ng-model için küçük bir örnek ile başlayalım. Hiç controller karıştırmadan ng-app dedikten sonra bu kodları çalıştıralım.

<input type="text" ng-model="kelime" />
<p>{{ kelime }}</p>

Evet artık input’a ne yazarsam hemen aşağısında o çıkacak.

Ya da daha farklı bir örnek vermek gerekirse;

<div ng-app="app">
  <div ng-controller="myController">
  
    <input type="text" placeholder="Birşeyler yaz.." ng-model="kelime" ng-bind="alert(kelime)">
    
  </div>
</div>

Şimdi input’ta yazınca bind ettiğim için controllerımdaki alert metodum çalışacak ve yazılan değer ekranda alert ile gösterilecek.

var app = angular.module('app', []);
app.controller('myController', ['$scope', function($scope){
  
  $scope.alert = function(str){
    if ( typeof str != 'undefined' )
      alert(str);
  }
  
}]);

ng-repeat

$http servisi ile bir request yapıyoruz ve gelen datayı ng-repeat ile tekrarlatıyoruz. Yani kısaca döngüye sokuyoruz. Nasıl mı?

var app = angular.module('app', []);
var myController = function($scope, $http){
  
  var onComplete = function(response){
    $scope.repos = response.data;
  }
  
  var onError = function(response){
    $scope.error = 'Bir sorun oluştu!';
  }
  
  $http.get('https://api.github.com/users/tayfunerbilen/repos')
  .then(onComplete, onError);
  
};
app.controller('myController', ['$scope', '$http', myController]);

Şimdi html tarafında ise şöyle göstereceğim;

<div ng-app="app">
  <div ng-controller="myController">
    Tayfun Erbilen - Github Repo
    <ul>
      <li ng-repeat="repo in repos">
        {{ repo.name }}
        <span style="display: block; color: #777;">
          {{ repo.description }}
        </span>
      </li>
    </ul>
  </div>
</div>

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

Önceki konularda sizlere ng-app direktifini göstermiştim. Bu şekilde anonim bir kullanım oluyor. Burada biz kendi modülümüzü oluşturmalıyız.

Neden modül oluşturuyoruz?

Controller, servisler, filterler, direktifler ve diğer şeyler için modülü kullanıyoruz. Yani aslında modüle tanımlıyoruz bunları.

Şimdi bir örnekle daha iyi anlayalım. Normalde ng-app dememiz yeterliydi. Ancak şimdi buna bir isim vereceğiz.

<div ng-app="modul">
    <div ng-controller="test">
       {{ merhaba_dunya }}
    </div>
</div>

Şimdi angular’da ilk olarak modülümüzü oluşturalım.

var modul = angular.module('modul', []);

Evet modül’e bir controller tanımlayalım. Normalde şöyle kontrol oluşturuyorduk;

var test = function($scope){
    $scope.merhaba_dunya = "hello world!";
}

Ancak modüle tanımlarken biraz daha farklı. Yani şöyle;

modul.controller('test', ['$scope', function($scope){
    $scope.merhaba_dunya = "hello world!";
}]);

Filtre Kullanımı

Başka bir örnek yapalım. Bu seferde bir filtre oluşturalım. Henüz bunu göstermedim ama bir merhaba demekten zarar gelmez ???? Örneğin;

module.filter('degistir', function(){
   return function(name){
      return name.replace('world', 'dünya');
   }
});

Kullanırken ise şöyle kullanacağız;

{{ merhaba_dunya | degistir }}

Bude bizde hello dünya! çıktısını verecektir.

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 öğ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/