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

Angular sitenizi olabildiğince hızlı ve erişilebilir hale getirmek mi istiyorsunuz? Doğru yere geldiniz.

Angular nedir?

Angular, kullanıcı arayüzü oluşturmaya yönelik bir çerçevedir. Sürdürülebilir ve ölçeklenebilir bir uygulamayı hızlıca kurmanıza yardımcı olacak yapı taşları sağlar. Angular, geliştiricilerin web'de, mobil cihazlarda veya masaüstünde çalışan uygulamalar oluşturması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
  • Önceden oluşturma ve sunucu tarafı oluşturma özelliğini kullanarak uygulamanızı arama motorları ve sosyal medya botları için keşfedilebilir hale getirme
  • iOS/Android uygulamalarınınkine benzer bir kullanıcı deneyimi sağlamak için uygulamanızı yüklenebilir hale getirmek
  • Tüm kullanıcılar için kullanılabilir ve anlaşılır olması amacıyla uygulamanızın erişilebilirliğini iyileştirme

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

Bu koleksiyonda neler yok?

Bu koleksiyonda, Angular ve TypeScript hakkında bilgi sahibi olduğunuz varsayılır. Bu terimler konusunda henüz kendinize güvenmiyorsanız TypeScript dokümanlarını ve angular.io sitesindeki Angular'ı Kullanmaya Başlama kılavuzunu inceleyin.

Proje başlatma

Angular komut satırı arayüzü (KSA) sayesinde, istemci taraflı basit bir Angular uygulamasını hızlıca kurabilirsiniz. Bu yayında CLI hakkında kısa bir giriş yapılıyor. 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österilmektedir.

KSA'yı ayarlama

Başlamak için KSA'yı genel 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ümde sonuç verdiğinden emin olun.

Alternatif olarak, KSA'yı genel olarak yüklemek istemiyorsanız yerel olarak yükleyebilir ve npx komutuyla çalıştırabilirsiniz:

npm i @angular/cli
npx ng --version

Projeyi oluşturma

Yeni bir proje çalıştırması 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 gereken düğüm modüllerini yükler.

Kurulum işlemi başarıyla tamamlandıktan sonra aşağıdakini çalıştırarak uygulamanızı başlatın:

cd my-app
ng serve

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

Sonraki adım

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

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