AngularJS Notlarım – 5

Biraz daha direktiflerden bahsetmek istiyorum.. ng-clickng-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>

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/