Angular 2 Serisi : 2- Kurulum/Hazırlık ve ilk componentimiz

Bu yazı güncelliğini kayıp etmiştir, Angular için artık Angular CLI ı kullanmak en mantıklı ve kolay yol olarak tavisye edilebilir

Angular CLI ile kolayca Angular projeleri oluşturmak ve yönetmek.

Bir önceki yazıda, genel olarak Angular 2 yi tanımaya çalıştık. Uygulamamız için gerekli ortamı hazırlayıp ilk componentimizi yazalım.  Angular 2  için Module Loader / Bundler. olarak System.js i kullanacağız. İlk olarak node.js kurulu değilse;

  1. https://nodejs.org/ adresinden, (4.2.x li sürümü) indirip kurulumu tamamlayın. Kurulum gayet kolay ve ekstra bir işlem yapmanıza gerek olmadan her hangi bir programı kurar gibi kurulumu tamamlayabilirsiniz.

Diğer ihtiyaçlarımızı proje bazlı indireceğiz. Bunun için, aşağıdaki ne benzer bir yol izleyebilirsiniz.

  1. Uygulamamızı tutacağımız bir klasör oluşturalım. Ben D:/ sürücüsü altında ng2 isimli bir klasör oluşturdum.
  2. Yazı dizisi için küçük bir başlangıç yapısı hazırladım. Buradan indirebilirsiniz; https://github.com/hdd42/angular-2-system.js-ornek
  3. Github dan gerekli yapıyı indirdikten sonra, klasörde ana dizindeyken;
  4. npm install ile gerekli tüm bağımlılıkları indirin.
  5. sonrasında, npm start diyerek, geliştirme sunucusunu çalıştırın” , tarayıcının otomatik olarak açılmış olması lazım sonrasında ekranda “Angular 2” mesajını görüyorssanız devam etmeye hazırız demektir.

Yukarıdaki kurulum parçalarına bakacak olursak,

angular 2 kurulum

 

  1. Kırmızı ile işaretlenmiş iki dosyamızdan ilki “package.json” , projemizin tüm bağımlılıklarının tanımlandığı dosya. node.js ile yüklenen npm  paket yöneticisi bu dosyayı kullanarak uygulamamızın bağımlılıklarını yönetebilecek. Ayrıca, bazı otomasyon işlemlerimizide bu dosyada tanımlayacağız.
    1. script kısmındaki tanımlamalar otomasyonlarımız için. Typescript dönüşümü, bir web sunucusun çalıştırılması vs.
    2. dependencies kısmı; uygulamanın dağıtıma çıktığında ihtiyacı olan javascript kütüphnalerini işaret etmekte. Angular, System.js vs.
    3. devDependencies kısmı ise, sadece geliştirme sürecinde ihtyacımız olan paketleri işaret etmekte. concurrently, typescript vs.
  2. Kırmızı ile işaretlenmiş diğer dosya “tsconfig.json . TypeScript için bazı ayarları tutmakta.
  3. node_modules, klasörü ise, npm ile indirdiğimiz tüm dosyaların tutulduğu klasör
  4. Bir index.html dosyamız var, angular 2 uygulamamız bu html dosyasından sunulacak.
  5. app klasörü ise, typescript ile yazdığımız kodları yani angular 2 uygulamamızı tutmakda.
  6. app/build klasörü , typescript ile yazdığımız kodların Javascript e dönüştürürlmüş hallerinin tutulduğu klasör. Tarayıcıda çalışacak gerçek kodlar bu klasörde tutulacak.
  7. Uygulamada app klasörü içinde yazdığımız her type script dosyası otomatik olarak javascript e dönüştürülüp, build klasörüne taşınacak.

boot.ts

İsimlendirme olarak genelde angular 2 ile yaygın kullanıldığı için bu ismi verdim. “boot” yada “bootstrap” (başlangıç)  olarak isimledirilen bu süreç “angular 2 uygulamamız için başlangıç noktası” olacak. System.js e bu dosyayı referans olarak vereceğiz. Angular 1 de genelde “app.js” diye adlandırdığımız ve içerik olarak şuna benzeyen yapının

<del><code>angular.module("my-app",['ui-router']);</code></del>

angular 2 deki hali  . Angular 2 nin bize sağladığı “bootstrap” metodu nu çağırarak uygulamamızı başlatmış oluyoruz.

<del><code>bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);</code></del>

AppComponent , uygulamamızdaki root/ana component olacak, diğer bütün alt componentlerin kapsayıcısı. [ROUTER_PROVIDERS]  şeklinde bir dizi olarak geçtiğimiz ikinci parametre, uygulamamızın bağımlılıkları / dependencies tanimladigimiz kisim. Uygulamızda, Angular 2 nin router modülünü kullanacağımızı belirtiyoruz.

AppComponent

Uygulamamızdaki root/ana component. iki dekaratör ve bir class / sınıf tanımında oluşuyor .

@Component() dekaratörü, yazdığımız kodun bir component olduğunu, @RouteConfig() ise route tnaımlarını ifade ediyor. export class AppComponent ise componentimizin gövdesini oluşturan sınıf (evet, angular 1 deki controller gövdesine işlev olarak benzetebilriz.) 

Yazıda değinmediğim veya detaylandırmadığım kısımları video da anlatmaya çalıştım. Sonraki yazıda, componentlere daha detaylı bakarak devam edelim inşallah.

[fvplayer src=”https://s3.amazonaws.com/yazilimgunluguvideo/AngularOrnekKurulum.mp4"]

3 thoughts on “Angular 2 Serisi : 2- Kurulum/Hazırlık ve ilk componentimiz

  1. Merhabalar, elinize sağlık çok güzel bir makale ve video olmuş, Videoları youtube üzerinde paylaşırsanız takip etmesi daha kolay olur. Devam yazısını merakla bekliyorum. Teşekkürler.

  2. Tesekkurler, faydali oluyorsa sevinirim.
    3-4 makaleyi hazirlayip topluca 3-4 gun de bir guncellemeye calisiyorum, carsambaya kadar3 tane daha eklemeye calisacagim insallah.
    Videolar icin , tavsiyenizi dikkate alacagim.

    Iyi gunler.

Leave a Reply

Your email address will not be published. Required fields are marked *