Başlayın: Angular uygulamasını optimize etme

Angular sitenizi mümkün olduğunca hızlı ve erişilebilir hâle getirmek ister misiniz? Doğru yere geldiniz.

Angular nedir?

Angular, kullanıcı arayüzleri oluşturmaya yönelik bir çerçevedir. Bakım yapılabilir ve ölçeklenebilir bir uygulamayı hızlıca oluşturmanıza yardımcı olacak yapı taşları sağlar. Angular, geliştiricilerin web, mobil veya masaüstü üzerinde çalışan uygulamalar oluşturmalarına olanak tanır.

Bu koleksiyonda neler var?

Bu koleksiyon, bir Angular uygulamasını optimize etmekle ilgili beş ana alana odaklanmaktadır:

  • Kullanıcı dönüşümünü ve etkileşimini artırmak için uygulamanızın performansını iyileştirme
  • Angular hizmet çalışanıyla öğeleri önbelleğe alarak uygulamanızın zayıf ağlarda güvenilirliğini artırma
  • Ön oluşturma ve sunucu tarafı oluşturma özelliğini kullanarak uygulamanızı arama motorları ve sosyal medya botları için bulunabilir hale getirme
  • iOS/Android uygulamasına benzer bir kullanıcı deneyimi sunmak için uygulamanızı yüklenebilir hale getirme

Koleksiyondaki her yayında, doğrudan kendi uygulamalarınıza uygulayabileceğiniz teknikler açıklanır.

Bu koleksiyonda neler yok?

Bu koleksiyonda Angular ve TypeScript hakkında bilgi sahibi olduğunuz varsayılmaktadır. Henüz bu konularda kendinizi güvende hissetmiyorsanız angular.io adresindeki TypeScript dokümanlarına ve Angular'ı Kullanmaya Başlama kılavuzuna göz atın.

Bir proje başlatın

Angular komut satırı arayüzü (KSA), basit bir istemci tarafı Angular uygulamasını hızlı bir şekilde oluşturmanıza olanak tanır. Bu yayında, CLI'ye kısa bir giriş yapılır. Koleksiyondaki diğer yayınlarda ise sunucu tarafı oluşturma ve dağıtım desteği gibi daha gelişmiş özelliklerin nasıl ekleneceği gösterilir.

CLI'yi ayarlama

Başlamak için CLI'yi global olarak yükleyin ve aşağıdaki komutları çalıştırarak en son sürüme sahip olduğunuzu doğrulayın:

npm i -g @angular/cli
ng --version

Son komutun 8.0.3 veya daha yeni bir sürümü döndürdüğünden emin olun.

Alternatif olarak, CLI'yi global olarak yüklemek istemiyorsanız yerel olarak yükleyip npx komutuyla çalıştırabilirsiniz:

npm i @angular/cli
npx ng --version

Projeyi oluşturma

Yeni bir proje çalıştırma oluşturmak için:

ng new my-app

Bu komut, uygulamanız için ilk dosyaları ve klasör yapısını oluşturur ve ihtiyaç duyduğu düğüm modüllerini yükler.

Kurulum işlemi başarıyla tamamlandıktan sonra uygulamanızı başlatmak için:

cd my-app
ng serve

Artık http://localhost:4200 adresinden uygulamanıza erişebilirsiniz.

Sırada ne var?

Bu koleksiyonun geri kalanında, Angular uygulamanızın performansını ve SEO'sunu nasıl iyileştireceğinizi öğreneceksiniz. Kapsanan konular:

  • Angular'da rota düzeyinde kod bölme
  • Angular CLI ile Performans Bütçeleri
  • Angular'da Rota Önceden Getirme Stratejileri
  • Angular'da değişiklik algılama optimizasyonu
  • Angular CDK ile büyük listeleri sanallaştırma
  • Angular Service Worker ile önceden önbelleğe alma
  • Angular CLI ile rotaları önceden oluşturma
  • Angular Universal ile sunucu tarafında oluşturma
  • Angular CLI ile web uygulaması manifesti ekleme