AngularJS, google’nin desteklediği, javascript MVC kütüphanesidir. MVC (Modal View Controller) verinin, görünümün ve kontrollerin ayrı tutulmasına dayanır.
Modal: Verilerin tutulduğu nesnelerdir. İlişkili olduğu View nesnesini tetikler.
View: Görünümün (template) tutulduğu nesnelerdir.
Controller: Modal ve View nesnelerinin bağlandığı nesnedir. İşlemler ve kontroller burada yapılır.
AngularJS çalışmak için jQuery gibi kütüphanelere ihtiyaç duymaz. Tek sayfa uygulamaları geliştirmeye olanak sağlar. Bu tarz diğer kütüphanelerden en önemli farkı çift yönlü olmasıdır. Yani veride olan değişiklik görünüme, görünümde olan değişiklik de veriye uygulanır. Directive tanımlayarak html etiketlerini geliştirilmesine de olanak sağlar. Kodların kısalmasını sağlar kod karmaşasını büyük ölçüde önler.
AngularJS yaklaşık 100KB dır ve resmi sitesi https://angularjs.org/ dir.
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 ile basit bir örnek uygulama yaparak nasıl çalıştığını biraz daha iyi anlayalım. Örnek uygulamamız not ekleme ve silme işlemi yapıyor olsun. İlk olarak html bir sayfa oluşturalım ve head kısmında angularJS kütüphanesini sayfamıza tanımlayalım.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
Body kısmına ng-app attirbute sini ekleyelim. Bu attirbute sayesinde angularjs çekirdeğine yorumlayacağı bloğu tanımlamış olduk. Bunu html etiketine tanımlayabileceğimiz gibi angularJS nin çalışacağı bloğun elementine de tanımlayabiliriz.
<body ng-app>
Sonra bir div açalım ve ng-controller attirbute sine notcontroller verelim. Bu attirbute ile de bu bloğun notcontroller metodu ile bağlamış olduk.
<div ng-controller="notcontroller">
Şimdi not eklemek için kullanacağımız bir text input ve ekle butonu için de bir a elementi tanımlayalım.
<input type="text" name="not" id="not" ng-model="notadi"/>
<a href="javascript:void(0);" ng-click="notekle()">Ekle</a>
Burada ng-model attirbute sinde üst div elementinde belirtilen ve birazdan tanımlayacağımız notcontroller da hangi özellik ile bağlantılı olacağını belirttik. Ekle butonunda da click olayında çalışacak function belirtilmiştir. Şimdi de eklenen notların listelenmesi için ul etiketi açalım.
<ul ng-repeat="not in notlar">
<li>{{not.ad}}<a href="#" ng-click="notsil($index)">sil</a></li>
</ul>
Burada ng-repeat ile bir döngü açmış olduk. Bu döngü notcontroller de tanımlayacağımız notlar arrayinde dönecek ve her item ı not olarak verecektir. Yani foreach döngüsü tanımlamış olduk. Her elemanı da li lere bastık ve sil butonu ekledik. {{not.ad}} ile elemanın ad özelliğini bastık. $index ise elemanın index değerini verir.
Şimdi head kısmına notcontroller i tanımlayalım.
functionnotcontroller($scope) {
$scope.notlar = [];
$scope.notekle = function() {
$scope.notlar.push({ ad: $scope.notadi });
$scope.notadi = "";
}
$scope.notsil = function(ind) {
$scope.notlar.splice(ind, 1);
};
}
Notcontroller da notların listesini tuttuğumuz bir array, ekleme ve silme işlemleri için de metotlarımızı tanımlıyoruz. notekle metodunda javascript push ile array liste sine yeni item ekliyoruz ve textbox ı boşaltıyoruz. Notsil de ise javascript splice metodu ile array den item ı siliyoruz.
Test sayfamız aşağıdaki gibidir.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function notcontroller($scope) {
$scope.notlar = [];
$scope.notekle = function () {
$scope.notlar.push({ ad: $scope.notadi });
$scope.notadi = "";
}
$scope.notsil = function (ind) {
$scope.notlar.splice(ind, 1);
};
}
</script>
</head>
<body ng-app>
<div ng-controller="notcontroller">
<input type="text" name="not" id="not" ng-model="notadi"/>
<a href="javascript:void(0);" ng-click="notekle()">Ekle</a>
<ul ng-repeat="not in notlar">
<li>{{$index}} - {{not.ad}} <a href="#" ng-click="notsil($index)">sil</a> </li>
</ul>
</div>
</body>
</html>