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

Angular  ile  uygulama yazmak istediğimizde, uygulama geliştirmeye başlamadan önce çözmemiz ve anlamamız gereken bir çok konu var. Bunların başında, Typescript entegrasyonu, System.js yada WebPack gibi araçlarla Javascript modül yönetimi ve konfigürasyonu ve bütün bu süreci düzgün bir şekilde yönetebilecek bir geliştirme ortamının oluşturulması gelmekte.

Bırakın ilk defa bu araçları kullananları, az çok tecrübesi olanlar için bile bu süreç çok hızlı bir şekilde karmaşık ve zor bir hal alabilmekte. Framework ü anlayıp öğrenmek için harcayacağınız zamanı, enerjiyi, genel olarak “tooling” dediğimiz bu sürece harcamak zorunda kalıyoruz çoğu zaman.  Angular CLI ise , tıpkı Emberjs in CLI ı gibi bu konuda bize yardımcı olmak için geliştirilen bir araç.

Bize kazandıracaklarına kısaca bakacak olursak, şunları söyleyebiliriz;

  1. Başta Typescript olmak üzere, gerekli derleme ve dönüşüm işlemlerimiz için hazır bir alt yapı sunması,
  2. Örnek bir proje yapısı sağlaması
  3. Uygulamamızı dağıtım ve geliştirme sürümü olarak kolayca yönetebilmemize imkan vermesi
  4. Code Scaffolding / Kod üreticileri ile hızlıca, Componentler, servisler vs gibi Angular  bileşenlerini oluşturmamıza imkan vermesi
  5. Hazır bir test alt yapısı sunması

gibi önemli kolaylıklar sağlamakta. Bizde bu yazıda, Angular CLI a ve bize sağladığı kolaylıklara bakmaya çalışalım.

Angular CLI Kurulum

Angular CLI ı global bir node.js paketi olarak npm  aracılığı ile indirip hemen kullanmaya başlayabiliriz. Bunun için terminalden / komut satırından

npm install -g @angular/cli

dememiz yeterli.

Angular CLI , geçtiğimiz dönem içinde, module ve build sistemini “system js ” den “webpack ” e taşıdı. Eğer sistemizde angular-cli zaten yüklüyse, eski sürümü kaldırıp, yerine webpack i kullanan en son sürümü kurmanız özellikle performans açısından çok faydalı olacaktır. Ayrıca Webpack çok daha yetenekli bir sistem olduğu için geniş eko-sisteminide kullanabilme imkanı sunmakta.

Güncelleme için;

npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli

Kurulum biraz zaman alabilir(windows kullanıcısı iseniz, ve sisteminizde bazı native modüller yoksa, 6-7 dakikaya kadar sürebiliyor). Bu noktadan sonra artık Angular CLI ı kullanarak yeni bir angular  projesi oluşturabilir ve sonrasında projemizi yönetebiliriz.

Windows kullanıcısı iseniz, bir cmd istemcisini yada power shell kullanıyorsanız powershell i “yönetici olarak” çalıştırıp, projeyi oluşturmak istediğiniz dizinde, aşağıdaki komut ile yeni bir proje oluşturarak devam edelim,

ng new ornek-proje

angular cli

uygulama dizinindeki, dosyalara ve klasörlere sırası geldikçe değinerek devam edelim, ama önce src klasörümüzden biraz bahsedelim,  bu klasör, uygulamamızın  aslını (typescript) kodlarını, statik dosyalarımızı(css,html vs.)  tutacak. Başka bir değişle, uygulamamız src  klasörünün altında yaşıyor olacak.  src klasörüyle birlikte ana dizinde, .git, test konfigürasyonları, angular cli konfigürasyonu ve uygulamamızın ihtiyacı olan npm paketlerini tutan bir package.json dosyamız bulunmakta.

Projemizde, “e2e” klasörü ve içinde, karma,protractor , spec kelimeleri geçen tüm dosyalarımız uygulamamızın test süreci için kullanabileceğimiz test ayarları yada test scriptleri.

Angular CLI, uygulamamızı test etmek yada geliştirme sunucusu üzerinde çalıştırmak istediğimiz  zaman bizim için bir kaç klasör ve dosya daha oluşturacak, bizim en çok işimizin olduğu ve gerçek anlamda uygulamamızı yazacağımız “src” klasörüne dönmeden önce , uygulamamızın bu haline bakalım, projemizin ana dizinindeyken,

ng serve

ile uygulamamızı başlatalım, aşağıdaki gibi bir ekran görütüsü ile, angular cli, uygulamamızı, arka planda önce typescipt dönüşümlerini yaptıktan sonra gerekli “bundling” işlemlerini yapıp, geliştirme ortamı ayarlarıyla çalıştıracaktır.

 

artık tarayıcımızdan, “http://localhost:4200/” adresine gidip uygulamamızın bu haliyle çalıştığını görebiliriz.

 

ng serve

komutu ile uygulamamız development / geliştirme modunda tarayıcıda ziyaret edilebilir durumda olacaktır. Bu noktada, Angular CLI arka planda çalışmaya devam edecektir. Böylece kodlarımızda yapacağımız değişiklikleri algılayıp, hemen tarayıcıya yansıtacaktır. ng serve ile ilgili bir kaç şey söylemekte fayda var

  1. dist klasörü içinde Typescript ten javascripte dönüşümü yapılmış kodlarımızın ve  geliştirme ortamı için hata ayıklama adına TypeScript içindeki referanslarını tutan ve “.map.js” şeklinde biten map dosyalarımızıda göreceksiniz. .map.js  ile biten dosyalarımız geliştirme ortamında tarayıcıdan kodlarımızı kolayca inceleme ve hata ayıklama için kullanılmakta.
  2. Şu an itibariyle, projemizdeki tüm typescript kodlarımız, javascripte dönüştürülmüş ve tek bir dosyada birleştirilip ana html dosyamıza eklenmiştir. src=”main.bundle.js“>” .
  3. dist klasörü içindeki Javascript ve statik dosyalarımız(html,css gibi) henüz dağıtım için (optimize edilmemiş) haldeler, bunun nedeni geliştirme sürecinde, özellikle hata ayıklama için bu halde tutulmaları.
  4.  Uygulamamızı dağıtıma çıkartacağımızda(production) ng build –prod  komutu ile, Angular CLI a uygulamamızı artık dağıtım için derlemesini söylememiz gerekmekte, ng build –prod kumutu ile uygulamamızın dağıtıma çıkacak halini oluşturduğumuzda, Angular CLI, en optimize edilmiş haliyle projemizi dağıtıma çıkartmak için hazırlayacaktır.
  5. Uygulamamızı gerçek dünyaya taşıyacağımızda, bu dist klasörünü taşımamız yeterli olacaktır. dist klasörü altındaki, angular uygulamamız, hem tarayıcılar ve network trafiği için optimize edilmiş olacak hemde, angular framework, “production / dağıtım”  modunda uygulamamızı derleyecektir.

Bu arada Angular-CLI ile aynı işi bir komutun kısa  veya uzun versiyonlarıylada yapabilirsiniz,

# these are equivalent - Aynı işi yapacaklar
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
<span class="pl-c"># and so are these - Bu kullanım şekilleride aynı işi yapmakta</span>
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

hangisi kolayınıza giderse onu kullanabilirsiniz.

Angular CLI ın bize sağladığı kolaylıklardan bazılarına ve genel olarak oluşturduğu inşa/build sistemine bu şekilde baktıktan sonra, şimdi biraz da detaylara bakalım. Angular 2 uygulamızı nasıl bir yapıda oluşturulduğunu ve sonrasında yönetmemiz için, CLI in bize neler sağladığı gibi.

Angular CLI ile oluşan uygulama yapısı;

Kodlarımızı yazacağımız, ana yer olan src klasörünün yapısına bakarak devam edelim.

 

src klasörü altında, aşağıdaki dosyalar ve 3 klasörümüz var(app, assets ve environments) ilk olarak kısaca dosyalarımıza bakalım;

  • index.html  :  Angular uygulamamızı taşıyacak ana html dosyamız. Angular viewlerimiz bu ana html dosyamız içinde render edilecek.
  • main.ts        :  Angular uygulamamızın başlangıç noktası yada namı diğer “bootstrap” işlemini yaptığımız “angular 2” uygulamamızın başlangıç noktası. C#, Java vs dillerdeki, main() metodunun teorik olarak eş değeri. Global dependency injection / uygulamanın tamamı için gerekli olan modülleri kütüphaneleri yada servisleri eklemek dışında fazla müdahale etmeyeceğimiz bir dosya.
  • system-config.ts : Angular CLI modül yükleyici olarak System.js i kullandığı için, sytem.js için gerekli bir konfigürasyon dosyasına sahibiz. Ana işlevi, uygulamamızın ihtyacı olan tüm modülleri / kütüphaneleri yada kendi yazdığımız modülleri, doğru bir şekilde uygulamız için yüklemek. Ayrıca 3. parti bileşenleri, örneğin “JQuery, moment.js gibi” uygulamamızda kullanmak içinde kullanacağımız bir ayar dosyası. s  Angular cli artık webpack kullandığı için bu dosya artık kullanılmamakta. Eğer system.js kullanmak isterseniz ihtiyacınız olacak.
  • tsconfig.json  :  TypeScript compiler için gerekli ayar dosyamız.
  • typings.d.ts : TypeScript ve editörümüz için tip desteği sağlayan yardımcı tanımlamalar(ambient type declarations).
  • polyfills.ts : Angular  için gerekli olan ve uygulamamızdan önce tarayıcıya yüklenecek olan , “polyfills” listemiz. Eğer daha önce javascript dünyasında bu kavramı hiç duymadıysanız, kısaca şöyle açıklayabiliriz. ES6/ES7 olarak bilinen Javascript in yeni sürümüyle gelen bazı yeniliklerin, uygulamamızın çalışacağı tarayıcalar da desteklenmediği durumlar için, bu yenilikleri tarayıcıya, “uygulamamız seviyesinde” ekleyebilmemizi sağlayan yardımcı küçük javascript fonksiyonları.

Yukarıdaki 5 dosya çok fazla değişmeyen veya dışarıdan fazla müdahale gerektirmeyen dosyalar. Ara ara çok spesifik işler için ufak eklemeler ve değişiklikler yapma ihtiyacımız olacak. Başka bir değişle, src klasörünün altında en az zaman geçireceğimiz dosyalar.

src klasörü içinde uygulamamızın gerçek kodlarını tutacak olan nokta ve geliştirme sürecinde en çok zaman geçireceğimiz kısım ise app klasörü.

 

app klasörü altında başlangıç itibariyle, Angular 2 uygulamamızın Ana / Root component i olan app.component bileşenlerimiz var.  Angular CLI , tavsiye edilen uygulama yapısı gereği(angular 2 best practices) her component için , component le aynı isimde bir .css, bir test ve bir .html dosyası oluşturmakta.

Şu an itibariyle uygulamamızda ki tek ve ana component olan app.component gibi, Angular CLI ı kullanarak oluşturacağımız her bir component veya route için  CLI app klasörü altında yeni bir alt component oluşturacak.  Komut satırından, CLI ile yeni bir component oluşturarak devam edelim;

ng g component deneme

komutu ile CLI bizim için , app klasörü altında önce bir deneme klasörü oluşturacak ve sonrasında, yeni componentimizi bu deneme klasörü altında oluşturacaktır.

 

ana dizindeki diğer klasörülerimiz den sadece environments klasörü biraz farklı, bu klasöre bakacak olursanız, uygulamanın hem çalışma zamanı için hemde uygulamızın bir kaç durumda farklı davranışlarını yönetmek için bir konfigürasyon alt yapısı sunmakta. Örneğin, bu klasör altındaki ,”environment” ve “environment.prod” dosyalarını, geliştirme ortamı için farklı ayarlar dağıtım için farklı ayarları tutacak şekilde kullanabilirsiniz. Bir başka değişle uygulamamızın hem çalışma zamanı için hemde tüm geliştirme süreci için “global” ayar dosyalarımızı tutuyoruz diyebiliriz.

bu noktaya kadar olup biteni şu şekilde özetleyebiliriz ;

  • Angular CLI (ng) ile  yeni bir proje oluşturdurk( ng new my-first-app )
  • CLI bizim için , tavsiye edilen bir dosya/klasör yapısı ile bu projeyi oluşturdu
  • Gerekli TypeScript ve Webpack yada System.js ayarlarını yaptı ve bu süreci bizim için otomatikleştirmiş oldu
  • Uygulamamızın gerçek kodlarını ve ilgili tüm statik dosyalarımızı, src klasörü altında tutacağız
  • ng serve komutu ile uygulamamızı geliştirme ortamı ayarlarıyla test edebileceğiz, ng serve komutundan sonra, CLI bizim için ana dizinde dist isimli bir klasör oluşturdu, geliştirme sürecinde, tarayıcıya gönderilecek uygulamamız bu klasör altında tutuluyor olacak.
  • ng build –prod komutu ile, Uygulamamızın, dağıtım/production  için optimize edilmiş halini oluşturabilmekteyiz. Uygulamamızın dağıtım için derlenmiş ve bundle edilmiş hali, ana dizinde dist isimli bir klasörde tutulacak. Uygulamamızı dağıtıma çıkaracağımızda taşımamız gereken tek klasör bu dist klasörü olacak.
  • Angular CLI “ng g …” şeklinde kullanabileceğimiz ve Angular 2 bileşenleri(component, pipes vs.) oluşturmak için kullanacağımız bir kod üretici sisteme de sahip.

Şimdi Angular 2 CLI ile gelen kod oluşturucularına bakalım;

aşağıda en çok kullanılanlardan bazılarını görebilirisiniz

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

 

Yukarıdaki “generators / kod oluşturucuları” kullanmın en büyük iki faydası ;

  1. Standart bir yapıyı koruyabilmek
  2. Zaman dan tasarruf

diyebiliriz. Bu arada Angular 2 CLI ile ilgili aşağıdaki komutla,

ng --help

angular CLI ın yardım özelliğine ulaşıbilmekteyiz. Tooling olarak ayrıca aşağıdaki imkanları da bize sunmakta;

  • Do linting: ng lint  / Yazdığımız kod un kalite ve standart kontrolü için "linting"
  • Run tests: ng test   / Testleri çalıştırır (unit tests)
  • Run end to end tests: ng e2e / Test otomasyonunu çalıştırır (end to end)
  • Show the size of your asset files: ng asset-sizes / statik dosyalarımızın boyut bilgileri
  • Look at the Angular 2 docs: ng docs <keyword> / Angular 2 için dökümantasyon erişimi

Ben bu yazıyı güncellerken, Angular 2 CLI ın sadece “route” oluşturucusu “ng g route” geçici olarak kullanılamamakta. Kullanılabilir tüm kod oluşturucularına / scaffold generators 

ng help generate

komutu ile bakabilirsiniz.

Son olarak, diğer javascript kütüphanelerini (örneğin; Moment.js , D3 , lodash vb.) nasıl Angular CLI ile projemize dahil edebileceğimize bakalım;

3rd Party Library Installation / Diğer kütüphanelerin kullanılması

Bu başlık altında iki ayrı durum söz konusu olacaktır. İlk olarak projemize “global” seviyede eklemek isteyeceğimiz kütüphaneler, modüller vs olacaktır. Örneğin bootstrap (css ve javascript kütüphaneleri ) eklemek istersek;

  1. npm ile , ilgili kütüphaneyi indirip
    1. npm install bootstrap
  2. ilgili global script ayar dosylarımızı güncelememiz gerekecektir.
    1. angular-cli.json içinde
    2. apps[0].scripts dizisine ilgili referansin eklenmesi
    3. css, dosylarimiz icinde  , apps[0].styless dizisine ilgili referansin eklenmesi
<strong>Bootstrap Javascript kutuphanesinin global olarak eklenmesi(<script> tag es degeri)</strong>

<strong>angular-cli.json</strong> 
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js<strong>/bootstrap.js"</strong>
],
<strong>Bootstrap CSS stillerinin  global olarak eklenmesi(<link rel="stylesheet" href=""> es degeri)</strong>
"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/<strong>bootstrap.css</strong>"
],

Global bağımlılıklardan sonra, diğer ihtiyacımız olan, “uygulama seviyesinde” ihtiyaç duyduğumuz kütüphanelerin eklenmesi işlemine de bakalım;

  1. İlgili kütüphaneyi / modülü indir
    1. npm install d3 --save // kutuphanenin kendisi
      npm install @types/d3 --save-dev  // opsiyonel typescript tanim dosyasi
    2. ihityac duydugumuz modül içinde TypeScript ile import et
      1. import {canvas} from d3

Bu yazida genel olarak Angular  CLI i tanimayaca calistik.

Kolay gelsin.

 

Kaynaklar ;

https://github.com/angular/angular-cli

https://www.barbarianmeetscoding.com/blog/2016/08/24/angular-2-cli-bootstrap-your-angular-2-app-in-a-breeze/

Rapid Cross-Platform Development with the Angular 2 CLI

7 thoughts on “Angular CLI ile kolayca Angular projeleri oluşturmak ve yönetmek.

    1. Hem Angular hem React icin dosya boyutlari ozellikle development ortaminda buyuk evet, ama production/dagitim ortami icin hazirlanan build ler kabul edilebilir boyutlara dusuyor. hem angular 2 hem react artik server side rendering icin de daha iyi opsiyonlara sahipler. Sunucu tarafli render destegi ile hem yuklenme hizlari hemde seo gibi diger sorunlar icin makul cozumler bulunabiliyor.

      Ama sizinde belirttiginiz gibi,(hizdan yada boyuttan ziyade ozellikle gereksiz kompleksiteyi engellemek adina ) kucuk projelerde angular 2 yerine daha sade alternatfiler tercih etmek daha mantikli olacaktir.

  1. Hocam merhabalar, windows 7 64 bit işletim sistemi kullandığım bilgisayarıma angular CLI yüklemek istiyorum fakat bir türlü olmuyor. npm ve node sürümleri de istenildiği gibi. Hatanın ekran görüntüsünü aldım yardımcı olur musunuz?

    http://prntscr.com/cvbs7b

    Teşekkürler

    1. Merhaba,
      Windows 7 üzerinde hiç kurulum yapmadım, ama ekran çıktısındaki şu kısma dikkat ettiniz mi?:
      “not found: git”

      eğer git yüklü ise sisteminizde path e eklenmemiş olabilir. aşağıdaki komutla git versiyonunu görebiliyorsanız sorun git değilde başka bir şeydir.
      git --version

      eğer git yüklü değilse ” https://git-scm.com/download/win ” adresinden git i yüklemeyi deneyin.

      bir de eğer , bilerek proje bazlı yüklemiyorsanız angular cli komut satırını “yönetici/administrator” olarak çalıştırıp global olarak yüklemeyi deneyin

      Yönetici Angular-Cli alt=”” />

      npm install -g angular-cli

  2. Teşekkür ederim “git” yüklü değilmiş. 7-8 yıl sonra programlamaya dönünce böyle oluyor demek ki 🙂 Yeniliklere daha tam alışamadım. İyi çalışmalar dilerim.

Leave a Reply

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