Aplikasi Pertama Dengan Angular

AngularJS menggunakan istilah "ruang lingkup" dengan cara yang mirip dengan dasar-dasar ilmu computer. Cakupan dalam ilmu komputer menjelaskan kapan dalam program tertentu mengikat adalah benar. Itu ECMA-262 spesifikasi mendefinisikan ruang lingkup sebagai: lingkungan leksikal di mana objek Fungsi dieksekusi dalam skrip web sisi klien, mirip dengan bagaimana ruang lingkup didefinisikan dalam lambda kalkulus.

Sebagai bagian dari arsitektur "MVC", ruang lingkup membentuk "Model", dan semua variabel yang ditentukan dalam cakupan dapat diakses oleh "Tampilan" serta "Kontroler". Scope berfungsi sebagai perekat dan mengikat "View" dan "Controller".

Aplikasi Pertama Angular CLI

1. Sebelum memulai membuat aplikasi pada Angular CLI, perhatikan struktur pada folder proyek seperti pada gambar berikut: Source code untuk aplikasi yang akan dibuat, di simpan pada folder src.
2. Sebagai aplikasi pertama, akan dibuat aplikasi Angular untuk menampilkan produk.
3. Aplikasi pada Angular dibuat dengan menambahkan komponen. Sehingga, Langkah-Langkah dalam membuat aplikasi Angular adalah sebagai berikut:
• Buka terminal dan arahkan ke folder proyek yang sudah dibuat.
• Buat sebuah komponen dengan instruksi ng generate component nama_component. Contoh: ng generate component product-list
• Perintah ng generate component akan membuat folder baru di dalam folder src/app. Di dalam folder product-list ini akan berisi file-file yang dibutuhkan untuk komponen yang baru.
• Dengan menggunakan editor (VS Code), buka file product-list.component.html yang ada di dalam folder src/app/produck-list dan ganti kode-nya dengan baris html berikut:
• Lalu buka file app.component.html pada folder src/app dan ganti kode-nya dengan baris html berikut:
• Setelah itu, pada terminal dan di dalam folder proyek, jalankan perintah ng serve.
• Perhatikan perubahan pada halaman aplikasi yang dilihat pada browser. Pada browser, buka halaman dengan url http://localhost:4200
• Tampilan halaman akan berubah menjadi seperti berikut:
• Selanjutnya, akan dilakukan modifikasi agar halaman product-list akan menampilkan daftar produk yang diinginkan.
• Untuk membuat daftar produk, buat file baru di dalam folder src/app dengan nama products.ts dan isi dengan kode berikut:
• Buka file product-list.component.ts yang ada di dalam folder src/app/product-list dan ganti kode-nya dengan baris html berikut:
• Buka kembali file product-list.component.html yang ada di dalam folder src/app/produck-list dan ganti kode-nya dengan baris html berikut:
• Setelah di simpan, maka pada halaman aplikasi telah mengalami perubahan tampilan. Bila tombol share pada halaman ini ditekan akan muncul dialog notifikasi tombol telah ditekan. Contoh halaman adalah seperti berikut.
• Pada tahap ini, telah dibuat aplikasi Angular pertama yang dapat menampilkan data dan diberikan aksi pada tombol.