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;
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 ?
İkisini bir arada kullanabiliyorsun, bazı şeyler için jQuery gerekecektir çünkü.
Anladım teşekkür ederim o zaman 2 sinede hızlıca çalışmaya başlayım 😀
AngularJs kullanıyorsanız jQuery kullanmanıza gerek kalmaz. Ajax, selector gibi tüm özellikler AngularJs içinde mevcut.
Bilginize.
Deniz Hanım Bence 2 Kütüphaneyide Öğreniniz İleride Faydasını Görürsünüz.
İyi Kodlamalar