Angular: İlk Uygulamayı Oluşturma ve Çalıştırma

Angular, dinamik web uygulamaları geliştirmek için kullanılan güçlü bir framework’tür. Bu makalede, Angular ile ilk uygulamanızı nasıl oluşturacağınızı ve çalıştıracağınızı adım adım inceleyeceğiz. Angular’ın sağladığı CLI (Command Line Interface) araçlarını kullanarak, boilerplate kodunu otomatik olarak oluşturmak, projeye başlamak için en etkili yöntemdir.

1. Gerekli Kurulumlar

Angular uygulaması geliştirmeye başlamadan önce, bilgisayarınızda Node.js’in en son sürümünün yüklü olduğundan emin olmalısınız. Node.js’i nodejs.org adresinden indirebilirsiniz. LTS (Long-Term Support) sürümünü seçmek, uzun vadede daha stabil bir deneyim sunar.

Kurulumdan sonra, terminal veya komut istemcisinde aşağıdaki komutları kullanarak Node.js ve npm (Node Package Manager) sürümünüzü kontrol edin:

node -v  
npm -v  

En az Node.js’in 20.x sürümünü kullanmalısınız. Eğer eski bir sürüm kullanıyorsanız, güncelleme yapmanız gerekecektir.

2. Angular CLI Kurulumu

Angular CLI, Angular uygulamalarını oluşturmak ve yönetmek için kullanılan bir araçtır. Terminalde aşağıdaki komutu girerek Angular CLI’yi global olarak kurabilirsiniz:

npm install -g @angular/cli  

Kurulum tamamlandıktan sonra, Angular CLI’nin doğru bir şekilde yüklendiğini kontrol etmek için şu komutu çalıştırın:

ng --version  

3. Yeni Bir Angular Projesi Oluşturma

Yeni bir Angular projesi oluşturmak için, terminalde istediğiniz dizine gidin ve aşağıdaki komutla yeni bir proje oluşturun:

ng new my-angular-app  

Bu komut, size bazı sorular soracaktır:

• Daha sıkı tip kontrolü ve …… uygulamak ister misiniz? (Evet)
• Angular yönlendirmesini eklemek ister misiniz? (Evet)
• Hangi stil dosyası formatını kullanmak istersiniz? (CSS, SCSS, vb. – CSS tercih edilebilir)

Bu adımları tamamladıktan sonra, Angular projeniz oluşturulacak ve gerekli dosyalar otomatik olarak oluşturulacaktır.

4. Uygulamayı Çalıştırma

Oluşturduğunuz projeye girmek için aşağıdaki komutu kullanın:

cd my-angular-app  

Uygulamayı çalıştırmak için şu komutu girin:

ng serve  

Bu komut, uygulamanızın yerel sunucuda çalışmasını sağlar ve tarayıcınızda http://localhost:4200 adresine giderek uygulamanızı görüntüleyebilirsiniz. Eğer “Compiled successfully” mesajını görüyorsanız, uygulamanız başarıyla çalışıyor demektir.

5. Proje Yapısı ve Dosyalar

Angular projesi oluşturulduğunda, belirli bir dosya yapısı ile karşılaşacaksınız. Projenizin kök dizininde bulunan bazı önemli dosyalar şunlardır:

• src/: Uygulamanızın kaynak dosyalarının bulunduğu dizin. Burada en çok zaman geçireceksiniz.
• app/: Uygulamanızın bileşenlerinin bulunduğu dizin.
• assets/: Uygulamanızın ihtiyaç duyduğu görsellerin bulunduğu dizin (Angular 17 öncesi)
• environments/: Farklı ortam değişkenlerinin tanımlandığı dosyalar.
• index.html: Angular uygulamanızın render edildiği HTML dosyası.
• main.ts: Uygulamanızın başlangıç noktası.
• public/: Uygulamanızın statik dosyalarının (örneğin, favicon, manifest dosyaları, vb.) bulunduğu dizin. (Angular 17 ve sonrası)

Proje Kök Dizin Yapısı (Angular 17 Öncesi)

Proje Kök Dizin Yapısı (Angular 17 Sonrası)

5.1 Önemli Dizinler ve Dosyalar

src/ Dizin Yapısı

• app/: Uygulamanızın bileşenlerinin, modüllerinin ve servislerinin bulunduğu dizin. Burada, uygulamanızın temel işlevselliğini oluşturan dosyalar yer alır.
  • app.component.css: Bileşenin stilini belirten CSS dosyası. Bileşenin görünümünü özelleştirmek için kullanılır.
  • app.component.html: Bileşenin HTML yapısını içeren dosya. Bileşenin kullanıcı arayüzü burada tanımlanır.
  • app.component.spec.ts: Bileşenin testlerini içeren dosya. Bileşenin işlevselliğini test etmek için gerekli test senaryoları burada tanımlanır.
  • app.component.ts: Bileşenin mantığını içeren TypeScript dosyası. Bileşenin işlevselliği burada tanımlanır.
  • app.config.ts: Uygulama yapılandırmalarını içeren TypeScript dosyası. Uygulamanızın genel ayarlarını burada tanımlayabilirsiniz.
  • app.routes.ts: Uygulamanızın yönlendirme ayarlarını içeren dosya. Farklı bileşenler arasında geçiş yapmak için gerekli yönlendirmeleri burada tanımlarsınız.
• index.html: Angular uygulamanızın ana HTML dosyasıdır. Uygulama burada render edilir ve <app-root> gibi özel etiketler kullanılarak Angular bileşenleri yerleştirilir.
• main.ts: Uygulamanızın başlangıç noktasıdır. Angular modülünü başlatmak için gerekli olan kod burada bulunur.
• styles.css: Uygulamanız için global stil tanımlamalarının yapıldığı dosya. Tüm bileşenlerde geçerli olacak stiller burada tanımlanabilir.

Kök Dizin Dosyaları

• .vscode/: Visual Studio Code ile ilgili ayarların bulunduğu dizin. Proje için özel ayarlar burada yer alır.
• public/: Uygulamanızın statik dosyalarının (örneğin, favicon, manifest dosyaları, vb.) bulunduğu dizin. Bu dizin, uygulamanızın kullanıcı arayüzü ile ilgili olan ve doğrudan sunucu tarafından sunulması gereken dosyaları barındırır.
• .editorconfig: Farklı editörlerde kod düzenleme ayarlarını belirten dosya. Kod stilinin tutarlılığını sağlamak için kullanılır.
• .gitignore: Git tarafından göz ardı edilecek dosyaların listesi. Proje ile ilgili gereksiz dosyaların sürüm kontrolüne dahil edilmemesini sağlar.
• angular.json: Projenizin yapılandırma dosyasıdır. Proje ayarları, yapılandırmalar ve Angular CLI ile ilgili bilgiler burada yer alır.
• package.json: Projenizin bağımlılıklarını, komutlarını ve proje bilgilerini içeren dosya. Projeye eklenen kütüphaneler ve bunların sürümleri burada tanımlanır.
• package-lock.json: Projenizin bağımlılıklarının tam sürüm bilgilerini içeren dosya. Projenizin bağımlılıklarının tutarlılığını sağlamak için kullanılır.
• README.md: Proje hakkında bilgi veren dosya. Projenin amacı, kurulumu ve kullanımı hakkında bilgiler içerir.
• tsconfig.app.json: Uygulama için TypeScript derleyici ayarlarını içeren dosya. Projenizin TypeScript ile ilgili yapılandırmalarını burada bulabilirsiniz.
• tsconfig.spec.json: Testler için TypeScript derleyici ayarlarını içeren dosya. Testlerinizi çalıştırmak için gerekli ayarları burada bulabilirsiniz.

5.2 Bileşen Dosyaları

Her Angular bileşeni, genellikle üç ana dosyadan oluşur:

1. app.component.ts: Bileşenin mantığını içeren TypeScript dosyası.
2. app.component.html: Bileşenin HTML yapısını içeren dosya.
3. app.component.css: Bileşenin stilini belirten CSS dosyası.

Bu dosyalar, bileşenlerinizin işlevselliğini ve görünümünü oluşturur.

Sonuç

Angular ile ilk uygulamanızı oluşturmak ve çalıştırmak oldukça basittir. Angular CLI, projeyi başlatmak için gereken tüm boilerplate kodunu otomatik olarak oluşturur, böylece geliştiriciler daha çok uygulama mantığına odaklanabilir. Bu makalede, Angular uygulamanızın temel yapı taşlarını inceledik. Gelecek adımlarda, bileşenler ve yönlendirme gibi daha karmaşık konulara dalacağız.