Merhaba! Web Geliştirmeye Hazır Mısınız?

Eğer web uygulamaları geliştirmeyi seviyorsanız, Angular 14 tam size göre! Angular, Google tarafından geliştirilmiş güçlü bir JavaScript framework’üdür ve web uygulamaları oluşturmak için harika bir araçtır. Bu yazımda, Angular 14’ü nasıl kuracağınızı ve kullanacağınızı adım adım açıklayacağım. Gelin, birlikte bu yolculuğa çıkalım!

Adım 1: Angular 14 Kurulumuna Başlayalım

Angular 14’ü kurmak oldukça basit, fakat öncelikle bazı ön koşulları yerine getirmelisiniz. İhtiyacınız olan tek şey, bilgisayarınızda Node.js'in yüklü olması. Node.js, JavaScript uygulamalarını çalıştırmamızı sağlayan bir platformdur.

Node.js Kurulumu
Node.js’i kurmak için, [Node.js’in resmi web sitesine](https://nodejs.org) gidin ve işletim sisteminize uygun sürümü indirin. Kurulum işlemi tamamlandığında, terminal veya komut istemcisine şu komutu yazarak kurulumun başarılı olup olmadığını kontrol edebilirsiniz:

node -v

Eğer Node.js’in versiyonunu görüyorsanız, her şey yolunda demektir! Şimdi sıra Angular CLI’yi kurmaya geldi.

Angular CLI Kurulumu
Angular ile çalışabilmek için Angular CLI (Command Line Interface) kurmamız gerekiyor. CLI, Angular projelerini hızlı bir şekilde oluşturmak ve yönetmek için kullanılan bir araçtır. Angular CLI’yi kurmak için şu komutu terminal veya komut istemcisinde çalıştırın:

npm install -g @angular/cli

Kurulum tamamlandıktan sonra, `ng` komutunu kullanarak Angular CLI’yi kontrol edebilirsiniz:

ng version

Eğer Angular’ın versiyon bilgilerini görüyorsanız, kurulum işlemi başarılı olmuştur!

Adım 2: Yeni Bir Angular Projesi Oluşturma

Artık Angular projemizi oluşturmaya hazırız. Terminal veya komut istemcisinde, yeni bir proje başlatmak için şu komutu kullanın:

ng new my-angular-app

Bu komut, Angular’ın proje iskeletini oluşturacak ve sizden bazı seçenekler isteyecek. Örneğin, Angular Router’ı kullanmak isteyip istemediğinizi soracak. Eğer SPA (Single Page Application) yapmak istiyorsanız, bu seçeneği Evet olarak işaretleyebilirsiniz.

Sonrasında, oluşturulan proje klasörüne geçmek için şu komutu kullanabilirsiniz:

cd my-angular-app

Adım 3: Angular Projesini Çalıştırma

Projemiz hazır! Şimdi çalıştırma zamanı. Angular, geliştirme sunucusu ile birlikte gelir. Projenizi çalıştırmak için şu komutu kullanabilirsiniz:

ng serve

Bu komut, Angular uygulamanızı başlatacak ve genellikle `http://localhost:4200` adresinde erişilebilir olacaktır. Tarayıcınızda bu URL'yi açarak uygulamanızı görüntüleyebilirsiniz.

Adım 4: Angular Uygulamanıza Kod Yazmaya Başlayalım

Uygulamanız çalışıyor! Şimdi projeye yeni özellikler ekleyebiliriz. Angular ile çalışırken, bileşenler (components), servisler (services) ve modüller (modules) gibi temel kavramları anlamamız önemli. İşte hızlıca bir bileşen eklemek için yapmanız gerekenler:

ng generate component my-component

Bu komut, `my-component` adında yeni bir bileşen oluşturacaktır. Bu bileşeni daha sonra `src/app` dizininde bulabilirsiniz. Bileşeni açarak HTML, CSS ve TypeScript kodlarını yazabilirsiniz.

Örneğin, aşağıdaki basit bileşen kodunu yazabilirsiniz:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  message: string = 'Merhaba, Angular 14!';
}

Bu bileşen, kullanıcıya “Merhaba, Angular 14!” mesajını gösterecek. HTML dosyasını açarak bu mesajı göstermek için şu kodu ekleyebilirsiniz:

{{ message }}

Artık uygulamanızda bir bileşen görünmelidir! Tüm bileşenleri ve servisleri kullanarak harika bir uygulama oluşturabilirsiniz.

Adım 5: Angular’ın Güçlü Özelliklerinden Yararlanın

Angular, sadece bir UI (Kullanıcı Arayüzü) framework’ü değil, aynı zamanda güçlü araçlar ve kütüphaneler sunar. Angular Router, RxJS, Angular Forms ve daha fazlası, projelerinizde size büyük kolaylık sağlar. Bu özellikleri kullanarak, dinamik ve verimli web uygulamaları geliştirebilirsiniz.

Özetle, Angular 14 ile gelişmiş web uygulamaları yapmak çok keyifli ve eğlenceli. İlk adımda kurulum işlemlerini hızlıca tamamladıktan sonra, Angular’ın sunduğu geniş özellikleri keşfederek güçlü ve dinamik projeler oluşturabilirsiniz.

Sonuç

Angular 14, modern web uygulamaları geliştirmek için harika bir araçtır. Bu yazıda, Angular kurulumunu ve temel kullanımını adım adım inceledik. Artık siz de Angular’ı kullanarak harika projeler geliştirmeye başlayabilirsiniz. Bu yolculukta en önemli şey, sürekli pratik yapmak ve yeni özellikleri keşfetmektir.

Angular 14 ile ilgili başka sorularınız varsa, yorumlar kısmında bana ulaşabilirsiniz! Keyifli kodlamalar!