Tayfun Erbilen

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>