Angular Kurulumu Ve Rehberi
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:
e2eklasörü: Uçtan uca testler için kullanılır.node_modulesklasörü: Projenin bağımlılıklarını içerir.package.jsondosyası: Projenin bağımlılıklarını ve meta verilerini tanımlar.README.mddosyası: Proje hakkında bilgi içerir.srcklasörü: Uygulamanızın kaynak kodunu içerir.karma.conf.jsdosyası: Birim testleri için karma konfigürasyonunu tanımlar.protractor.conf.jsdosyası: Uçtan uca testler için protractor konfigürasyonunu tanımlar.tsconfig.jsondosyası: TypeScript derleyicisi için konfigürasyonu tanımlar.typings.jsondosyası: 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.
