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 bakımını yapıyor.
React gibi, web, mobil ve masaüstü sistemleri dahil olmak üzere çeşitli ön uç uygulamaları oluşturmak için Angular’ı kullanabilirsiniz. Bazı endüstriler, kapsamlı ve istikrarlı olduğu için Angular’ı tercih eder.
GitHub’dan bir projeyi klonlayıp yerel olarak çalıştırarak Angular hakkında daha fazla bilgi edelim.
Klonlama için Ön Koşullar
Diğer çerçevelerin aksine, bir Angular uygulamasını 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, Nodejs’i Ubuntu’ya nasıl kuracağınızı veya Nodejs’i Windows’a nasıl yükleyeceğinizi öğrenin .
Git’in kurulu olması gerekir .
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, kurmak ve dağıtmak için CLI’yi kullanabilirsiniz.
Node.js’yi kurduğunuzda, bir npm paketi ile birlikte gelir. Node.js ve npm paket sürümlerinizi kontrol etmek için terminalde aşağıdakileri çalıştırın:
Yüklü Node.js sürümünü kontrol etmek için aşağıdaki komutla sürümü yazdırın:
node –version
Aynı seçeneği kullanarak npm sürümünü kontrol edebilirsiniz:
npm –version
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 dağıtma yer alır. Angular CLI’yi kurmak için aşağıdaki komutu çalıştırın:
$ npm install -g @angular/cli
Angular CLI sürümünü kontrol etmek için şu komutu çalıştırın:
$ ng version
3. GitHub’da Bir Proje Bulun
Giphy-Replica projesini GitHub’dan klonlayacaksınız :
Github’da klonlanacak bir depo örneği
Kod etiketli yeşil düğmeye gidin . 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 işini görecektir.
4. Projeyi Yerel Olarak Klonlayın
İlk önce bir klasör oluşturun ve onu Angular-Clone olarak adlandırın . Aşağıdaki komutla klasöre gitmeyi unutmayın:
cd Angular-Clone
Ardından projeyi klasörünüze kopyalamak için git klon komutunu çalıştırın.
git clone 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. Klasörün içeriğini görüntülemek için ls komutunu çalıştırın :
ls
Klasöre gidin:
cd Giphy-Replica
Bu noktada proje dosyalarını istediğ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 klonlanan projedeki tüm paketleri ve bağımlılıkları yüklemeniz gerekir. Paketleri kurmak için şunu çalıştırın:
npm install
Herhangi bir güvenlik açığı raporuyla karşılaşırsanız, bunları aşağıdakilerle düzeltin:
npm audit fix
6. Projeyi 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:
ng serve
Ardından projeyi görüntülemek için bir tarayıcıda http :// localhost : 4200 / açın.
Projeyi bir tarayıcıda otomatik olarak açmak için Angular CLI’yi kullanabilirsiniz:
$ ng serve -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:
Bir tarayıcıda görüntülenen Giphy-Replica projesi
Neden Açısal Bir Projeyi Klonlamalısınız?
Bir projeye sıfırdan başlamak yerine GitHub’dan bir projeyi klonlayabilirsiniz. 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. İlgiliyse, yukarı akış projesine herhangi bir yararlı değişiklik de 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.