AngularJS Nedir ? Kullanımı ve Örnekleri

https://angularjs.org/img/AngularJS-large.pngMerhaba arkadaşlar bir buçuk aydan fazla bir süredir yeni bir makale yayınlayamadım. Hem gündüz hem de geceleri ayrı ayrı projeler ile uğraştığım için yoğun bir dönemdeyim arada bulduğum boşluklarda ufak da olsa bildiklerimi paylaşmak istediğimden bugün bu konuyu seçip bir makale yazmak istedim. AngularJS her zamanki gibi başta çok sıcak bakmadığım bir kütüphaneydi benim için önceki makalelerimi takip edenler bilir yeni teknolojilere önce çok sıcak bakmam “Ne gerek var buna falan şeyle bunu zaten yapıyoruz” gibi bir düşünce olur aklımda ama ilerleyen süreçte göz ucuyla bir incelerim ve o “falan şey” den daha kısa zamanda ve daha pratik bir şekilde iş çıkardığını farkederim ve iyice öğrenmeye karar veririm. Tabii ki bu sürecin istisnaları var gerçekten de gereksiz yere ortaya atılan ve bu yüzden de çok tutmayıp kenara köşeye atılan projeler oluyor. Bence iyi bir programcı da hangi projeye ağırlık verip hangisini pas geçebilmesini bilmeli.

Hal böyle iken AngularJS ile yollarımız kesişti ve henüz ciddi projelerimde kullanmasam bile ufak ufak denemeler yapmaya başladım bir çok yönüyle JQuery kütüphanesine göre daha pratik olsa da JQuery benim her zaman favorim olmuştur. AngularJS, Google tarafından desteklenen MIT lisansı olan açık kaynak kodlu bir javascript kütüphanesidir resmi sitesindeki son versiyonu 1.5.8 (2016 Eylül) olup Angular 2 versiyonu beta olarak kullanıma sunulmuştur.

Çalışma mantığı MVC (Model-View-Controller) şeklindedir zaten pratikliğini buradan almaktadır. örneğin elinizde öğrencileri ve isim, soyisim gibi bilgilerinin tutulduğu bir Json listesi var bunu html table olarak listelemeniz gerekiyor jquery gibi bir kütüphane ile nispeten daha fazla kod yazmanız gerekecektir nesneyi seçip içerisine html ekleme gibi daha alt düzey işlemler yapmalısınız. AngularJS de ise html etiketleri içerisine bıraktığınız işaretlemeler ile verinin otomatik olarak bağlanıp kendisini listelemesini sağlayabilirsiniz. AngularJS’de bilmeniz gereken bir kaç ana kavram var ki mantık olarak basit şeyler. Modül, Controller, Model, View. Diğer önemli bir nokta da AngularJS’nin oldukça dinamik bir yapıda olduğudur. aşağıdaki örneği inceleyin.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
    <div ng-app="">
        <p>Sayıları topla: {{ 5 + 5 }}</p>
    </div>
</body>
</html>

Diğer bir örnek

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Adınız: <input type="text" ng-model="isim"></p>
  <p>{{isim}}</p>
</div>

</body>

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('mycontroller', ['$scope', function($scope) {
            $scope.kisiler = [{
                "firstName": "John",
                "lastName": "Doe"
            }, {
                "firstName": "Anna",
                "lastName": "Smith"
            }, {
                "firstName": "Peter",
                "lastName": "Jones"
            }];
        }]);
    </script>
</head>
<body>
  <div ng-app="app" ng-controller="mycontroller">
      <ul>
          <li ng-repeat="kisi in kisiler">
              {{ kisi.firstName }} - {{ kisi.lastName }}
          </li>
      </ul>
  </div>
</body>
</html>

Örneği açıklamak gerekirse; önce bir modül tanımlıyoruz ardından bu mobül içerisinde bir controller tanımlıyoruz. $scope bizim model nesnemiz bu nesne üzerinden dinamik olarak parametre tanımlayabiliyoruz bu örnekte ben “kisiler” isminde bir json listesi tanımladım. Ardından View yani bildiğimiz html bölümünde ise içerisinde işlem yapacağımız etiketlerin en dışında bu etiket içerisinde çalışacağımız modül ismini “ng-app” parametresine veriyoruz. controller’ın geçerli olacağı etiketi de “ng-controller” etiketi ile tanımlıyoruz. şimdi asp.net web forms ile çalışanların bileceği repeater kontrolüne benzer bir yapıyoruz. “ng-repeat” ifadesi ile o etiket içerisindeki elemanları tekrar ettireceğimiz veri kümesini tanımlıyoruz

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

0.0 Ort. (0% puan) - 0 oy

Bir Cevap Yazın

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