Angular CLI ile Angular’a Başlangıç: Kapsamlı Bir Rehber

Angular CLI ile Angular’a Başlangıç: Kapsamlı Bir Rehber

Giriş

Web geliştirme dünyası, sürekli değişen teknolojiler ve çerçevelerle dolu dinamik bir alandır. Bu dinamik ortamda, modern, ölçeklenebilir ve yüksek performanslı tek sayfa uygulamaları (Single Page Applications – SPA) geliştirmek için Angular gibi güçlü bir çerçeveye ihtiyaç duyarız. Angular, Google tarafından desteklenen, TypeScript tabanlı, bileşen odaklı bir ön yüz (frontend) geliştirme çerçevesidir. Büyük ölçekli kurumsal uygulamalardan küçük kişisel projelere kadar geniş bir yelpazede tercih edilmesinin temel nedenleri arasında tutarlılık, performans optimizasyonları ve zengin ekosistemi yer alır. Ancak Angular’ın tüm bu gücünü verimli bir şekilde kullanabilmek için, geliştirme sürecini basitleştiren ve standartlaştıran bir araca ihtiyacımız vardır: Angular CLI (Command Line Interface).

Angular CLI, Angular uygulamalarını oluşturmak, geliştirmek, test etmek ve dağıtmak için kullanılan güçlü bir komut satırı aracıdır. Bu rehber, Angular dünyasına adım atmak isteyen geliştiriciler için Angular CLI’ın temelden ileri seviyeye kadar tüm özelliklerini kapsayan kapsamlı bir yol haritası sunmaktadır. Sıfırdan bir Angular projesi oluşturmaktan, bileşenler, servisler gibi temel yapı taşlarını anlamaya ve uygulamanızı dağıtıma hazırlamaya kadar her adımı detaylı bir şekilde inceleyeceğiz. Bu rehberin sonunda, Angular CLI’ı etkin bir şekilde kullanarak kendi Angular uygulamalarınızı geliştirmeye başlayacak bilgi ve beceriye sahip olacaksınız.

Angular ve Angular CLI Nedir?

Angular, tek sayfa uygulamaları oluşturmak için kullanılan açık kaynaklı, TypeScript tabanlı bir ön yüz web uygulama çerçevesidir. Google tarafından geliştirilen ve bakımı yapılan Angular, bileşen tabanlı mimarisiyle modüler ve yeniden kullanılabilir kod yazmayı teşvik eder. Performans, ölçeklenebilirlik ve geliştirici verimliliği odaklı bir yaklaşımla tasarlanmıştır.

Angular’ın temel özellikleri arasında veri bağlama (data binding), bağımlılık enjeksiyonu (dependency injection), yönlendirme (routing), form yönetimi ve HTTP istemcisi gibi birçok dahili özellik bulunur. Bu özellikler, karmaşık web uygulamalarının geliştirilmesini kolaylaştırır ve geliştiricilere güçlü bir yapı sunar.

Angular CLI’ın Tanımı ve Faydaları

Angular CLI (Command Line Interface), Angular uygulamalarını oluşturmak, geliştirmek ve sürdürmek için kullanılan bir komut satırı aracıdır. Geliştiricilerin tekrarlayan görevleri otomatikleştirmesine ve en iyi uygulamaları takip etmesine yardımcı olur. Angular CLI, geliştirme sürecini önemli ölçüde hızlandırır ve basitleştirir.

Angular CLI’ın sunduğu başlıca faydalar şunlardır:
* Hızlı Proje Oluşturma: Tek bir komutla tam yapılandırılmış bir Angular projesi oluşturur. Bu, manuel kurulum ve yapılandırma ile harcanacak zamanı ortadan kaldırır.
* Kod Üretimi: Bileşenler (components), servisler (services), modüller (modules), direktifler (directives) ve pipe’lar (pipes) gibi Angular yapı taşlarını hızlı bir şekilde oluşturmak için komutlar sağlar. Bu, yazım hatalarını azaltır ve dosya yapısında tutarlılığı sağlar.
* Geliştirme Sunucusu: Uygulamayı yerel olarak çalıştırmak için bir geliştirme sunucusu sağlar. Canlı yeniden yükleme (live reload) özelliği sayesinde kod değişiklikleri anında tarayıcıya yansır.
* Test Araçları Entegrasyonu: Uygulama için birim testleri (unit tests) ve uçtan uca testleri (end-to-end tests) yapılandırma ve çalıştırma yeteneği sunar.
* Optimizasyon ve Derleme: Üretim için optimize edilmiş, dağıtıma hazır uygulama paketleri oluşturur. Bu, kod sıkıştırma, ağaç sallama (tree shaking) ve diğer performans iyileştirmelerini içerir.
* Güncelleme Kolaylığı: Angular ve bağımlılıklarını kolayca güncellemeyi sağlar, bu da projenin en son sürümde kalmasına yardımcı olur.
* Standartlaşma: Tüm Angular projeleri için tutarlı bir yapı ve geliştirme süreci sağlar, bu da ekip içinde işbirliğini kolaylaştırır.

Kısacası, Angular CLI, Angular geliştiricilerinin en iyi uygulamaları takip etmelerini, verimliliklerini artırmalarını ve daha az manuel yapılandırma ile daha fazla zamanlarını kod yazmaya ayırmalarını sağlayan vazgeçilmez bir araçtır.

Ön Koşullar ve Kurulum

Angular CLI’ı kullanmaya başlamadan önce sisteminizde bazı temel araçların yüklü olması gerekmektedir. Bu araçlar, Angular uygulamalarını geliştirmek ve çalıştırmak için vazgeçilmezdir.

Node.js ve npm Kurulumu

Angular, Node.js çalışma zamanı üzerinde çalışır ve paket yönetimini npm (Node Package Manager) aracılığıyla yapar. Bu nedenle, ilk olarak Node.js ve npm’i sisteminize kurmanız gerekmektedir.
1. Node.js İndirme: Node.js’in resmi web sitesi olan [nodejs.org](https://nodejs.org/) adresine gidin.
2. Kurulum: LTS (Long Term Support) sürümünü indirmeniz önerilir, çünkü bu sürüm en kararlı ve uzun süreli desteğe sahiptir. İndirilen kurulum dosyasını çalıştırın ve varsayılan seçeneklerle kurulumu tamamlayın.
3. Doğrulama: Kurulumun başarılı olup olmadığını kontrol etmek için komut istemcisini (Windows’ta cmd veya PowerShell, macOS/Linux’ta Terminal) açın ve aşağıdaki komutları çalıştırın:

node -v
    npm -v

Bu komutlar, yüklü Node.js ve npm sürümlerini göstermelidir. Eğer bir sürüm numarası görüyorsanız, kurulum başarılı demektir. npm, Node.js ile birlikte gelir, bu yüzden ayrıca kurmanıza gerek yoktur.

Angular CLI Kurulumu

Node.js ve npm yüklendikten sonra, Angular CLI’ı global olarak kurabilirsiniz. Global kurulum, CLI komutlarını herhangi bir dizinden çalıştırmanıza olanak tanır.
Komut istemcinizi açın ve aşağıdaki komutu çalıştırın:

npm install -g @angular/cli

Bu komut, @angular/cli paketini sisteminizde global olarak kuracaktır. Kurulumun tamamlanması birkaç dakika sürebilir.
Kurulumun başarılı olup olmadığını kontrol etmek için aşağıdaki komutu kullanın:

ng version

Bu komut, yüklü Angular CLI sürümünü ve Angular ekosistemindeki diğer paketlerin sürümlerini gösterecektir.

Gerekli Diğer Araçlar

Angular geliştirme deneyiminizi daha verimli hale getirecek bazı ek araçlar şunlardır:
* Kod Düzenleyici (IDE):
* Visual Studio Code (VS Code): Microsoft tarafından geliştirilen ücretsiz ve açık kaynaklı bir kod düzenleyicidir. Angular geliştirme için mükemmel destek sunar (TypeScript desteği, IntelliSense, hata ayıklama vb.) ve çok sayıda kullanışlı uzantıya sahiptir. Şiddetle tavsiye edilir.
* Diğer seçenekler arasında WebStorm (ücretli), Sublime Text veya Atom da bulunabilir.
* Git: Versiyon kontrol sistemi olarak Git’i kullanmak, kodunuzu yönetmek ve ekip içinde işbirliği yapmak için hayati öneme sahiptir. Git’i [git-scm.com](https://git-scm.com/) adresinden indirebilir ve kurabilirsiniz.

Bu araçların kurulumu tamamlandığında, Angular ile ilk projenizi oluşturmaya hazırsınız demektir.

İlk Angular Projesini Oluşturma

Angular CLI’ın en temel ve en sık kullanılan özelliği, yeni bir Angular projesi oluşturmaktır. Bu işlem, projenin tüm temel yapılandırmasını ve dosya yapısını otomatik olarak oluşturur.

ng new Komutu ile Proje Oluşturma

Yeni bir Angular projesi oluşturmak için ng new komutunu kullanırız. Komut istemcinizi veya terminalinizi açın ve projenizi oluşturmak istediğiniz dizine gidin. Ardından aşağıdaki komutu çalıştırın:

ng new my-first-angular-app

* my-first-angular-app: Oluşturulacak projenin adıdır. Bu isim aynı zamanda projenin bulunduğu dizinin adı olacaktır.

Bu komutu çalıştırdığınızda, Angular CLI size birkaç soru soracaktır:
1. Would you like to add Angular routing? (Y/n): Angular yönlendirme modülünü projenize eklemek isteyip istemediğinizi sorar. Genellikle y (yes) seçeneğini seçmek iyi bir fikirdir, çünkü çoğu web uygulaması farklı sayfalar arasında gezinme ihtiyacı duyar.
2. Which stylesheet format would you like to use? (Use arrow keys): Projenizde kullanmak istediğiniz stil sayfası formatını seçmenizi ister. Seçenekler arasında CSS, SCSS, Sass, Less ve Stylus bulunur. En yaygın seçenekler CSS veya SCSS‘dir. SCSS (Sass) daha gelişmiş özellikler sunduğu için birçok projede tercih edilir.

Seçimlerinizi yaptıktan sonra, Angular CLI projenizi oluşturmaya başlayacaktır. Bu işlem, gerekli tüm npm paketlerini indirir ve projenin temel yapısını kurar. Bu birkaç dakika sürebilir. İşlem tamamlandığında, my-first-angular-app adında yeni bir dizin oluştuğunu göreceksiniz.

Proje Yapısına Genel Bakış

Oluşturulan projenin dizin yapısı oldukça standarttır ve Angular’ın modüler yapısını yansıtır. İşte başlıca dizinler ve dosyalar:
* my-first-angular-app/ (Proje Kök Dizini)
* node_modules/: Projenin tüm npm bağımlılıklarını içeren dizin. Bu dizin genellikle .gitignore dosyasına eklenir ve versiyon kontrol sistemine yüklenmez.
* src/: Uygulamanızın kaynak kodunu içeren ana dizin.
* app/: Uygulamanızın ana bileşenlerini ve modüllerini içeren dizin.
* app.component.ts: Uygulamanın kök bileşeni (root component) için TypeScript dosyası.
* app.component.html: Kök bileşenin HTML şablonu.
* app.component.css: Kök bileşenin stil dosyası.
* app.component.spec.ts: Kök bileşen için birim test dosyası.
* app.module.ts: Uygulamanın kök modülü (root module) için TypeScript dosyası. Angular uygulamaları en az bir modüle sahip olmalıdır (genellikle AppModule).
* app-routing.module.ts: Eğer yönlendirme eklendiyseniz, yönlendirme yapılandırmasını içeren modül.
* assets/: Resimler, ikonlar ve diğer statik dosyalar gibi uygulama varlıklarını içeren dizin.
* environments/: Geliştirme ve üretim gibi farklı ortamlar için yapılandırma dosyaları.
* favicon.ico: Uygulamanın tarayıcı sekmesinde görünen ikon.
* index.html: Uygulamanın tek HTML sayfası. Angular uygulaması bu sayfaya yüklenir.
* main.ts: Uygulamanın başlangıç noktası. AppModule‘ü yükler.
* styles.css: Uygulamanın genel stil dosyası.
* angular.json: Angular CLI’ın projenin çeşitli yapılandırmalarını (derleme seçenekleri, test yapılandırmaları vb.) yönettiği ana yapılandırma dosyası.
* package.json: Projenin npm bağımlılıklarını ve betiklerini tanımlayan dosya.
* tsconfig.json: TypeScript derleyicisi için yapılandırma dosyası.
* .gitignore: Git tarafından izlenmeyecek dosyaları ve dizinleri belirten dosya.

Bu yapı, Angular’ın modüler ve bileşen tabanlı felsefesini destekler ve büyük ölçekli uygulamaların düzenli bir şekilde geliştirilmesine olanak tanır.

Projenizi Çalıştırma ve Geliştirme

Yeni bir Angular projesi oluşturduktan sonra, onu tarayıcınızda görmek ve üzerinde geliştirmeler yapmak için ng serve komutunu kullanırız.

ng serve Komutu

ng serve komutu, Angular CLI’ın yerleşik geliştirme sunucusunu başlatır. Bu sunucu, uygulamanızı derler ve tarayıcı üzerinden erişilebilir hale getirir.
Projenizi çalıştırmak için aşağıdaki adımları izleyin:
1. Komut istemcinizi açın.
2. Oluşturduğunuz projenin kök dizinine gidin:

cd my-first-angular-app

3. Geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:

ng serve

Bu komut, uygulamanızı derleyecek ve varsayılan olarak http://localhost:4200/ adresinde erişilebilir bir sunucu başlatacaktır. Derleme işlemi tamamlandığında, terminalde uygulamanızın hangi adreste çalıştığını belirten bir mesaj göreceksiniz.
4. Tarayıcınızı açın ve http://localhost:4200/ adresine gidin. Angular’ın varsayılan karşılama sayfasını görmelisiniz.

Canlı Yeniden Yükleme (Live Reload)

ng serve komutunun en kullanışlı özelliklerinden biri, canlı yeniden yükleme (live reload) desteğidir. Uygulamanızın kaynak kodunda herhangi bir değişiklik yaptığınızda (bir bileşenin HTML’inde, CSS’inde veya TypeScript kodunda), Angular CLI bu değişiklikleri otomatik olarak algılar, uygulamayı yeniden derler ve tarayıcınızdaki sayfayı otomatik olarak yeniler. Bu, geliştirme sürecini son derece hızlandırır ve geri bildirim döngüsünü kısaltır.

Geliştirme Sunucusu Seçenekleri

ng serve komutuna çeşitli seçenekler ekleyerek geliştirme sunucusunun davranışını özelleştirebilirsiniz:
* --open veya -o: Uygulama derlendikten sonra tarayıcınızda otomatik olarak açar.

ng serve --open

* --port : Uygulamanın çalışacağı port numarasını belirler. Varsayılan olarak 4200 kullanılır.

ng serve --port 8080

* --host : Uygulamanın dinleyeceği host adresini belirler. Varsayılan olarak localhost kullanılır. 0.0.0.0 kullanmak, uygulamanın ağdaki diğer cihazlardan erişilebilir olmasını sağlar (örneğin, mobil cihazlarda test ederken).

ng serve --host 0.0.0.0

* --configuration veya -c: Farklı bir ortam yapılandırmasıyla (örneğin, production veya özel bir ortam) uygulamayı derler ve sunar.

ng serve --configuration production

Bu, environments dizinindeki ilgili dosyanın kullanılmasını sağlar.
* --proxy-config : API isteklerini başka bir sunucuya yönlendirmek için bir proxy yapılandırma dosyası belirtir. Bu, genellikle ön yüz uygulamanız ile arka yüz (backend) API’leri arasındaki CORS (Cross-Origin Resource Sharing) sorunlarını çözmek için kullanılır.

ng serve --proxy-config proxy.conf.json

proxy.conf.json dosyası örnek içeriği:

{
      "/api": {
        "target": "http://localhost:3000",
        "secure": false,
        "changeOrigin": true
      }
    }

Bu yapılandırma, http://localhost:4200/api/users adresine yapılan istekleri http://localhost:3000/api/users adresine yönlendirecektir.

ng serve komutu, Angular geliştirme sürecinin kalbinde yer alır. Bu komutu etkin bir şekilde kullanarak, kodunuzu hızlı bir şekilde test edebilir ve uygulamanızı sürekli olarak geliştirebilirsiniz.

Temel Angular Bileşenleri ve Kavramları

Angular, bileşen tabanlı bir mimariye sahiptir. Bu bölümde, bir Angular uygulamasının temel yapı taşlarını ve Angular CLI ile bunların nasıl oluşturulacağını inceleyeceğiz.

Bileşenler (Components)

Bileşenler, Angular uygulamalarının temel yapı taşlarıdır. Bir bileşen, bir görünüm (HTML şablonu) ve bu görünümün davranışını tanımlayan bir TypeScript sınıfından oluşur. Her bileşen, uygulamanın kullanıcı arayüzünün (UI) belirli bir bölümünü temsil eder.

* Tanım ve Rolü: Bir bileşen, bir HTML şablonu, bir stil dosyası (isteğe bağlı) ve bir TypeScript sınıfından oluşur. TypeScript sınıfı, şablondaki verileri ve mantığı yönetir. @Component dekoratörü, bir sınıfın Angular bileşeni olduğunu belirtir ve bileşenin meta verilerini (selector, templateUrl, styleUrls) tanımlar.
* ng generate component Komutu: Yeni bir bileşen oluşturmak için ng generate component (veya kısaca ng g c) komutunu kullanırız.

ng generate component my-new-component
    # veya
    ng g c my-new-component

Bu komut, src/app/my-new-component/ dizini altında aşağıdaki dosyaları oluşturur:
* my-new-component.component.ts
* my-new-component.component.html
* my-new-component.component.css
* my-new-component.component.spec.ts
Ayrıca, AppModule (veya en yakın modül) içinde yeni bileşeni otomatik olarak declarations dizisine ekler.
* Component Dosyaları:
* .ts (TypeScript): Bileşenin mantığını içerir. @Component dekoratörü ile tanımlanır.

import { Component } from '@angular/core';

        @Component({
          selector: 'app-my-new-component', // HTML'de kullanılacak etiket adı
          templateUrl: './my-new-component.component.html', // Bileşenin HTML şablonu
          styleUrls: ['./my-new-component.component.css'] // Bileşenin stil dosyası
        })
        export class MyNewComponentComponent {
          title = 'Merhaba Angular Bileşeni!';
        }

* .html (Şablon): Bileşenin kullanıcı arayüzünü tanımlayan HTML kodu.

{{ title }}
        
Bu benim yeni Angular bileşenim.

* .css (Stil): Bileşene özel stilleri içerir. Bileşen stilleri varsayılan olarak kapsüllenir, yani diğer bileşenleri etkilemez.
* .spec.ts (Test): Bileşen için otomatik birim testlerini içerir.
* @Component Dekoratorü: Bu dekoratör, bir TypeScript sınıfını Angular bileşeni olarak işaretler. selector özelliği, bileşenin HTML’de nasıl kullanılacağını () tanımlar.

Modüller (Modules)

Angular modülleri (NgModule), uygulamayı mantıksal bloklara ayırmak için bir mekanizma sağlar. Her Angular uygulaması en az bir kök modüle (AppModule) sahiptir.

* Tanım ve Rolü: Modüller, ilgili bileşenleri, servisleri, pipe’ları ve direktifleri bir araya getirerek uygulamanın yapısını düzenler. @NgModule dekoratörü, bir sınıfın Angular modülü olduğunu belirtir ve modülün meta verilerini (declarations, imports, providers, bootstrap, exports) tanımlar.
* AppModule: Her Angular uygulamasının başlangıç noktası olan kök modüldür. main.ts dosyası tarafından yüklenir.

import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { MyNewComponentComponent } from './my-new-component/my-new-component.component'; // Yeni bileşen

    @NgModule({
      declarations: [ // Bu modülde kullanılan bileşenler, direktifler, pipe'lar
        AppComponent,
        MyNewComponentComponent
      ],
      imports: [ // Bu modülün bağımlı olduğu diğer Angular modülleri
        BrowserModule,
        AppRoutingModule
      ],
      providers: [], // Servisler
      bootstrap: [AppComponent] // Uygulamanın başlangıç bileşeni (sadece kök modülde)
    })
    export class AppModule { }

* Özellik Modülleri (Feature Modules): Büyük uygulamalarda, belirli bir özelliğe ait bileşenleri, servisleri ve yönlendirmeleri kendi modüllerinde gruplamak yaygın bir uygulamadır. Bu, kodun daha düzenli olmasını sağlar ve uygulamanın tembel yüklenmesine (lazy loading) olanak tanır, bu da başlangıç performansını artırır.

ng generate module admin --route admin --module app

Bu komut, admin adında bir özellik modülü oluşturur ve app.module.ts içine bir rota ile ekler.

Servisler (Services) ve Bağımlılık Enjeksiyonu (Dependency Injection)

Servisler, veri getirme, iş mantığı yürütme veya birden fazla bileşen arasında veri paylaşma gibi belirli bir görevi yerine getiren TypeScript sınıflarıdır. Angular’daki bağımlılık enjeksiyonu sistemi, bileşenlerin doğrudan servis örneklerini oluşturmak yerine bunları talep etmesine olanak tanır.

* Tanım ve Rolü: Servisler, uygulamanın farklı bölümlerinde yeniden kullanılabilen işlevsellik sağlar. Genellikle veri işlemleri, API çağrıları veya ortak yardımcı işlevler gibi görevler için kullanılırlar. @Injectable dekoratörü, bir sınıfın bir servis olduğunu ve bağımlılık enjeksiyonu sistemi tarafından enjekte edilebileceğini belirtir.
* ng generate service Komutu: Yeni bir servis oluşturmak için ng generate service (veya kısaca ng g s) komutunu kullanırız.

ng generate service data
    # veya
    ng g s data

Bu komut, src/app/data.service.ts ve src/app/data.service.spec.ts dosyalarını oluşturur.
* @Injectable Dekoratorü:

import { Injectable } from '@angular/core';

    @Injectable({
      providedIn: 'root' // Servisin nerede sağlanacağını belirtir
    })
    export class DataService {
      constructor() { }

      getUsers(): string[] {
        return ['Alice', 'Bob', 'Charlie'];
      }
    }

providedIn: 'root', servisin uygulamanın kök seviyesinde sağlanacağı anlamına gelir, yani uygulama boyunca tek bir örneği (singleton) olacaktır.
* Sağlayıcılar (Providers): Bir servisi kullanabilmek için, onu bir modülün veya bileşenin sağlayıcılarına (providers dizisi) eklemeniz gerekir. providedIn: 'root' ile servis otomatik olarak kök modül tarafından sağlanır. Bir bileşenin içinde bir servisi kullanmak için, bileşenin yapıcı metoduna (constructor) bağımlılık olarak enjekte ederiz:

import { Component, OnInit } from '@angular/core';
    import { DataService } from '../data.service';

    @Component({
      selector: 'app-my-new-component',
      templateUrl: './my-new-component.component.html',
      styleUrls: ['./my-new-component.component.css']
    })
    export class MyNewComponentComponent implements OnInit {
      users: string[] = [];

      constructor(private dataService: DataService) { } // Servisi enjekte et

      ngOnInit(): void {
        this.users = this.dataService.getUsers();
      }
    }

Yönlendirme (Routing)

Angular yönlendirme, uygulamanın farklı görünümleri arasında gezinmeyi sağlar. Tek sayfa uygulamalarında, tarayıcının URL’ini değiştirerek farklı bileşenleri yüklemek için kullanılır.

* AppRoutingModule: ng new komutuyla yönlendirmeyi etkinleştirdiyseniz, projenizde app-routing.module.ts adında bir dosya oluşturulur. Bu modül, uygulamanın rotalarını tanımlar.

import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { MyNewComponentComponent } from './my-new-component/my-new-component.component';
    import { AppComponent } from './app.component';

    const routes: Routes = [
      { path: 'home', component: AppComponent }, // Örnek: Ana sayfa
      { path: 'my-component', component: MyNewComponentComponent },
      { path: '', redirectTo: '/home', pathMatch: 'full' }, // Varsayılan yönlendirme
      { path: '', redirectTo: '/home' } // Geçersiz URL'ler için
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

* Rota Tanımları: Routes dizisi, URL yolları (path) ve bu yollarla ilişkilendirilecek bileşenleri (component) içerir.
* routerLink ve router-outlet:
* routerLink direktifi, HTML’deki etiketlerini Angular yönlendirme bağlantılarına dönüştürür.

* router-outlet bileşeni, yönlendiricinin eşleşen bileşeni nereye yükleyeceğini belirtir. Genellikle app.component.html içinde bulunur.

Bu temel yapı taşları, Angular uygulamalarının iskeletini oluşturur. Angular CLI, bu yapı taşlarını hızlı ve hatasız bir şekilde oluşturmanıza yardımcı olarak geliştirme sürecinizi büyük ölçüde kolaylaştırır.

Angular CLI ile Daha Fazla Üretkenlik

Angular CLI, sadece proje oluşturmakla kalmaz, aynı zamanda geliştirme sürecinin birçok aşamasında üretkenliğinizi artıran çeşitli komutlar sunar.

Kod Oluşturma (Generating Code)

ng generate (veya kısaca ng g) komutu, Angular uygulamalarının farklı yapı taşlarını oluşturmak için kullanılır. Bu, boilerplate kod yazmaktan kurtarır ve tutarlı bir proje yapısı sağlar.

* ng generate component (ng g c ): Yeni bir bileşen oluşturur.

ng g c user-profile --flat --skip-tests
    # --flat: Bileşeni kendi dizini yerine mevcut dizine oluşturur.
    # --skip-tests: Test dosyası oluşturmaz.

* ng generate service (ng g s ): Yeni bir servis oluşturur.

ng g s auth --skip-tests

* ng generate module (ng g m ): Yeni bir modül oluşturur.

ng g m products --routing
    # --routing: Modül için bir yönlendirme modülü de oluşturur.

* ng generate directive (ng g d ): Yeni bir direktif oluşturur. Direktifler, DOM öğelerinin davranışını değiştirir.

ng g d highlight

* ng generate pipe (ng g p ): Yeni bir pipe oluşturur. Pipe’lar, şablonlardaki veriyi biçimlendirmek için kullanılır.

ng g p currency-format

* ng generate guard (ng g g ): Yeni bir guard oluşturur. Guard’lar, bir rotaya erişimi kontrol etmek için kullanılır.

ng g g auth --implements CanActivate
    # --implements: Guard'ın uygulayacağı arayüzü belirtir (CanActivate, CanLoad vb.).

* ng generate interface (ng g i ): Yeni bir TypeScript arayüzü oluşturur.

ng g i user

* ng generate enum (ng g e ): Yeni bir TypeScript enum’u oluşturur.

ng g e user-role

Bu komutlar, zaman kazandırmanın yanı sıra, projenizin her zaman Angular’ın önerdiği standartlara uygun kalmasını sağlar.

Uygulamayı Test Etme

Angular CLI, uygulamalarınızı test etmek için yerleşik destek sunar. Birim testleri (unit tests) ve uçtan uca testler (end-to-end tests) için gerekli yapılandırmaları ve komutları sağlar.

* Birim Testleri (Unit Tests): Bileşenlerin, servislerin ve diğer küçük kod birimlerinin izole bir şekilde doğru çalışıp çalışmadığını kontrol eder. Angular CLI, birim testleri için varsayılan olarak Karma test çalıştırıcısı ve Jasmine test çerçevesini kullanır.
* Testleri çalıştırmak için:

ng test

Bu komut, bir tarayıcı penceresi açar ve test sonuçlarını gösterir. Kodda yapılan değişiklikler canlı olarak yeniden derlenir ve testler tekrar çalıştırılır.
* Uçtan Uca Testler (End-to-End Tests): Uygulamanın bir bütün olarak, kullanıcı arayüzü üzerinden kullanıcı akışlarını taklit ederek doğru çalışıp çalışmadığını kontrol eder. Angular CLI’ın eski sürümleri Protractor’ı varsayılan olarak kullanırken, Angular 16 itibarıyla Protractor desteği kaldırılmıştır. Artık Cypress, Playwright veya Jest gibi daha modern araçlar tercih edilmektedir.
* Yeni bir projede e2e testi çalıştırmak için (eğer bir test çerçevesi yapılandırılmışsa):

ng e2e

* Eğer yeni bir projede e2e testleri için bir araç kurmanız gerekiyorsa, ng add komutunu kullanabilirsiniz:

ng add @cypress/schematic
        # veya
        ng add @briebug/cypress-schematic

Uygulamayı Derleme ve Dağıtma (Building and Deploying)

Uygulamanızı geliştirme ortamında çalıştırdıktan ve test ettikten sonra, onu üretim ortamına dağıtıma hazır hale getirmek için derlemeniz gerekir.

* ng build Komutu: Bu komut, uygulamanızı derler ve dağıtıma hazır statik dosyaları oluşturur.

ng build

Bu komut, uygulamanın dist/my-first-angular-app/ dizini altında derlenmiş dosyalarını oluşturur. Bu dosyalar, bir web sunucusunda barındırılabilir.
* Üretim Modu (Production Mode) ve Optimizasyonlar: Üretim için derleme yaparken, Angular CLI otomatik olarak çeşitli optimizasyonlar uygular:
* Kod sıkıştırma (minification)
* Ağaç sallama (tree shaking) – kullanılmayan kodu kaldırır
* AOT (Ahead-of-Time) derleme – performansı artırır
* Önbelleğe alma için dosya adlarına hash ekleme
Üretim modu için derleme yapmak için:

ng build --configuration production
    # veya kısaca
    ng build --prod

--prod bayrağı, Angular 10’dan itibaren --configuration production ile değiştirilmiştir, ancak geriye dönük uyumluluk için hala çalışabilir. En güncel CLI sürümlerinde --configuration production kullanılması önerilir.
* Dağıtım Stratejileri: ng build --configuration production komutuyla oluşturulan dosyalar, herhangi bir statik dosya sunucusuna dağıtılabilir. Yaygın dağıtım yöntemleri şunlardır:
* Statik Web Sunucuları: Nginx, Apache gibi geleneksel web sunucuları.
* Bulut Platformları: Firebase Hosting, Netlify, Vercel, AWS S3 + CloudFront gibi platformlar.
* Node.js Sunucuları: Express.js gibi bir Node.js sunucusuyla entegre edilebilir.
* ng deploy Komutu: Angular CLI, bazı platformlar için doğrudan dağıtım (ng deploy) komutunu da destekler. Bu, genellikle ng add ile eklenen bir dağıtım şeması aracılığıyla çalışır. Örneğin, Firebase’e dağıtım için:

ng add @angular/fire
    # Ardından:
    ng deploy

Bu araçlar ve komutlar, Angular geliştiricilerinin tüm geliştirme yaşam döngüsü boyunca verimli ve tutarlı kalmasını sağlar.

Angular CLI İleri Seviye Kullanım

Angular CLI’ın temel işlevlerinin ötesinde, daha karmaşık proje yapılandırmaları ve geliştirme senaryoları için ileri düzey özellikler de sunar.

Yapılandırma (Configuration)

Angular CLI, projenin davranışını ve derleme sürecini kontrol etmek için kapsamlı yapılandırma seçenekleri sunar.

* angular.json Dosyası: Bu dosya, Angular çalışma alanının (workspace) ve projelerinin ana yapılandırma dosyasıdır. Tüm CLI komutları, bu dosyadaki bilgilere göre çalışır. İçinde:
* Çalışma alanı seviyesinde ayarlar.
* Her bir projenin adı, kök dizini ve derleme, test, linting gibi hedefler için yapılandırmaları.
* Farklı ortamlar için yapılandırmalar (configurations).
* Stil ve betik dosyaları için global referanslar.
angular.json dosyasını düzenleyerek derleme çıktılarını, stil önişlemcilerini, test ayarlarını ve daha fazlasını özelleştirebilirsiniz. Örneğin, CSS yerine Sass kullanmak veya belirli bir derleme çıktısını değiştirmek için bu dosyayı düzenlersiniz.
* Ortam Değişkenleri (Environment Variables): src/environments/ dizini, farklı ortamlar (geliştirme, üretim, test vb.) için yapılandırma dosyalarını içerir. Bu dosyalar, API URL’leri veya anahtarlar gibi ortama özel değerleri saklamak için kullanılır.
* environment.ts (geliştirme ortamı için)
* environment.prod.ts (üretim ortamı için)
ng serve varsayılan olarak environment.ts kullanırken, ng build --configuration production komutu environment.prod.ts dosyasını kullanır. Kendi özel ortamlarınızı da tanımlayabilirsiniz.

// src/environments/environment.ts
    export const environment = {
      production: false,
      apiUrl: 'http://localhost:3000/api'
    };

    // src/environments/environment.prod.ts
    export const environment = {
      production: true,
      apiUrl: 'https://api.yourdomain.com/api'
    };

Uygulama içinde bu değişkenlere erişmek için:

import { environment } from '../environments/environment';

    // ...
    if (environment.production) {
      console.log('Üretim modunda çalışıyor!');
    }
    console.log('API URL:', environment.apiUrl);

Kütüphaneler (Libraries)

Büyük Angular projelerinde veya birden fazla projenin aynı kod tabanını paylaşması gereken durumlarda, paylaşılan işlevselliği Angular kütüphaneleri olarak paketlemek iyi bir uygulamadır.

* ng generate library Komutu:

ng generate library my-shared-lib
    # veya
    ng g lib my-shared-lib

Bu komut, çalışma alanınızda yeni bir kütüphane projesi oluşturur. Kütüphane, kendi modülü, bileşenleri, servisleri ve testleri ile birlikte gelir. Kütüphaneler, dist/my-shared-lib dizinine derlenir ve diğer Angular projelerinde veya npm paketleri olarak kullanılabilir.
Kütüphaneler, kodun yeniden kullanılabilirliğini artırır, modülerliği teşvik eder ve büyük ekiplerde işbirliğini kolaylaştırır.

Şemalar (Schematics)

Schematics, Angular CLI’ın arkasındaki güçlü kod üretme ve dönüştürme motorudur. Uygulama iskeletleri oluşturmaktan, kod dönüştürmeye ve yeni özellikler eklemeye kadar her şeyi otomatikleştirmek için kullanılır.

* Tanım: Schematics, TypeScript’te yazılmış, dosya sistemindeki değişiklikleri tanımlayan ve uygulayan şablon tabanlı kod üreticileridir. ng generate ve ng add gibi tüm CLI komutları, Schematics kullanır.
* ng add Komutu: Bir Angular uygulamasına yeni bir yetenek (örneğin, bir UI kütüphanesi, PWA desteği, state management) eklemek için kullanılır. Bu komut, ilgili npm paketini yükler ve projenizi bu paketi kullanacak şekilde otomatik olarak yapılandırır.

ng add @angular/material
    # Angular Material kütüphanesini ekler ve projenizi yapılandırır.

    ng add @angular/pwa
    # Uygulamanıza PWA (Progressive Web App) desteği ekler.

* ng update Komutu: Angular ve bağımlılıklarını güncellemek için kullanılır. Bu komut, sadece paketleri güncellemekle kalmaz, aynı zamanda projenizin kod tabanında gerekli otomatik geçişleri (migrations) de yapar. Bu, büyük sürüm güncellemelerinde (örneğin, Angular 15’ten 16’ya geçiş) oldukça faydalıdır.

ng update
    # Angular ve bağımlılıklarını güncelleyebileceğiniz önerileri gösterir.

    ng update @angular/cli @angular/core
    # Angular CLI ve çekirdek Angular paketlerini güncelleyerek geçişleri çalıştırır.

Schematics, Angular ekosistemindeki tutarlılığı ve geliştirici deneyimini önemli ölçüde artıran güçlü bir araçtır.

Sık Karşılaşılan Sorunlar ve Çözümleri

Angular CLI ile çalışırken zaman zaman bazı sorunlarla karşılaşabilirsiniz. İşte en yaygın sorunlar ve olası çözümleri:

Kurulum Hataları

* Node.js/npm Sürüm Uyumsuzluğu: Angular’ın belirli bir sürümü, Node.js’in belirli bir sürüm aralığını gerektirebilir.
* Çözüm: ng version komutu ile Angular CLI sürümünüzü kontrol edin ve Angular dokümantasyonundan uyumlu Node.js sürümünü öğrenin. Node.js’i nvm (Node Version Manager) gibi araçlarla yöneterek farklı projeler için farklı Node.js sürümleri kullanabilirsiniz.
* Global Paket Kurulum Hataları (Yetki Sorunları): npm install -g @angular/cli komutu çalışırken yetki hataları alabilirsiniz (özellikle Linux/macOS’ta).
* Çözüm: sudo npm install -g @angular/cli komutunu kullanın (dikkatli kullanılması önerilir). Veya npm’in global paket kurulum dizinini değiştirin (daha güvenli bir yöntemdir, npm dokümantasyonunda detayları bulunur).
* ng Komutu Bulunamıyor: Angular CLI’ı kurduktan sonra ng komutu tanınmıyorsa, PATH değişkeninizde bir sorun olabilir.
* Çözüm: Node.js ve npm’in doğru bir şekilde kurulduğundan ve npm global paket dizininin sisteminizin PATH değişkenine eklendiğinden emin olun. Bilgisayarınızı yeniden başlatmak bazen bu tür sorunları çözebilir.

Bağımlılık Sorunları

* node_modules Bozulması: Bazen node_modules dizini veya package-lock.json dosyası bozulabilir, bu da derleme veya çalıştırma hatalarına yol açar.
* Çözüm: Proje dizininizde node_modules dizinini ve package-lock.json (veya yarn.lock eğer Yarn kullanıyorsanız) dosyasını silin, ardından npm install (veya yarn install) komutunu tekrar çalıştırın.
* Eksik Bağımlılıklar: Bir paket eksik olduğunda veya yanlış yüklendiğinde Module not found hataları alabilirsiniz.
* Çözüm: package.json dosyanızdaki bağımlılıkları kontrol edin ve eksik olanları npm install komutuyla manuel olarak yükleyin. Ardından npm install komutunu tekrar çalıştırın.

Derleme ve Çalıştırma Hataları

* TypeScript Hataları: TypeScript, derleme zamanında sıkı tip denetimi yapar. Hatalı kod, derleme işlemini durdurabilir.
* Çözüm: Hata mesajlarını dikkatlice okuyun. Genellikle hata, dosya adı ve satır numarası ile birlikte gelir. TypeScript yapılandırmanızı (tsconfig.json) kontrol edin ve kodunuzu düzeltin.
* Port Çakışması: ng serve komutunu çalıştırırken Port 4200 is already in use gibi bir hata alabilirsiniz.
* Çözüm: Başka bir uygulamanın 4200 portunu kullandığı anlamına gelir. ng serve --port (örneğin ng serve --port 4201) komutunu kullanarak farklı bir portta çalıştırın.
* Bellek Sorunları: Büyük projelerde veya çok sayıda bağımlılık olduğunda, derleme sırasında Node.js’in belleği yetersiz kalabilir.
* Çözüm: Node.js’e daha fazla bellek ayırmak için node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve gibi bir komut kullanabilirsiniz (8192 MB yerine ihtiyacınıza göre ayarlayın). Bu komutu package.json içindeki start betiğine ekleyebilirsiniz.

Bu sorun giderme ipuçları, Angular geliştirme sürecinde karşılaşabileceğiniz birçok yaygın sorunu çözmenize yardımcı olacaktır. Hata mesajlarını dikkatlice okumak ve Google’da arama yapmak, sorunları çözmenin en etkili yollarıdır.

Sonuç ve Sonraki Adımlar

Bu kapsamlı rehber boyunca, Angular CLI’ın Angular geliştirme sürecindeki vazgeçilmez rolünü ve sunduğu güçlü özellikleri inceledik. Angular CLI ile sıfırdan bir proje oluşturmaktan, temel bileşenleri ve servisleri yönetmeye, uygulamaları test etmeye ve üretime hazır hale getirmeye kadar her adımı öğrendik. ng new, ng serve, ng generate, ng build, ng add ve ng update gibi temel komutların nasıl kullanılacağını ve Angular’ın bileşen, modül, servis ve yönlendirme gibi temel kavramlarını anlamanın önemini vurguladık.

Angular CLI, geliştiricilere tekrarlayan görevleri otomatikleştirmek, en iyi uygulamaları takip etmek ve kod kalitesini artırmak için güçlü bir araç seti sunar. Bu araç, geliştirme sürecini hızlandırır, hata oranını düşürür ve özellikle büyük ölçekli uygulamalarda tutarlılığı ve sürdürülebilirliği sağlar.

Angular dünyasına attığınız bu ilk adımlardan sonra, öğrenmeye devam etmek ve becerilerinizi geliştirmek için birçok kaynak bulunmaktadır:

* Resmi Angular Dokümantasyonu: [angular.io](https://angular.io/) adresindeki resmi dokümantasyon, Angular’ı öğrenmek için en güvenilir ve güncel kaynaktır. Temel kavramlardan ileri seviye konulara kadar her şeyi bulabilirsiniz.
* Angular Blogları ve Toplulukları: Medium, Dev.to gibi platformlardaki Angular geliştirici bloglarını takip edin. Stack Overflow’da sorular sorun ve cevapları inceleyin. Reddit’teki /r/Angular gibi topluluklara katılın.
* Çevrimiçi Kurslar: Udemy, Coursera, Pluralsight gibi platformlarda Angular için birçok kaliteli çevrimiçi kurs bulunmaktadır. Görsel öğrenmeyi tercih ediyorsanız bu kurslar çok faydalı olabilir.