Angular Projesi Nasıl Çalıştırılır [Adım Adım Açıklama]

AngularJS, herhangi bir tam yığın geliştirici için olmazsa olmazdır. HTML yönergelerinin kullanımını basitleştirdiği için ön uç geliştirme için çok önemlidir. Angular'ı kullandığınızda bir web uygulaması geliştirmek çok daha kolay hale gelir. Bu yazıda, Angular ile nasıl başlayabileceğinizi tartışacağız. Angular'ın nasıl kurulacağını ve bir Angular projesinin nasıl çalıştırılacağını tartışacağız.

Angular CLI: Kısa Bir Giriş

Angular projeler üzerinde çalışmak istiyorsanız, Angular CLI'ye sahip olmalısınız. Angular projeleri üzerinde çalışmak ve bunları başlatmak için Angular'ın resmi aracıdır. Angular CLI, başlatma sürecinden kaynaklanan birçok zorluğu azaltır. Angular CLI kullanıyorsanız, bir projeyi başlatmak için birden çok yapılandırma ve derleme araçları yapmanız gerekmez.

Angular CLI, yalnızca bir komutla bir proje başlatmanıza izin verir. Başka bir komutla, projeye yerel bir geliştirme sunucusu kullanarak hizmet verebilirsiniz. Angular CLI, Node.js üzerinde çalışır. Bu nedenle, sisteminizde Angular CLI'yi çalıştırmak için önce sisteminizde Node.js olmalıdır.

Node.js, sunucular ve sunucu tarafı uygulamaları geliştirmek içindir, Angular ise bir ön uç çözümdür. Node.js, yalnızca Angular CLI ile size yardımcı olur.

Açısal Nasıl Kurulur?

İlk adım

Angular'ı sisteminize kurmadan önce sisteminizde Node ve npm olması gerekir. Yüklemek için Düğüm Sürüm Yöneticisi'ni kullanabilir veya işletim sisteminizin resmi paket yöneticisini kullanabilirsiniz. Ayrıca, Node'u web sitesinden yükleme seçeneğiniz de vardır. Hızlı ve basit olduğu için web sitesinden yüklemenizi öneririz. Yalnızca node.js indirme sayfasına gitmeniz gerekir .

İkinci adım

node.js indirme sayfasına geldiğinizde, işletim sisteminize göre ihtiyacınız olan sürümü seçin ve kurulum sihirbazında belirtilen adımları izleyin. Node.js'yi sisteminize daha önce yüklediyseniz, bu adımı (ve önceki adımı) atlayabilirsiniz.

Üçüncü adım:

Cihazınızda Node'un kurulu olup olmadığını kontrol etmek için komut istemini açın ve aşağıdaki komutu çalıştırın:

$ düğümü -v

Sisteminizde yüklü olan Node sürümünü gösterir.

Üçüncü adım

Sisteminizde Node kurulu olup olmadığını kontrol ettikten sonra, komut isteminin aşağıdaki komutunu çalıştırarak Angular'ı cihazınıza kurabilirsiniz:

$ npm install @angular/cli

Yukarıdaki komutu çalıştırdıktan sonra cihazınıza Angular CLI yüklenecektir. 'Angular nasıl kurulur' bölümünü tamamladınız.

Öğrenin: Hindistan'da Açısal Geliştirici Maaşı: Yeni Başlayanlar ve Deneyimliler İçin

Açısal Proje Nasıl Çalıştırılır?

Angular'ı sistemimize kurduğumuz için şimdi yeni bir projeye başlamaya odaklanacağız.

İlk adım

Aşağıdaki komutu çalıştırarak bir çalışma alanı ve başlangıç ​​uygulaması yaratırdık:

yeni açısal kahramanlar turu

Çalışma alanımızın adı olarak açısal kahramanlar turunu ekledik. 'Yeni' komutu, başlangıç ​​uygulamasına eklemek istediğiniz özellikler hakkında size bilgi verecektir. Bu bir öğretici olduğu için varsayılanları seçeceğiz ve Return veya Enter'a basarak ilerleyeceğiz.

İkinci adım

Şimdi, Angular CLI gerekli npm paketlerini ve bağımlılıklarını kurdu. Kullanıma hazır bir 'Hoş Geldiniz uygulaması' ve yeni bir çalışma alanınız olur. Ayrıca uygulama ile aynı ada sahip bir kök klasörünüz (kahramanların açısal turu) ve bir iskelet uygulama projeniz olur.

Bu adımda uygulamaya hizmet vermemiz gerekiyor. Bunu, çalışma alanı dizinine gidip uygulamayı başlatarak yapacağız:

cd açısal kahramanlar turu

ng hizmet –açık

'Servis yap' komutu uygulamayı oluşturur, geliştirme sunucusunu başlatır, projenizin kaynak dosyalarına bakar ve siz gerekli dosyaları değiştirirken uygulamanızı yeniden oluşturur.

Üçüncü adım

Uygulamayı değiştirmek istiyorsanız, IDE veya düzenleyicinizdeki src/app klasörüne gitmeniz gerekir. Bu projenin bileşenlerini değiştirerek uygulamamızı düzenleyeceğiz. Bileşenler, Angular uygulamalarının yapı taşlarıdır. Bir Angular projesinin veri gösterme, girdiye yanıt verme vb. gibi neredeyse tüm temel işlevlerini yerine getirirler.

Bu adımda, IDE'nizi açın ve proje dizinine gidin ve projenizin bileşen dosyalarını bulun:

• app.component.ts
• app.component.html
• app.component.css

İlk dosya sınıf kodudur ve TypeScript tabanlıdır, ikinci dosya HTML'deki şablondur ve son dosya özel CSS stillerine sahiptir.

Dördüncü adım

Projemiz kuruldu ve tüm dosyalarımız hazır. Bu adımda, ona bir başlık ekleyerek kişiselleştireceğiz. Angular proje başlığınızı değiştirmek için app.component.ts dosyasına gidin ve mevcut varsayılan şablonu silin. Angular CLI, otomatik olarak bir oluşturma şablonu oluşturur. Aşağıdaki ile değiştirebilirsiniz:

<h1>{{başlığınız}}</h1>

Kıvrımlı parantezler, enterpolasyon bağlama sözdizimidir. 'Başlığınızı' istediğiniz başlıkla değiştirebilirsiniz. İstediğiniz başlığı girdikten sonra tarayıcıyı yenileyin, uygulamanız yeni başlığı alacaktır.

Beşinci Adım

Uygulamanın kişiselleştirilmesi, herhangi bir stil olmadan tamamlanmayacaktır. Bu adımda, Angular uygulamamızın stilini değiştireceğiz. Angular CLI, yeni bir proje oluşturduğunuzda uygulamanız için boş bir style.css oluşturur. İstediğiniz stilleri buraya girebilirsiniz.

IDE'nizde src/styles.css dosyasını açın ve uygulamanın stilini değiştirmeye başlayın. Uygulamanın stillerini değiştirin ve değişiklikleri kaydedin. Tarayıcıyı yenilediğinizde, uygulamanızdaki değişiklikleri göreceksiniz.

Ödeme: Angular JS'de Sayfalandırma Nasıl Uygulanır?

Açısal ve Tam Yığın Geliştirme Hakkında Daha Fazla Bilgi Edinin

Artık sisteminize Angular'ı nasıl kuracağınızı ve bir Angular projesini nasıl çalıştıracağınızı biliyorsunuz. Alıştıktan sonra, Angular ile çalışmanın düşündüğünüzden çok daha kolay olduğunu göreceksiniz. Biraz tecrübe ile Angular ile ön uç web geliştirme projeleri üzerinde çalışmaya başlayabilirsiniz.

Angular ve ön uç web geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, işte bazı ek kaynaklar:

• Ön Uç Geliştirici Özgeçmiş Kılavuzu
• Ön Uç Geliştirici Olmak İçin En İyi 10 Beceri
• Ön Uç Proje Fikirleri

Öte yandan, tam kapsamlı bir geliştirme kursu alabilir ve videolar, projeler ve testler aracılığıyla sektör uzmanlarından bilgi edinebilirsiniz.

Full-stack yazılım geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saat zorlu eğitim, 9+ proje ve ödev sunan Full-stack Yazılım Geliştirme PG Diplomasına göz atın , IIIT-B Mezunları statüsü, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.