Angular Kurulumu Ve Rehberi

MeK 9 Nisan 2024 0 Comments

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.