Eki.20

AngularJS (1.3 / 1.5) Eğitimi: AngularJS Nedir ve Neden AngularJS

AngularJS, 2009 yılında GetAngular şirketi üzerinden piyasaya sürüldü. İlk üretildiğinde 17000 satır kod ile üretilmiş, sonraları yeniden revizyon yapılarak en son haline 6 ayda geldi. Ticari olarak üretilen bu Framework için sponsor arayışına girildi ve nihayetinde Google tarafından tam destek aldı. Sebeplerini de bölüm içerisinde kendiniz göreceksiniz.

AngularJS en basit tanımıyla; web sayfalarının geliştirilmesinde ve test edilmesinde kolaylıklar sağlayan, açık kaynak kodlu MVC kodlama yapısını performanslı bir şekilde sunan bir JavaScript Framework’üdür. Kendine has getirdiği yeniliklerle; çift taraflı veri bağlama, direktifler, enjeksiyonlar, kolay test ortamı sağlaması ve HTML5 dilini genişletmesi nedeniyle şu an en popüler JavaScript Framework’ü olmuştur.

AngularJS ve jQuery Karşılaştırması

AngularJS ile jQuery karşılaştırmasını kitaba eklememin özel bir sebebi var. Piyasada bundan yaklaşık olarak 5 yıl öncesinde Adobe Flash Player’a alternatif olarak daha interaktif web içerikleri üretmek için ve JavaScript’i daha da verimli ve pratik bir şekilde kullanmak için üretilmiş bir Framework’tü. İşe yarıyor mu, evet yarıyor. Özellikle de mobil web tasarımlarının popülerleşmesi, daha doğrusu ihtiyaç haline gelmesi ile de JQuery Mobile kütüphanesi oldukça popüler oldu.

Ancak Türkiye piyasasındaki yazılımcı arkadaşlarımız genelde araştırmayı çok sevmez. Bir şey öğrendiklerinde ona bağlı kalırlar ve yeni teknolojilere gözlerini kaparlar. Kimisi adapte olmaktan korkar, kimisi tembeldir…
Kitaba özellikle AJAX konusunu da eklemedim. Hâlbuki bugün hangi web programcısına AJAX diye sorsanız, “AJAX’sız bir web dünyası düşünemiyorum” diyecektir. Ben inadına AJAX anlatmaktan kaçındım. Çünkü “AJAX mı kaldı artık” diyecek kadar da cesurca konuşabilirim. Evet, AJAX artık çok demode, itici, hantal ve gereksiz bir teknoloji. Artık Web Socket ve NodeJS teknolojileri var. Hem daha kolay hem daha performanslı! Ayrıca AngularJS içinde AJAX ile aynı işlemleri yapan metotlar bulunmaktadır. O zaman niye hala arkeologlar gibi geçmişi eşip eşip durmanın bir anlamı yok!

Türkiye piyasasında jQuery çok popüler olduğundan dolayı, AngularJS ile bir karşılaştırma yapmak istiyorum. Sonra kafanızda soru işaretleri oluşmasın.

JQuery bir kütüphane, AngularJS ise bir framework’tür.

JQuery DOM manipülasyonu için kullanılır, modellerle ilgilenmez, iki yönlü veri bağlama yapamaz, ileri seviye projelerde işler karmaşıklaşır ve bazen ufak bir iş için çok fazla kod yazmanız gerekebilir.

AngularJS; MVVM Framwork’üdür, SPA (Single Page Application) üretilebilir, modülerdir, çift yönlü veri bağlayabilir…

Şimdi bir de komut yazımı, yani syntax dediğimiz karşılaştırmayı yapalım.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js" >   </script>
  </head>
  <body>
    <div>
      <label>İsim:</label>
      <input type="text" ng-model="isim" placeholder="İsim giriniz...">
      <hr>
      <h1>Merhaba {{isim}}</h1>
    </div>
  </body>
</html>

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.0.js" ></script>
    <script type="text/javascript">
    $(function(){
        $(document).keyup(function(){ 
            var isim= $("#isim").val();
           $("#cikti").html(isim);
        });
    });      
    </script>
  </head>
  <body>
    <div>
      <label>İsim:</label>
      <input type="text" id="isim" placeholder="İsim giriniz...">
      <hr>
          <p>Merhaba <isim id="cikti"></isim></p>
    </div>
  </body>
</html>

Ham JavaScript ile bu örneğin nasıl yapılacağını da, siz kendiniz yazıp karşılaştırmayı deneyin…

Gördüğünüz gibi her ikisi de aynı şeyi yapmakta. Fakat AngularJS’yi yazması daha pratik. Ayrıca dikkat edin, AngularJS’de içeriği yazdırırken herhangi bir elementin id’sine veya herhangi bir elementin olay yönetisine ihtiyaç olmamaktadır. Ayrıca herhangi bir script etiketi açıp fonksiyon kodları da yazmadık. İlk bakışta bunun çok da önemli bir fark olmadığını belki şu aşamada anlayamayabilirsiniz, fakat orta ve büyük çaplı bir projeye başladığınızda bunun ne kadar büyük bir nimet olduğunu fark edeceksiniz.

Ayrıca sıra jQuery’ye gelene kadar sırada BackboneJS, EmberJS, KnockoutJS gibi daha kaliteli framework’ler bulunmaktadır. Yani bazı kesimler tarafından artık jQuery artık çağdışı kalmıştır.

AngularJS Online Test Ortamı

Diğer bölümlerde olduğu gibi bu bölümlerde de AngularJS ile uygulamalarımızı daha pratik olması amacıyla Online Editör’ler üzerinden test edeceğiz. İsterseniz AngularJS’ye aşina olduktan sonra uygulamaları tek tek lokal sistemde kendiniz .html, .css ve .js dosyalarını hazırlayıp olması gerektiği gibi test edebilirsiniz.

http://www.tutorialspoint.com/try_angularjs_online.php adresine girin.

Sayfaya girdikten sonra karşınıza editör gelecektir. Varsayılan olarak index.htm dosyası üzerinden kodları yazıp test edeceğiz. Sayfanın üst kısmında yer alan Preview butonuna tıkladığınızda, sayfanın alt kısmında yazdığınız kodun derlenmiş halini görebilirsiniz. İsterseniz soldaki dosyayı seçip hazırladığınız dosyayı bilgisayarınıza indirebilirsiniz.

Veya https://jsfiddle.net/ adresini kullanabilirsiniz (Sayfa açılma ve derleme performansı daha iyi). Kodlarınızı girdikten sonra Run butonu ile sayfayı derleyebilirsiniz.

Veya http://jsbin.com/ adresini de tavsiye ederim. Add Library butonun tıklayarak listeden Angular JS sürümü seçip otomatik olarak sayfaya ekleyebilirsiniz. File > Download ile de çalıştığınız sayfayı .html formatı ile indirebilirsiniz.

AngularJS Framework’ün HTML5 Sayfalarına Dahil Edilmesi

Daha önceki Framework uygulamalarımızda olduğu gibi AngularJS Framework’ünü de isterseniz lokal diske indirip HTML5 içine dahil edebilir, isterseniz de doğrudan online olarak sayfaya dahil edebilirsiniz. Online dahil etmenizi tavsiye ederim.

AngularJS’i indirmek için https://angularjs.org/ adresine girip Download butonuna tıklayın. Karşınıza hangi sürümü istediğinizi soran bir pencere çıkacaktır. Varsayılan ayarlarda bırakıp indirme işlemini onaylayın.

İşlem sonunda angular.min.js dosya ismi ile AngularJS Framework’ü inecektir. Daha sonra HTML5 sayfanızda head etiketleri arasında script etiketi ile sayfa içine dahil etme işleminizi yapabilirsiniz.

<script src = "angular.min.js "></script>

Online olarak dahil etmek için de aşağıdaki yapıyı kullanabilirsiniz. Burada sürüm numarasına dikkat edin. 1.4.8 şu an Versiyon 1.5 sürümü ile Beta’dadır.

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

Linki güncel olarak kontrol etmek isterseniz yine aynı sayfadaki Download kısmında seçeceğiniz sürüme göre CDN satırında bulabilirsiniz.

Temel AngularJS Sayfa Yapısı

Daha önce yazdığımız AngularJS kodumuzu tekrar gözden geçirelim…

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js" >   </script>
  </head>
  <body>
    <div>
      <label>İsim:</label>
      <input type="text" ng-model="isim" placeholder="İsim giriniz...">
      <hr>
      <h1>Merhaba {{isim}}</h1>
    </div>
  </body>
</html>

• ng-app: Direktif. AngularJS’nin dahil edileceği bloktur. Bu blokta yer alan bütün kodlar AngularJS’nin kapsama alanındadır Yani AngularJS’nin çalışacağı alan ng-app ile belirtilmelidir ki genelde de ya html ya da body içinde tanımlanır.
• ng-model: Direktif. Değişken ismi tanımlamada kullanılır. Normal input elementlerinin name ve id gibi tanımlayıcı attribute özelliklerine benzetilebilir.
• {{isim}}: İfade. ng-model ile tanımlanan değişkenlere erişmek için kullanılır.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum