Angular’a Giriş: Standalone Proje Oluşturma

Başlangıçta Angular’ı kullanmak göz korkutucu gibi görünse de, temel adımları takip ederek hızlıca bir projeye başlayabiliriz. Öncelikle, Angular projeleri oluşturmak ve yönetmek için Angular CLI (Command Line Interface) aracını kullanacağız. CLI, birçok işlemi hızlı ve basit komutlarla yapmamızı sağlar.

Angular CLI aracılığıyla yeni bir proje oluşturmak için aşağıdaki adımları takip edin:

1. Terminal veya komut satırını açın.
2. Projeyi oluşturmak istediğiniz dizine gidin.

ng new proje-adi

Burada proje-adi, projenizin ismi olacak. Örneğin, ng new first-project şeklinde bir proje ismi belirleyebilirsiniz.

Proje Oluştururken Yapılandırma Seçenekleri

Proje oluşturma esnasında Angular CLI bazı sorular soracaktır:

• Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy.

Bu uyarı, Angular ekibine anonim kullanım verilerini paylaşma seçeneği sunar. Bu veriler, Angular’ın iyileştirilmesine yardımcı olmak için kullanılır. İşte seçeneklerin anlamı:

1. “Yes / Evet” derseniz:
   • Projenizin kullanımına dair bazı anonim veriler Google’a gönderilir. Bu veriler, Angular komutları ve performansla ilgili bilgileri içerir, ancak kişisel bilgilerinizi veya proje kodunuzu içermez.
2. “No / Hayır” derseniz:
   • Herhangi bir veri paylaşımı yapılmaz. Yeni bir proje oluşturmadığınız veya Angular CLI ayarlarını sıfırlamadığınız sürece bu soruyla tekrar karşılaşmazsınız.

Bu ayarı daha sonra değiştirmek isterseniz, aşağıdaki Angular CLI komutlarını kullanabilirsiniz:

ng analytics off   # Veri paylaşımını kapatır
ng analytics on    # Veri paylaşımını açar

• Which stylesheet format would you like to use?

CSS, SCSS, SASS gibi stillendirme seçeneklerinden birini seçebilirsiniz. CSS sıklıkla tercih edilen bir seçenektir. Bende CSS seçip Enter’a tıklıyorum.

• Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?

Ne anlama geldiğini kısaca açıklayalım. İler ki dönemde bu konulara daha detaylı değineceğiz ve SSR temelli proje oluşturacağız. Bu seçeneğe şimdilik No diyerek ilk projemizi oluşturmaya başlıyoruz.

Bu seçenekler, Angular projelerinin performansını artırmak ve SEO dostu hale getirmek için kullanılabilir. İşte her bir seçeneğin ne anlama geldiği:

1. Server-Side Rendering (SSR)

• SSR (Sunucu Tarafı Rendering), uygulamanızın HTML içeriğinin sunucuda oluşturulup kullanıcıya gönderilmesini sağlar. Bu, özellikle SEO ve daha hızlı yüklenme süreleri açısından avantaj sağlar, çünkü tarayıcıda bekleme süresini azaltır.
• SSR, Angular Universal kullanılarak etkinleştirilir ve projenizi SEO uyumlu hale getirir.

2. Static Site Generation (SSG / Prerendering)

• SSG (Statik Site Jenerasyonu) ya da önyükleme, sayfaların önceden HTML olarak oluşturulup saklanmasını sağlar. Böylece kullanıcılar siteyi ziyaret ettiğinde sayfalar hızlıca yüklenecek şekilde hazır bulunur. Bu, içeriklerin statik olarak hazırlandığı ve sık değişmeyen sayfalarda oldukça etkilidir.

Seçim Yaparken:

• Evet derseniz, Angular projeniz hem SSR hem de SSG özellikleriyle kurulacaktır.
• Hayır derseniz, projeniz bu özellikler olmadan klasik bir SPA (Tek Sayfa Uygulaması) olarak çalışır.

Resimdeki gibi “Packages installed successfully” yazısını gördünüz ise proje başarılı bir şekilde oluşturuldu.

Bir sonraki yazımızda, Angular projesini geliştirme sunucusunda nasıl çalıştırabileceğimizi ele alacağız.