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

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

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'de, mobil cihazlarda veya masaüstünde çalışan uygulamalar oluşturmasına olanak tanır.

Bu koleksiyonda, Angular uygulamasını optimize etmeye yönelik beş ana alana odaklanılmıştı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ı ile öğeleri önbelleğe alarak uygulamanızın zayıf ağlardaki 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 yoktur?

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 ile 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. Bu lisansın kapsamında olanlar:

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