Uzun süredir yazmaya başlamayı planladığım Angular 2 derslerine hoşgeldiniz 🙂 Angular 2′ i anlatırken internetteki tüm kaynakları araştırıp, deneyip sizlerle paylaşacağım. Bu sebeple sadece benim fikirlerim değil, bulabildiğim kadarıyla tüm angular camiyasının fikirlerine erişmiş olacaksınız.
Angular 2′ nin resmi sitesi https://angular.io/ adresidir. Siteyi incelemeye başladığımızda çok zengin bir içerik bizi karşılıyor. Lakin çok kritik bir nokta var !!! Bu kritik nokta, Angular 2 yazılarımı da derinden etkileyeceği için öncelikle bunun üzerinde biraz durmamız gerekiyor.
Anasayfadaki Get started butonuna tıklayınca https://angular.io/docs/ts/latest/quickstart.html adresine gidiyoruz. Bu sayfayı üstün körü bir şekilde gezin ve gözünüze “ts” ve “typescript” kelimeleri takılacak, hatta kod parçalarında “bu nedir yaw ilk defa görüyorum böyle bir yazım şeklini” diyebileceğiniz kodlar olabilir. İşte bunun sebebi, herşeyin “typescript” adı verilen https://www.typescriptlang.org/ adresinden resmi sitesine bakabileceğiniz, https://tr.wikipedia.org/wiki/TypeScript adresindeki wiki sayfasında da “Microsoft tarafından geliştirilmekte olan bir dil olduğu ve derlendiği zaman javascript koduna dönüştüğü” şeklinde bir bilgi alacaksınız.
Microsoft deyince “geri bas zenco” demeyin :). bknz : https://www.youtube.com/watch?v=EiU7lgZi3Vg&feature=youtu.be&t=1297
Microsoft güzel bir iş çıkarmış ve çıkarmaya devam ediyor.
Dana’ nın kuyruğu nerde kopuyor ?
5 MIN QUICKSTART başlığının altındaki select box’ a tıklamaya görün, karşınıza 3 adet seçenek çıkıyor. Angular 2 pek tabiki Javascript ile yazılırken, TypeScript ve Google’ ın kendi programlama dili olan Dart ile de yazılabiliyor. Kısacası, derlendiğinizde javascript koduna dönüşebilen tüm diller ile yazılabiliyor. Bu durumda Angular 2 ile ilgili araştırma yaptığımızda typescript yada dart ile yazılmış örnekler göreceğiz ilerde. Benim nacizane fikrim şu ki; örneklerin, projelerin çoğu typescript ile yazılacak. Bu sebep ile, benimde anlatımlarımın typescript ile olacağını düşünüyorum.
“Pekü TypeScript ile yazılan kodları nasıl çalıştıracağız, benim hiçbir fikrim yok kankito” diyorsanız, çok basit. Gerekli kurulumları yapacağız ve siz typescript yazarken, altta çalışan bir uygulama, bu typescript kodlarını javascript e derliyor olacak ve sonuçları anında göreceksiniz. Yani bize kimse sıkıntı veremez 🙂
Angular 2′ ye başlıyoruzzz
Angular ekibi, angular 2′ ye kolayca başlayabilmemiz için https://github.com/angular/angular2-seed adresinde basit bir başlangıç projesi oluşturmuşlar. Bu projeyi indireceğiz ve çalıştıracağız ve Angular 2’ye ilk adımımızı atacağız.
- https://github.com/angular/angular2-seed adresindeki projeyi bilgisayarınıza indirin.
- Benim önerim https://www.jetbrains.com/webstorm/ webstorm ide’ si ile açın.
- Bilgisayarınızda halen nodejs kurulu değilse, http://angulartr.com/node-js-kurulumu-nvm-ile/ adresinde benim anlattığım şekilde yada google da “how to install node js” diye araştırıp kendinize en uygun kaynağı bularak kurun. “Nodejs nerden çıktı kardeş” diyorsanız, “typescript” kodunuz nodejs’ in bir modülü sayesinde javascript’ e dönüştürülecek.
- En başta indirdiğimiz angular2-seed projesini webstorm ide’ si ile açın. Yada başka istediğiniz bir ide ile açın, siz bilirsiniz.
- Komut satırından angular2-seed klasörüne girip “npm install” komutunu uygulayın. Yada webstorm ile açtıysanız, package.json dosyasına sağ tıklayıp run npm install seçeneğine tıklayın, bu işlemde gerekli tüm kütüphaneler yüklenmeye başlayacaktır, lütfen bekleyiniz.
- Yükleme işlemi bittikten sonra, komut satırında “npm start” komutunu uygulayın ve proje yüklemelerini yapsın ve ayağa kalksın, bu sırada lütfen bekleyiniz.
- ve artık http://localhost:3000 adresine girerseniz, bizi projemiz karşılayacaktır. Projemizde yaptığımız kod değişiklikleri artık izlenmektedir ve “typescript” kodumuzda anında javascript e derlenmektedir. Değişiklik yaptıktan sonra http://localhost:3000 adresine refresh atmanız yeterlidir.
Angular 2 ye resmi kaynaktan giriş yaptık. Projeyi incelerseniz, ts uzantılı bir çok dosya göreceksiniz, bunların hepsi “typescript” dosyalarıdır. Daha öncede belirttiğim üzere projemizi “typescript” ile yazdık. Zamanla “typescript” i öğreneceksiniz. Şimdi kısa kısa sorular soralım ve cevap verelim.
- “typescript” ile kodumuzu yazdık, daha doğrusu angular2-seed projesi’ ni angular ekibi typescript ile yazmış, fakat tarayıcıda nasıl çalışıyor bu dostum?
Şöyle; npm start komutu package.json dosyasını okuyor ve bu dosyanın içindeki scripts->build kısmındaki kodu çalıştırıyor. Gördüğünüz üzere en başta kurduğumuz node modulü
1node_modules/webpack/bin/webpack.js
ile projemizi ayağa kaldırıyoruz.
Peki nasıl oluyor ?
webpack modülü default ayarlarında projedeki webpack.config.js dosyasına bakıyor, webpackConfig objesinde 3 adet dosya var, bu dosyalar kendisine bağlı modülleri çağıran dosyalar, webpack modülü bu dosyaları javascript’ e derliyor, ama derlerken de kafasına göre derlemiyor tabiki, tsconfig.json isimli dosyaya bakıyor, bu dosyadaki kurallara göre derliyor. “target”: “es5”, satırına dikkat kesilirseniz, tarayıcıların bugün destekledikleri versiyon olan es5′ e göre derliyor, es6′ ya göre derlese, oluşacak kodu tarayıcımız bugün çalıştıramayacaktır. En genel hatlarıyla işlemler bu şekilde yürüyor.
Bu yazımı yazarken https://egghead.io/lessons/angular-2-webstorm-setting-up-angular-2 adresindeki ücretsiz videolu anlatımı baz aldım.
Sanırım giriş için yeterli bir yazı oldu. İlerki yazılarımda, projemizin kodunu incelemeye başlayacağız. Takipte kalın. Ve bu arada sorularınız varsa Forumumuza bekleriz http://angulartr.com/forum/