DevNot 2017 Seminer – VisualStudio Code’da TypeScript ile Angular 4
Selamlar,
8 Nisan 2017 Günü DevNot etkinliğine konuşmacı olarak katıldım. Birbirinden değerli meslektaşlarımı izlemekten büyük zevk aldım. Sahne kapanışı bana kalmıştı. Konum: Visual Studio Code ve TypeScript ile Angular 4’dü. Cross Platform bir ortamda çalışarak, OSX işletim sisteminde Visual Studio Code’un ister Debugger For Chrome Extension ları ile, ister John Papa’nın TypeScript için VS Code Angular snippetleri ile ne kadar başarılı olduğunu hep beraber inceledik.
Bu keyifli seminere daha sonra Angular 4 projesinin yaratılması ve Github’dan Input bir alandan girilen UserName’e göre detay bilgisinin ve son olarak da User’a ait repo bilgilerinin listelenmesi ile devam edilmiştir. Farklı kütüphanelerin kullanılması, Component, Service, Pipe, Modules yapılarının incelenmesi, Angular 4 ile gelen “ng-template” ve TypeScript2 ile gelip, Angular4’e sonradan adapte edilen “strictNullChecks” hep bu seminerin konuları dahilinde olmuştur.
Örnek: “ng-template” kullanımı.
|
1 2 3 4 5 6 |
<div *ngIf="User!=null; then content else othercontent"></div> <ng-template #content> </ng-template> <ng-template #othercontent> Kullanıcı Adını Giriniz.. </ng-template> |
Typescript’in gücü yazılan servisler ile, classların constructerın’da alınan dependency injection ile, linq sorguları ile ve sanki backend de kod yazılıyormuş çasına yapılması ile gösterilmiştir. Typescript’in Angular4 ile uyumu, yazılan codelar detaylandıkça kendisini göstermekte, kod okunaklığını ve OOP ile dağıtık mimariye tam desteği iyice fark edilmektedir.
Örnek: Bir servisin dependency injection ile sınıfa dahil eilmesi
|
1 2 3 4 5 |
export class AppComponent { title = 'Devnot Angular4 & Typscript Semineri!'; constructor(private service: DataService) { this.UserName = ""; } |
Daha sonra bir component içinde başka bir component’ın User Control şeklinde nasıl çağrılabileceğini ve bu şekilde DRY(Don’t Repeat Yourself) principle’ına nasıl uyulabileceğini hepberaber inceledik. Aşağıda görülen örnek kod’a, sorgulanan kullanıcıya ait Repolar projenin farklı yerlerinde de kod tekrarına gidilmeden kolaylıkla kullanılabilir.
|
1 2 3 |
<ng-template #reposcontent> <repos [RepoList]=Repos (sayMayName)="alertMessage($event)"></repos> </ng-template> |
Güzel bir cumartesi gününde hem de son seminer olmasına rağmen bekleyip katılan, tüm katılımcılara öncelikle çok teşekkür eder, seminer sırasında ve sonrasında yaptıkları paylaşımlar ve katkılarından dolayı hepsini teker teker kutlarım. Kaçıranlar için de güzel bir haberim var, yakında ilgili seminer youtube’dan yayımlanacak. Sizin de izlemenizi ve konu hakkındaki düşüncelerinizi benimle paylaşmanızı dilerim.
Yeni bir seminerde görüşmek üzere hepinize hoşçakalın, esen kalın.
Kaynak codelara aşağıdan erişebilirsiniz.
Source Code : https://github.com/borakasmer/Angular4-Typescript-Visual-Studio-Code
Hocam yemedik içmedik Angular2 ye çalıştık çabaladık şimdi 3 göremeden 4 diyorsun. :D Ellerine sağlık..
Tebrikler Bülent.
Aynen 5 ve 6’nın da tarihleri belli :)
Hepimize Kolay Gelsin:)