Pada masa ini, semua orang pasti pernah mendengar tentang "Aplikasi Halaman Tunggal". Sebilangan besar laman web terkenal seperti Gmail menggunakan konsep Aplikasi Halaman Tunggal (SPA).
SPA adalah konsep di mana apabila pengguna meminta halaman lain, aplikasi tidak akan menavigasi ke halaman tersebut melainkan menampilkan paparan halaman baru dalam halaman yang ada itu sendiri.
Ini memberikan perasaan kepada pengguna bahawa dia tidak pernah meninggalkan halaman di tempat pertama. Perkara yang sama dapat dicapai di sudut dengan bantuan Pandangan bersama dengan Laluan.
Dalam tutorial ini, anda akan belajar-
- Apa itu Pandangan?
- Arahan ng-view di AngularJS
- ng-view Contoh
Apa itu Pandangan?
Pandangan adalah kandungan yang ditunjukkan kepada pengguna. Pada dasarnya apa yang ingin dilihat oleh pengguna, maka pandangan aplikasi tersebut akan ditunjukkan kepada pengguna.
Gabungan pandangan dan Laluan membantu seseorang membahagikan aplikasi dalam pandangan logik dan mengikat pandangan yang berbeza dengan Pengawal.
Membahagi aplikasi ke dalam pandangan yang berbeza dan menggunakan Routing untuk memuatkan bahagian aplikasi yang berbeza membantu dalam membelah aplikasi secara logik dan menjadikannya lebih terkawal.
Mari kita anggap bahawa kita mempunyai aplikasi pesanan, di mana pelanggan dapat melihat pesanan dan membuat pesanan baru.
Gambar rajah di bawah dan penjelasan berikutnya menunjukkan bagaimana menjadikan 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 sebaliknya akan membuat dua pandangan berbeda yang disebut "Lihat Pesanan" dan "Pesanan Baru" di halaman yang sama.
Kami juga akan mempunyai 2 pautan rujukan dalam aplikasi kami yang disebut #show dan #new.
- Oleh itu, ketika aplikasi masuk ke MyApp / # show, ia akan menunjukkan pandangan dari View Order, pada masa yang sama ia tidak akan meninggalkan halaman. Itu hanya akan menyegarkan bahagian halaman yang ada dengan maklumat "Lihat Pesanan". Perkara yang sama berlaku untuk paparan "Pesanan Baru".
Jadi dengan cara ini menjadi lebih mudah untuk memisahkan aplikasi ke dalam paparan yang berbeza untuk menjadikannya lebih terkawal dan mudah membuat perubahan bila diperlukan.
Dan setiap paparan akan mempunyai pengawal yang sesuai untuk mengawal logik perniagaan untuk fungsi tersebut.
Arahan ng-view di AngularJS
"NgView" adalah arahan yang melengkapkan perkhidmatan laluan $ dengan memasukkan templat yang diberikan dari laluan semasa ke dalam fail susun atur utama (index.html).
Setiap kali laluan semasa berubah, pandangan termasuk perubahan mengikut konfigurasi perkhidmatan laluan $ tanpa mengubah halaman itu sendiri.
Kami akan merangkumi laluan pada bab berikutnya, buat masa ini, kami akan memberi tumpuan untuk menambah banyak pandangan ke aplikasi kami.
Berikut adalah keseluruhan carta alir bagaimana keseluruhan proses berfungsi. Kami akan menjalani secara terperinci untuk setiap proses dalam contoh kami yang ditunjukkan di bawah.
ng-view Contoh
Mari kita lihat contoh bagaimana kita dapat melaksanakan pandangan.
Dalam contoh kami, kami akan membentangkan dua pilihan kepada pengguna,
- Salah satunya ialah Menampilkan "Acara", dan yang lainnya adalah dengan menambahkan "Acara".
- Apabila pengguna mengklik pada pautan Tambahkan Acara, mereka akan ditunjukkan paparan untuk "Tambah Acara" dan yang sama berlaku untuk "Acara Paparan."
Ikuti langkah di bawah untuk mendapatkan contoh ini.
Langkah 1) Sertakan fail laluan sudut sebagai rujukan skrip.
Fail laluan ini diperlukan untuk memanfaatkan fungsi mempunyai banyak laluan dan pandangan. Fail ini boleh dimuat turun dari laman web angularJS.
Langkah 2) Dalam langkah ini,
- Tambahkan tag href yang akan mewakili pautan ke "Menambah Acara Baru" dan "Menampilkan Acara".
- Juga, tambahkan tag div dengan arahan ng-view yang akan mewakili pandangan.
Ini akan membolehkan pandangan yang sesuai disuntikkan setiap kali pengguna mengklik pada "pautan Tambah Acara Baru" atau "pautan Acara Paparan."
Langkah 3) Dalam tag skrip anda untuk Angular JS, tambahkan kod berikut.
Jangan bimbang tentang penghalaan, buat masa ini, kita akan melihatnya pada bab seterusnya. Mari kita lihat kod paparan buat masa ini.
- Bahagian kod ini bermaksud bahawa ketika pengguna mengklik pada tag href "NewEvent" yang telah ditentukan pada tag div sebelumnya. Itu akan masuk ke laman web add_event.html, dan akan mengambil kod dari sana dan memasukkannya ke dalam paparan. Kedua untuk memproses logik perniagaan untuk paparan ini, pergi ke "AddEventController".
- Bahagian kod ini bermaksud bahawa apabila pengguna mengklik pada tag href "DisplayEvent" yang telah ditentukan pada tag div sebelumnya. Itu akan pergi ke laman web show_event.html, mengambil kod dari sana dan memasukkannya ke dalam paparan. Kedua, untuk memproses logik perniagaan untuk paparan ini, pergi ke "ShowDisplayController".
- Bahagian kod ini bermaksud bahawa paparan lalai yang ditunjukkan kepada pengguna adalah paparan DisplayEvent
Langkah 4) Seterusnya adalah dengan menambahkan pengawal untuk memproses logik perniagaan untuk fungsi "DisplayEvent" dan "Add New Event".
Kami hanya menambahkan pemboleh ubah mesej ke setiap objek skop untuk setiap pengawal. Mesej ini akan dipaparkan apabila paparan yang sesuai ditunjukkan kepada pengguna.
Event Registration Guru99 Global Event
Langkah 5) Buat halaman yang disebut add_event.html dan show_event.html. Pastikan halaman mudah seperti yang ditunjukkan di bawah.
Dalam kes kami, halaman add_event.html akan mempunyai tag tajuk bersama dengan teks "Tambahkan Acara Baru" dan memiliki ekspresi untuk menampilkan pesan "Ini adalah untuk Menambah Acara baru".
Demikian pula, halaman show_event.html juga akan memiliki tag header untuk menahan teks "Show Event" dan juga memiliki ekspresi pesan untuk menampilkan pesan "Ini untuk menampilkan Event."
Nilai pemboleh ubah mesej akan disuntik berdasarkan pengawal yang dilampirkan pada pandangan.
Untuk setiap halaman, kami akan menambahkan pemboleh ubah mesej, yang akan disuntikkan dari setiap pengawal masing-masing.
- tambah_event.html
Add New Event
{{message}}
- tunjukkan_event.html
Show Event
{{message}}
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari hasilnya, kita dapat melihat 2 perkara
- Bar alamat akan menggambarkan apa pandangan semasa yang dipaparkan. Oleh kerana pandangan lalai adalah untuk menunjukkan skrin Show Event, bar alamat menunjukkan alamat untuk "DisplayEvent".
- Bahagian ini adalah Tampilan, yang dibuat dengan cepat. Oleh kerana paparan lalai adalah Acara Acara, inilah yang akan dipaparkan kepada pengguna.
Sekarang klik pada pautan Tambah Acara Baru di halaman yang dipaparkan. Anda sekarang akan mendapat output di bawah.
Pengeluaran:
- Bar alamat sekarang akan menggambarkan bahawa paparan semasa sekarang adalah paparan "Tambah Acara baru". Perhatikan bahawa anda masih akan berada di halaman aplikasi yang sama. Anda tidak akan diarahkan ke halaman aplikasi baru.
- Bahagian ini adalah Tampilan, dan sekarang akan berubah untuk menunjukkan HTML untuk fungsi "Tambahkan acara baru". Jadi sekarang di bahagian ini tag tajuk "Tambah Acara Baru" dan teks "Ini untuk Menambah Acara baru" dipaparkan kepada pengguna.