Merhaba daha önce Angular 2 Başlangıç konusunda, Angular 2′ ye ufaktan değinmiştik. Angular ekibinin herşey dahil hazırladığı projeyi ayağa kaldırmıştık ve çalışan bir angular 2 projemiz olmuştu. Şimdi ise hazır bir proje kullanmıyoruz ve herşeyi sıfırdan yapıyoruz. 

En başta belirteyim tüm anlatım https://angular.io/docs/ts/latest/quickstart.html adresindeki rehber baz alınarak gerçekleştirilecektir. Projemizi “typescript” ile yazacağız.

Öncelikle http://angulartr.com/angular-2-development-environment-calisma-ortami-kurulumu/ adresindeki rehberden “typescript” için çalışma ortamınızı kurun.

Root Component’ imizi yazıyoruz;

Angular 2 projelerimizde, Angular 1 olduğu gibi ana bir modülümüz oluyor. Angular 1 bilenler, var app = angular.module(‘myApplication’, []); şeklinde ana modülümüzü tanımladığımızı ve ng-app=”myApplication” şeklinde de html’ imize eklediğimizi hatırlayacaklardır. hatırlayanlar için bknz : deadmau5 – i remember https://www.youtube.com/watch?v=8Xo8At6XEqE 🙂

  • Proje klasörümüzün içine app adında bir klasör açıyoruz
  • app klasörünün içine app.component.ts adında bir dosya açıyoruz ve içine aşağıdaki kodu ekliyoruz

AppComponent ismini verdiğimiz component uygulamamızın root(kök) component’ idir. Her angular 2 uygulamasının en az bir adet root component’ i vardır.

Örnek projemiz sadece bir adet basit component ten oluşacak FAKAT her component te kullanacağımız yapıya sahip olacaktır.

1 yada 2 adet import statement’ ını kullanacağız.

@Component decorator kullanıyoruz, bu kullanım ile Angular framework’ üne hangi template’ i kullanacağımızı ve component’ i nasıl yaratacağını anlatmış oluyoruz. aşağıda detaylandırılacaktır.

Bir adet AppComponent class’ ı oluşturuyoruz, bu class ile component’ imizin logic’ ini yöneteceğiz.

Import Nedir ? 

Angular uygulamaları modülerdir. Her modüle kendisine biçilmiş işi yapmaktadır. Ve Angular’ ın kendisi de modülerdir. Angular framework’ ü kütüphane modüllerinden oluşmaktadır. Bir modülde ihtiyaç duyduğumuz parçayı import ederiz. Yukarıdaki örneğimizde de component tanımlarken, @angular/core dan Component’ i import ediyoruz. Çünkü Component fonksiyonunu kullanarak kendimize bir component yaratacağız.

@Component decorator nedir ? 

Component, metadata object alan decorator bir function’ dır. “O da ne demek ?” dediğini duyar gibi oldum. Detaylandırıyoruz. Ama öncelikle component decorator koduna aşağıdaki tekrar bakalım.

metadata object dediğimiz kısım yukarıdaki objenin tamamı. gördüğün üzere selector ve template adında 2 property’ si var. İşte bu metadata object ile Angular’ a diyoruz ki, component’ imi bu ayarlara göre yarat.

Angular selector’ deki değeri view’ da bulacak ve bulduğu element üzerinden bir instance yaratacak. Template olarak da template property’ sinde verdiğiniz değeri kullanacak. Bu kısmı projenin view’ ını yaparken daha iyi anlayacaksınız.

Component class nedir ?

Yukarıdaki kodumuzdaki şu kısım;

Component’ imizin logic’ ini yazacağımız alandır. Şuan boş çünkü örnek projemizde herhangi bir logic kullanmayacağız.

main.ts yani uygulamamızın bel kemiğini oluşturuyoruz;

Angular’ a uygulamamızın root component’ ini yüklemesi için birşeyler anlatmamız gerekiyor.

  • app klasörünün içine main.ts adında bir dosya açın ve içine aşağıdaki kodu ekleyin;

Ne demiştik ??? Angular modülerdir demiştik !!!

Bu yüzden ihtiyacımız olan heryerde ihtiyaçlarımızı import ediyoruz.

  • ilk önce Angular Browser’ dan bootstrap fonksiyonunu import ettik. bootstrap fonksiyonunu isminden de anlayacağınız üzere, uygulamamızı ayağa kaldırmak için kullanacağız.
  • Yukarıda app.component.ts dosya ismiyle root component’ imizi oluşturmuştuk. İşte burda, o dosyadan AppComponent’ i import ediyoruz ki kullanabilelim. from kısmından sonra verilen adresin “ts” uzantısı ile bitmediği gözünüze çarpmıştır. TypeScript’ te import ederken, ts uzantıları yazılmaz.
  • Veee ilk satırda import ettiğimiz bootstrap fonksiyonu ile AppComponent’ imizi bootstrap ediyoruz yani ayağa kaldırıyoruz.
  • Evet, en basitinden bir Angular 2 projesi bu şekilde ayağa kalkıyor.
  • Şimdi geriye kalan uygulamamızın view’ ını yazmak, yani html kısmıda diyebiliriz.

 

Bootstrapping platform’ a özeldir !!!

Dikkatinizi çekmiştir. bootstrap fonksiyonunu @angular/core dan değilde @angular/platform-browser-dynamic import ettik. Bootstrapping core bir işlem değildir ! Çünkü bir uygulamayı bootstrap etmenin yani ayağa kaldırmanın sadece bir yolu yoktur. Haklısınız, pek çok uygulama tarayıcı tetikli şekilde ayağa kalkar LAKİN Kİ öyle değildir 🙂

“Ne diyorsun çomolokko ? ” dediğinizi duyar gibiyim.

Angular component’ ini farklı çalışma ortamlarında çalıştırmamız mümkün. Örneğin Apache Cordova ve Native Script ile mobil cihazlarda. Ayrıca ilk sayfamızı server’ da render edebiliriz, bu sayede hem sitemize giriş hızı artar, hemde seo işlemini daha uygun yapmış oluruz.

DURRR Server Render ? ilk sayfa ? Seo’ ya uygun ? ne demek istiyorsun ? Hızlı geçmiyoruz. Tek tek anlatalım.

Server Render dediğimiz şey, aslında günümüzün web uygulamalarının izlediği yoldur. Server da oluşan data, html in içinde render olur ve kullanıcının tarayıcısına gönderilir. İlk sayfa da server render da buna uygun yapılacak. Kullanıcının sitemize giriş yaptığı sayfayı ilk sayfa olarak kabul ediyoruz. Bu anasayfada olabilir, ürün sayfası vb. bir sayfada olabilir. Hemen serverda render edip veriyoruz tarayıcıya. İşlemler tarayıcıda parça parça yapılmıyor ve render gibi işlemlerin yapıldığı yer, kullanıcının bilgisayarına göre çok çok güçlü serverımız olduğu için, işlemler çok daha hızlı gerçekleşiyor. Ama ilk sayfadan sonra gezdiği sayfalarda uygulamamız yine Single Page Application olarak yoluna devam ediyor ve sadece server’ dan datayı alıyor, render’ ı tarayıcıda yapıyor.

SEO’ ya yararı ??

Açıkçası ben bunu kabullenemiyorum. Çok eskiden Google botlar javascript çalıştıramazdı ve Single Page Application’ lar da render işlemi tarayıcıda javascript işlemleri ile yapıldığından Google Botlar sitenizi indeksleyemezdi, ee tabiki bu da Seo açısından tam bir felaketti. http://angulartr.com/angularjs-ve-seo-google-in-angularjs-uygulamasini-indexlemesi/ adresinde uzun uzadıya anlattım. Google bu duruma çözümler sundu. Bu çözümler i uygulamak bizim sorumluluğumuzdaydı tabiki. Sonra Google botlar javascript çalıştırabiliyor dedi Google, ama halen bu netleşmiş değil. Google botlar Angular’ ı tam anlayamıyor. İşte benim kabullenemediğim de bu. Siteleri indeksleyecek bot kimin ? Google’ ın, Angular Framework kimin Google’ ın. EEE halen daha SEO için şüphelerimiz var ve en iyisi ilk sayfayı server render etmek ki Google bot geldiğinde render edilmiş sayfayı verelim de sıkıntı çıkmasın diyoruz.

Sözün özü, bootstrapping işlemi enviroment’ a özeldir, ve server’ da uygularken, farklı kütüphaneler kullanacağız.

Niye ayrı bir main.ts dosyası oluşturuyoruz ?

Bunun teknik ve mimari açısından sebepleri var. Ama en önemlileri şu; yukarıda belirttiğimiz gibi, uygulamanızı tarayıcıda yada server render için server’ da başlatabilirsiniz. E yukarıdaki örnekteki main.ts de bootstrap fonksiyonu browser kütüphanesinden import edildi, serverda çalışmaz kiii, işte bu yüzden uygulamanızı başlatacağınız ortamlara göre main dosyaları oluşturup çalıştırabilirsiniz. Diğer bir kısımsa, herkes kendi işini yapmalı. app.component farklı işi main.ts farklı işi yapıyor tabiki ayrı dosyalar olacak. Nasıl ki Angular 1 de modüllerimizin yanında app.js gibi bir dosya ile başlatıcı belirliyorsak.

View’ ı yazıyoruzzzzz.

  • projenizin ana klasörüne index.html dosyası açıp içine aşağıdakileri ekleyin

  • node_modules klasöründen çağırdığımız javascript dosyalarını, taa en başta “typescript” için ortam kurulumu yaparken yüklemiştik. Sakın bu dosyalar nerde demeyin, yoksa bu işlemi yapmamışsınızdır.
  • es6-shim dosyası ne yapacak ?? Tarayıcınız şuan ES6 özelliklerini desteklemiyoree, siz gün olurda(yaklaşık 2017 gibi) bu konuyu okursanız, o zaman desteklenmeye başlayabilir, kafanız karışmasın. İşte bu es6 özelliklerini kullanabilmek için bu kütüphaneyi ekledik.
  • zone ve reflect-metadata kütüphaneleri core işlemler yapan kütüphaneler, burada özet bile geçilemeyecek kadar uzun, o yüzden onları başka bir konuda anlatıcam. Ama gerekli olduklarını bilin yeter.
  • system.js ise klasik modül yükleme kütüphanesi
  • system.config.js dosyasını ise şimdi yazıyoruz aşağıda, sizde projenize ekleyin

  • system.js config dosyasını Angular’ ı anlatırken detaylıca anlatmak mümkün değil, çünkü Angular’ a özgü bir kütüphane değil. Herşeyiyle öğrenmek isteyenler https://github.com/systemjs/systemjs/blob/master/docs/config-api.md resmi adresinden inceleyebilirler. Ben burda sadece Angular’ daki kullanımını anlatıcam.
  • map objesi ile klasik mapleme yapıyoruz, dosyalar çağırılınca hangi klasörde aranacağını belirtiyoruz.
  • packages objesi ile ise, bir üstte yaptığımız maplemelerdeki dosyaları ararken, hangi dosya uzantısını seçeceğini belirtiyoruz.
  • packagesNames ile paketlerin ismini belirledikten sonra, forEach ile her paket ismini loop’ a sokup, main dosyalarının index.js olduğunu ve yine her dosyanın uzantısının “js” olduğunu belirtiyoruz.
  • config objesi ise yukarıda yaptığımız ayarları kabul eden objedir.
  • Ardından system kütüphanesinin config metoduna, oluşturduğumuz config objesini gönderiyoruz, bu şekilde konfigürasyon işlemini de yapmış oluyoruz.
  • Bir parça css tanımlamamız var, angular.io daki kaynakta verilmiş bizde ekleyelim de hemen aradan çıksın. styles.css dosyası oluşturup içine aşağıdaki ekleyin.

 

Sıra geldi projemizi çalıştırmayaaaa 🙂

  • Kodumuzu “typescript” ile yazdık, tarayıcıda nasıl çalışacak diyorsunuz. Evet artık sona yaklaştık. Kodumuzu javascript’ e compile edicez, yada diğer bir deyişle transpiling işlemi yapıcaz. Fakat bu konu üzerinde biraz durmamız gerekiyor. Hadi başlayalım anlatmaya.

“TypeScript” kodumuzun tarayıcıda çalışmayacağını hepimiz zaten biliyorduk. Javascript’ e compile işlemi yapacağız. Fakat şunu bilmekte yarar var. TypeScript kodunu gerekli kütüphaneyi projenize eklerseniz, javascript koduna compile etmeden de çalıştırabiliyorsunuz. Bu projenin bu şekilde çalışan halini https://angular.io/resources/live-examples/quickstart/ts/plnkr.html adresinden inceleyebilirsiniz. Bu özelliği bilmeniz de yarar olduğunu düşündüğüm için anlattım. Bu özellik sayesinde, typescript kodunuzu plunkr, jsfiddle gibi sitelerde paylaşabilirsiniz. Lakin bu özellik sadece bu tarz şeylerde kullanılmalıdır. Tüm projeyi bu şekilde yayınlarsanız, çok ciddi performans sorunları yaşayabilirsiniz. O yüzden kodumuzu typescript ten javascript’ e compile edeceğiz.

 

Kodumuzu Compile ediyoruz ve çalışıyor

Komut satırından projenizin ana dizinine girin ve “npm start” komutunu uygulayın. Kısa bir sürede kodunuz compile olacak, ekranda bir takım bilgiler yazacak ve tarayıcınızda http://localhost:3000/ adresi otomatik olarak açılacaktır. Ve Mutlu son

my-first-app

Tebrikler, ilk angular 2 uygulamanızı yazdınız ve çalıştırdınız.

Bu dakikadan sonra, kodunuzda yaptığınız herhangi bir değişiklik otomatik algılanacak, compile edilecek ve tarayıcınız otomatik olarak refreshlenecektir.

Tüm soru, görüş ve yorumlarınızı forumumuzda http://angulartr.com/forum/category/13/angular-2 sorabilirsiniz.

 

İlerki projelerde görüşmek dileğiyle..

Leave A Comment

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