Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.

Angular, tek sayfalık uygulamalar oluşturmak için sağlam bir JavaScript çerçevesidir. Google, yazılımı geliştirdi ve dünya çapında katkıda bulunanlarla birlikte sürdürüyor.

React gibi, web, mobil ve masaüstü sistemleri de dahil olmak üzere çeşitli ön uç uygulamaları oluşturmak için Angular'ı kullanabilirsiniz. Bazı endüstriler, kapsamlı ve kararlı olduğu için Angular'ı tercih ediyor.

GitHub'dan bir projeyi klonlayıp yerel olarak çalıştırarak Angular hakkında daha fazla bilgi edinelim.

Klonlama için Ön Koşullar

Diğer çerçevelerden farklı olarak, bir Açısal uygulamayı klonlamak ve çalıştırmak basittir. Bir GitHub projesini klonlayacaksınız. Başlamadan önce, aşağıdaki gereksinimleri karşıladığınızdan emin olun:

  • Node.js'nin kararlı bir sürümünün kurulu olması gerekir. Değilse, öğren Ubuntu'da Nodejs nasıl kurulur veya Nodejs'i Windows'a yükleyin.
  • Malısın Git'in yüklü olması.
  • Bir GitHub hesabınız olmalıdır.
instagram viewer

1. Düğüm Paket Yöneticisini Kurun

Düğüm Paket Yöneticisi (npm), JavaScript paketleri için bir yazılım deposudur. npm, çeşitli görevleri gerçekleştiren bir CLI'ye (Komut Satırı Arayüzü) sahiptir. Yazılımı indirmek, yüklemek ve dağıtmak için CLI'yi kullanabilirsiniz.

Node.js'yi yüklediğinizde, bir npm paketi ile birlikte gelir. Node.js ve npm paket sürümlerinizi kontrol etmek için terminalde aşağıdakini çalıştırın:

Yüklü Node.js sürümünü kontrol etmek için sürümü aşağıdaki komutla yazdırın:

düğüm --versiyon

Aynı seçeneği kullanarak npm sürümünü kontrol edebilirsiniz:

npm --versiyon

2. Angular CLI'yi kurun

Çeşitli geliştirme görevlerini gerçekleştirmek için Angular CLI'yi kullanabilirsiniz. Görevler arasında uygulama oluşturma, test etme ve devreye alma yer alır. Angular CLI'yi yüklemek için aşağıdaki komutu çalıştırın:

$ npm kurulum -g @açısal/cli

Açısal CLI sürümünü kontrol etmek için şu komutu çalıştırın:

$ ng versiyonu

3. GitHub'da Proje Bulun

klonlayacaksın Giphy-Çoğaltma GitHub'dan proje:

etiketli yeşil düğmeye gidin kod. Bir açılır listeyi ortaya çıkarmak için üzerine tıklayın. HTTP veya SSH bağlantısını kopyalayın. Bu ikisinden biri yapacak.

4. Projeyi Yerel Olarak Kopyala

İlk olarak, bir klasör oluşturun ve Angular-Clone olarak adlandırın.. Aşağıdaki komutla klasöre gitmeyi unutmayın:

cd Açısal-Klon

Ardından, çalıştırın git klonu projeyi klasörünüze kopyalamak için komut.

git klon https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

Ardından, Giphy-Replica klonunun içeride olup olmadığını görmek için Angular-Clone klasörünü kontrol edin. Koşmak ls klasörün içeriğini görüntülemek için:

ls

Klasöre gidin:

CD Giphy-Çoğaltma

Bu noktada proje dosyalarını dilediğiniz bir kod düzenleyicide inceleyebilir veya GitHub web arayüzü üzerinden görüntüleyebilirsiniz.

5. npm Paketlerini Kurun

Çalıştırmak için klonlanmış projeden tüm paketleri ve bağımlılıkları kurmanız gerekir. Paketleri yüklemek için şunu çalıştırın:

npm düzenlemek

Herhangi bir güvenlik açığı raporuyla karşılaşırsanız, bunları şu şekilde düzeltin:

npm denetim düzeltmesi

6. Projeyi bir Tarayıcıda Açın

Artık projeyi çalıştırmak için tüm gereksinimleriniz var, onu çalıştırabilir ve bir tarayıcıda açabilirsiniz. Projeyi inşa ederek ve sunarak başlayın:

hizmet etmek

Sonra aç http://localhost: 4200/ projeyi görüntülemek için bir tarayıcıda.

Projeyi bir tarayıcıda otomatik olarak açmak için Angular CLI'yi kullanabilirsiniz:

$ ng hizmet -o

Bu komut uygulamayı oluşturur, sunucuyu başlatır ve güncellemeler için dosyaları izler.

Tarayıcınızda Giphy-Replica web sitesini görmelisiniz:

Neden Açısal Bir Projeyi Klonlamalısınız?

Sıfırdan bir proje başlatmak yerine GitHub'dan bir projeyi kopyalayabilirsiniz. Açık kaynaklı bir projeyi klonlamak ve kendi kullanımınız için değiştirmek, bir projeyi sıfırdan başlatmaya göre zaman kazandırır. Ayrıca, ilgiliyse, herhangi bir faydalı değişikliği yukarı akış projesine geri katkıda bulunabilirsiniz.

2021'de dördüncü en popüler ön uç çerçeve olarak seçilen Angular, her sürümde şaşırtmaya devam ediyor. Tek sayfalık uygulamaların geliştirilmesini destekleyen harika paketlerle birlikte gelir. Birinci sınıf uygulamalar oluşturmak için bu mükemmel çerçeveyi kullanın.