Saat ini, semua orang pasti pernah mendengar tentang "Aplikasi Halaman Tunggal". Banyak situs web terkenal seperti Gmail menggunakan konsep Aplikasi Halaman Tunggal (SPA).
SPA adalah konsep di mana ketika seorang pengguna meminta halaman yang berbeda, aplikasi tidak akan menavigasi ke halaman itu melainkan menampilkan tampilan halaman baru di dalam halaman yang sudah ada itu sendiri.
Ini memberi perasaan kepada pengguna bahwa dia tidak pernah meninggalkan halaman sejak awal. Hal yang sama dapat dicapai di Angular dengan bantuan Views dalam hubungannya dengan Routes.
Dalam tutorial ini, Anda akan belajar-
- Apa itu View?
- ng-view Directive di AngularJS
- Contoh ng-view
Apa itu View?
Tampilan adalah konten yang ditampilkan kepada pengguna. Pada dasarnya apa yang ingin dilihat pengguna, oleh karena itu tampilan aplikasi tersebut akan ditampilkan kepada pengguna.
Kombinasi tampilan dan Rute membantu seseorang membagi aplikasi dalam tampilan logis dan mengikat tampilan yang berbeda ke Pengontrol.
Membagi aplikasi ke dalam tampilan yang berbeda dan menggunakan Perutean untuk memuat bagian aplikasi yang berbeda membantu membagi aplikasi secara logis dan membuatnya lebih mudah dikelola.
Mari kita asumsikan bahwa kita memiliki aplikasi pemesanan, di mana pelanggan dapat melihat pesanan dan membuat pesanan baru.
Diagram di bawah ini dan penjelasan selanjutnya mendemonstrasikan bagaimana membuat aplikasi ini sebagai aplikasi satu halaman.
Sekarang, alih-alih memiliki dua halaman web yang berbeda, satu untuk "Lihat pesanan" dan satu lagi untuk "Pesanan Baru", di AngularJS, Anda malah akan membuat dua tampilan berbeda yang disebut "Lihat Pesanan" dan "Pesanan Baru" di halaman yang sama.
Kami juga akan memiliki 2 tautan referensi di aplikasi kami yang disebut #show dan #new.
- Jadi ketika aplikasi masuk ke MyApp / # show, itu akan menunjukkan tampilan Lihat Pesanan, pada saat yang sama tidak akan meninggalkan halaman. Ini hanya akan menyegarkan bagian dari halaman yang ada dengan informasi "Lihat Pesanan". Hal yang sama berlaku untuk tampilan "Pesanan Baru".
Jadi dengan cara ini, akan lebih mudah untuk memisahkan aplikasi menjadi tampilan yang berbeda agar lebih mudah dikelola dan mudah untuk membuat perubahan kapan pun diperlukan.
Dan setiap tampilan akan memiliki pengontrol yang sesuai untuk mengontrol logika bisnis untuk fungsionalitas itu.
ng-view Directive di AngularJS
"NgView" adalah arahan yang melengkapi layanan $ route dengan menyertakan template yang dirender dari rute saat ini ke dalam file layout utama (index.html).
Setiap kali rute saat ini berubah, tampilan yang disertakan berubah sesuai dengan konfigurasi layanan $ route tanpa mengubah halaman itu sendiri.
Kami akan membahas rute di bab selanjutnya, untuk saat ini, kami akan fokus untuk menambahkan beberapa tampilan ke aplikasi kami.
Di bawah ini adalah keseluruhan diagram alur tentang cara kerja seluruh proses. Kami akan membahas secara detail untuk setiap proses dalam contoh kami yang ditunjukkan di bawah ini.
Contoh ng-view
Mari kita lihat contoh bagaimana kita bisa mengimplementasikan views.
Dalam contoh kami, kami akan menyajikan dua opsi kepada pengguna,
- Salah satunya adalah Menampilkan "Acara", dan yang lainnya adalah menambahkan "Acara".
- Saat pengguna mengklik link Tambahkan Acara, mereka akan melihat tampilan untuk "Tambahkan Acara" dan hal yang sama berlaku untuk "Acara Tampilan".
Ikuti langkah-langkah di bawah ini untuk menerapkan contoh ini.
Langkah 1) Sertakan file rute-sudut sebagai referensi skrip.
File rute ini diperlukan untuk memanfaatkan fungsionalitas yang memiliki beberapa rute dan tampilan. File ini dapat diunduh dari situs web angularJS.
Langkah 2) Pada langkah ini,
- Tambahkan tag href yang akan mewakili tautan ke "Menambahkan Acara Baru" dan "Menampilkan Acara".
- Juga, tambahkan tag div dengan direktif ng-view yang akan mewakili tampilan.
Ini akan memungkinkan tampilan yang sesuai untuk dimasukkan setiap kali pengguna mengklik "tautan Tambahkan Acara Baru" atau "tautan Tampilkan Acara".
Langkah 3) Di tag skrip Anda untuk Angular JS, tambahkan kode berikut.
Jangan khawatir tentang peruteannya, untuk saat ini, kita akan melihat ini di bab selanjutnya. Mari kita lihat kode untuk tampilan sekarang.
- Bagian kode ini berarti bahwa ketika pengguna mengklik tag href "Event Baru" yang telah ditentukan dalam tag div sebelumnya. Ini akan masuk ke halaman web add_event.html, dan akan mengambil kode dari sana dan memasukkannya ke dalam tampilan. Kedua untuk memproses logika bisnis untuk tampilan ini, buka "AddEventController".
- Bagian kode ini berarti bahwa ketika pengguna mengklik tag href "DisplayEvent" yang telah ditentukan dalam tag div sebelumnya. Ini akan pergi ke halaman web show_event.html, mengambil kode dari sana dan memasukkannya ke dalam tampilan. Kedua, untuk memproses logika bisnis untuk tampilan ini, buka "ShowDisplayController".
- Bagian kode ini berarti bahwa tampilan default yang ditampilkan kepada pengguna adalah tampilan DisplayEvent
Langkah 4) Berikutnya adalah menambahkan pengontrol untuk memproses logika bisnis untuk fungsionalitas "DisplayEvent" dan "Add New Event".
Kami hanya menambahkan variabel pesan ke setiap objek lingkup untuk setiap pengontrol. Pesan ini akan ditampilkan ketika tampilan yang sesuai ditampilkan kepada pengguna.
Event Registration Guru99 Global Event
Langkah 5) Buat halaman bernama add_event.html dan show_event.html. Buat halaman tetap sederhana seperti yang ditunjukkan di bawah ini.
Dalam kasus kami, halaman add_event.html akan memiliki tag header bersama dengan teks "Add New Event" dan memiliki ekspresi untuk menampilkan pesan "This is to Add a new Event".
Demikian pula, halaman show_event.html juga akan memiliki tag header untuk menampung teks "Show Event" dan juga memiliki ekspresi pesan untuk menampilkan pesan "This is to display an Event."
Nilai variabel pesan akan dimasukkan berdasarkan pengontrol yang terpasang ke tampilan.
Untuk setiap halaman, kami akan menambahkan variabel pesan, yang akan dimasukkan dari masing-masing pengontrol.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari hasil keluaran, kita bisa melihat 2 hal
- Bilah alamat akan mencerminkan tampilan saat ini yang sedang ditampilkan. Jadi karena tampilan default adalah untuk menampilkan layar Show Event, address bar menunjukkan alamat untuk "DisplayEvent".
- Bagian ini adalah Tampilan, yang dibuat dengan cepat. Karena tampilan default adalah Show Event, inilah yang akan ditampilkan kepada pengguna.
Sekarang klik pada link Add New Event di halaman yang ditampilkan. Anda sekarang akan mendapatkan output di bawah ini.
Keluaran:
- Bilah alamat sekarang akan mencerminkan bahwa tampilan saat ini sekarang menjadi tampilan "Tambahkan Acara baru". Perhatikan bahwa Anda masih akan berada di halaman lamaran yang sama. Anda tidak akan diarahkan ke halaman aplikasi baru.
- Bagian ini adalah Tampilan, dan sekarang akan berubah untuk menampilkan HTML untuk fungsi "Tambahkan acara baru". Jadi sekarang di bagian ini tag header "Add New Event" dan teks "This is to Add a new Event" ditampilkan kepada pengguna.