AngularJS ng-click, ng-model ve ng-repeat direktifleri

ng-click: Bu 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. Burda kelime isminde bir model oluşturuluyor ve bu kelime hemen altında yazdırılıyor. modelin içeriği değiştiği anda yazdırılan içerik anında değişiyor.

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

başka bir kullanım; Burda 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.

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

AngularJS kodu

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. For each gibi düşünülebilir.

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]);

Htlm gösterimi;

<div ng-app="app">
<div ng-controller="myController">
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-1

alıntıdır…

AngularJS $http servisi kullanımı

$http servisi ile request yapabiliyoruz ve gelen değeri data modeline aktarabiliyoruz. Ancak bunu controllerımın içinde $scope gibi $http parametresini aldıktan sonra yapacağım. Githubttan kullanıcının adını alalım.
Html kodlarımız;

<div ng-app="github">
<div ng-controller="getUserInfo">
Ad: {{ user.name }}<br />
</div>
</div>

JS kodlarımız;

var github = angular.module('github', []);
github.controller('getUserInfo', ['$scope', '$http', function($scope, $http){
$http.get('https://api.github.com/users/cemelma').then(function(response){
$scope.user = response.data;
});
}]);

AngularJs basit bir örnek

Anlaşılıar basit kullanımlar ilk başlayanlar için.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
div { margin:10px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>
var phonecatApp = angular.module('homeApp', []);

phonecatApp.controller('HomeController', function ($scope) {
$scope.name = "Merhaba";

$scope.fillList = function () {
$scope.listdivShow = true;
$scope.dataList = [{ 'id': '1', 'name': 'Cem Elma' }, { 'id': '2', 'name': 'Ege Karaağaç' }, { 'id': '3', 'name': 'Doğan Karaağaç' }];
};

$scope.addList = function () {
$scope.dataList.push({
'id': '1',
'name': 'Yeni Kayıt'
});
};

$scope.removeList = function (index) {
$scope.dataList.splice(index, 1);
};

});
</script>
<title>Index</title>
</head>
<body ng-app="homeApp">
<div ng-controller="HomeController">
<div>
<input type="text" ng-model="name" />  {{name}}
</div>

<div>
<input type="button" value="Kayıtları Getir" ng-click="fillList();" />
<div ng-model="listDiv" ng-show="listdivShow">
<ul>
<li ng-repeat="data in dataList">
<span>Name: {{data.id}}</span>
<span>Name: {{data.name}}</span>
<span><a ng-click="removeList($index);" href="">Sil</a></span>
</li>
</ul>
<p><a href="" ng-click="addList();">Yeni Ekle</a></p>
<p>Toplam Kayıt: {{dataList.length}}</p>
</div>
</div>

<div>
<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
</table>
</div>

</div>

</body>
</html>

Temel AngularJS kütüphaneleri

AngularJS çeşitli bileşenleri içeren modüller halinde düzenlenmiştir. Bu bileşenler Direktifler (directives), hizmetler (services), sağlayıcılar (providers), Tipler (types), genel apiler dir.
Angular kütüphaneleri.
ng : angularJS nin temel modüllerini içerir. Bir angularJS uygulaması başlatıldığında bu modül varsayılan olarak yüklenir.
ngRoute : Uygulamada url yönetimi yapılmasını sağlamak için kullanılır. (angular-route.js)
ngAnimate: Uygulamada animasyon özellikleri için kullanılır. (angular-animate.js)
ngResource : Rest api veri yönetimi için kullanılır. (angular-resource.js)
ngCookies: Cookie yönetimini sağlar. (angular-cookies.js)
ngTouch: Mobil tarayıcılar için geliştirilen uygulamalarda kullanılır. (angular-touch.js)
ngSanitize: HTML verilerini güvenli bir şekilde ayrıştırmak ve işlemek için kullanılır. (angular-sanitize.js)
ngMock: Test modülleri için kullanılır. (angular-mock.js)

AngularJS Nedir?

Googlenin desteklediği bir framework olan AngularJS içinde en çok söz edilen MVC yapısıdır.
AngularJS http://angularjs.org sitesine girip Javascript kütüphanesini indirebilirsiniz. AngularJs’in kendi resmi sitesi olduğu için en önemli ve doğru kaynakları bu siteden elde etmek mümkün. Menüde bulunan Learn, Tutorial bölümlerinden öğrenmeye başlamak en doğrusu. Youtube de videoların yayınlandığı bir kanalda mevcut. AngularJs’i öğrenmek için çok yararlı bir kanal olduğu kesin. Sayfaya buradan ulaşabilirsiniz AngularJS youtube kanalı: http://www.youtube.com/user/angularjs

İlk Örnek;

<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="isminiz" placeholder="Adınızı Giriniz"> <br/>
Merhaba {{isminiz}}
</body>
</html>

Bu örneği bir browser ile açtığınız zaman karşınıza bir textbox çıkacak ver textbox’a girilen metin “Merhaba”dan sonra yer alıyor olacak. Peki bu nasıl gerçekleşiyor? ng-app ve ng-model gibi bazı attribute’ler dikkatinizi çekmiş olmalı, evet bu attribute’ler angular.js’in yorumladığı attribute’ler.
– ng-app: bu directive (daha sonra directive’lerin ne olduklarına değineceğiz) en basit anlamda Angular.js’in kapsama alanını belirler. Yani burada demek istediğimiz tag’leri arasına yazılmış tüm kodlar angular.js tarafından elden geçirilsin. Eğer ng-app’i herhangi bir div’e verirsek sadece ilgili div Angular.js tarafından yorumlanır.
– ng-model: bu directive scope’unuzda bir değişken tanımlanızı sağlar ve bu değişkenin binding’ini ilgili elementin value’usu veya text’i olarak ayarlar. Burada two way binding (Türkçeleştirmek gerekirse çift taraflı bağlama belki uygun olabilir) kurulur.
– {{isminiz}}: çift süslü parantezler arasına scope içerisinde tanımlanan değişkenleri kullanarak bunları ekranda gösterebilir veya çeşitli işlemlere sokabiliriz.