AngularJS 2 Nedir?

Selamlar arkadaşlar,

Bu makale ile başlıyarak AngularJS 2 javascript framework’ünü detyalı olarak incelemeye başlıyacağız. Uygulama ortamı Visual Studio Code olacaktır. Ayrıca TypeScript kullanılacaktır. Size kolaylık olaması amacı ile makalenin sonundaki ekte bulunan paket, visual studio code ile açılarak, AngularJS2 için gerekli uygulama platformu sağlanmış olunur. İlgili paketlerden biri de “typescript-watcher“‘dır. Amacı ilgili script dosyalarında bir değişiklik olduğu zaman, bunu algılayıp Html sayfanın otomatik olarak render edilmesini sağlamaktır. Böylece yapılan her değişiklik sonucu anlık olarak gözlemlenebilecektir. Kısacası yazılan her koddan sonra refresh yapılmayacaktır:)

Laboratuvar Ortamının Hazırlanması:

  1. Öncelikle makinanıza  NodeJs ‘i yandaki link’den kurunuz: https://nodejs.org/en/download/
  2. Visual Studio Code’u yandaki linkden kurunuz: https://code.visualstudio.com/Download
  3. Command Prompta “npm install -g typescript” yazarak typescript kurunuz. Command Prompt’u administrator modunda açmayı unutmayınız.
  4. Command Prompta “npm install -g typings” yazarak typing‘i kurunuz.
  5. AngularJS2’yi ilerde npm ile indirebileceğiz. Yandaki komutlar ile proje oluşturup, yayımlayabileceğiz. “npm install -g angular-cli“, “ng new project_name“, “ng server” . Ama bu ortam şu anda yok. Bunu için sayfanın sonundaki “angular2-project” dosyasını açıp makinanıza koyun. Daha sonra command propmt’da ilgili klasör içine girip, “code .” komutunu yazınız. Visual Studio Code projeyi altta görüldüğü gibi açılacaktır. Böylece siz de bir çok dosyayı indirme zahmetden kurtulacaksınız. Aşağıda görüldüğü gibi uygulama start olduğu anda “tsc:w” yani typescript watch ve “lite” server çalıştırılmaktadır. Ben Mac’de uygulamayı yayımlamak için lite server kullandım.
  6. Ayrıca dependencies yani bağlı olunan paketler, uygulama ilk çalıştırılacağı zaman ilgili ana klasör altına gelinip “npm install” yazılarak indirilmelidir.  Bu işlemden sonra projenin içinde “node-modules” klasörü otomatik oluşur. İlgili dosyalar burdan da görülebilir.
  7. Son olarak “code .” komutu yazılarak Visual Studio Code açılır. Bu konu ile ilgili detaylı bilgiyi önceki makalemin içindeki bölümden erişebilirsiniz.

cmd2

Şimdi sıra geldi AngularJS2’yi tanımaya: app/app.component.ts tıklandığında aşağıdaki kodlara erişilir.

first2

app/app.component.ts: Aşağıda görüldüğü gibi typescript’ler ile çalışacağız. Uzantıları “.ts”‘dir. Bunla ilgili detaylı bilgiyi önceki makalemden erişebilirsiniz.

npm start” yazılıp tsc:w ve lite server başlatılarak aşağıdaki gibi bir browser sayfasına erişilir. Bazen lite server bozulabiliyor. Bu durumda “Ctrl + C” ve ardından “npm start” yaparak uygulamayı tekrardan ayağa kaldırınız.

Browser2

Untitled

Öncelikle AngularJS2’de  kullanılan temel kavramları inceleyelim.

Component : AngularJS2 içerisinde kullanılacak tüm htmller, modeller, servisler Component altında tanımlanır. Bir çeşit angularJS1’in controller’ı diyebiliriz. Öncelikle root bir component tanımlanır. Ayrıca istenir ise altında onlarca farklı component da tanımlanabilir.

cpmponent

Yukarıdaki örneğe bakıldığında :

  • import {Component}  ile “angular2/core” yolundan Component kütüpahanesi sayfaya include edilir.
  • @Component({ .. }) ilgili Root Component tanımlanır.
  • selector : Kullanılacak angular2 objesinin adıdır. Index.html sayfasını tıklarsanız aşağıdaki gibi bir kod ile karşılaşılır. Görüldüğü gibi ilgili component index.html’de aşağıdaki gibi çağrılmıştır.
  • template: Sayfa basılacak Html burada tanımlanır.
  • export class AppComponent sınıfı ile ilgili model ve methodlar burada tanımlanır. Yani angularJS’deki Controller’a karşılık gelir. Tüm angularJS2’ye ait tüm nesneler burada tanımlıdır.

index.html: 

Şimdi Component’ı öğrendiğimize göre gelin Lessons adında dersler component’ımızı geliştirelim:

App folder sağ tıklanıp yeni bir file yanda görüldüğü gibi eklenir. “app/lessons.component.ts

app/lessons.component.ts:

Aşağıda görüldüğü gibi root component’ımız olan AppCompenent’a gelip yazılan bu Lessons component’ı ekleyelim. “@Component({})” function’ı aşağıda görüldüğü gibi 3 parametre almaktadır “selector”, “template” ve “directives”.

app/app.component.ts:

  • Aşağıda görüldüğü gibi “@Component({})” function’ına directives parametresi eklenip yeni yazılan “[LessonsComponent]” eklenmiştir.
  • Ayrıca yeni eklenen bu component’ın local adresi  “import” keywordü ile birlikte sayfada belirtilmelidir.
  • Daha sonra ilgili “component” “template” içinde “selector” ismi ile örneğin aşağıda “<lesson>”</lesson>” olarak kullanılmış ve Dersler  yazısı ekrana basılmıştır..

Directives Component’a yeni bir component directives parametresi ile eklenir. Aşağıdaki örnek angularJS1’den bildiğiniz Element Directive’den başka birşey değildir.

Directive

Şimdi sıra geldi modeller ile çalışmaya.

lessons.component.ts:

  • İlgili “LessonsComponenet” sınıfına time property’si eklenir. Ve sınıfın constructer’ında o anki zaman atanır. Daha sonra ilgili “LocalTime” property’si “@Component({})“‘ın “template:“‘inde  {{LocalTime}} bu süslü parentezlere Interpolation diyoruz. Bunların arasında ilgili sınıfın özellikleri ekrana basılır.

Interpolationlar ile tek yönlü yani one way binding işlemi yapılır. Yani model ile view arasında bir bağlantı oluşturulur. İlgili model değişince view’da değişir. Ama view’da olan değişiklik model’i etkilemez. Örnek Textbox içine model değiştikçe yazılan yazı değişirken, Textbox içindeki yazı elle değiştirildiği zaman, model değişmeyecektir.

model

  • İlgili component’a “courses” adında bir dizi nesnesi yaratılmış ve “name” ve “hourse” propertlerine değerler atanmıştır.  Daha sonra ilgili template içine aşağıdaki kod yazılarak tüm kurslar tek tek gezilerek bilgileri ekrana basılmıştır. Burada dikkat edilmesi gereken husus “*” işaretinin anlamı ilgili directive’in istenen elemtin içinde kullanılabileceği anlamına gelmektedir. Örneğin “ngFor” sadece “<template>” içinde kullanılabilmektedir. Ayrıca “#” <template> içinde local bir değişken tanımlamak için kullanılmaktadır.

*ngFor=”#course of courses”

Ekran Çıktısı:

repeat

Services: Şimdi gelin, yukarıda çektiğimiz bu kurs bilgilerini gerçek hayatta olduğu gibi bir servisten alıp Component’ımıza ekleyelim.

app/course.service.ts: course.service adında yeni bir dosya aşağıdaki gibi yaratılır ve lessons.components’daki course dizisi silinip buraya “takeAllCourse()” methodu altına konur.

Şimdi sıra gelid ilgili bu servisi “LessonsComponent”‘a eklemeye:

lessons.componenet.ts:

  • Öncelikle ilgili “[CourseServices]” import ile sayfaya include edilir.
  • @Component({}) function’ına ilgili servis “providers” keyword’ü ile eklenir. Böylece angular2, ilgili servisi render zamanında anlamlandırabilir.

providers:[CourseService]

  • LessonsComponenet classında ilgili “CourseService” sınıfı “new()” keyword’ü ile yaratılmadan, “Constructer’ında” “courseService:CourseService()” şeklinde ilgili değişkene atanmıştır.
  • courseService.takeAllCourses()” şeklinde ilgili servisin methodu çağrılarak, “course” değişkeni doldurulmuştur. Ekran çıktısı yine aynıdır.

lessons.componenet.ts:

Template : 2 çeşit template vardır. Bir tanesi sayfa içerisine doğrudan string olarak yazılan HTML. Diğeri de url verilerek sayfa içerisine konan başka html sayfadır. Bunu da “templateUrl” olarak “@Componenet()” içerisinde tanımlamaktayız. Örneğin aşağıda “@Component()” function’ı içinde template parametresi içine “`” karakterleri arasında çoklu satır olarak inline html yazılabilir. Eğer uzun bir html kod yazılmayacak ise performance amacı ile bu yöntem tercih edilmelidir. 

template

Ya da aşağıdaki gibi “templateUrl” kullanılarak, harici “person.html” sayfasına, request çekilerek ana sayfaya yüklenir. Burdan çıkarılacak ders, gerçekten ihtiyaç yok ise, performans amaçlı her zaman inline HTML code tercih edilmelidir. Nedeni aşağıda görüldüğü gibi sayfanın ilk çağrıldığında “person.html” sayfasına ilk sefer için request çekilip yüklenmesidir. İlgili browserın network’ü incelendiğinde 200 Ok Code’u alındığı görülür. Ancak ana sayfanın 2.kere çağrılması durumunda, harici “person.html” tekrardan yüklenmez ve 304 Not Modifed code’u alınır. Kısaca sadece ilk sefer yüklenir. Sayfada değişiklik olmadığı sürece bir daha harici sayfalar yüklenmez.

monitor

person.html: Harici bir sayfaya çıkarılan html codelar aşağıdaki gibidir. Bu şekilde çalışmanın en büyük faydası, ilgili html kodun başka yerlerde de kullanılabilmesidir. Böylece ilgili html kodun tekrar tekrar yazılması engellenmiş olunur.

Directives 2 (Dependency Incejtion):

Bu makalenin son örneğinde gelin yeni bir Directive yaratalım. Sayfamıza yeni bir TextBox koyacağız. Ve üzerine geldiğinde genişlemesini ve ayrıldığımızda da tekrar eski halini almasını sağlayacağız. Yazılacak bu Directive’i ilgili TextBox’a attribute olarak ekleyeceğiz ve istenilen özellikleri TextBox’ımıza kazandırmış olacağız. Bu AngularJS1’den bildiğiniz Attribute Directive olacak.

 grow-onfocus.directive: TextBox’ımızın methodlarının ve eventlerinin tanımlanacağı sınıf burasıdır.

  • Bu bir directive’dir. Bundan dolayı import {Directive} eklenmiştir. {ElementRef} ile o andaki sayfa üzerindeki nesneye erişmek için kullanılan bir sınıftır. {Renderer} sayfa üzerindeki HtmlElement’in style’ını değiştirmek için kullanılan bir sınıftır.
  • @Driective({}) ile “selector” yani sayfada kullanılacak attribute tanımlanır.
  • “host” ile üzerine gelecek eventlerde çağrılacak methodlar belirlenir.
  • (focus): Bir event tanımıdır. ‘onFocus()’ ise üzerine odaklanılınca çağrılacak methoddur.
  • (blur): Bir event tanımıdır. ‘onBlur()’ ise üzerinden ayrılınca çağrılacak methoddur.
  • GrowOnfocusDirective eventinin constructer’ında “ElementRef ve Renderer” ilgili değişkenlere atanır.
  • onFocus() ve onBlur() methodlarında ilgili attribute şeklinde attachlenen TextBox’ın css’i, “this.renderer.setElementStyle” şeklinde atanmakta ve ilgili HtmlElement’e yani textbox’a “this.el.nativeElement” şeklinde erişilmektedir.

lessons.componenet.ts: İlgili texbox aşağıdaki gibi eklenir. Ve önceden tanımlanan “GrowOnfocusDirective” directive’i HtmlElemnt’e attribute olarak aşağıdaki gibi eklenir.

  • Öncelikle “import” ile ilgili directive’in dosyası (GrowOnfocusDirective) sayfaya include edilir.
  • @Component({}) function’ına “directives” parametresi ile [GrowOnfocusDirective] directive’i eklenerek render zamanında algılanması sağlanır.
  • Sayfa üzerindeki texbox’a “<input type=”text” growonFocus style=”width:120px”/>” ilgili directive solda görüldüğü gibi attribute olarak eklenmiştir.

AngularJs2Directive

Böylece bir makalenin daha sonuna geldik. AngularJS2 makalelerinin devamında görüşmek üzere hoşçakalın.

Source Code: http://www.borakasmer.com/projects/angular2_project.rar

Kaynaklar : https://angular.io/, https://egghead.io, Mosh Hamedani(Angular 2 with TypeScript for Beginners The Pragmatic Guide) …

Herkes Görsün:

Sevebilirsin...

11 Yanıt

  1. Ferdi İnan dedi ki:

    command prompt ekranından code komutunu çalıştırdıktan sonra ekran boş geliyor dosyaları görmüyor nerden kaynaklanıyor acaba ?

    • borsoft dedi ki:

      Selam Ferdi,

      Öncelikle ekteki dosyayı Örnek: “c:/angular2” folder’ına koydun diyelim. Command prompt’da “package.json” dosyasının olduğu yere kadar gelmen gerek.Bu örnekden devam eder isek Command propmt’da “cd angular2/angular2-seed” yazıp ilgili dosyaların olduğu yere gelmen ve “code .” komutunu orda yazman gerekmektedir. Bu arada ilgili paketleri console’dan indirmek için “npm install” komutunu yazmayı unutma.

      İyi çalışmalar.

  2. Burak Güveyi dedi ki:

    Hocam öncelikle merhaba. Belki çok kolay bir hatadır ama konu hakkında pek bir bilgim yok sizin blogunuzda başladım bu arada çok yararlı bir blogunuz var teşekkürler. Ancak ben command promptta şöyle bir hata alıyorum ilgilenirseniz müteşekkir olurum.
    http://i.hizliresim.com/o79Epo.jpg

    • borsoft dedi ki:

      Teşekkürler Burak;

      Neyse ki sorun basit:) Hemen cevaplıyım:
      Command Prompta ekteki koyduğun dosyanın yoluna kadar gelip orada “npm install” demelisin.
      Örneğin ekteki dosyayı Örnek: “c:/angular2” folder’ına koydun diyelim. Command prompt’da “package.json” dosyasının olduğu yere kadar gelmen gerek.Bu örnekden devam eder isek Command propmt’da “cd angular2/angular2-seed” yazıp ilgili dosyaların olduğu yere gelmen ve “code .” komutunu orda yazman gerekmektedir. Bu arada ilgili paketleri console’dan indirmek için “npm install” komutunu yazmayı unutma.

      İyi çalışmalar.

      • D&G dedi ki:

        VSCode’da böyle problemler oluyor sanırım. Path’de olmasına rağmen node’u da görmüyordu, debug için de benzer bir hata almıştım.

        http://stackoverflow.com/a/30494169/413032

        • borsoft dedi ki:

          Selamlar,

          Valla ben bayadır çalışıyorum. Yani bahsettiğiniz gibi bir hata almadım. Pek alan çevremde kimse de olmadı.
          Aslında gönderdiğiniz makale de 1 sene öncesine ait. Belki o zamanlar olabilir.

          İyi çalışmalar.

  3. Dodiş dedi ki:

    Abi Angular 2 ile pek türkçe makale yok.Sende gerçekten çok iyi anlatmışsın.Sizce geleceğin teknolojisi olabilir mi? PHP kadar popüler olabilir mi ? Teşekkürler makale için devamlarını bekliyoruz.

    • borsoft dedi ki:

      Teşekkürler;

      Evet ben gelecekte Angular2’nin baya bir söz sahibi olucağını düşünüyorum. Zaten boş yere bu kadar makale yazılır mı:)

      İyi çalışmalar…

  4. Mustafa dedi ki:

    Yine doyurucu bir yazı olmuş 1 gün boyunca didik didik inceledim, örnekler yaptım. Fakat hocam müsadeniz varsa bir konuda sıkıntımı dile getirmek istiyorum, belki diğer arkadaşlar da aynı durumdan muzdariptir. Derslerinizde ağırlıklı olarak pratiklerle örneklerle konuyu pekiştiriyorsunuz, kendimden örnek verecek olursam, ben bir konuyu öğrenirken a dan z ye neyin neden yazıldığını ne işe yaradığını bilmek istiyorum. Bazen diyorum ki, keşke biraz daha teori kısmında da yazılan yazılar olsaymış diye.

    Ellerinize sağlık hocam :) Ben ikinci derse geçeyim.

    • borsoft dedi ki:

      Teşekkürler Mustafa,
      Belki biraz daha Action adamı olmamdan kaynaklanıyor:) Daha fazla teori konusuna gelince kesinlikle dikkate alacağım. Aslında kitap yazılır ise daha mantıklı olur gibime geldi :)

      İyi akşamlar.

  5. Mustafa dedi ki:

    Merhaba hocam bir türlü çözemediğim bi sorunum vardır büyük ihtimal kolaydır.,
    yardımlarınız bekliyorum Kolay gelsin
    http://i.hizliresim.com/bkvZ1Y.jpg

Bir Cevap Yazın

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