AngularJS nedir ?

Merhaba. Uzun zamandır yeni yazı yazamadım. Artık biraz aktif olmanın zamanı geldi diye düşünüyorum. Bu yazımda sizlere AngularJs‘den bahsedeceğim.

En kısa tanımıyla MUHTEŞEM bir javascript framework’dür. AngularJS yada yakın zamanda 2.0 BETA sürümüyle “Angular”, Single Page Application uygulamalar yazmanıza izin veren bir frameworkdur. Üstelik resmi geliştiricisi Google!

Yazımızın başında “Single Page Application (SPA)” geliştirmemize yarayan bir frameworkdür diye bahsetmiştik. Öncelikle SPA’nın ne olduğundan bahsedelim.

Single Page Application nedir?

Eğer ingilizceniz var ise hiç vakit kaybetmeden “Single Page Application” wiki sayfasını okuyabilirsiniz. Çok detaylı ve bir okadar yararlı bir makale olmuş. Ben burada sizleri sıkmamak için kısaca anlatacağım.

Bildiğiniz gibi günümüzde birçok site Html, Css ve Javascript (jquery kütüphanesi) ile yapılıyor. Backend’de ise Php, Asp artık hangi server-side programlama dili tercih edilirse kullanılıyor.

Sayfalar arası geçişte bütün kaynaklar tekrar ve tekrar yükleniyor. Bütün yazdığınız css dosyaları, javascript dosyaları hepsi sayfalar her değiştiğinde tekrar yükleniyor.

Bu hem kullanıcı için çok büyük kaynak israfı hem de sunucu için çok bir kaynak israfıdır. İşte burada Single Page Application devreye giriyor. SPA’nın temeli yüklenen bir kaynağı tekrar yüklemeden o sayfada sadece ihtiyacınız olan bölümü değiştirmek.

Örneğin; Bir blog sayfanız var diyelim. Anasayfa’da muhtemelen header, sidebar, footer ve content bölümleri olacak. Eğer bir kişi bir makale okumak isterse linkine basacak ve sizin bu saydığım tüm modulleriniz tekrar yüklenecek.

İşte tam bu konuda yardımımıza yetişiyor. Tabiki aynı işi jQuery ile yapabilirsiniz ancak unutmamanız gereken jQuery bir kütüphanedir ancak AngularJs, MVC yapısında kurulmuş bir framework’tür. Şimdi geçelim asıl sorumuza…

AngularJs Nedir ?

Google mühendislerinin geliştirmeye başladığı ve sonradan birçok developerın dahil olduğu açık kaynak kodlu javascript kütüphanesidir. MVC yapısıyla gelen AngularJs, SPA sayfalar geliştirmenize olanak tanıyan bir javascript kütüphanesidir.

Eğer kullanmaya kara verdiyseniz jQuery’den vazgeçmelisiniz. Aslında beraber çalışabiliyorlar ancak en ufak karışıklıkla işler çıkılmaz bir noktaya gelebilir. Ancak çok çok çok önemli bir kütüphaneye ihtiyacınız yok ise jQuery kullanmanıza zaten gerek yok çünkü AngularJs zaten jQuery’nin jQLite ismini verdiği element kütüphanesini içinde bulunduruyor. Hangi fonksiyonlar olduğunu merak ediyorsanız buraya tıklayarak detaylı bilgi alabilirsiniz.

AngularJs nasıl kullanılır ?

Bu yazımızda küçük bir giriş yapalım. Ben bu yazıyı yazarken şuanki versiyonu 1.5.0 ‘dı ancak sizin bu yazıyı ne zaman okuyacağınızı bilemediğim için resmi websitesinden projemize dahil edeceğiz.

Ayrıca bütün örneklerimi Codepen üzerinden yazının sonunda paylşayacağım. Öncelikle boş bir index.html dosyası hazırlıyoruz.

<!DOCTYPE html>
<html>

  <head>
    <title>Merhaba AngularJs | CihanAksoy</title>
  </head>

  <body>
    <h1>Merhaba Angular Js!</h1>
  </body>

</html>

Öncelikle Angularjs.org sitesine girerek AngularJs 1 kütüphanesini indiriyoruz. Orada göreceğiniz AngularJs 2 var ancak ona sonra değineceğiz. Ben yazıyı yazdığım sıralar 2. versiyonu hala beta aşamasındaydı.

Aşağıdaki resimleri takip ederek gerekli javascript dosyası için CDN adresini kopyalıyoruz.

AngularJs Download Link

AngularJs CDN Link

Aldığımız CDN linkini sayfamıza body tagından hemen önce ekleyelim. HTML dosya mızın son hali aşağıdaki gibi olacak;

<!DOCTYPE html>
<html>

  <head>
    <title>Merhaba AngularJs | CihanAksoy</title>
  </head>

  <body>
    <h1>Merhaba Angular Js!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  </body>

</html>

Evet artık sayfamıza javascript dosyasını dahil ettik. Ancak jQuery v.b gibi kütüphaneler gibi hemen kullanamıyoruz. Öncelikle hangi alanda kullanacağımızı ng-app direktifi ile belirtmeliyiz.

Belirtmeden önce neden böyle birşey var onu açıklayalım. Siz sitenizin her bir köşesinde Angularjs kullanmak zorunda değilsiniz. Bir kısmında (mesela sadece header) kullanmak isterseniz ng-app direktifini o kısımın olduğu div etiketine verebilirsiniz. Genellikle html yada yada body tagına eklenir çünkü birçok kişi tüm sitede angularjs’nin hakim olmasını ister. Ancak istisnalar olabilir ve bu bilgiyide aktarmak istedim.

Şimdi Html tagımıza ng-app direktifini yazıyoruz ve Angularjs’nin tüm sayfada çalışmasını istediğimizi söylüyoruz. Html kodumuz şu şekilde oluyor;

<!DOCTYPE html>
<html ng-app>

  <head>
    <title>Merhaba AngularJs | CihanAksoy</title>
  </head>

  <body>
    <h1>Merhaba Dünya</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  </body>

</html>

Artık AngularJs’nin tüm nimetlerinden yararlanabiliriz. Ben bu konuda kısaca bir giriş yapacağım. Sonra ki makalelerimizde detaylı anlatımlara geçeceğiz.

Şimdi bir inputumuz olsun ve içine ne yazarsak yazalım istediğimiz bir etiketin içine onu yazsın. Örnek;

<!DOCTYPE html>
<html ng-app>

  <head>
    <title>Merhaba AngularJs | CihanAksoy</title>
  </head>

  <body>
    <input type="text" ng-model="inputModel" />
    <h1>{{inputModel}}</h1>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  </body>

</html>

Yukarıdaki html sayfasını yaptığınıda inputun içine ne yazarsanız h1 etiketinde yazıldığını göreceksiniz. Bunu ngModel direktifi sayesinde yaptık. Ayrıca html içinde AngularJs değişkenlerini kullanmak için {{değişken}} şeklinde kullanıyoruz.

Projeyi denemek için codepen linkine buradan ulaşabilirsiniz.

Bir sonraki makalede görüşmek üzere…


Bir Cevap Yazın

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