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ı

Angular2 nedir?

Angular2 Mimarisi:

Bu yazı dizisinde kaynak olarak Angular2 quickstart dökümanından çevirerek ilerleyeceğim. versiyon 2 ile birlikte yapısal bir değişkliğe gidildiği için devamında angular olarak da bahsedebilirim artık birinci sürümün pek bir önemi yok. Çevirmeler bitikten sonra kod örneklerine de geçebilirim fırsat oldukça bu şekilde ilerleme yapacağım. Bu yazı dizisinde amacım çok üstünkörü değil temelleriyle birlikte anlatmaya çalışmak. Bir şeyi ne kadar temelden öğrenirseniz o kadar faydalı olur.  Hadi temelden angular nedir öğrenmeye başlayalım:

Angular client uygulamaları yapmak için HTML ve Javascript yada Javascripti derleyen bir dil olan TypeScript(classlar oluşturarak daha rahat ve daha az karmaşık js kodu yazmamızı sağlar .ts uzantılıdır derlendiğinde normal javascript koduna dönüşür.) i kullanan bir frameworktür.

Angular frameworkü bazı temel kütüphaneler yada seçime bağlı kütühanelerden oluşur.

Angular uygulamaları yazılırken HTML *tema parçalarını(templates) Anglularize olmuş işaretlerle oluşturulur, bu temaları kontrol etmek için *companent sınıfları(class) yapılır, *servislerde uygulama mantığı eklenir.

Daha sonra uygulama onyükleyici(bootstrapping) root modülü tarafından çalıştırılır. Angular devreye girer ve uygulama tarayıcıda tarayıcıda sağlamış olduğunuz talimatlar doğrultusunda kullanıcıdan yanıt bekler.

 

Angular2 Mimari
Angular2

->> devam yazısı Modüller ve diğerleri

WebGL Yazı dizisi -1

WebGl nedir?

logo-webgl
WEbGL

3D animasyonları tarayıcı üzerinde gerçekleştirmek için bize olanak sağlayan bir javascript API sidir.

Khronos grup tarafından geliştirilen bir web standartıdır.Khronos Gurup a ek olarak Google (Chrome), Mozilla (Firefox), Apple (Saferi) ve diğer 3D yazılım geliştiricileride destek vermektedir.

Spesifik bir bağlam olan HTML canvas elementinde çalıştırılır, bu size Javascript te hardware-accelerated 3D oluşturucusuna ulaşmanızı sağlar. Çünkü WebGL canvas elementinde çalışır, ayrıca WebGl Bütün DOM arayüzleriyle tamamen entegredir. WEbGl API OpenGL ES 2.0 temellidir, bunun anlamı birçok farklı aygıtta çalışabilir, örneğin masaüstü bilgisayarlar, telefonlar, TV vs. Bunlara Khronos in web sitesinde spesification bölümünden ulaşabilirsiniz.

Nasıl çalıştıracağım ?

Genelde ek bir işlem yapmanıza gerek yok Chrome ve Firefoxta kullandığınız sürümler WEbGl i destekliyor çok eski olmadığı sürece.

Ayrıca İyi bir grafik kartına sahiip olmanız WEbGl performansınızı artırır.

Ne için kullanılır ?

Geliştiricilere Gerçek zamanlı ^d grafikleri tarayıcıda oluşturmaya izin verir. WEbGl ile interaktif müzik, videolar,oyunlar, data sanallaştırması, art, 3D tasarım ortamları, 3D uzay modelleme, 3D nesne modelleme, matematiksel fonksiynların denenmesi,fiziksel simülasyonların yapılması gibi birçok şey uygulanabilir bu sizin hayal gücünüzle sınırlı bir dünya.

Nasıl çalışır ?

Tipik web teknolojilerine göre daha fazla karmaşıktır, çünkü direkt olarak grafik kartıyla çalışması için tasarlanmıştır. Sonuç olarak çok düşük seviyedir.Bu karmaşık 3D gerçekleştirmeleri içeren bir çok hesabı çabucak yapmaya imkan sağlar.

WEbGl in iç işleyisini(rendering) tamamen anlamana gerek yok. Karmaşık işleri elden çıkaran birkaç tane WEbGL kütüphanesi mevcut. Ancak kütüphanende olmayan seçenekler le kodunu zenginleştirmek istersen nasıl çaçlıştığını anlamak kullanışlı olabilir yada daha iyi kavramak için kütüphanelerin bunu nasıl yaptığını görmek ile de bunu yapabilirsiniz seçim tamamen size ait.

WebGL programlama yaparken, genellikle bir tür sahne(scene) işlemek hedefliyoruz.Bu, genellikle bir işlem oluşturma boru hattı(pipeline) adı verilen olsa da GPU içinde gerçekleştirilmektedir, her biri çok sayıda daha sonraki çizim işleri veya “çağrı” içerir.

Birçok gerkeç-zamanlı ^d çizimlerde olduğun gibi üçgen modellerin çiziminde temel elemandır. Bu nedenle WEbGl deki çizim işlemi, spesifik bilgileri oluşturmak için java script kullanır nerede, üçgenler nasıl üluşturuldu ve nasıl görünüyor(renk, gölgelendirme,yazı vs.) gibi bilgiler.Sonra bu bilgiler, hangi işlem olduğu ve döndürdüğü sahne(scene) görüntüsü GPU ya yollanır. Daha sonra bu son olayın nasıl olduğunu anlatacağım. Tam oalrak temel olay bu son kısımda aslında o yüzden bu kısmı ayrı bir yazıda anlatacağım.

Velocity ve GSAP nedir?

 

Velocity.js ve GSAP popüler Javascript animasyon kütüphanelerindendir. Bu kütüphaneler hem birlikte hemde jquery olmadan kullanılabilir.Jquery ile kullandığınızda performansınızda herhangi bri bozulma meydadna gelmez.jQuery sayfanızda varsa, sadece yapmanız gereken jQuery’nin $.animate(). ‘si gibi Velocity ve GSAP kullanabilirsiniz.

Okumaya devam et Velocity ve GSAP nedir?