Memulai: mengoptimalkan aplikasi Angular

Ingin membuat situs Angular Anda secepat dan semudah mungkin? Anda datang ke tempat yang tepat!

Apa itu Angular?

Angular adalah sebuah framework untuk membangun antarmuka pengguna. Alat ini menyediakan elemen penyusun untuk membantu Anda menyiapkan dengan cepat aplikasi yang dapat dipelihara dan skalabel. Angular memberdayakan developer untuk membuat aplikasi yang aktif di web, seluler, atau desktop.

Apa yang ada dalam koleksi ini?

Kumpulan ini berfokus pada lima area utama untuk mengoptimalkan aplikasi Angular:

  • Meningkatkan performa aplikasi Anda untuk meningkatkan konversi dan engagement pengguna
  • Meningkatkan keandalan aplikasi Anda pada jaringan yang buruk dengan melakukan pra-cache aset menggunakan pekerja layanan Angular
  • Membuat aplikasi Anda dapat ditemukan oleh mesin telusur dan bot media sosial menggunakan pra-rendering dan rendering sisi server
  • Menjadikan aplikasi Anda dapat diinstal untuk memberikan pengalaman pengguna yang serupa dengan aplikasi iOS/Android
  • Meningkatkan aksesibilitas aplikasi Anda agar dapat digunakan dan dipahami oleh semua pengguna

Setiap postingan dalam koleksi ini akan menjelaskan teknik yang dapat langsung Anda terapkan pada aplikasi Anda sendiri.

Apa yang tidak ada dalam koleksi ini?

Koleksi ini mengasumsikan bahwa Anda sudah familier dengan Angular dan TypeScript. Jika Anda belum merasa yakin dengan keduanya, lihat dokumentasi TypeScript dan panduan Memulai Angular di angular.io.

Memulai project

Dengan antarmuka command line (CLI) Angular, Anda dapat dengan cepat menyiapkan aplikasi Angular sisi klien yang sederhana. Postingan ini berisi pengantar singkat tentang CLI, sementara postingan lain dalam koleksi ini menunjukkan cara menambahkan fitur lanjutan lainnya seperti rendering sisi server dan dukungan deployment.

Menyiapkan CLI

Untuk memulai, instal CLI secara global dan pastikan Anda memiliki versi terbaru dengan menjalankan perintah berikut:

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

Pastikan perintah terakhir menghasilkan versi 8.0.3 atau yang lebih baru.

Atau, jika tidak ingin menginstal CLI secara global, Anda dapat menginstalnya secara lokal dan menjalankannya dengan perintah npx:

npm i @angular/cli
npx ng --version

Membuat project

Untuk membuat project baru, jalankan:

ng new my-app

Perintah ini akan membuat file awal dan struktur folder untuk aplikasi Anda dan menginstal modul node yang diperlukan.

Setelah proses penyiapan berhasil diselesaikan, mulai aplikasi Anda dengan menjalankan:

cd my-app
ng serve

Sekarang, Anda dapat mengakses aplikasi di http://localhost:4200.

Apa langkah selanjutnya?

Dalam koleksi ini, Anda akan mempelajari cara meningkatkan performa, aksesibilitas, dan SEO aplikasi Angular Anda. Berikut ini adalah cakupannya:

  • Pemisahan kode Route-Level di Angular
  • Anggaran Performa dengan Angular CLI
  • Strategi Pengambilan Rute di Angular
  • Mengubah pengoptimalan deteksi di Angular
  • Memvirtualisasikan daftar besar dengan Angular CDK
  • Precaching dengan Service Worker Angular
  • Melakukan pra-rendering rute dengan Angular CLI
  • Rendering sisi server dengan Angular Universal
  • Menambahkan manifes aplikasi web dengan Angular CLI
  • Audit aksesibilitas dengan codelyzer