Merhabalar arkadaşlar.

Günümüz yazılım dünyasında bana göre önemi ve popülerliği giderek artan bir JS framework’ü olan Angular’ın 2. versiyonunu kendimi geliştirmek ve ilerisi için yatırım yapmak adına öğrenmeye başladım. Bu yazı ile beraber de öğrendiklerimi sizlerle paylaşacağım.

Bu yazı dizisi ile ilgili olsun olmasın Terbiye Sınırları Aşılmadığı ve Saygısızlık Yapılmadığı sürece her türlü eleştiri ve iyileştirme fikrine açığım arkadaşlar. O yüzden düşüncelerinizi de beklerim.

Şimdi Angular 2 derslerimize başlayalım.

Nedir Bu Angular 2?

Javascript dünyası deyim yerinde ise zibilyon tane framework’e sahip. JQuery, Backbone, Ember, Angular, React vs. vs. Liste uzayıp gidiyor. Fakat zaman içerisinde Singe Page Web Application adında bir yapı çıktı ve bu yapıyı da Angular en sağlam şekilde geliştiricilere sunan JS framework’lerinden birisi oldu.

Birinci sürümünden tamamen farklı bir şekilde gelen Angular 2 ile mimari Type Script yapısına geçti. Type Script yapısı dediğimiz olay da derlendiği zaman ortaya Javasctipt çıkaran bir mekanizma arkadaşlar. Peki ne sağlıyor bize bu Type Script? Aslında benim gördüğüm kadarı ile JS’in anlaşılmaz noktaları anlaşılır hale getirmeyi, daha bir OOP mantığında JS geliştirmeyi sağlamayı amaçlamışlar. Bir de type-safe güvenliği sağlanması amaçlanmış. Buradaki amaç tür dönüşümleri arasıda sorun olduğunda direk derlenirken haberimiz olmasıdır.

Ayrıca Angular 2 ile modül bazlı bir yapıya geçilmiş. Bileşenlerimizi modülleri yazıp oluşturup import ediyor kullanıyoruz.

Angular 2 Yazmak İçin Ne Yapmamız Lazım?

Hepsinden önce Angular 2 öğrenmek, çalışmak, geliştirme yapabilmek için makinanızda Node.js kurulu olmalıdır arkadaşlar. https://nodejs.org/en/ adresinden Node.js’i indirip makinanıza kurabilirsiniz. Node.js kurulumundan sonra Angular 2 ile geliştirme yapmak için hazır hale geleceğiz.

Angular 2 Konfigürasyon Dosyaları ve Hello World

Adettendir, yeni bir dil, framework vs.’ye başlandığında Hello World uygulamaları yapılır. Biz de bir Hello World app yapacağız.

Normalde Angular 2 ile geliştirme yapmak için gereken konfigürasyon dosyası, yapılması gereken ayarlar bana göre böylesi bir framework için çok. Ama bu noktada güzel olay şu ki insanların bir şeyler öğrenebilmesi için çabalayan arkadaşlar bizlere direk Angular öğrenmeye başlayabilmemiz için konfigürasyon dosyalarını barındıran bir Template sunuyorlar.

https://github.com/gopinav/Angular-2-Tutorials/tree/master/Template adresinde yer alan Template projesi konfigürasyon dosyaları hazırlanmış, direk yazmaya başlayabileceğimiz bir projedir. Bu Template projesinin de içerisinde yer aldığı Angular-2-Tutorials projesini bilgisayarınıza indirin arkadaşlar. Biz bu yazıda sadece proje içerisindeki Template projesinden yararlanacağız.

Şimdi buradaki dosyaların ne işe yaradığını inceleyelim. İsmi yazan dosyayı herhangi bir editör ile açın arkadaşlar. Burada kalabalık olmaması için ben dosya içeriklerini buraya yapıştırmıyorum.

• package.json : Angular 2’nin yazılabilmesi ve çalışabilmesi için gerekli olan bağımlılıklar bu dosya içerisinde tanımlanır ve komut satırından npm install komutu verildiğinde bu dosyada tanımlı kütüphaneler, modüller indirilerek projeye konulur. npm install komutu verildiğinde proje dizini içinde node_modules adında bir klasör oluşur ve bu bahsettiğimiz kütüphaneler oraya konulur. Ayrıca package.json içerisinde scripts adında bir kısım yer almaktadır. Bu kısımdaki start satırı npm start komutu veirilince .ts uzantılı Type Script dosyaları Javascripte’e derlensin ve proje lite server üzerinde çalışmaya başlasın demektir. tsc:w satırı Type Script’lerin watch mode ile derlenmesi demektir ve bu da .ts uzantılı dosyalar üzerinde değişiklik yapıldığında otomatik yansıması demektir. postinstall satırı da typings.json içindeki bağımlılıkların package.json içindeki dosyaların indirilip kurulmasından sonra indirilip kurulması anlamına gelmektedir.

• tsconfig.json : Bilgisayarlarımızda kullandığımız browserlar Type Script’den anlamazlar ve Javascript’ten anlarlar. Bu nedenle Type Script’lerimizin Javascript’e dönüştürülmeleri gerekir. tsconfig.json dosyası içerisinde de Type Script’ten JavaScript’e derleme yapılması için gerekli konfigürasyonlar belirtilir.

• systemjs.config.js : Bu dosya modüllerin yüklenmesi ve varsayılan dosya uzantıları ile ilgilenir arkadaşlar.

• index.html : Html dosyamız içerisinde ilk 4 script tag’i Angular’ın çalışması için gerekli modüllerin yüklenmesi vazifesini üstlenir. Son iki script tag’i systemjs.config.js dosyasındaki tanımları yükler. body içerisindeki my-app tag’i ise app.component.ts dosyası içerisinde tanımlı bir bileşen. Ona az sonra geleceğiz.

• app.component.ts : Bu dosya içerisinde öncelikle bir Component tanımlanacağı için @angular/core altından Component’i dahil ediyoruz. Ardından @Componenet ile bileşeni tanımlıyoruz ve içerisinde selector* özelliği ile bu component’in nasıl çağırılıp kullanılacağını söylüyoruz. index.html içinden de hatırlayacağınız üzere direk my-app diyerek çağırmıştık. @Componenet içindeli template özelliği de bu compoment’in çağırıldığı zaman nasıl bir şablon gösterilmesi gerektiğini söyler. Bizim için olan durumda bu component çağırıldığında Hello World çağırılacak. Son olarak export class AppComponent satırı ile AppComponent’imizi sınıf bazında diper yerlerde kullanıma hazır hale getiriyoruz.

• main.ts : main.ts dosyası içerisinde ilk satırda bootstrap import ediliyor ve biz bootstrap’ı bizim uygulamamız başlarken hangi componenet’den başlayacak onu bildirmek için kullanacağız.3. satırda ise az önce tanımladığımız AppComponenet’i import ediyoruz. bootstrap(AppComponent); satırı ile uygulamayı AppComponent’den başlatıyoruz.

Şimdi (Node.js’i kurdunuz varsayıyorum) terminal üzerinden bu Template klasörüne girin ve npm install komutunu verin. İşlem tamamlandığında şu şekilde bır çıktı alacağız:

Ardından npm start komutunu verdiğimizde varsayılan tarayıcımız üerinde http://localhost:3000 adresi üzerinde projemiz çalışacak. İşte browser çıktımız:

Evet, bu yazıda anlatacaklarım bu kadar arkadaşlar. Angular 2’ye giriş yaptık, Hello World uygulamamızı gördük. Gelecek yazıdan itibaren Angular’a dalmaya başlayacağız.

Görüşene kadar sağlıcakla kalın.

Selam ve Sevgilerimle