Angular, web uygulamaları geliştirmek için kullanılan popüler bir JavaScript frameworküdür. Bu blog yazısında, Angular’ı adım adım nasıl kuracağınızı ve ilk uygulamanızı nasıl oluşturacağınızı detaylı bir şekilde göstereceğim.

Gereklilikler:

• Node.js (v14 veya üzeri)
• npm (v6 veya üzeri)

Kurulum Adımları:

1. Node.js ve npm’yi Kurun:

Node.js’i resmi web sitesinden indirebilirsiniz: https://nodejs.org/en/download/. Kurulum tamamlandıktan sonra, npm’yi de kullanabileceksiniz.

2. Angular CLI’yi Kurun:

npm install -g @angular/cli

Bu komut, Angular CLI’yi global olarak kuracaktır. Angular CLI, Angular projelerini oluşturmak, geliştirmek ve test etmek için kullanılan bir araçtır.

3. Yeni bir Angular Projesi Oluşturun:

ng new my-project

Bu komut, my-project adında yeni bir Angular projesi oluşturacaktır. Proje klasörüne girmek için:

cd my-project

4. Proje Yapısını Anlayın:

Oluşturulan proje klasörü aşağıdaki dosyaları ve klasörleri içerir:

• e2e klasörü: Uçtan uca testler için kullanılır.
• node_modules klasörü: Projenin bağımlılıklarını içerir.
• package.json dosyası: Projenin bağımlılıklarını ve meta verilerini tanımlar.
• README.md dosyası: Proje hakkında bilgi içerir.
• src klasörü: Uygulamanızın kaynak kodunu içerir.
• karma.conf.js dosyası: Birim testleri için karma konfigürasyonunu tanımlar.
• protractor.conf.js dosyası: Uçtan uca testler için protractor konfigürasyonunu tanımlar.
• tsconfig.json dosyası: TypeScript derleyicisi için konfigürasyonu tanımlar.
• typings.json dosyası: Projenin TypeScript tip tanımlarını tanımlar.

5. İlk Uygulamanızı Oluşturun:

src/app klasöründeki app.component.ts dosyasını açın. Bu dosya, uygulamanızın ana bileşenini tanımlar.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  title = 'Angular Kurulumu';
}

Bu kod, “Angular Kurulumu” metnini içeren basit bir Angular bileşenidir.

src/app klasöründeki app.component.html dosyasını açın. Bu dosya, bileşenin şablonunu tanımlar.

HTML
<h1>{{title}}</h1>

Bu kod, title özelliğinin değerini bir h1 etiketinde gösterir.

6. Uygulamayı Çalıştırın:

ng serve

Bu komut, uygulamayı geliştirme sunucusunda http://localhost:4200 adresinde çalıştıracaktır. Tarayıcınızda bu adresi açarak uygulamanızı görebilirsiniz.

Hata Ayıklama İpuçları:

• Konsolu Kullanın: Hatalar ve uyarılar için tarayıcınızın konsolunu kontrol edin.
• Kaynak Kodunu İnceleyin: Hatalı kodun bulunduğu satırı ve çevresini inceleyin.
• Geliştirici Araçlarını Kullanın: Tarayıcınızın geliştirici araçlarını kullanarak DOM’u ve ağ isteklerini inceleyebilirsiniz.