AppFellas - Mobil Uygulama Geliştirme AppFellas - Mobil Uygulama Geliştirme Angular Projesi Oluşturma - AppFellas

Angular Projesi Oluşturma

Angular Projesi Oluşturma

Angular Projesi Oluşturma

17.01.2023
İçindekiler

    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:

    Angular Projesi Oluşturma

    👨‍💻 Profesyonel Yazılım Ekibi

    AppFellas ile hayalleriniz gerçeğe dönüşsün.

    Girişimlerin %99'u 1. yılı doldurmadan kapanıyor, doğru ekip başarı şansınızı %85 artırabilir!

    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.

    👨‍💻 Profesyonel Yazılım Ekibi

    AppFellas ile hayalleriniz gerçeğe dönüşsün.

    Girişimlerin %99'u 1. yılı doldurmadan kapanıyor, doğru ekip başarı şansınızı %85 artırabilir!