Structural Direktif'ler neler?

Hali hazırdaki structural direktifler

• ngIf
• ngFor
• ngSwitch

ama duruma göre bok ta çıkhabilir yani güvenemiyom :)) Şaka şaka güzel bir örnekle kendi custom structural diretive'imizi de yazabiliriz.

custom-structural-directive.directive.ts

import { Directive, TemplateRef, ViewContainerRef, ElementRef } from '@angular/core';

@Directive({
    selector: '[customStructuralDirective]',
    inputs: ['customStructuralDirective']

})
export class CustomStructuralDirective {
    constructor(private _templateRef: TemplateRef<Object>,
                private _viewContainerRef: ViewContainerRef) { }

    set customStructuralDirective(condition:boolean) {
        if (condition)
            this._viewContainerRef.createEmbeddedView(this._templateRef);
        else
            this._viewContainerRef.clear();
    }
}

app.component.ts

<div *customStructuralDirective="true">
    Deneme
</div>

Burda dikkat edilmesi gereken noktalardan biri direktif kullanılırken

önüne konulan * işareti. Dökümantasyonda bu * işareti dilin syntactic sugar yani kolaylık

sağlayan şekerlerinden biri olarak nitelendiriliyor. * işareti konulduğunda ilgili dom element'inin

içi tamamen alınıp normalde tanımlanan template tag'i içine yerleştiriliyor. Böylece constructor'da

gelen bu template referansı üzerinden bu element içinde dom manüplasyonu

gerçekleştirebiliyorsunuz.

ngFor yerel değişkenleri ne ola ki?

Eğer yerel değişkenleri bilmiyorsanız stackoverflow'dan gerilla development yaparak index falan kullanırsınız. Mesela:

fruits = [ 'Apple', 'Orange', 'Pear' ];

<ul>
  <li *ngFor="#fruit of fruits, #i = index">{{fruit}} - {{i}}</li>
</ul>

 Alın tüm kullanabileceğiniz değişkenler ise:

Local Variables for ngFor

NgFor provides several exported values that can be aliased to local variables:

• index will be set to the current loop iteration for each template context.
• Item index'i geliyor
• first will be set to a boolean value indicating whether the item is the first one in the iteration.
• Item ilk elemansa true geliyor
• last will be set to a boolean value indicating whether the item is the last one in the iteration.
• Item son elemansa true geliyor
• even will be set to a boolean value indicating whether this item has an even index.
• Item index'i çift ise true geliyor
• odd will be set to a boolean value indicating whether this item has an odd index.
• Item index'i tek ise true geliyor

Günün sözü: "Profesyonel yaklaşım fark yaratır." :P :D

Yeni başlayanlar için Angular 2 ödevleri

Ödev 1:

İçinde "Vurgulamak için fareyi üzerime getir" yazan div olan bir Component oluşturun. Bileşen için ismi siz seçin. app.component html'i içinde bu bileşeni kullanın. Ardından Highlighter adında bir direktif yazın. Component'in app.component html kullanım koduna bu direktifi ekleyin. Üzerine gelince metin sarı, üzerinden çıkınca normal haline geri dönsün.

Ödev 2:

devam edecek...

Gereksiz koda gerek yok

Genel durumlar için kolay çözümler

Enable/Disable manüplasyonu:

<button [disabled]="!isUserLoggedIn">Logout</button>

Yaş kontrol etmek için regular expression:

if (/^d+/.test(this.userAge)
  console.info("Age is valid!");
else
  console.info("Age is not valid!");

Angular'ın nadiren desteklemediği attribute'lar için binding kullanılması

Mesela angular kodun böyle:
var imageUrl:string = 'http://www.dogancoruh.com/coban.jpg';

html kodun da bu şekilde:
<img [src]="imageUrl"] />

bu durumda kullanılan src attribute'u aslında bildiğimi default img src attribute'u değil angular'ın bir özelliği abicim. Bazen nadiren angular'ın kapsamadığı attribute'larda binding kullanman gerekirse (örn: colspan) syntax şu şekilde.

<img [attr.src]="imageUrl />

Comolokko

Native event'leri yerel event handler'lara bağlama

Bir custom component hazırlıyorsunuz. Bileşenin üzerine tıklayınca mevcut javascript'in mouseenter ve mouseleave event'lerini handle etmek istiyorsunuz. Angularcı amcalar bu iş için host decorator özelliği sunmuşlar.

my-component.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-component',
    template: 'Benim üzerime fare"yi getir!',
    host: {
        '(mouseenter)': 'onMouseEnter($event)',
        '(mouseleave)': 'onMouseLeave($event)'    }
})
export class MyComponent {
    onMouseEnter(event:MouseEvent) {
        console.info("mouse enter");
    }

    onMouseLeave(event:MouseEvent) {
        console.info("mouse leave");
    }
}

Plunker'da bırkalamak için

https://plnkr.co/edit/14KCCdKSJpRWEoemHH7N?p=preview

Tamam event bağladım ama parametrelerini almak istiyorum

Tamam biraz palazlandınız ve kendi component'ınızı yazmaya başladınız. EventEmitter konusunu da çözdünüz ama attığınız event'i dışardan alıp içinde gönderdiğiniz verileri kullanmak istiyorsunuz. Çok basit bileşenle başlayalım.

my-component.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'my-component',
    template: '<button (click)="onButtonClicked($event)">Tıklayıver!</button>'})
export class MyComponent {
    @Output customClick = new EventEmitter();

    onButtonClicked(event) {
        alert("clicked");

        this.customClick.emit({
           message: 'Selam!'        });
    }
}

sonra da hazırladığımız bileşeni app.component'a ekleyerek kullanalım.

app.component.html

<my-component (customClick)="onCustomClicked($event)"></my-component>

app.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { MyComponent } from "./my-component.component";

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
    directives: [MyComponent]
})
export class AppComponent {
    constructor() {
        
    }
    
    onCustomClicked(event) {
        alert(event.message);
    }
}

Burada dikkat etmeniz gereken şey template html kodunda $event ve ts kodu içindeyse düz event kelimesinin kullanılması. Sonrasında zaten gönderilen event referansı bir object olduğu için json syntax'ı ile istediğiniz kadar bilgiyi içinde gönderebilirsiniz. Örnekteki "message" alanı gibi.

Angular 2'de kaç tane binding tipi var?

String Interpolation

{{}} kullamına "string interpolation" deniyor. One-way binding sağlıyor.

<input value="{{name}}" /> gibi

Property Binding

[] şeklinde component'e yapılan işlemlere "property binding" deniyor.

<input [value]="name" /> halinde

Event Binding

() şeklinde event binding.

<input (click)="myInput(myInput.value)" #myInput> şeklinde eklemede otomatik value gönderme işlemi...

Two-way Baynding

Angular 1.x'teki two-way binding burda da mevcut fakat ngModel üzerinden kullanılıyor.

template içeriği:
<input ([ngModel="customer.name"]) #myInput>

ts dosyası:
var customer = new Customer();
customer.name = "Doğan"; // mesela :)

Bu makalenin amacı data-binding üzerine konuşurken ağız birliği olmasını sağlamaktır...

Chrome her seferinde WebStorm Extension'ını için uyarı gösteriyor

Evet bu gereksiz ve çıldırtıcı uyarı balonunu kaldırmak istiyorsan, bastığın yerleri toprak diyerek geçme tanı. Düşün ki her Chrome ayarı için chrome://flags/ adresinde gizli bir panel var.

Bu panelden git ctrl+F yapıp "Silent Debug" arattır. Silent Debugging özelliğini enable ediver anam.

WebStorm için Angular Typescript ayarları

Önce File > Settings yapalım

sonra arama kutusuna typescript yazıp Language & Frameworks altındaki Typescript sekmesine zıplayalım

Enable TypeScript Compiler seçeneğinin seçili olduğundan,
Track Changes kutusunun seçili olduğundan,
Scope'un Project Files olduğundan ve
Use tsconfig.json radio button'ının seçili olduğundan emin olalım.

TypeScript Compiler window'u için View > Tool Windows > TypeScript Compiler sekmesini seçebiliriz.

Haydi hayırlı traşlar

Angular Best Prartice linkleri

Typescript Ionic Bestpratices
http://www.slideshare.net/svdoever/building-an-ionic-hybrid-mobile-app-with-type-script

Typescript best practices
http://definitelytyped.org/guides/best-practices.html