Angular sitenizi mümkün olduğunca hızlı ve erişilebilir hale getirmek ister misiniz? Doğru yere geldiniz!
Angular nedir?
Angular, kullanıcı arayüzleri oluşturmaya yönelik bir çerçevedir. Hızla sürdürülebilir ve ölçeklenebilir bir uygulama 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şturmalarını sağlar.
Bu koleksiyonda neler var?
Bu koleksiyon, bir Angular uygulamasını optimize etmeye ilişkin 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ı ile öğeleri önbelleğe alarak uygulamanızın zayıf ağlarda güvenilirliğini artırma
- Önceden oluşturma ve sunucu tarafı oluşturma özelliklerini kullanarak uygulamanızı arama motorları ve sosyal medya botları için bulunabilir hale getirme
- iOS/Android uygulamalarınınkine benzer bir kullanıcı deneyimi sunmak için uygulamanızı yüklenebilir hale getirme
- Tüm kullanıcılar için kullanılabilir ve anlaşılır hale getirmek için uygulamanızın erişilebilirliğini iyileştirme
Koleksiyondaki her gönderide, kendi uygulamalarınıza doğrudan uygulayabileceğiniz teknikler açıklanacaktır.
Bu koleksiyonda neler yok?
Bu koleksiyonda, Angular ve TypeScript'e aşina olduğunuz varsayılır. Henüz bu konuda emin değilseniz TypeScript dokümanları ve angular.io adresindeki Angular'ı Kullanmaya Başlama rehberine göz atın.
Proje başlatma
Angular komut satırı arayüzü (KSA), hızlı bir şekilde basit bir istemci tarafı Angular uygulamasını ayarlamanızı sağlar. Bu yayında KSA ile ilgili kısa bir tanıtım yer alı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österilmektedir.
KSA'yı ayarlama
Başlamak için CLI'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ümü çalıştırdığından emin olun.
KSA'yı global olarak yüklemek istemiyorsanız yerel olarak yükleyip npx komutuyla çalıştırmayı da tercih edebilirsiniz:
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 dosya 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 aşağıdaki komutu ç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. Bu kapsamdaki konular şunlardır:
- Açısal olarak 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
- Angular CDK ile büyük listeleri sanallaştırın
- Angular Hizmet Çalışanıyla Önbelleğe Alma
- Angular KSA ile rotaları önceden oluştur
- Angular Universal ile sunucu tarafı oluşturma
- Angular CLI ile web uygulaması manifest dosyası ekleme
- Codelyzer ile erişilebilirlik denetimi