Angular projenize başlamak biraz zor gelebilir, ancak doğru rehberlik ve kaynaklarla eğlenceli ve ödüllendirici bir deneyim olabilir. Bu eğitimde, yeni bir proje oluşturma, component ekleme ve bitmiş ürünü oluşturma ve dağıtma dahil olmak üzere yeni bir Angular projesi kurma adımlarını adım adım izleyeceğiz.

İlgili İçerikler:

• AngularJS Nedir?
• Angular Nedir? Angular Kullanım Alanları
• Angular vs React vs Vue
• React vs Angular

Angular Projesi Oluşturma

1. Adım: Angular CLI'yi kurun

Angular projesi oluşturmanın ilk adımı, Angular CLI'yi (Komut Satırı Arayüzü) kurmaktır. Bu araç, kolayca yeni projeler oluşturmanıza, bileşenler oluşturmanıza ve diğer genel görevleri gerçekleştirmenize olanak tanır. Angular CLI'yi kurmak için bir terminal açın ve aşağıdaki komutu çalıştırın:

npm install -g @angular/cli

2. Adım: Yeni bir proje oluşturun

Angular CLI yüklendikten sonra, onu yeni bir proje oluşturmak için kullanabilirsiniz. Bunu yapmak için terminalinizde aşağıdaki komutu çalıştırın:

ng new my-first-project

Bu komut, bir Angular proje için temel dosya yapısı ve konfigürasyonu ile "my-first-project" adlı yeni bir dizin yaratacaktır.

3. Adım: Projeyi sunun

Proje oluşturulduktan sonra, şunu çalıştırarak proje dizinine gidin:

cd my-first-project

Ardından projeye hizmet vermek için aşağıdaki komutu çalıştırın:

ng serve

Bu, geliştirme sunucusunu çalıştıracak ve varsayılan tarayıcınızı, Angular'ın varsayılan karşılama sayfasını görebileceğiniz http://localhost:4200/ olarak açacaktır.

4. Adım: Bileşenleri Ekleme

Bileşenler, Angular uygulamasının yapı taşlarıdır. Verileri görüntülemekten ve kullanıcı etkileşimlerini yönetmekten sorumludurlar. Yeni bir bileşen oluşturmak için Angular CLI'nin "generate" komutunu şu şekilde kullanabilirsiniz:

ng generate component my-component

Bu, "src/app" dizininde yeni bir bileşen için gerekli olan temel dosyaları içeren "my-component" adlı yeni bir klasör oluşturacaktır: bir TypeScript dosyası, bir şablon dosyası ve bir CSS dosyası. Kısayolu da kullanabilirsiniz

ng g c my-component

Aşağıdaki komutu kullanarak SCSS gibi farklı bir dosya uzantısına sahip bir bileşen de oluşturabilirsiniz:

ng generate component my-component --style=scss

5. Adım: Projenin tamamlanması ve Deploy Edilmesi

Angular uygulamanızı oluşturup test ettikten sonra, uygulamanızın üretime hazır bir sürümünü oluşturmak için "ng build" komutunu kullanabilirsiniz. build komutu, kodu küçültme ve görüntüleri optimize etme gibi görevleri yerine getirir.

ng build --prod

Yukarıdaki komut, uygulamayı kodu küçültme, önceden (AOT) derleme ve daha fazlası gibi optimizasyonları içeren üretim modunda oluşturacaktır.

Son olarak, dist/my-first-project içeriğini istediğiniz barındırmaya kopyalayarak uygulamayı dağıtabilirsiniz.

Bu, ilk Angular projenize başlamayla ilgili temel bir öğreticidir. Angular'da Yönlendirme, HttpClient, Formlar ve daha fazlası gibi öğrenilecek ve keşfedilecek daha birçok şey var. Daha fazla ayrıntı için Angular'ın resmi belgelerine başvurabilirsiniz.