1. Adım: Angular CLI Nedir?
Angular CLI (Command Line Interface), Angular projelerinizi hızlı bir şekilde oluşturmanıza ve yönetmenize olanak tanır. Angular CLI, bir geliştiricinin hayatını kolaylaştıran araçlarla doludur. Proje oluşturma, bileşen ekleme, uygulama geliştirme ve daha pek çok işlemi sadece birkaç komutla yapabilirsiniz.
2. Adım: Angular 14'ü Kurma
Angular'ı kurmaya başlamadan önce, bilgisayarınızda Node.js ve npm'in (Node Package Manager) yüklü olması gerekmektedir. Hadi bunları yükleyelim!
Node.js ve npm Kurulumu
Node.js, JavaScript çalıştıran bir sunucu platformudur ve npm, Node.js ile birlikte gelir. Bunları bilgisayarınıza kurmak için [Node.js'in resmi web sitesine](https://nodejs.org/) gidin ve son sürümü indirin. Kurulum işlemi oldukça basittir; birkaç tıklama ile tamamlanır. Node.js kurulduktan sonra terminal ya da komut istemcisini açın ve şu komutla npm'in doğru şekilde kurulduğunu doğrulayın:
node -v
npm -v
Bu komutlar, Node.js ve npm sürümünü gösterecektir. Eğer her şey yolunda gitmişse, artık Angular'ı kurmaya hazırız.
Angular CLI Kurulumu
Şimdi, Angular CLI'yi global olarak kurmamız gerekiyor. Bunun için terminal ya da komut istemcisinde şu komutu yazın:
npm install -g @angular/cli
Bu komut, Angular CLI'yi global olarak bilgisayarınıza yükleyecektir. Yükleme tamamlandıktan sonra, Angular CLI'nin doğru şekilde kurulduğunu doğrulamak için şu komutu yazın:
ng version
Eğer her şey doğru şekilde kurulduysa, Angular CLI sürümünü göreceksiniz.
3. Adım: Yeni Bir Angular Projesi Oluşturma
Artık Angular CLI'yi kullanarak yeni bir proje oluşturabiliriz. Aşağıdaki komutu kullanarak yeni bir Angular projesi başlatın:
ng new proje-adi
Burada proje-adi yerine oluşturmak istediğiniz projenin ismini yazabilirsiniz. Bu komut çalıştırıldığında, Angular CLI size bir dizi soru soracaktır:
- Sass, Less veya CSS kullanmak ister misiniz?
- Angular Routing kullanmak ister misiniz?
Bu seçeneklere göre cevaplarınızı belirleyebilirsiniz. Genellikle "CSS" ve "No" gibi varsayılan seçenekleri seçmek, çoğu proje için yeterlidir.
4. Adım: Projeyi Başlatma
Angular projenizi oluşturduktan sonra, artık geliştirmeye başlayabiliriz. Projeyi başlatmak için terminal veya komut istemcisinde şu komutu yazın:
cd proje-adi
ng serve
Bu komut, projenizi başlatır ve geliştirme sunucusunu çalıştırır. Şimdi tarayıcınızda `http://localhost:4200` adresine giderek Angular uygulamanızın çalıştığını görebilirsiniz!
5. Adım: Bileşenler (Components) ile Tanışın
Angular ile çalışırken, bileşenler uygulamanızın temel yapı taşlarıdır. Her bileşen, bir HTML şablonu, CSS stilleri ve TypeScript kodu içerir. Yeni bir bileşen oluşturmak için şu komutu kullanabilirsiniz:
ng generate component bileşen-adi
Bu komut, yeni bir bileşen oluşturur ve ilgili dosyaları otomatik olarak proje klasörünüze ekler.
6. Adım: Servisler (Services) ile Uygulamanızın İşlevselliğini Artırın
Angular'da servisler, uygulamanızın veri yönetimini ve iş mantığını merkezileştirmenize yardımcı olur. Yeni bir servis oluşturmak için şu komutu yazın:
ng generate service servis-adi
Servisler, genellikle HTTP istekleri, veri paylaşımı gibi işlemleri yönetir ve bileşenlerle etkileşimde bulunur.
7. Adım: Angular ile Daha Fazla Özellik Keşfedin!
Angular, yalnızca bileşenler ve servislerle sınırlı değildir. İleri düzey özellikler arasında yönlendirme (routing), form yönetimi, modüller, RxJS ile reaktif programlama ve daha pek çok şey bulunur. Angular dokümantasyonu, bu özellikleri keşfetmek için mükemmel bir kaynaktır.
Özetle, Angular 14 ile güçlü, ölçeklenebilir ve bakımı kolay web uygulamaları geliştirebilirsiniz. Angular CLI'nin gücünden faydalanarak, projelerinizi hızlı bir şekilde kurabilir ve geliştirmeye başlayabilirsiniz. Bileşenler, servisler ve yönlendirme gibi temel Angular kavramlarını öğrenerek, uygulamanızın temel işlevselliklerini oluşturabilirsiniz.
İçerik:
Angular 14 ile web uygulamaları geliştirmek isteyenler için adım adım kurulum ve kullanım rehberi. Angular CLI kurulumundan bileşen ve servis kullanımı gibi temel konularda detaylı anlatım.
