Yerel ortam ve çalışma alanı kurulumu

Bu kılavuz, Angular CLI kullanarak Angular geliştirme ortamınızı nasıl kuracağınızı açıklar. CLI'ı yükleme, başlangıç çalışma alanı ve başlangıç uygulaması oluşturma ve kurulumunuzu doğrulamak için bu uygulamayı yerel olarak çalıştırma hakkında bilgi içerir.

Başlamadan önce

Angular CLI'ı kullanmak için aşağıdakilere aşina olmanız gerekir:

Ayrıca komut satırı arayüzü (CLI) araçlarının kullanımına aşina olmanız ve komut kabukları hakkında genel bir anlayışa sahip olmanız gerekir. TypeScript bilgisi faydalıdır, ancak zorunlu değildir.

Bağımlılıklar

Angular CLI'ı yerel sisteminize kurmak için Node.js yüklemeniz gerekir. Angular CLI, tarayıcı dışında JavaScript araçlarını yüklemek ve çalıştırmak için Node ve ilişkili paket yöneticisi npm'i kullanır.

npm CLI'ını da içerecek olan Node.js'i indirin ve yükleyin. Angular, Node.js'in aktif LTS veya bakım LTS sürümünü gerektirir. Daha fazla bilgi için Angular'ın sürüm uyumluluğu kılavuzuna bakın.

Angular CLI'ı yükleme

Angular CLI'ı yüklemek için bir terminal penceresi açın ve aşağıdaki komutu çalıştırın:

npm install -g @angular/cli

pnpm install -g @angular/cli

yarn global add @angular/cli

bun install -g @angular/cli

Powershell çalıştırma ilkesi

Windows istemci bilgisayarlarında, PowerShell betiklerinin çalıştırılması varsayılan olarak devre dışıdır, bu nedenle yukarıdaki komut bir hatayla başarısız olabilir. npm global ikili dosyaları için gerekli olan PowerShell betiklerinin çalıştırılmasına izin vermek için aşağıdaki çalıştırma ilkesini ayarlamanız gerekir:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Komutu çalıştırdıktan sonra görüntülenen mesajı dikkatlice okuyun ve talimatları izleyin. Bir çalıştırma ilkesi ayarlamanın etkilerini anladığınızdan emin olun.

Unix izinleri

Bazı Unix benzeri kurulumlarda, global betikler root kullanıcısına ait olabilir, bu nedenle yukarıdaki komut bir izin hatasıyla başarısız olabilir. Komutu root kullanıcısı olarak çalıştırmak için sudo ile çalıştırın ve istendiğinde parolanızı girin:

sudo npm install -g @angular/cli

sudo pnpm install -g @angular/cli

sudo yarn global add @angular/cli

sudo bun install -g @angular/cli

Komutları root olarak çalıştırmanın etkilerini anladığınızdan emin olun.

Çalışma alanı ve başlangıç uygulaması oluşturma

Uygulamaları bir Angular çalışma alanı bağlamında geliştirirsiniz.

Yeni bir çalışma alanı ve başlangıç uygulaması oluşturmak için ng new CLI komutunu çalıştırın ve burada gösterildiği gibi my-app adını verin, ardından dahil edilecek özellikler hakkındaki istemleri yanıtlayın:

ng new my-app

Angular CLI, gerekli Angular npm paketlerini ve diğer bağımlılıkları yükler. Bu birkaç dakika sürebilir.

CLI, çalışma alanıyla aynı adda yeni bir dizinde yeni bir çalışma alanı ve çalıştırılmaya hazır küçük bir karşılama uygulaması oluşturur. Sonraki komutların bu çalışma alanını kullanması için yeni dizine gidin.

cd my-app

Uygulamayı çalıştırma

Angular CLI, uygulamanızı yerel olarak derleyip sunmanız için bir geliştirme sunucusu içerir. Aşağıdaki komutu çalıştırın:

ng serve --open

ng serve komutu sunucuyu başlatır, dosyalarınızı izler ve bu dosyalarda değişiklik yaptığınızda uygulamayı yeniden derler ve tarayıcıyı yeniden yükler.

--open (veya sadece -o) seçeneği, oluşturulan uygulamayı görüntülemek için tarayıcınızı otomatik olarak http://localhost:4200/ adresinde açar.

Çalışma alanları ve proje dosyaları

ng new komutu bir Angular çalışma alanı klasörü oluşturur ve içinde yeni bir uygulama oluşturur. Bir çalışma alanı birden fazla uygulama ve kütüphane içerebilir. ng new komutu tarafından oluşturulan ilk uygulama, çalışma alanının kök dizinindedir. Mevcut bir çalışma alanında ek bir uygulama veya kütüphane oluşturduğunuzda, varsayılan olarak bir projects/ alt klasörüne yerleştirilir.

Yeni oluşturulan bir uygulama, bir kök bileşen ve şablon için kaynak dosyalarını içerir. Her uygulamanın bileşenlerini, verilerini ve varlıklarını içeren bir src klasörü vardır.

Oluşturulan dosyaları doğrudan düzenleyebilir veya CLI komutlarını kullanarak ekleyebilir ve değiştirebilirsiniz. Ek bileşenler, direktifler, pipe'lar, servisler ve daha fazlası için yeni dosyalar eklemek üzere ng generate komutunu kullanın. Uygulamalar ve kütüphaneler oluşturan veya bunlar üzerinde işlem yapan ng add ve ng generate gibi komutlar, bir çalışma alanı içinden çalıştırılmalıdır. Buna karşın, ng new gibi komutlar yeni bir çalışma alanı oluşturacakları için bir çalışma alanının dışından çalıştırılmalıdır.

Sonraki adımlar

• Oluşturulan çalışma alanının dosya yapısı ve yapılandırması hakkında daha fazla bilgi edinin.

• Yeni uygulamanızı ng test ile test edin.

• Bileşenler, direktifler ve pipe'lar gibi şablonları ng generate ile oluşturun.

• Yeni uygulamanızı ng deploy ile dağıtın ve gerçek kullanıcıların erişimine sunun.

• Uygulamanızın uçtan uca testlerini ng e2e ile kurun ve çalıştırın.