Angular2 Components ve Templates

Angular2 Companents:

angular2 Components
Components

Angular2 versiyonunda, Component view(görünüm) olarak adlandırdığımız ekran yamasını kontrol eder.

Örneğin şu görünümler componentler tarafından kontrol edilir:
-Navigasyon bağlantıları olan root uygulama,
-Kahraman listesi.
-Kahraman editörü.

Component uygulama mantığı -görünümün neyi desteteklediği- class ların içinde tanımlanır. Class lar görünümlerle API nin özellikleri veya metodları ile etkileşime geçer.

 

Örneğin HeroListComponenet bir hero metoduna sahip ve metod servisten alınan hero dizisini geri döndürüyor. HorolistComponent ayrıca selectHero() motoduna sahiptir bu metod kullanılarak kullanıcı listeden seçilen bir kahramana tıkladığında selectedHero özelliği ile ayarlar.

angular2 components
Components

Angular kullanıcı uygulamadayken componentleri create, update ve destroetme özelliğine sahiptir. Uygulamanız opsiyonel yaşamdöngüsü(lifecycle) kancalarına göre her anda bir aksiyon alabilir, yukarıda resimde belirtilen ngOnInit() gibi.

 

Templates:

angular2 templates
Templates
angular2 template
Template

Bir componentin görünümünü(view) template(şablon) ile tanımlarız. Template Angular a nasıl render edeceğini söyleyen HTML in formudur.

Bir template normal HTML gibi gözükür ama ufak tefek farklilıkları vardır.

HeroListComponent:
(resim)

Tipik <h>, <p> gibi HTML elementlerini kullanılmasına rağmen ayrıca bazı değişiklikler de vardır: *ngFor, {{hero.name}}, (click), [hero] ve <hero-detail> gibi Angular syntaxını kullanırlar.

Son satırdaki <hero-detail> tagı yeni bir component -HeroDetailComponent- hazırlayan özel bir tagdır.

HeroDetailComponent daha önce incelediğimiz HeroListComponent componentinden farklı bir componenttir. HeroDetailComponent (kodu gösterilmedi) kullanıcının HeroListComponent ile sunulmuş kahraman listesinden kullanıcının seçmiş olduğu belli kahramanlar hakkında bilgileri gösteriyor. HeroDetailComponent, HeroListComponent in çucuğudur.

angular2 component tree
Component tree

<hero-detail> tagının normal html tagları arasında nasıl kolayca yer edindiğine dikkat edin. Özel componentler HTML ile aynı layoutta sorunsuz bir şekilde karıştırılabilir.

Önceki yazı <<-

 

Angular2 Moduller

Moduller:

Angular Module
Angular Module

Angular uygulamaları modülerdir ve NgModules (bir uygulamanın koordineli bloklar halinde düzenlenmesine yardımcı olur) adında kendi modülerlik sistemine sahiptir. NgModules büyük önem taşır daha ayrıntılı bilgiyi bu sayfadan(https://angular.io/guide/ngmodule) bulabilirsiniz.

Her angular uygulaması alışılmış olarak AppModule isminde, root module olan en az bir NgModule sınıfı içerir.

Root module küçük bir uygulamadaki tek modül olabilse de, çoğu uygulamanın daha birçok özellikte modülü vardır; her biri, bir uygulama alanına, iş akışına veya yakından ilgili bir dizi özellik için ayrılmış bir kod bloğu vardır.

NgModule, bir kök veya özellik olsun, @NgModule dekoratörlü bir sınıftır.

NgModule modül özelliklerini açıklayan tek bir meta data objesi alan bir dekoratör fonksiyonudur. En önemli özellikler şunlardır:

 

Declarations: view clasları da bu modüle aittir. Angular 3 view classına sahiptir bunlar: components, directives, pipes.

Exports: declarationların alt kümesi olarak modüllerin templatelerinde görülebilir veya kulanılabilir hale gelirler.

İmports: Başka modüllerin export edilmiş classlarına, component temlatesi tarafından ihtiyaç duyulduğunda burada tanımlanır.

Providers: Servis sağlayıcıları olarak adlandırılabilir, bu modül servislerin global bir koleksiyon olmasını sağlar, bu sayede uygulamanın her yerinden ulaşılabilir hale gelirler.

Bootstrap: Ana uygulama görünümüne sahip root componenti belirtir. Diğer bütün uygulama görünümlerini barındırır. bootstrap özelliği sadece root componentine atanır.

Örnek bir root module:

root module
root module

Yukarıdaki örnekte sadece export kısmının nasıl çalıştığını göstermek için kullanıldı. Root modulünün herhangi birşey export etmesine gerek yok çünkü diğer modüllerin root modülünden birşey import etmesine ihtiyacı yok.

Bir uygulama root modülünün önyükleme yapılması ile çalıştırılır. main.ts içerisinde şu şekilde görebilirsiniz:

bootstrapping module
bootstrapping module

NgModules vs JAvaScript Modules:

NgModule (@NgModule ile dekore edilmiş bir sınıf) Anguların temel bir özelliğidir.

Javascript obje kolaksiyonlarını yönetmek için kendi modül yönetim sistemine sahiptir. NgModule sisteminden tamamen ayrı ve ilişkisi yoktur.

Javascripte Her dosya bir modüldür ve bu module ait bütün objeler bu dosyada tanımlanır. Modülde bazı sınıflar public anlamına gelen “export” anahtarı ile işaretlenir. Diğer javascript modulleri başka sınıfların public sınıflarına ulaşmak için “import” ifadelerini kullanır.

Js import export
Js import export

Angular Libraries:

Angular2 library
Angular2 library

Angular, Javascript modülleri koleksiyonu olarak düşünülebilir.

Her angular kütüphanesi “@angular” öneki ile başlar.

npm paket yöneticisi ile indirip javascript “import” ifadesi ile onları ekleyebiliriz.

Örneğin Angular ın “Component” decoratörünü “@angular/core” kütüphanesinden şöyle ekleyebiliriz:

js import
js import

Bunun yanında Javascript import ifadelerini kullanarak NgModules de ekleyebiliriz:

js import
js import

Yukarıdaki örnek root modülünde “Browsermodule” kısmını javascript import ifadesi ile eklemiştik, Bu metariale ulaşmak için @ngModule de import metadatasına şu şekilde eklememiz gerekir:

Ng module import
Ng module import

Bu şekilde hem angular hemde Javascript import sistemini kullanmış olduk.

Önceki yazı <<-

->> Sonraki yazı