AngularJS 2 Nedir? Bölüm 3

Selamlar,

Bugün AngularJS2’de Control Rendering nesneleri üzerinde duracağız.

*ngIf : Aşağıdaki örnekde 2 farklı div bulunmaktadır. 1.de yapılacak işlerin listelendiği, diğeri de ise eğer liste boş ise “Yapılacak bir işin” olmadığının bilgisinin verildiği bir div dir.

app.component.ts: Aşağıdaki örnekde “*ngIf” ile yapılacak işlerin dizisi olan “toDos[]“‘un boyutuna bakılarak, varsa dizi elemanları gezilip ekrana basılır. Yok ise “Yapılacak Bir İşiniz Yok :)” mesajı ekrana basılır. Ayrıca ekrana bir de “Temizle” buttonu konulmuştur.  “(click)” eventinde “clean()” methodu çağrılmıştır. İlgili method çağrıldığında “toDos[]” dizisi temizlenmekte ve bu listeyi kulanan”<ul>” list için hiçbir kayıt kalmamaktadır. “*ngIf” ile yapılan koşul sonucu “toDos[].length==0”, “true” dönmekte ve sonuç olarak ekrana “Yapılacak Bir İşiniz Yok” yazısı basılmaktadır.

[innerHTML] : Eğer string bir html’in render edilip sayfaya basılması isteniyor ise, aşağıdaki örnekde olduğı gibi div elementinin propertysi olarak “[innerHTML]” kullanılıp ilgili “title” string değişkeni buna atanmalıdır. Böylece ilgili html string, örneğin aşağıda “<h1></h1>” elementi render edilerek ekrana formatlı olarak basılması sağlanır.

[ngSwitch]: Örneğin belli koşullara göre ilgili Htmller ekrana basılacaktır. Aşağıdaki örnekde Genel ve Liste adında 2 farklı menü vardır.

ngSwitch

  • viewModel adındaki değişkene başta “general” değeri atanmıştır. Bu değişken “general” iken Genel menü, “list” iken Liste menü ekrana basılacaktır.
  • “[ngSwitch]” ile ilgili koşul aşağıdaki gibi tanımlanır. Örneğin “viewModel==’general'” olması ile genel menü ekrana basılır.
  • <a (click)>” eventinde “viewModel=’general'”  şeklinde ilgili menüye ait olan değer atanmakta ve böylece seçilen listenin gözükmesi sağlanmaktadır.
  • ngSwitchWhen“=’general’ şeklinde ilgili koşulun seçenekleri belirlenmekte ve hangisi sağlanır ise o sayfaya render edilmektedir.
  • Bu örnekde viewModel’e default olarak viewModel=’general’ şeklinde başlangıç değer atanmasından dolayı, gerek olmasa da “ngSwitchDefault” ile hangi şartın baştan sağlanacağı belirlenmiştir.
  • Son olarak [class.active]=”viewModel==’general’” ile ilgili koşulu sağlıyan list item’in css’i değiştirilmiş ve içi dolu olarak menüde gözükmesi sağlanmıştır.
  • Buradaki en önemli konu [ngSwitchWhen] koşulunu sağlanmayan “Html” ekrana kesinlikle render edilip basılmaz. Bu da büyük performans sağlar.

Pipes: AngularJS 1.0’deki filter karşılığıdır. Örneğin, derleme zamanı pipe’lar aşağıda gösterilmiştir. Burada amaç, sayfaya basılan data üzerinde bir takım işlemler yapmaktır. Yani bir çeşit alınan verinin functional bir operasyondan geçirip ekrana basılmasını sağlayan küçük macrolardır.

Untitled

Aşağıdaki örnekte bir “product”‘a ait çeşitli özellikler listelenmiştir.

  • “| upper” ekranan basılan string metnin büyük harfle basılmasını sağlar.
  • “| number” ilgili sayısal verinin bindelik oranla ayraçlı yazılmasını sağlar.
  • “| number:[tamsayı max basamak sayısı].[ondalık max basamak sayısı]-[ondalık min basamak sayısı]”=> number:2:2-2: Sayısal formatı
  • “| currency: ‘Para Birimi’:Symbol mü?:[tamsayı max basamak sayısı].[ondalık max basamak sayısı]-[ondalık min basamak sayısı]”: Para formatı.
  • “| date:’dd MMM yyyy'”: Tarih formatı
  • “| json”: Tüm datayı ya da object’i, json olarak ekrana basar. Örneğin aşağıda product nesnesi json olarak basılmıştır.

product

Custom Pipe: Burada amaç var olan hazır pipelar iş görmediği zaman, ihtiyaca göre özel bir pipeın yazılmasıdır. Aşağıdaki örnekte bir blog yazısına ait başlık ve  final bölümü bulunmaktadır. Amaç final bölümünü bizim belirlediğimiz bir karakter sayısında sonlandırmak yani kısaltarak sona … koymaktır. Bu amaçla “| finish” özel pipe’ı kullanılmıştır.

app.componenet.ts:

  • Yazılacak custom finish.pipe filter sayfaya tam yolu belirtilerek import edilir.
  • @Componenet içerisine render zamanı, ilgili pipe’ın anlaşılabilmesi için “pipes:” property’si eklenip kullanılacak “[FinishPipe]” burada tanımlanır.
  • İlgili blog yazısı ” | finish:30″ ile filitrelenip istenen, yani belirtilen “30” karaktere kadar kısaltılması sağlanır.

finish.pipe.ts: Kullanılacak Pipe ve PipeTransform tipleri import ile tanımlandıktan sonra “FinishPipe” sınıfı “PipeTransform” interface’inden türetilmiştir. “transform()” methodu override edilerek parametre alınmış ise ilgili parametre sayısına kadar alınmamış ise default 20 karaktere kadar kısaltma işlemi yapılmaktadır.

Sonuç Ekranı: Aşağıda görüldüğü gibi sonuç yazısı custom pipe’da belirtilen’30’ karakter ile sınırlandırılmıştır.

pipe

Custom Pipe 2 Değişime Zorlamak (Önemli):

Filter.pipe.ts: Aşağıdaki pipe’da girilen data, başlangış harfi parametre olarak belirtilmiş ise ilgili harf ile başlayan işler “item.work”‘e göre filitreleme işlemine tabi tutulmuştur.

loop.component.ts:  

  • Aşağıdaki directive’de yapılacak işler “*ngFor” ile dönülüp ekrana basılmaktadır. Pipe olarak “| filter:’b” yazılmıştır. Yani ekrana yazılacak işler b ile başlıyan işler olacaktır.
  • Sayfaya “import {FilterPipe}” ilgili dosya yolu gösterilir.
  • @Component içerisine property olarak “pipes:[FilterPipe]” eklenmiştir. Böylece ilgili pipe render sırasında tanımlanabilecektir.

Önemli: Şimdi bu durumda, içinde gezilen “toDos[]” dizisine her bir yeni eleman eklendiğinde malesef pipe bundan etkilenmez ve hiç bir kayıt ekrana basılmaz. Yani Pipe toDos[] dizisi içindeki değişimi dinlememektedir. Bu durum, AngularJs 1’e göre performans arttırma amaçlı yapılmış bir iştir. Bu durumuda Pipe’ın yeni data girişini algılaması ve değişimin zorlanması için, “toDos[]” dizisinin bir eşleniğinin çıkarılması ve bu yeni dizinin içerisinde  “Pipe” işlemi yapılması gerekmektedir.

CustomPipe2

Aşağıdaki AppComponent sınıfında “this.toDos=[…this.toDos,toDo]” şeklinde ilgili “toDos” dizisinin bir eşleniği çıkarılmış ve yeni item “toDo” diziye eklenmiştir. Böylece ilgili yeni diziye göre Pipe filitreleme işlemini, var olan değişimi algılayıp yapabilmiştir.

app.component.ts: Önceki makaledeki örnek burada filter özelliği de eklenerek daha da geliştirilmiş ve Custom Filter’ın dizide olan değişiklikten etkilenmesi, dizinin yeni eşleniğinin olışturulması ile mümkün kılınmıştır.

ngStyle: Modelden gelen koşula göre ilgili css’in değişmesi sağlanır. Aşağıdaki örnekte “styleType” modelinin değerine göre ekrana basılan button sitili değişmektedir.

ngStyle

Genel Bir Örnek: Aşağıdaki örnekde konu başlıkları ve tıklandığında detayları gözüken bir blog sayfası yazılmıştır. Amaç bir html element’e “[ngClass]” ile belli bir modele bağlı olarak sitil tanımlamak ve yine aynı model’e göre “*ngIf” ile ilgili “<ng-content>“‘in gösterilmesini ya da gizlenmesini sağlamaktır.

Exanple

BlogComponent.ts:  Öncelikle aşağıdaki BlogCompenent  directive’i tanımlanır.

  • BlogComponent” sınıfında “isExpanded” değişkeni, akordion şeklinde ilgili title tıklanınca detayın açılıp kapanmasını sağlamaktadır.
  • @Component altında ilgili css’ler “styles:” property’si ile tanımlanmıştır.
  • title” directive içine “input” olarak tanımlanmıştır. Yani directive’in kullanılacağı yerde, title bilgisi parametre olarak dışardan verilecektir.
  • “<ng-content>” ile, ilgili directive yani blog içerisine yazılacak metinin container’ı tanımlanmaktadır.
  • [ngClass]” ile title divine ilgili bootstrap css’i “isExpanded” değişkenine göre farklı atanmaktadır.
  • “div” içerisine yazlacak “<ng-content>“‘in görünüp görünmeyeceği “*ngIf” ile yine “isExpanded” değişkenine bağlanmıştır.

app.component.ts: Blog yazılarının içine yazılacağı “BlogComponent” directive’i “import” ile sayfaya tanımlanmakta ve 3 blog yazısına ait title ve detay bilgileri, aşağıda görüldüğü gibi yazılmaktadır..

Böylece geldik bir makalenin daha sonuna. Yeni bir angular 2 makalesinde görüşmek üzere hoşçakalın.

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

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

5 Cevaplar

  1. Samet dedi ki:

    Bu örnekleriniz tanıtımlarınız için çok teşekkür ederim. Bir çok konularda sizin yaptığınız örneklere, yazılarınıza bakıyorum.

  2. erhan dedi ki:

    çok teşekkürler devamını merakla bekliyorum

  3. Piyush dedi ki:

    Hey mate, I’m trying to do debugging with vscode with angular2-seed, could you share you github proejct code and launch.json files. Would appreciate really! Love your work here on the blog.

Bir Cevap Yazın

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