{"id":30952,"date":"2025-10-03T23:42:01","date_gmt":"2025-10-03T20:42:01","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30952"},"modified":"2025-10-03T23:42:01","modified_gmt":"2025-10-03T20:42:01","slug":"angular-cli-ile-angulara-baslangic-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-baslangic-kapsamli-bir-rehber\/","title":{"rendered":"Angular CLI ile Angular’a Ba\u015flang\u0131\u00e7: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

Angular CLI ile Angular’a Ba\u015flang\u0131\u00e7: Kapsaml\u0131 Bir Rehber<\/h2>\n

Giri\u015f<\/h3>\n

Web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojiler ve \u00e7er\u00e7evelerle dolu dinamik bir aland\u0131r. Bu dinamik ortamda, modern, \u00f6l\u00e7eklenebilir ve y\u00fcksek performansl\u0131 tek sayfa uygulamalar\u0131 (Single Page Applications – SPA) geli\u015ftirmek i\u00e7in Angular gibi g\u00fc\u00e7l\u00fc bir \u00e7er\u00e7eveye ihtiya\u00e7 duyar\u0131z. Angular, Google taraf\u0131ndan desteklenen, TypeScript tabanl\u0131, bile\u015fen odakl\u0131 bir \u00f6n y\u00fcz (frontend) geli\u015ftirme \u00e7er\u00e7evesidir. B\u00fcy\u00fck \u00f6l\u00e7ekli kurumsal uygulamalardan k\u00fc\u00e7\u00fck ki\u015fisel projelere kadar geni\u015f bir yelpazede tercih edilmesinin temel nedenleri aras\u0131nda tutarl\u0131l\u0131k, performans optimizasyonlar\u0131 ve zengin ekosistemi yer al\u0131r. Ancak Angular’\u0131n t\u00fcm bu g\u00fcc\u00fcn\u00fc verimli bir \u015fekilde kullanabilmek i\u00e7in, geli\u015ftirme s\u00fcrecini basitle\u015ftiren ve standartla\u015ft\u0131ran bir araca ihtiyac\u0131m\u0131z vard\u0131r: Angular CLI (Command Line Interface).<\/p>\n

Angular CLI, Angular uygulamalar\u0131n\u0131 olu\u015fturmak, geli\u015ftirmek, test etmek ve da\u011f\u0131tmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir komut sat\u0131r\u0131 arac\u0131d\u0131r. Bu rehber, Angular d\u00fcnyas\u0131na ad\u0131m atmak isteyen geli\u015ftiriciler i\u00e7in Angular CLI’\u0131n temelden ileri seviyeye kadar t\u00fcm \u00f6zelliklerini kapsayan kapsaml\u0131 bir yol haritas\u0131 sunmaktad\u0131r. S\u0131f\u0131rdan bir Angular projesi olu\u015fturmaktan, bile\u015fenler, servisler gibi temel yap\u0131 ta\u015flar\u0131n\u0131 anlamaya ve uygulaman\u0131z\u0131 da\u011f\u0131t\u0131ma haz\u0131rlamaya kadar her ad\u0131m\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu rehberin sonunda, Angular CLI’\u0131 etkin bir \u015fekilde kullanarak kendi Angular uygulamalar\u0131n\u0131z\u0131 geli\u015ftirmeye ba\u015flayacak bilgi ve beceriye sahip olacaks\u0131n\u0131z.<\/p>\n

Angular ve Angular CLI Nedir?<\/h3>\n

Angular, tek sayfa uygulamalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan a\u00e7\u0131k kaynakl\u0131, TypeScript tabanl\u0131 bir \u00f6n y\u00fcz web uygulama \u00e7er\u00e7evesidir. Google taraf\u0131ndan geli\u015ftirilen ve bak\u0131m\u0131 yap\u0131lan Angular, bile\u015fen tabanl\u0131 mimarisiyle mod\u00fcler ve yeniden kullan\u0131labilir kod yazmay\u0131 te\u015fvik eder. Performans, \u00f6l\u00e7eklenebilirlik ve geli\u015ftirici verimlili\u011fi odakl\u0131 bir yakla\u015f\u0131mla tasarlanm\u0131\u015ft\u0131r.<\/p>\n

Angular’\u0131n temel \u00f6zellikleri aras\u0131nda veri ba\u011flama (data binding), ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu (dependency injection), y\u00f6nlendirme (routing), form y\u00f6netimi ve HTTP istemcisi gibi bir\u00e7ok dahili \u00f6zellik bulunur. Bu \u00f6zellikler, karma\u015f\u0131k web uygulamalar\u0131n\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r ve geli\u015ftiricilere g\u00fc\u00e7l\u00fc bir yap\u0131 sunar.<\/p>\n

Angular CLI’\u0131n Tan\u0131m\u0131 ve Faydalar\u0131<\/h4>\n

Angular CLI (Command Line Interface), Angular uygulamalar\u0131n\u0131 olu\u015fturmak, geli\u015ftirmek ve s\u00fcrd\u00fcrmek i\u00e7in kullan\u0131lan bir komut sat\u0131r\u0131 arac\u0131d\u0131r. Geli\u015ftiricilerin tekrarlayan g\u00f6revleri otomatikle\u015ftirmesine ve en iyi uygulamalar\u0131 takip etmesine yard\u0131mc\u0131 olur. Angular CLI, geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r ve basitle\u015ftirir.<\/p>\n

Angular CLI’\u0131n sundu\u011fu ba\u015fl\u0131ca faydalar \u015funlard\u0131r:
\n* H\u0131zl\u0131 Proje Olu\u015fturma:<\/strong> Tek bir komutla tam yap\u0131land\u0131r\u0131lm\u0131\u015f bir Angular projesi olu\u015fturur. Bu, manuel kurulum ve yap\u0131land\u0131rma ile harcanacak zaman\u0131 ortadan kald\u0131r\u0131r.
\n* Kod \u00dcretimi:<\/strong> Bile\u015fenler (components), servisler (services), mod\u00fcller (modules), direktifler (directives) ve pipe’lar (pipes) gibi Angular yap\u0131 ta\u015flar\u0131n\u0131 h\u0131zl\u0131 bir \u015fekilde olu\u015fturmak i\u00e7in komutlar sa\u011flar. Bu, yaz\u0131m hatalar\u0131n\u0131 azalt\u0131r ve dosya yap\u0131s\u0131nda tutarl\u0131l\u0131\u011f\u0131 sa\u011flar.
\n* Geli\u015ftirme Sunucusu:<\/strong> Uygulamay\u0131 yerel olarak \u00e7al\u0131\u015ft\u0131rmak i\u00e7in bir geli\u015ftirme sunucusu sa\u011flar. Canl\u0131 yeniden y\u00fckleme (live reload) \u00f6zelli\u011fi sayesinde kod de\u011fi\u015fiklikleri an\u0131nda taray\u0131c\u0131ya yans\u0131r.
\n* Test Ara\u00e7lar\u0131 Entegrasyonu:<\/strong> Uygulama i\u00e7in birim testleri (unit tests) ve u\u00e7tan uca testleri (end-to-end tests) yap\u0131land\u0131rma ve \u00e7al\u0131\u015ft\u0131rma yetene\u011fi sunar.
\n* Optimizasyon ve Derleme:<\/strong> \u00dcretim i\u00e7in optimize edilmi\u015f, da\u011f\u0131t\u0131ma haz\u0131r uygulama paketleri olu\u015fturur. Bu, kod s\u0131k\u0131\u015ft\u0131rma, a\u011fa\u00e7 sallama (tree shaking) ve di\u011fer performans iyile\u015ftirmelerini i\u00e7erir.
\n* G\u00fcncelleme Kolayl\u0131\u011f\u0131:<\/strong> Angular ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kolayca g\u00fcncellemeyi sa\u011flar, bu da projenin en son s\u00fcr\u00fcmde kalmas\u0131na yard\u0131mc\u0131 olur.
\n* Standartla\u015fma:<\/strong> T\u00fcm Angular projeleri i\u00e7in tutarl\u0131 bir yap\u0131 ve geli\u015ftirme s\u00fcreci sa\u011flar, bu da ekip i\u00e7inde i\u015fbirli\u011fini kolayla\u015ft\u0131r\u0131r.<\/p>\n

K\u0131sacas\u0131, Angular CLI, Angular geli\u015ftiricilerinin en iyi uygulamalar\u0131 takip etmelerini, verimliliklerini art\u0131rmalar\u0131n\u0131 ve daha az manuel yap\u0131land\u0131rma ile daha fazla zamanlar\u0131n\u0131 kod yazmaya ay\u0131rmalar\u0131n\u0131 sa\u011flayan vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\n

\u00d6n Ko\u015fullar ve Kurulum<\/h3>\n

Angular CLI’\u0131 kullanmaya ba\u015flamadan \u00f6nce sisteminizde baz\u0131 temel ara\u00e7lar\u0131n y\u00fckl\u00fc olmas\u0131 gerekmektedir. Bu ara\u00e7lar, Angular uygulamalar\u0131n\u0131 geli\u015ftirmek ve \u00e7al\u0131\u015ft\u0131rmak i\u00e7in vazge\u00e7ilmezdir.<\/p>\n

Node.js ve npm Kurulumu<\/h4>\n

Angular, Node.js \u00e7al\u0131\u015fma zaman\u0131 \u00fczerinde \u00e7al\u0131\u015f\u0131r ve paket y\u00f6netimini npm (Node Package Manager) arac\u0131l\u0131\u011f\u0131yla yapar. Bu nedenle, ilk olarak Node.js ve npm’i sisteminize kurman\u0131z gerekmektedir.
\n1. Node.js \u0130ndirme:<\/strong> Node.js’in resmi web sitesi olan [nodejs.org](https:\/\/nodejs.org\/) adresine gidin.
\n2. Kurulum:<\/strong> LTS (Long Term Support) s\u00fcr\u00fcm\u00fcn\u00fc indirmeniz \u00f6nerilir, \u00e7\u00fcnk\u00fc bu s\u00fcr\u00fcm en kararl\u0131 ve uzun s\u00fcreli deste\u011fe sahiptir. \u0130ndirilen kurulum dosyas\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n ve varsay\u0131lan se\u00e7eneklerle kurulumu tamamlay\u0131n.
\n3. Do\u011frulama:<\/strong> Kurulumun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in komut istemcisini (Windows’ta cmd<\/code> veya PowerShell, macOS\/Linux’ta Terminal) a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

node -v\n    npm -v<\/code><\/pre>\n
    Bu komutlar, y\u00fckl\u00fc Node.js ve npm s\u00fcr\u00fcmlerini g\u00f6stermelidir. E\u011fer bir s\u00fcr\u00fcm numaras\u0131 g\u00f6r\u00fcyorsan\u0131z, kurulum ba\u015far\u0131l\u0131 demektir. npm<\/code>, Node.js ile birlikte gelir, bu y\u00fczden ayr\u0131ca kurman\u0131za gerek yoktur.<\/p>\n
Angular CLI Kurulumu<\/h4>\n
Node.js ve npm y\u00fcklendikten sonra, Angular CLI’\u0131 global olarak kurabilirsiniz. Global kurulum, CLI komutlar\u0131n\u0131 herhangi bir dizinden \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r.
\nKomut istemcinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
npm install -g @angular\/cli<\/code><\/pre>\n
Bu komut, @angular\/cli<\/code> paketini sisteminizde global olarak kuracakt\u0131r. Kurulumun tamamlanmas\u0131 birka\u00e7 dakika s\u00fcrebilir.
\nKurulumun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in a\u015fa\u011f\u0131daki komutu kullan\u0131n:<\/p>\n
ng version<\/code><\/pre>\n
Bu komut, y\u00fckl\u00fc Angular CLI s\u00fcr\u00fcm\u00fcn\u00fc ve Angular ekosistemindeki di\u011fer paketlerin s\u00fcr\u00fcmlerini g\u00f6sterecektir.<\/p>\n
Gerekli Di\u011fer Ara\u00e7lar<\/h4>\n
Angular geli\u015ftirme deneyiminizi daha verimli hale getirecek baz\u0131 ek ara\u00e7lar \u015funlard\u0131r:
\n*   Kod D\u00fczenleyici (IDE):<\/strong>
\n    *   Visual Studio Code (VS Code):<\/strong> Microsoft taraf\u0131ndan geli\u015ftirilen \u00fccretsiz ve a\u00e7\u0131k kaynakl\u0131 bir kod d\u00fczenleyicidir. Angular geli\u015ftirme i\u00e7in m\u00fckemmel destek sunar (TypeScript deste\u011fi, IntelliSense, hata ay\u0131klama vb.) ve \u00e7ok say\u0131da kullan\u0131\u015fl\u0131 uzant\u0131ya sahiptir. \u015eiddetle tavsiye edilir.
\n    *   Di\u011fer se\u00e7enekler aras\u0131nda WebStorm (\u00fccretli), Sublime Text veya Atom da bulunabilir.
\n*   Git:<\/strong> Versiyon kontrol sistemi olarak Git’i kullanmak, kodunuzu y\u00f6netmek ve ekip i\u00e7inde i\u015fbirli\u011fi yapmak i\u00e7in hayati \u00f6neme sahiptir. Git’i [git-scm.com](https:\/\/git-scm.com\/) adresinden indirebilir ve kurabilirsiniz.<\/p>\n
Bu ara\u00e7lar\u0131n kurulumu tamamland\u0131\u011f\u0131nda, Angular ile ilk projenizi olu\u015fturmaya haz\u0131rs\u0131n\u0131z demektir.<\/p>\n
\u0130lk Angular Projesini Olu\u015fturma<\/h3>\n
Angular CLI’\u0131n en temel ve en s\u0131k kullan\u0131lan \u00f6zelli\u011fi, yeni bir Angular projesi olu\u015fturmakt\u0131r. Bu i\u015flem, projenin t\u00fcm temel yap\u0131land\u0131rmas\u0131n\u0131 ve dosya yap\u0131s\u0131n\u0131 otomatik olarak olu\u015fturur.<\/p>\n
ng new<\/code> Komutu ile Proje Olu\u015fturma<\/h4>\n
Yeni bir Angular projesi olu\u015fturmak i\u00e7in ng new<\/code> komutunu kullan\u0131r\u0131z. Komut istemcinizi veya terminalinizi a\u00e7\u0131n ve projenizi olu\u015fturmak istedi\u011finiz dizine gidin. Ard\u0131ndan a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
ng new my-first-angular-app<\/code><\/pre>\n
*   my-first-angular-app<\/code>: Olu\u015fturulacak projenin ad\u0131d\u0131r. Bu isim ayn\u0131 zamanda projenin bulundu\u011fu dizinin ad\u0131 olacakt\u0131r.<\/p>\n
Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Angular CLI size birka\u00e7 soru soracakt\u0131r:
\n1.  Would you like to add Angular routing? (Y\/n)<\/code><\/strong>: Angular y\u00f6nlendirme mod\u00fcl\u00fcn\u00fc projenize eklemek isteyip istemedi\u011finizi sorar. Genellikle y<\/code> (yes) se\u00e7ene\u011fini se\u00e7mek iyi bir fikirdir, \u00e7\u00fcnk\u00fc \u00e7o\u011fu web uygulamas\u0131 farkl\u0131 sayfalar aras\u0131nda gezinme ihtiyac\u0131 duyar.
\n2.  Which stylesheet format would you like to use? (Use arrow keys)<\/code><\/strong>: Projenizde kullanmak istedi\u011finiz stil sayfas\u0131 format\u0131n\u0131 se\u00e7menizi ister. Se\u00e7enekler aras\u0131nda CSS, SCSS, Sass, Less ve Stylus bulunur. En yayg\u0131n se\u00e7enekler CSS<\/code> veya SCSS<\/code>‘dir. SCSS<\/code> (Sass) daha geli\u015fmi\u015f \u00f6zellikler sundu\u011fu i\u00e7in bir\u00e7ok projede tercih edilir.<\/p>\n
Se\u00e7imlerinizi yapt\u0131ktan sonra, Angular CLI projenizi olu\u015fturmaya ba\u015flayacakt\u0131r. Bu i\u015flem, gerekli t\u00fcm npm paketlerini indirir ve projenin temel yap\u0131s\u0131n\u0131 kurar. Bu birka\u00e7 dakika s\u00fcrebilir. \u0130\u015flem tamamland\u0131\u011f\u0131nda, my-first-angular-app<\/code> ad\u0131nda yeni bir dizin olu\u015ftu\u011funu g\u00f6receksiniz.<\/p>\n
Proje Yap\u0131s\u0131na Genel Bak\u0131\u015f<\/h4>\n
Olu\u015fturulan projenin dizin yap\u0131s\u0131 olduk\u00e7a standartt\u0131r ve Angular’\u0131n mod\u00fcler yap\u0131s\u0131n\u0131 yans\u0131t\u0131r. \u0130\u015fte ba\u015fl\u0131ca dizinler ve dosyalar:
\n*   my-first-angular-app\/<\/code><\/strong> (Proje K\u00f6k Dizini)
\n    *   node_modules\/<\/code><\/strong>: Projenin t\u00fcm npm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 i\u00e7eren dizin. Bu dizin genellikle .gitignore<\/code> dosyas\u0131na eklenir ve versiyon kontrol sistemine y\u00fcklenmez.
\n    *   src\/<\/code><\/strong>: Uygulaman\u0131z\u0131n kaynak kodunu i\u00e7eren ana dizin.
\n        *   app\/<\/code><\/strong>: Uygulaman\u0131z\u0131n ana bile\u015fenlerini ve mod\u00fcllerini i\u00e7eren dizin.
\n            *   app.component.ts<\/code><\/strong>: Uygulaman\u0131n k\u00f6k bile\u015feni (root component) i\u00e7in TypeScript dosyas\u0131.
\n            *   app.component.html<\/code><\/strong>: K\u00f6k bile\u015fenin HTML \u015fablonu.
\n            *   app.component.css<\/code><\/strong>: K\u00f6k bile\u015fenin stil dosyas\u0131.
\n            *   app.component.spec.ts<\/code><\/strong>: K\u00f6k bile\u015fen i\u00e7in birim test dosyas\u0131.
\n            *   app.module.ts<\/code><\/strong>: Uygulaman\u0131n k\u00f6k mod\u00fcl\u00fc (root module) i\u00e7in TypeScript dosyas\u0131. Angular uygulamalar\u0131 en az bir mod\u00fcle sahip olmal\u0131d\u0131r (genellikle AppModule<\/code>).
\n            *   app-routing.module.ts<\/code><\/strong>: E\u011fer y\u00f6nlendirme eklendiyseniz, y\u00f6nlendirme yap\u0131land\u0131rmas\u0131n\u0131 i\u00e7eren mod\u00fcl.
\n        *   assets\/<\/code><\/strong>: Resimler, ikonlar ve di\u011fer statik dosyalar gibi uygulama varl\u0131klar\u0131n\u0131 i\u00e7eren dizin.
\n        *   environments\/<\/code><\/strong>: Geli\u015ftirme ve \u00fcretim gibi farkl\u0131 ortamlar i\u00e7in yap\u0131land\u0131rma dosyalar\u0131.
\n        *   favicon.ico<\/code><\/strong>: Uygulaman\u0131n taray\u0131c\u0131 sekmesinde g\u00f6r\u00fcnen ikon.
\n        *   index.html<\/code><\/strong>: Uygulaman\u0131n tek HTML sayfas\u0131. Angular uygulamas\u0131 bu sayfaya y\u00fcklenir.
\n        *   main.ts<\/code><\/strong>: Uygulaman\u0131n ba\u015flang\u0131\u00e7 noktas\u0131. AppModule<\/code>‘\u00fc y\u00fckler.
\n        *   styles.css<\/code><\/strong>: Uygulaman\u0131n genel stil dosyas\u0131.
\n    *   angular.json<\/code><\/strong>: Angular CLI’\u0131n projenin \u00e7e\u015fitli yap\u0131land\u0131rmalar\u0131n\u0131 (derleme se\u00e7enekleri, test yap\u0131land\u0131rmalar\u0131 vb.) y\u00f6netti\u011fi ana yap\u0131land\u0131rma dosyas\u0131.
\n    *   package.json<\/code><\/strong>: Projenin npm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve betiklerini tan\u0131mlayan dosya.
\n    *   tsconfig.json<\/code><\/strong>: TypeScript derleyicisi i\u00e7in yap\u0131land\u0131rma dosyas\u0131.
\n    *   .gitignore<\/code><\/strong>: Git taraf\u0131ndan izlenmeyecek dosyalar\u0131 ve dizinleri belirten dosya.<\/p>\n
Bu yap\u0131, Angular’\u0131n mod\u00fcler ve bile\u015fen tabanl\u0131 felsefesini destekler ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n d\u00fczenli bir \u015fekilde geli\u015ftirilmesine olanak tan\u0131r.<\/p>\n
Projenizi \u00c7al\u0131\u015ft\u0131rma ve Geli\u015ftirme<\/h3>\n
Yeni bir Angular projesi olu\u015fturduktan sonra, onu taray\u0131c\u0131n\u0131zda g\u00f6rmek ve \u00fczerinde geli\u015ftirmeler yapmak i\u00e7in ng serve<\/code> komutunu kullan\u0131r\u0131z.<\/p>\n
ng serve<\/code> Komutu<\/h4>\n
ng serve<\/code> komutu, Angular CLI’\u0131n yerle\u015fik geli\u015ftirme sunucusunu ba\u015flat\u0131r. Bu sunucu, uygulaman\u0131z\u0131 derler ve taray\u0131c\u0131 \u00fczerinden eri\u015filebilir hale getirir.
\nProjenizi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyin:
\n1.  Komut istemcinizi a\u00e7\u0131n.
\n2.  Olu\u015fturdu\u011funuz projenin k\u00f6k dizinine gidin:<\/p>\n
cd my-first-angular-app<\/code><\/pre>\n
3.  Geli\u015ftirme sunucusunu ba\u015flatmak i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
ng serve<\/code><\/pre>\n
    Bu komut, uygulaman\u0131z\u0131 derleyecek ve varsay\u0131lan olarak http:\/\/localhost:4200\/<\/code> adresinde eri\u015filebilir bir sunucu ba\u015flatacakt\u0131r. Derleme i\u015flemi tamamland\u0131\u011f\u0131nda, terminalde uygulaman\u0131z\u0131n hangi adreste \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 belirten bir mesaj g\u00f6receksiniz.
\n4.  Taray\u0131c\u0131n\u0131z\u0131 a\u00e7\u0131n ve http:\/\/localhost:4200\/<\/code> adresine gidin. Angular’\u0131n varsay\u0131lan kar\u015f\u0131lama sayfas\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\n
Canl\u0131 Yeniden Y\u00fckleme (Live Reload)<\/h4>\n
ng serve<\/code> komutunun en kullan\u0131\u015fl\u0131 \u00f6zelliklerinden biri, canl\u0131 yeniden y\u00fckleme (live reload) deste\u011fidir. Uygulaman\u0131z\u0131n kaynak kodunda herhangi bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda (bir bile\u015fenin HTML’inde, CSS’inde veya TypeScript kodunda), Angular CLI bu de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar, uygulamay\u0131 yeniden derler ve taray\u0131c\u0131n\u0131zdaki sayfay\u0131 otomatik olarak yeniler. Bu, geli\u015ftirme s\u00fcrecini son derece h\u0131zland\u0131r\u0131r ve geri bildirim d\u00f6ng\u00fcs\u00fcn\u00fc k\u0131salt\u0131r.<\/p>\n
Geli\u015ftirme Sunucusu Se\u00e7enekleri<\/h4>\n
ng serve<\/code> komutuna \u00e7e\u015fitli se\u00e7enekler ekleyerek geli\u015ftirme sunucusunun davran\u0131\u015f\u0131n\u0131 \u00f6zelle\u015ftirebilirsiniz:
\n*   --open<\/code> veya -o<\/code><\/strong>: Uygulama derlendikten sonra taray\u0131c\u0131n\u0131zda otomatik olarak a\u00e7ar.<\/p>\n
ng serve --open<\/code><\/pre>\n
*   --port <\/code><\/strong>: Uygulaman\u0131n \u00e7al\u0131\u015faca\u011f\u0131 port numaras\u0131n\u0131 belirler. Varsay\u0131lan olarak 4200<\/code> kullan\u0131l\u0131r.<\/p>\n
ng serve --port 8080<\/code><\/pre>\n
*   --host <\/code><\/strong>: Uygulaman\u0131n dinleyece\u011fi host adresini belirler. Varsay\u0131lan olarak localhost<\/code> kullan\u0131l\u0131r. 0.0.0.0<\/code> kullanmak, uygulaman\u0131n a\u011fdaki di\u011fer cihazlardan eri\u015filebilir olmas\u0131n\u0131 sa\u011flar (\u00f6rne\u011fin, mobil cihazlarda test ederken).<\/p>\n
ng serve --host 0.0.0.0<\/code><\/pre>\n
*   --configuration <\/code> veya -c<\/code><\/strong>: Farkl\u0131 bir ortam yap\u0131land\u0131rmas\u0131yla (\u00f6rne\u011fin, production<\/code> veya \u00f6zel bir ortam) uygulamay\u0131 derler ve sunar.<\/p>\n
ng serve --configuration production<\/code><\/pre>\n
    Bu, environments<\/code> dizinindeki ilgili dosyan\u0131n kullan\u0131lmas\u0131n\u0131 sa\u011flar.
\n*   --proxy-config <\/code><\/strong>: API isteklerini ba\u015fka bir sunucuya y\u00f6nlendirmek i\u00e7in bir proxy yap\u0131land\u0131rma dosyas\u0131 belirtir. Bu, genellikle \u00f6n y\u00fcz uygulaman\u0131z ile arka y\u00fcz (backend) API’leri aras\u0131ndaki CORS (Cross-Origin Resource Sharing) sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
ng serve --proxy-config proxy.conf.json<\/code><\/pre>\n
    proxy.conf.json<\/code> dosyas\u0131 \u00f6rnek i\u00e7eri\u011fi:<\/p>\n
{\n      \"\/api\": {\n        \"target\": \"http:\/\/localhost:3000\",\n        \"secure\": false,\n        \"changeOrigin\": true\n      }\n    }<\/code><\/pre>\n
    Bu yap\u0131land\u0131rma, http:\/\/localhost:4200\/api\/users<\/code> adresine yap\u0131lan istekleri http:\/\/localhost:3000\/api\/users<\/code> adresine y\u00f6nlendirecektir.<\/p>\n
ng serve<\/code> komutu, Angular geli\u015ftirme s\u00fcrecinin kalbinde yer al\u0131r. Bu komutu etkin bir \u015fekilde kullanarak, kodunuzu h\u0131zl\u0131 bir \u015fekilde test edebilir ve uygulaman\u0131z\u0131 s\u00fcrekli olarak geli\u015ftirebilirsiniz.<\/p>\n
Temel Angular Bile\u015fenleri ve Kavramlar\u0131<\/h3>\n
Angular, bile\u015fen tabanl\u0131 bir mimariye sahiptir. Bu b\u00f6l\u00fcmde, bir Angular uygulamas\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131n\u0131 ve Angular CLI ile bunlar\u0131n nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 inceleyece\u011fiz.<\/p>\n
Bile\u015fenler (Components)<\/h4>\n
Bile\u015fenler, Angular uygulamalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131d\u0131r. Bir bile\u015fen, bir g\u00f6r\u00fcn\u00fcm (HTML \u015fablonu) ve bu g\u00f6r\u00fcn\u00fcm\u00fcn davran\u0131\u015f\u0131n\u0131 tan\u0131mlayan bir TypeScript s\u0131n\u0131f\u0131ndan olu\u015fur. Her bile\u015fen, uygulaman\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) belirli bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eder.<\/p>\n
*   Tan\u0131m ve Rol\u00fc:<\/strong> Bir bile\u015fen, bir HTML \u015fablonu, bir stil dosyas\u0131 (iste\u011fe ba\u011fl\u0131) ve bir TypeScript s\u0131n\u0131f\u0131ndan olu\u015fur. TypeScript s\u0131n\u0131f\u0131, \u015fablondaki verileri ve mant\u0131\u011f\u0131 y\u00f6netir. @Component<\/code> dekorat\u00f6r\u00fc, bir s\u0131n\u0131f\u0131n Angular bile\u015feni oldu\u011funu belirtir ve bile\u015fenin meta verilerini (selector, templateUrl, styleUrls) tan\u0131mlar.
\n*   ng generate component<\/code> Komutu:<\/strong> Yeni bir bile\u015fen olu\u015fturmak i\u00e7in ng generate component<\/code> (veya k\u0131saca ng g c<\/code>) komutunu kullan\u0131r\u0131z.<\/p>\n
ng generate component my-new-component\n    # veya\n    ng g c my-new-component<\/code><\/pre>\n
    Bu komut, src\/app\/my-new-component\/<\/code> dizini alt\u0131nda a\u015fa\u011f\u0131daki dosyalar\u0131 olu\u015fturur:
\n    *   my-new-component.component.ts<\/code>
\n    *   my-new-component.component.html<\/code>
\n    *   my-new-component.component.css<\/code>
\n    *   my-new-component.component.spec.ts<\/code>
\n    Ayr\u0131ca, AppModule<\/code> (veya en yak\u0131n mod\u00fcl) i\u00e7inde yeni bile\u015feni otomatik olarak declarations<\/code> dizisine ekler.
\n*   Component Dosyalar\u0131:<\/strong>
\n    *   .ts<\/code> (TypeScript):<\/strong> Bile\u015fenin mant\u0131\u011f\u0131n\u0131 i\u00e7erir. @Component<\/code> dekorat\u00f6r\u00fc ile tan\u0131mlan\u0131r.<\/p>\n
import { Component } from '@angular\/core';\n\n        @Component({\n          selector: 'app-my-new-component', \/\/ HTML'de kullan\u0131lacak etiket ad\u0131\n          templateUrl: '.\/my-new-component.component.html', \/\/ Bile\u015fenin HTML \u015fablonu\n          styleUrls: ['.\/my-new-component.component.css'] \/\/ Bile\u015fenin stil dosyas\u0131\n        })\n        export class MyNewComponentComponent {\n          title = 'Merhaba Angular Bile\u015feni!';\n        }<\/code><\/pre>\n
    *   .html<\/code> (\u015eablon):<\/strong> Bile\u015fenin kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc tan\u0131mlayan HTML kodu.<\/p>\n
{{ title }}<\/h2>\n        
Bu benim yeni Angular bile\u015fenim.<\/p><\/code><\/pre>\n
    *   .css<\/code> (Stil):<\/strong> Bile\u015fene \u00f6zel stilleri i\u00e7erir. Bile\u015fen stilleri varsay\u0131lan olarak kaps\u00fcllenir, yani di\u011fer bile\u015fenleri etkilemez.
\n    *   .spec.ts<\/code> (Test):<\/strong> Bile\u015fen i\u00e7in otomatik birim testlerini i\u00e7erir.
\n*   @Component<\/code> Dekorator\u00fc:<\/strong> Bu dekorat\u00f6r, bir TypeScript s\u0131n\u0131f\u0131n\u0131 Angular bile\u015feni olarak i\u015faretler. selector<\/code> \u00f6zelli\u011fi, bile\u015fenin HTML’de nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 (<\/app-my-new-component><\/code>) tan\u0131mlar.<\/p>\n
Mod\u00fcller (Modules)<\/h4>\n
Angular mod\u00fclleri (NgModule<\/code>), uygulamay\u0131 mant\u0131ksal bloklara ay\u0131rmak i\u00e7in bir mekanizma sa\u011flar. Her Angular uygulamas\u0131 en az bir k\u00f6k mod\u00fcle (AppModule<\/code>) sahiptir.<\/p>\n
*   Tan\u0131m ve Rol\u00fc:<\/strong> Mod\u00fcller, ilgili bile\u015fenleri, servisleri, pipe’lar\u0131 ve direktifleri bir araya getirerek uygulaman\u0131n yap\u0131s\u0131n\u0131 d\u00fczenler. @NgModule<\/code> dekorat\u00f6r\u00fc, bir s\u0131n\u0131f\u0131n Angular mod\u00fcl\u00fc oldu\u011funu belirtir ve mod\u00fcl\u00fcn meta verilerini (declarations, imports, providers, bootstrap, exports) tan\u0131mlar.
\n*   AppModule<\/code>:<\/strong> Her Angular uygulamas\u0131n\u0131n ba\u015flang\u0131\u00e7 noktas\u0131 olan k\u00f6k mod\u00fcld\u00fcr. main.ts<\/code> dosyas\u0131 taraf\u0131ndan y\u00fcklenir.<\/p>\n
import { NgModule } from '@angular\/core';\n    import { BrowserModule } from '@angular\/platform-browser';\n    import { AppRoutingModule } from '.\/app-routing.module';\n    import { AppComponent } from '.\/app.component';\n    import { MyNewComponentComponent } from '.\/my-new-component\/my-new-component.component'; \/\/ Yeni bile\u015fen\n\n    @NgModule({\n      declarations: [ \/\/ Bu mod\u00fclde kullan\u0131lan bile\u015fenler, direktifler, pipe'lar\n        AppComponent,\n        MyNewComponentComponent\n      ],\n      imports: [ \/\/ Bu mod\u00fcl\u00fcn ba\u011f\u0131ml\u0131 oldu\u011fu di\u011fer Angular mod\u00fclleri\n        BrowserModule,\n        AppRoutingModule\n      ],\n      providers: [], \/\/ Servisler\n      bootstrap: [AppComponent] \/\/ Uygulaman\u0131n ba\u015flang\u0131\u00e7 bile\u015feni (sadece k\u00f6k mod\u00fclde)\n    })\n    export class AppModule { }<\/code><\/pre>\n
*   \u00d6zellik Mod\u00fclleri (Feature Modules):<\/strong> B\u00fcy\u00fck uygulamalarda, belirli bir \u00f6zelli\u011fe ait bile\u015fenleri, servisleri ve y\u00f6nlendirmeleri kendi mod\u00fcllerinde gruplamak yayg\u0131n bir uygulamad\u0131r. Bu, kodun daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar ve uygulaman\u0131n tembel y\u00fcklenmesine (lazy loading) olanak tan\u0131r, bu da ba\u015flang\u0131\u00e7 performans\u0131n\u0131 art\u0131r\u0131r.<\/p>\n
ng generate module admin --route admin --module app<\/code><\/pre>\n
    Bu komut, admin<\/code> ad\u0131nda bir \u00f6zellik mod\u00fcl\u00fc olu\u015fturur ve app.module.ts<\/code> i\u00e7ine bir rota ile ekler.<\/p>\n
Servisler (Services) ve Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (Dependency Injection)<\/h4>\n
Servisler, veri getirme, i\u015f mant\u0131\u011f\u0131 y\u00fcr\u00fctme veya birden fazla bile\u015fen aras\u0131nda veri payla\u015fma gibi belirli bir g\u00f6revi yerine getiren TypeScript s\u0131n\u0131flar\u0131d\u0131r. Angular’daki ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu sistemi, bile\u015fenlerin do\u011frudan servis \u00f6rneklerini olu\u015fturmak yerine bunlar\u0131 talep etmesine olanak tan\u0131r.<\/p>\n
*   Tan\u0131m ve Rol\u00fc:<\/strong> Servisler, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde yeniden kullan\u0131labilen i\u015flevsellik sa\u011flar. Genellikle veri i\u015flemleri, API \u00e7a\u011fr\u0131lar\u0131 veya ortak yard\u0131mc\u0131 i\u015flevler gibi g\u00f6revler i\u00e7in kullan\u0131l\u0131rlar. @Injectable<\/code> dekorat\u00f6r\u00fc, bir s\u0131n\u0131f\u0131n bir servis oldu\u011funu ve ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu sistemi taraf\u0131ndan enjekte edilebilece\u011fini belirtir.
\n*   ng generate service<\/code> Komutu:<\/strong> Yeni bir servis olu\u015fturmak i\u00e7in ng generate service<\/code> (veya k\u0131saca ng g s<\/code>) komutunu kullan\u0131r\u0131z.<\/p>\n
ng generate service data\n    # veya\n    ng g s data<\/code><\/pre>\n
    Bu komut, src\/app\/data.service.ts<\/code> ve src\/app\/data.service.spec.ts<\/code> dosyalar\u0131n\u0131 olu\u015fturur.
\n*   @Injectable<\/code> Dekorator\u00fc:<\/strong><\/p>\n
import { Injectable } from '@angular\/core';\n\n    @Injectable({\n      providedIn: 'root' \/\/ Servisin nerede sa\u011flanaca\u011f\u0131n\u0131 belirtir\n    })\n    export class DataService {\n      constructor() { }\n\n      getUsers(): string[] {\n        return ['Alice', 'Bob', 'Charlie'];\n      }\n    }<\/code><\/pre>\n
    providedIn: 'root'<\/code>, servisin uygulaman\u0131n k\u00f6k seviyesinde sa\u011flanaca\u011f\u0131 anlam\u0131na gelir, yani uygulama boyunca tek bir \u00f6rne\u011fi (singleton) olacakt\u0131r.
\n*   Sa\u011flay\u0131c\u0131lar (Providers):<\/strong> Bir servisi kullanabilmek i\u00e7in, onu bir mod\u00fcl\u00fcn veya bile\u015fenin sa\u011flay\u0131c\u0131lar\u0131na (providers<\/code> dizisi) eklemeniz gerekir. providedIn: 'root'<\/code> ile servis otomatik olarak k\u00f6k mod\u00fcl taraf\u0131ndan sa\u011flan\u0131r. Bir bile\u015fenin i\u00e7inde bir servisi kullanmak i\u00e7in, bile\u015fenin yap\u0131c\u0131 metoduna (constructor) ba\u011f\u0131ml\u0131l\u0131k olarak enjekte ederiz:<\/p>\n
import { Component, OnInit } from '@angular\/core';\n    import { DataService } from '..\/data.service';\n\n    @Component({\n      selector: 'app-my-new-component',\n      templateUrl: '.\/my-new-component.component.html',\n      styleUrls: ['.\/my-new-component.component.css']\n    })\n    export class MyNewComponentComponent implements OnInit {\n      users: string[] = [];\n\n      constructor(private dataService: DataService) { } \/\/ Servisi enjekte et\n\n      ngOnInit(): void {\n        this.users = this.dataService.getUsers();\n      }\n    }<\/code><\/pre>\n
Y\u00f6nlendirme (Routing)<\/h4>\n
Angular y\u00f6nlendirme, uygulaman\u0131n farkl\u0131 g\u00f6r\u00fcn\u00fcmleri aras\u0131nda gezinmeyi sa\u011flar. Tek sayfa uygulamalar\u0131nda, taray\u0131c\u0131n\u0131n URL’ini de\u011fi\u015ftirerek farkl\u0131 bile\u015fenleri y\u00fcklemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
*   AppRoutingModule<\/code>:<\/strong> ng new<\/code> komutuyla y\u00f6nlendirmeyi etkinle\u015ftirdiyseniz, projenizde app-routing.module.ts<\/code> ad\u0131nda bir dosya olu\u015fturulur. Bu mod\u00fcl, uygulaman\u0131n rotalar\u0131n\u0131 tan\u0131mlar.<\/p>\n
import { NgModule } from '@angular\/core';\n    import { RouterModule, Routes } from '@angular\/router';\n    import { MyNewComponentComponent } from '.\/my-new-component\/my-new-component.component';\n    import { AppComponent } from '.\/app.component';\n\n    const routes: Routes = [\n      { path: 'home', component: AppComponent }, \/\/ \u00d6rnek: Ana sayfa\n      { path: 'my-component', component: MyNewComponentComponent },\n      { path: '', redirectTo: '\/home', pathMatch: 'full' }, \/\/ Varsay\u0131lan y\u00f6nlendirme\n      { path: '<\/em>', redirectTo: '\/home' } \/\/ Ge\u00e7ersiz URL'ler i\u00e7in\n    ];\n\n    @NgModule({\n      imports: [RouterModule.forRoot(routes)],\n      exports: [RouterModule]\n    })\n    export class AppRoutingModule { }<\/code><\/pre>\n
*   Rota Tan\u0131mlar\u0131:<\/strong> Routes<\/code> dizisi, URL yollar\u0131 (path<\/code>) ve bu yollarla ili\u015fkilendirilecek bile\u015fenleri (component<\/code>) i\u00e7erir.
\n*   routerLink<\/code> ve router-outlet<\/code>:<\/strong>
\n    *   routerLink<\/code> direktifi, HTML’deki <\/code> etiketlerini Angular y\u00f6nlendirme ba\u011flant\u0131lar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n