Posts tagged "npm"

Angular 2 Development Environment (Çalışma Ortamı) Kurulumu

Angular 2 ile proje yapmaya başlamadan önce Development Environment yani çalışma ortamınızı kurmanız gerekmektedir. Angular 2′ yi javascript ile yazıyorsanız, bu kurulumlar çok sade şekilde bitiyor, lakin typescript ile yazıyorsanız, biraz ince ayar yapmamız ve typescript e bağlı konfigürasyon ve terimleri öğreneceğiz.

Not : “javascript ile yazıyorsanız” ne demek arkadaşım, angular zaten javascript framework’ ü değil mi ? diyorsanız, elbetteki js framework’ ü, fakat “typescript” ile de yazılıp javascript’ e dönüştürülebiliyor.

Kurulum rehberini 2 ye ayırdım, js ve typescript için, typescript ile yazanlar direk olarak typescript bölümüne geçsinler.

Önemli Açıklama : Aşağıdaki anlatımlarda nodejs kullanıldığını göreceksiniz. Typescript ile yazanlar için nodejs zorunlu, çünkü typescript kodunu javascript’ e çevireceğiz fakat direk javascript ile yazanlar için nodejs tam olarak şart değil, aşağıda kütüphaneleri nodejs’ in npm’ i ile yüklüyoruz fakat bu kütüphaneleri internetten bulup kendileri de elle ekleyebilirler. LAKİN, olay sadece kütüphaneleri elde etmek değil. Angular yazarken, nodejs ile yazılmış pek çok modül sizin yardımcınız olacaktır. Bu yüzden nodejs’ e ısınmanızı tavsiye ederim.

Angular 2′ yi javascript ile yazanlar için Development Environment (Çalışma Ortamı) Kurulumu;

  • Proje klasörünüze girin ve aşağıdaki dosyayı package.json ismiyle kaydedin.

  • Henüz bilgisayarınızda nodejs kurulu değilse, http://angulartr.com/node-js-kurulumu-nvm-ile/ adresinden kurun.
  • Proje klasörünüzün içindeyken aşağıdaki komutu, komut satırından uygulayarak, package.json içinde belirtmiş olduğumuz (dependencies) kütüphaneleri yükleyin.
  • Yüklemeler tamamlandıktan sonra, index.html adından bir dosya açın ve içeriği aşağıda verdiğim örnekten doldurun. Doldurun diyorum çünkü siz bu işlemi yaparken javascript dosyalarının ismi değişmiş olabilir. Kendinize göre düzenlersiniz.

  • app.component.js ve main.js dosyaları sizde şuan bulunmuyor, bunları projenizi yazmaya başlarken oluşturacaksınız, fakat ben şimdiden size gösteriyorum ki , bu dosyaları oluşturduğunuzda koymanız gereken yerin kütüphanelerden sonra olduğunu farkedesiniz.
  • Tebrikler işlemler tamam.

 

Angular 2′ yi typescript ile yazanlar için Development Environment (Çalışma Ortamı) Kurulumu;

  • Proje klasörünüze girin ve aşağıdaki dosyayı tsconfig.json ismiyle kaydedin.

Dosya isminden de anlaşılacağı üzere “typescript” için konfigürasyonlar yapıyoruz. Bu konfigürasyonlara başka bir konuda uzunca değineceğiz, fakat compilerOptions objesinin target’ inin es5 olduğuna dikkat çekerim, bu şu demek, kodumuz “typescript” ten javascript’ e compile olurken, es5 syntax’ ına yani tarayıcıların bugün resmi olarak desteklediği javascript versiyonuna compile olacak. Bu sayede angular 2 projemiz, tarayıcımızda çalışabilir olacak. Diğer ayarlarda çok önemli fakat ileride değineceğiz.

  • typings.json isminde bir dosya açın ve içine aşağıdakileri ekleyin

Bu dosyaya da ileriki konularda değineceğiz.

  • package.json adında bir dosya oluşturun ve içine aşağıdakileri ekleyin

Bu dosya çok önemli bir dosya, dependencies kısmı zaten klasik, ihtiyacımız olan kütüphaneleri yükleyecek. scripts kısmı ise bizim elimiz kolumuz olacak. package.json dosyası bir npm dosyasıdır. “npm komutIsmi” ni komut satırına yazdığımızda, scripts objesinin değerlerine bakar ve uygular. Şimdi tek tek açıklayalım;

  • “npm start” komutu; ilk olarak tsc komutunu uygular ve “typescript” ile yazdığımız kodumuzu javascript’ e çevirir. Tabi kafasına göre çevirmez!!!!! Yukarıda tsconfig.json dosyasında verdiğimiz konfigürasyona göre çevirir. Bu kısımda es5 olarak seçtiğimize dikkat çekmiştik !!!! Ardından tsc komutunu “w” parametresi ile tekrar çalıştırır. “w” parametresi nedir ? w yani watch kelimesinin kısaltması. bu parametre ile, typescript ile yazdığımız tüm dosyalar tsconfig.json dosyasında exclude edilmişler hariç, sürekli izlenir ve herhangi bir değişiklikte anında javascript e compile olur. ve bu işlemlere paralel olarak “npm run lite” komutu sayesinde de, ufak çapta bir server çalıştırılmış olur ki bu server üzerinden projemizi izleyeceğiz. lite-server nasıl bişey derseniz https://www.npmjs.com/package/lite-server adresinden inceleyebilirsiniz.
  • Şimdi “npm install” komutunu uygulayın ve package.json dosyasında belirleşmiş olduğumuz kurulumlar gerçekleşsin. Bu sırada komut satırında kırmızı renkli hatalar alırsanız çok önemsemeyin. Ben demiyorum bunu https://angular.io/docs/ts/latest/quickstart.html#!#npm-errors-and-warnings adresinde Google diyor.
  • Artık geliştirme ortamımız hazır.
  • Tebrikler.