AngularJS Notlarım – 5

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>

Kısaca hikaye şu;

angularjs-1

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“AngularJS Notlarım – 5” üzerine 5 yorum

  1. Kardeşim bu angularjs yi yeni görüyorum anladığım kadarıyla da yeni bir js ( kütüphanesimi desem nesem bilemedim 🙂 En mantıklısı ) kütüphanesi bunu uzun soluklu bir projede kullanmak mantıklı mı yeni geliştirdiğim bir projede oldukça çok js kullanmam gerekiyor ve bu nedenle jquery öğrenmeye başlamıştım ama şimdi bunu görünce bunu mu öğrensem jquery mi öğrensem diye düşündüm..

    Sence jquery mi angularjs mi daha iş görür ?

        1. AngularJs kullanıyorsanız jQuery kullanmanıza gerek kalmaz. Ajax, selector gibi tüm özellikler AngularJs içinde mevcut.
          Bilginize.

  2. Deniz Hanım Bence 2 Kütüphaneyide Öğreniniz İleride Faydasını Görürsünüz.
    İyi Kodlamalar

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir