Ingin membuat situs Angular Anda secepat dan dapat diakses? 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 mendukung 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 percaya diri dengannya, 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
Mulai 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 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