Merhaba Angular takipçileri, aslında Angular 2′ de bizi hiçbir şey beklemiyor. Çünkü Angular 2 diye bir şey yok 🙂
AngularJS’ in 2. versiyonunun ismi sadece “Angular” olarak ifade edilecek. JS kalkacak. Lakin, çoğu insan Angular 2 diye yanlış isimlendirdiği için bende böyle bir başlık kullanmak zorunda kaldım.

Yeniliklere gözatalım.

“Module loader”

Şuan AngularJS uygulamalarımızda module yüklemenin pek çok yöntemi var. Klasik script tagları içinde link verme, require.js, Browserify, webpack vb.. Fakat hangisi en iyisi bilen yok. Yeni versiyonda ise standart “System.js” kullanılıyor.

Örneğin ana javascript dosyamız main.js olsun, içeriği şu şekilde olmalı.

Bu kadar basit ve düzenli. Artık her js dosyası için <script> tagına gerek yok.

 

“Components”

Artık controller ve scope diye birşey yok. Component lerimiz var 🙂

Örnek bir component’ in js kodlarını inceleyelim;

JS kodları 3 parçadan oluşuyor.

  • View’ da kullanmak için gerekli selector ataması : my-component
  • View’ ın içeriği
  • ve compoenent’ in logic’ inin yazıldığı class

Component’ imizi view’ a ise şu şekilde ekliyoruz.

Artık controller yok.

Eğer tarayıcınız bugün ES6 yorumlamayı bilseydi, yukarıdaki kodların çıktısı

olacaktı.

 

“Directives”

Aynı component’ lerde yaptığımız gibi, directive tanımlamak içinde annotation ları kullanıyoruz.

Örneğin ;

Yukarıdaki js kodunda, en başta bir directive yarattığımızı belirtiyoruz. Ardından view’ daki selector’ ünü yazıyoruz.

properties kısmı scope ile aynı, aşağıda bu directive’ in AngularJS 1 versiyonu ile yazılmış halini incelediğinizde daha rahat anlayacaksınız.

hostListeners, eventlerimizi, class ımızdaki metodlar ile ilişkilendirdiğimiz objedir ki bence harika bir kod kolaylığı yapmışlar.

Geri kalan kısım ise directive’ in class’ ı 🙂

Şimdi AngularJS 1 versiyonu ile aynı directive’ in yazılmışı;

Farkı inceleyin, hangisi daha kullanışlı siz karar verin.

Component’ lerde Directive Kullanımı;

Component’ lerimize directive’ leri eklemez isek çalışmıyor. Şu şekilde ekliyoruz. Biraz önce yarattığımız tooltip directive’ ini ekleyelim.

Önce Module Loader ile Tooltip Module’ ünü load ettik.

Sonra component’ imizin selector’ ünü tanımladık.

View’ da directives dizisine sırayla kullanmak istediğimiz directiveleri ekliyoruz. Hepsi bu kadar.

“Modülerlik Çılgın Atıyor”

Hepimiz projelerimizde çeşitli implementasyonları kullanırız. Örneği Twitter’ ın Bootstrap Framework’ ünün Angular için olan versiyonu ui-bootstrap, yada AngularStrap. Lakin her ikisinide projemizde aynı anda dahil edemeyiz, değil mi? Edersek işler karışır, çünkü her ikiside aynı directive’ lere sahip. Peki Angular bize bu konuda nasıl bir avantaj sunuyor ?

İşte Böyle;

ui-bootstrap’ ten Accordion, AngularStrap’ ten Tooltip directive’ ini aldım. İşte bu kadar esnek ve basit.

 

“$apply() da neymiş”

Çok defa başınıza gelmiştir. Angular ile yazılmamış pluginler, örneğin jquery pluginlerini controller’ da kullanırsınız, plugin’ in bir event’ i içinde binding yaparsınız ama olmaz, işlemez, herşey yolunda gözükür ama işlemez. Çok doğaldır çünkü setleme işlemi kütüphanenin kendi scope’ u içinde olmuştur ve sizin controller’ ınızın scope’ una anında yansımaz. Naparsınız ? tabiki, scope ta işlensin diye $scope.apply();

Angular’ da artık buna gerek yok.

Örneğin aşağıdaki kod;

setTimeout metodu, native bir javascript metodu olmasına rağmen yani “non Angular”, metodun içindeki değişiklik anında bind oluyor.

 

“ng-src ng-hide vb. directive’ lere ihtiyacımız yoook”

Hepimizin çok iyi bildiği gibi, src, href vb. attribute’ lere direk model’ imizi bağladığımızda çalışmaz.

Örneğin :

Naparız ? Angular’ ın native directive’ i olan ng-src kullanırız. Href içinde aynı şey geçerli.

Ama artık bunlara gerek yok. Artık tek yapmanız gereken, attiribute’ ü köşeli parantez içine almanız.

Model için süslü parantezler gitti, ekstradan eklediğimiz ng-* directive’ leri gitti.

Bir diğer örnek;

 

“Events”

AngularJS 1 versiyonunda, directive’ in attribute’ leri parametre alan bir deger mi yoksa metod mu bilinmezdi. Lakin Angular’ da işler değişti. Artık metodları parantez içinde alınıyor. Tıpki değerlerin köşeleri parantez içinde alınmasına benzer şekilde.

 

“Services”

Artık Provider, Value, Factory, Constant, Service yok.

Sadece Class var.

Örnek bir XHR Request nasıl yapılır ?

 

ES6 fetch gibi bir metod ile geliyor. Direk kullanabilirsiniz.

Peki nasıl kullanıcaz ?

Yukarıdaki kodun github adındaki bir dosyada olduğunu düşünün.

Bu şekilde dahil ettik. Ardından component’ imize bunu inject etmesini belirtiyoruz.

Ve Component’ imizin constructor metodunda inject ediyoruz.

Component’ te fetch adında bir metod açıp, içinde servisi kullanıyoruz.

Ve template’ ten bunu tetikleyebiliriz

Buton’a tıkladığımız anda (click) event’ i tetiklendi ve component’ in fetch metodunu çalıştırdı.

users dizisine kullanıcılar çekildi ve ng-for ile foreach işlemi yapıldı. Hepsi bu kadar basit ve temiz bir kod ile oldu.

Görüldüğü üzere ng-repeat yerine ng-for geldi. # işareti artık referrence almamızı sağlıyor.

Tabi bunları yaparken kodun son halini görmedik. Süpriz olsun diye sona bıraktım. Önce bir inceleyelim;

Gördüğünüz üzere ngFor’ a kadar module load yapıyoruz. Modülerliğin boyularını siz hayal edin 🙂

 

Sonuç olarak;

Angular, AngularJS’ den daha basit ve doğru bir yolda. Artık bizi zaman zaman delirten scope inheritance yok.

Sözlerime burada son verirken, sizi Angular’ ın yaratıcısı Misko Hevery’ nin ng-conf’ ta Angular’ ı tanıttığı videosu ile başbaşa bırakıyorum.

12 Comments Angular 2′ de bizi neler bekliyor ?

    1. emre

      Asla birşey anlamadım diye düşünme. Elbet önüne çıkan işlerde, burda okuduklarından yada internette okuduğun diğer makalelerden hatırladığın şeyler olacaktır.

      Reply
  1. Gündoğdu YAKICI

    en başta .js dosyası oluşturalım demişsin bu kadar düzenli olur falan.
    yanlız o dosya .js değil .ts (TypeScript) dosyası.Haberiniz olsunda 🙂

    Reply
    1. emre

      Çok doğru bir uyarı oldu bu. Çok teşekkürler. Typescript’ e bende yeni başlıyorum ve bu tarz hatalar elbet olacak.

      Reply
  2. adem

    Merhabalar,
    Constructor icerisinde su sekilde
    constructor() {
    this.message = ‘World’;
    }
    degisken tanimlanin faydasi nedir? Bildigim kadari ile constructor disarisinda sadece
    message = ‘World’;
    yazarak ayni sekilde kullanabiliyoruz.

    Reply
    1. emre

      constructor illa ki parametre alacak diye şart yoktur. Constructor’ ın asıl işi obje yaratılırken verilen işi yapması. Parametre dışarıdan mı gelmiş yoksa içeride kendi mi set edilmiş farketmez.

      Reply
      1. Adem

        Anliyorum, ben ozel bir nedeniniz var mi diye merak etmistim. Sizin yaptiginiz gibi yapan birkac yer daha gordum arastirirken. Henuz yolun basindayken eger yanlis yada eksik ogrenme varsa sorup kendimi duzeltmek icin sordum. Benim icin bu durum soyle idi, eger serviceden deger getiriyorsan constructor kullan. Cok yalin ve az bir bilgi degil mi:)

        Reply
          1. Adem

            Tesekkurler. Angular ile alakasiz bir soru olacak, acaba yorumdaki mail adresimden bana ulasabilir misiniz?

Leave A Comment

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