AngularJS yada şu sıralar 2.versiyonu geliştirilmekte olup adı kısalarak sadece Angular olacak, javascript ile yazılmış, SPA(Single Page Application) geliştirmemize yarayan bir framework’ tür DEDİĞİMİZ ANDA belki de bu yazıyı okuyan kişilerin %99.9′ nun hiç işine yaramayacağı kadar sığ bir açıklama yapmış olacağım. Çünkü Framework dediğimiz zaman, backend’ te kod yazan geliştiriciler için büyük anlamlar ifade ediyor LAKİN Frontend dünyası yakın zamana kadar Jquery KÜTÜPHANESİ ve eklentileri ağırlıklı olmak üzere çeşitli ek kütüphanelerle işlemlerini yürütüyordu. Tamam şimdi itiraz edip, EmberJS kullanılıyordu, BackboneJS vardı diyecekler olabilir ama şahsi fikrim hiçbiri AngularJS kadar gerçek bir framework olmamıştır. Bunu söylerken sadece teknik yeterlilikleri gözönüne almıyorum, örneğin route yada data-bind yapısı yada sizin için framework dediğimiz şey her ne ifade ediyorsa. Benim için önemli olan framework’ ün piyasadaki duruşudur, varlığıdır. Angular‘ ın resmi geliştiricisi Google şirketi, bu bile bize çok şey anlatmakta ki yazının devamında bu konuyu derinlemesine irdeleyeceğim.

Kısa bir kafa karıştırıcı laklak yaptıktan sonra, artık AngularJS gerçekten nedir ? niye kullanılır ? Ben kullanmalımıyım ? bunu kimler kullanır ? niye niye nedir gibi sorularınıza elimden geldiğince cevap vermeye çalışacağım. Lakin AngularJS, yeni teknolojiler üzerinde kurulmuş bir çözüm olduğu için, bağlı olduğu yapılarıda bilmeniz gerekiyor. Bu sebeple öncelikle bunlardan bahsedip, ardından tamamen Angular’ dan bahsetmeye başlayacağım.

Öncelikle şunu ayırt edelim. Şuan internet sitelerinin çoğu, geleneksel olarak adlandırabileceğimiz, site içinde bir sayfadan diğerine geçerken, HTML,CSS ve Javascript gibi sayfa bileşenlerinin sıfırdan yüklenmesi kurgulanarak çalışıyor. Yani diyelimki; herhangi bir ürün sayfasında geziyorsunuz, karşınıza başka bir ürün sayfasının linki çıktı ve tıkladınız, açılacak sayfanın HTML, CSS ve Javascript’ inin neredeyse %95′ i aynı olmasına rağmen sıfırdan yükleniyor. Bu durum günümüz teknolojisinde artık kabul edilebilecek bir durum değil! Çünkü bir düşünün, ürün sayfaları arasında sörf yapıyorsunuz ve değişen veriler taş çatlasa 1-2 KB boyutunda textler. Ama sayfanın tamamı sıfırdan yüklendi. Bunun ne kadar gereksiz ve server açısından çöpe atılan bir kaynak tüketimi olduğunu siz hesaplayın. Bunu aşağıdaki resimde ifade etmişler.

Sırasıyla gerçekleşen işlemler;

  1. Her istekte, istek sunucuya gider
  2. İsteğe göre gerekli veri, veritabanından alınır
  3. Veri HTML dosyamız içinde ilgi yerlere yazılır (data-binding)
  4. Sayfanın tüm HTML’ i header, main content ve footer bir araya getirilip kullanıcının tarayıcısına gönderilir.
geleneksel web uygulamaları

geleneksel web uygulamaları

Halbuki bu işlemlerden data-binding ve dolayısıyla tüm HTML’ in sıfırdan oluşturulması işleminin serverda yapılmasına ihtiyacımız yok. Bizim tek ama tek ihtiyaç duyduğumuz şey; Geçiş yaptığımız yeni sayfanın veri tabanındaki verisi + eğer sayfa tipi değiştiyse de yeni sayfanın sadece değişen HTML parçası, hepsi bu. İşte basit anlamda bu şekilde çalışan uygulamalara Single Page Application diyoruz. https://en.wikipedia.org/wiki/Single-page_application adresinde anlatıldığı üzere, kullanıcıya sanki bir masaüstü uygulaması kullanıyormuş hissi veren, web uygulamamızda (artık bir web uygulamasıyız) kullanılacak olan baz HTML,CSS,Javascript dosyalarının hepsinin tek seferde yüklendiği, uygulamada sörf yaparken, her bir yeni sayfaya girildiğinde, sadece o sayfaya özel, HTML,CSS ve Javascript dosyalarının + Veri’ nin yüklendiği çalışma sistemidir.

SPA’ nın ne olduğu kafamızda biraz şekillendiyse artık şunu diyebiliriz, ANGULAR ile SPA yapılır. Eskiden javascript’ i jquery vb. kütüphaneler ile birlikte sayfamızda carousel’ ler yapmak için, sayfamızın sadece bazı parçalarının içeriğini, sayfa tekrardan yüklenmeden değiştirmek için, kullanıcının tıklama vb. hareketlerini izleyip aksiyon almak için vesaire vesaire, Angular’ a kıyasla ufak işler için kullanıyorduk. Angular ile birlikteyse artık kullanıcının tarayıcısında bir web uygulaması yapmaya başlıyoruz.

SPA olarak çalışan web uygulamalarına şunları örnek verebiliriz (Dikkat aşağıdaki siteler SPA’ dır lakin hepsi Angular ile yazılmamıştır. React Js vb. frameworkler ile yazılanlar vardır, bu frameworklere de değineceğiz);

– Instagram.com

– Spotify Web Çalar

– Soundcloud.com

– Youtube’ un bazı sayfaları

– ve diğerleri 🙂

 

Herşey çok güzel, örnek siteler süper çalışıyor lakin neden hala dünyadaki diğer milyonlarca site SPA değil ? Çok güzel birşey olsa herkes kullanmazmıydı ? Ben Angular öğrenmek istiyorum ama etrafımda kimse kullanmıyor bunu, kafam karıştı diyorsanız SAKİN OLUN hemen cevaplıyorum.

SPA sistemi dünyada henüz yeni sayılabilecek bir sistem ve websitelerinin şuanki çalışma sistemlerinden çok çok farklı olduğu için, büyük websitelerinin geçiş yapması haliyle zor olacak ve zaman alacaktır. Çünkü şuan web sitelerinin önyüzünde javascript sadece basit işlemleri çözmek için kullanılıyor, bunlara kısaca Jquery işlemleri desek yeridir, Ama SPA ile serverda yani backend’te yapılan çoğu işlem (bunlara yukarda değindik data-binding, HTML birleştirme) kullanıcının tarayıcısında yapılacak. Kolay bir geçiş değil. Buna bağlı olarak backend’ te değiştirilmesi gereken bir sürü yapı var. Büyük websiteleri bu durumda hemen geçiş yapamaz. Önce SPA’ nın gerçekten piyasada standart haline gelmesini bekler. Ayrıca SPA yeni bir sistem olduğu için, Geliştiricisi Google bile sitenizi indeksleyen web örümceğine bunu yeni yeni öğretmeye başladı. Klasik web sitelerini indekslemek kolay çünkü örümcek sitenizin sayfasına istek gönderiyor, tüm HTML de bir kerede örümceğe veriliyor. Ama artık sayfalarımız javascript’ in hakimiyetinde ve HTML’ i oluşturmakta onun görevi, lakin Google’ ın web örümcekleri çok yakın bir zamana kadar javascript yorumlamayı bilmiyorlardı. Kısaca SPA yeni bir teknoloji ve devrim niteliğinde, bu yüzden öncelikle büyük sitelerde görmeniz zor. Lakin Instagram, Spotify gibi siteler yeni nesil olduğundan, ve tüm işleri resim ve müziği kullanıcıya sunmak olduğu için SPA olarak çalışmaları çok kolay.

ARTIK ANGULAR’ IN NEDEN VAR OLDUĞU ? NE İŞE YARADIĞI ? NİÇİN KULLANILMASI GEREKTİĞİ VB.SORULARA AZ DA OLSA CEVAPLARIMIZ OLDU.

ÖRNEK UYGULAMA

Aşağıdaki çok çok ufak bir angular uygulaması yaptım fakat temel işlemleri barındırdığı için iyi bir giriş olacaktır.

JS Bin on jsbin.com

Örneğimiz 3 ekrandan oluşuyor, HTML, Javascript ve en sonda Tarayıcıdaki görüntüsü.

– İlk olarak sayfama angular.min.js dosyasını ekledim, angular uygulaması yapabilmek için temel şart zaten 🙂

– Html etiketime ng-app yazdım. Aslında ng-app=”uygulamaminIsmi” olması lazım ama ona zaten gelicez. Burdaki amaç şudur; Angular uygulamamı sayfanın neresinde kullanacağımı belirtiyorum. Kafalar karışmasın hemen, tabiki tüm uygulamamı Angular ile yapacağım fakat bir kişi çıkıpta diyebilir ki ben web sitemin sadece bir kısmında Angular kullanmak istiyorum, işte biz ng-app atamasını nereye yaparsak, o alanın içini Angular çalışma alanı olarak kabul eder. Yani ben kalkıpta form elementine ng-app ataması yaparsam, Angular sadece o form da çalışır.

İyide Angular sadece form da çalışsın istesemde gidip Html etiketine yazsam ne farkeder, ne olur ki?

Kötü olur. Ha uygulaman gene çalışır ama biraz büyüyünce sıkıntı yaşmaya başlıycan. İleride değineceğimiz data-bind konusunda örneğin büyük problem çıkacaktır.

* Sayfaya eklenen bootstrap dosyalarını eğerki bootstrap nedir bilmiyorsanız es geçin, angular ile alakası yok. Bootstrap de bir framework’ tür ve sayfadaki butonlar vb. elementlerin görünümlerini vb. işlemleri onunla yaptım. Bootstrap’ de ilerleyen zamanlarda bloğumda anlatacağım bir framework.

– Body’ e eklenmiş ng-controller=”ctrl” ifadesini gördünüz, işte MVC yapısının C’ si yani controller katmanını burda belirttim. İncelemekte olduğunuz en en ufak angular uygulamamızda, sadece bir controller var, o da tüm sayfaya hükmediyor, lakin büyük uygulamalarda asla böyle değil ! bizim uygulamamız ufak olduğu için bir adet yeterli. Büyük uygulamalarda tahmin edileceği üzere onlarca controller var, herbiride sayfadaki elementlere yayılmış durumda.

Aşağıdaki kodun Javascript kısmında function ctrl ile bu controller’ ı tanımlayıp içine metodlarımı ve uygulamamda kullanacağım dizimi tanımladım.

– Şimdi Javascript ve Html’ ime göz attıysanız paralel olarak gidip, en sağdaki görüntü işlemler nasıl gerçekleşiyor anlayalım.

controller’ ım $scope diye bir parametre aldı, $scope etki alanı demek yani burada controllerımı temsil ediyor. Aslında javascript teki “this” ifadesi diyebiliriz. Ne yaptım, $scope.isimlerDizisi = [‘Emre’,’Pınar’,’Banu’]; diyerek controllerımın içinde isimlerDizisi adında bir dizi açıp içini doldurmuşum. Hemen HTML’ deki

<tr ng-repeat=”herBirIsim in isimlerDizisi“> satırına bakıyoruz, burada ng-repeat ile $scope taki isimlerDizisi’ ni forEach yapıyorum, daha doğrusu Angular bizim için yapıyor. her bir ismide yani dizinin her bir elementinide herBirIsim adında anlık olarak ele alıyorum, <td>{{herBirIsim}}</td> süslü parantez içinde yazarak ta ekrana basıyorum.
İşte tüm isimler en sağdaki ekranda bu şekilde listeleniyor.

– Hemen aşağıda ng-click=”deleteRow(herBirIsim)” satırı var, ng-click’ i butona atamışım, bunu html’ elementlerine verdiğimiz on-click vardır hatırlarsınız, onunla aynı. Napıyor ? butona tıklayınca gidip bakıyor ben hangi controller’ dayım ? Hangi controller’ dayız ? Tabiki ctrl ismini Body’ de verdiğimiz controller’ dayız. Bize en yakın controller o. Sonra diyorki, bu controller’ daki  deleteRow metoduna herBirIsim verisini gönderip çalıştır. herBirIsim burada ne olur ? Hangi satırdaki butona tıkladıysak o satırdaki isim olur!

– Hemen controllerdaki deleteRow metoduna bak, gönderdiğimiz değeri “isim” değişken ismi olarak aldı ve $scope taki isimlerDizisi’ nden sildi. Burada splice ve indexOf javascript metodları kullandım. Bunların ne olduğunu bilmiyorsanız, şimdilik boşverin yada araştırabilirsiniz, şu an konumuz bu değil. Sildi mi? Sildi. Burada aslı önemli olan, bu işlemleri Angular’ ın ng-click $scope ve diğer parçaları ile yapmış olmamız.

Şimdi buraya kadar görmemiz gereken nedir ?

– Angular şimdi burada bize ne yaptı? ne yarar sağladı?

Data-binding yaptı. Elimizde bir dizi var, bunu liste halinde sıraladık. Bu işlemi jquery ile yapmak istesek, satırlarca kod yazacaktık. Mesela neleri mi yazacaktık?

Öncelikle diziyi foreach yapacaktık, her element için yeni bir satır html kodunu table’ a ekleyecektik. Silme işleminde tablodan o satırın yok olması için, silme işlemini dinleyecektik, ve daha birçok gereksiz işlemi biz yapacaktık.

Ama angular ne yaptı?

Biz sadece diziyi tanımladık, ve ng-repeat’ e verdik. O artık bu saatten sonra o diziyi satır satır açıp bastı, dizi heran değişebilir diye gerekli eventleri kurup, dinler hale geldi. Diziden bir element sildiğimizde anında bunu algıladı ve HTML’ den silme işlemini gerçekleştirdi.

Bu ufak bir örnek gibi görünse bile, mantığı kavramakta faydalı bir örnek oluyor.

Şimdi model katmanına geldik.

Sayfamızda gördüğünüz iki adet input var, biri isim alıyor diğeri de ekleme işlemini yapan buton.

aşağıdaki satır input’ umuz, id, text,placeholder bunları geçelim, ng-model var gözümüze asıl çarpan, işte sayfamızdaki tüm verileri ng-model ile takip ediyoruz. siz bu input un değeri ile her oynadığınızda, controller’ ımızın $scope’ unda isim adlı bir değişkenin değeri anlık güncelleniyor. Yani $scope.isim diye bir değer oluşup sürekli değer alıyor.

Siz bu değeri her değiştirdiğinizde olayı takip edebilmeniz için bu değeri sayfanın en altında bastırdım.

Aslında ben hiçbişi yapmadım. Süslü parantezler ( {{isim}} ) içinde $scope’ taki değişken ismini yazdım. HTML’ in içinde $scope’ taki bir değeri bu şekilde bastırıyoruz. başına $scope yazmıyoruz.

Siz isim’ in değerini her değiştirdiğinizde, Angular bunu algılayıp, sayfanızda o controller’ ın etki alanıdaki HTML’ de süslü parantezler içine bakıyor, değişkeni gördüğü gibi yeni değerini yazıyor içine. Bu kadar otomatik.

<input id=”add” type=”text” placeholder=”yeni bir isim giriniz ?” ng-model=”isim”/>

Ekleme işlemi nasıl gerçekleşiyor ? 

Ekle butonunda ng-click içinde ne var? isimEkle() metodu tabiki, controller’ da bu ne işe yapmış ?

$scope.isimlerDizisi.push($scope.isim);

$scope taki isimleriDizisi’ ne $scope’ taki isim değişkenin değerini eklemiş.

Ekledikten sonra neler oldu peki? Angular bu boş durur mu? Tüm olan biteni dinliyor demiştik. Hemen baktı gördükü isimlerDizisi’ ni ben ng-repeat ile sayfada açıyorum, eee bu dizi değiştiyse hemen bunu tekrar açmalıyım dedi ve işte listeye yeni isim eklenmiş oldu. Bu kadar basit.

Siz hiçbir şey yapmadınız. Sadece angular’ a bir yol belirlediniz ve arkanıza yaslandınız, artık tüm işlemleri Angular kendisi yapıyor.

Angular ile basitçe tanıştıysak, Instagram gibi, Spotify gibi web uygulamaları yapmaya hazırsınız demektir.

Öğrenmeye devam ederseniz, herşey çorap söküğü gibi gelecek. Yeterki anlatımlarımı takip etmeyi unutmayın 🙂

Eğerki buraya kadar okuduysanız, çok çok teşekkürler.

12 Comments AngularJS Nedir?

  1. murat

    Öncelikle Merhaba makalen çok güzel olmus eline sağlık

    benim angularjs de sıkıntı olarak gördugum nokta sayfa yüklendikten sonta angularjs dom ediliyo ya o 1,2 sn arasında {{durum}} diye sayfada görunuyoo ve gercekten hoş olmayan bir göruntu ortaya çıkıyor 🙁 bunu nasıl halledbilirz ilhiniz varmı ?

    Reply
    1. emre

      Merhaba Murat, makaleyi beğenmene çok sevindim.

      Bu sorun herkes tarafından yaşanıyor ve çözümü datayı ng-bind directive’ i ile kullanman.

      https://docs.angularjs.org/api/ng/directive/ngBind adresinden de inceleyebileceğin gibi, yazman gereken kod örneği aşağıdadır;

      Bu sayede, $scope ta durum değeri set edildiğinde bind işlemi gerçekleşecek ve istenmeyen görüntüler ortaya çıkmayacaktır. Aslında bunun en iyi çözümü ng-clock attribute’ ünü elementine eklemektir, detaylarını https://docs.angularjs.org/api/ng/directive/ngCloak adresinden alabilirsin. Fakat ng-clock maalesef ölü doğmuş bir çözümdür. Çünkü yaptığı işlemler yine javascript kodları ile gerçekleşiyor ve kısır döngüye giriyor. Bu konuda yakın zamanda bir makale yazmayı planladım. Takipte kalmanı öneririm 😉

      Reply
  2. Can YASTIOĞLU

    Ellerine sağlık müthiş bir döküman olmuş.
    {{}} tagını seçmeleri çok kötü olmuş Laravel’in blade template motoru ile çakışıyor.
    Çözülüyor gördüğüm kadarı ile ama neden neden diye sormadan edemiyor insan 🙂 Konya ovasında direğe çarpmanın ne alemi varmış diyor insan kendi kendine.
    Keyiflendim bir el LOL oynayayım.

    Reply
    1. emre

      Merhaba Can, öncelikle yorumun için teşekkür ederim.

      Öncelikle senin de bahsettiğin gibi bu sorun çözülüyor. curly brace {{}} leri laravel tarafında değiştirmek için Blade::setContentTags(‘< %', '%>‘); işlemi kullanılabilir.
      Tam tersi Angular’ da değiştirmek için ise;
      var uygulamam = angular.module(‘uygulamam’, [], function($interpolateProvider) {
      $interpolateProvider.startSymbol(‘< %'); $interpolateProvider.endSymbol('%>‘);
      });
      şeklinde bir setleme yapılabilir.

      Neden curly braces tercih edilmiş dersen;

      http://handlebarsjs.com/ ve diğer frontend template motorları hep bunu tercih ediyor ve standart haline gelmiş durumda. Geliştiriciler AngularJS’ e geçtiğinde, zorlanmasınlar diye tercih edilmiş. Zaten Laravel ile AngularJS’ i kullandığında, bind işlemlerinin neredeyse tamamını frontend’ te yapıyoruz. Benim şimdiye kadar sadece 1 defa çakışma başıma geldi. Onu da şu şekilde başına @ işareti koyarak çözdüm.

      Reply
  3. İlhan

    Öncelikle emeğinize sağlık Türkçe kaynak olarak en iyilerinden bir tanesi diyebilirim. Bizim için yaptığınız uygulamayı paylaşabilirmisiniz. MVC de entegre konusunda sorun yaşadım ve sürekli hata alıyorum.

    Reply
  4. Gülçin

    Merhabalar,
    güzel ve yararlı bir örnek olmuş ,
    Örnek içerisine bir kolon daha ekleyerek farklı bir dizi içerisinde tutulan , soyad bilgisini tutmak istersek nasıl düzenleyebiliriz.
    etiketi içerisinde birden fazla diziyi ng-repeat içerisinde kullanabilir miyiz?

    Reply
    1. emre

      Merhaba Gülçin Hanım, Kişilerin soyadı bilgisi aslında ismiyle birlikte object içinde tutulmalı. Genellikle database’ ten bu şekilde gelir. Yani kişilerin soyadı bilgisi de gelecekse, dizimiz objects of array olmalı şu şekilde;
      $scope.isimlerDizisi = [
      {name:”Emre”, surname:”Öz”},
      {name:”Micheal”, surname:”Jackson”}
      ];

      Önceden dizimizdeki her element bir string’ ti. Artık Object.

      Bu haliyle örneği http://jsbin.com/wegopicudo/1/edit?html,js,output adresinde paylaştım.

      Veritabanında birbiriyle ilişkili datalar aynı obje’de yada obje’ nin alt objesinde gelir.

      Sorununuz daha farklı ise http://angulartr.com/forum/ adresinde paylaşabilirsiniz. İsteğinize uygun halini yazabilirim.

      Hoşçakalın.

      Reply

Leave A Comment

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