AngularJS ng-view dengan Contoh: Cara Mengimplementasikan Tampilan

Oleh: James Hartman James Hartman
Hours Updated

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 pengguna meminta halaman berbeda, aplikasi tidak akan menavigasi ke halaman tersebut melainkan menampilkan tampilan halaman baru di dalam halaman yang sudah ada itu sendiri.

Ini memberikan perasaan kepada pengguna bahwa dia tidak pernah meninggalkan halaman tersebut sejak awal. Hal yang sama dapat dicapai di Angular dengan bantuan Views bersama dengan Routes.

Dalam tutorial ini, Anda akan belajar-

Apa itu Pemandangan?

Tampilan adalah konten yang ditampilkan kepada pengguna. Pada dasarnya apa yang ingin dilihat pengguna, maka tampilan aplikasi tersebut akan ditampilkan kepada pengguna.

Kombinasi tampilan dan Rute membantu seseorang membagi aplikasi dalam tampilan logis dan mengikat tampilan berbeda ke Pengontrol.

Membagi aplikasi ke dalam tampilan berbeda dan menggunakan Perutean untuk memuat bagian aplikasi yang berbeda membantu membagi aplikasi secara logis dan membuatnya lebih mudah dikelola.

Anggaplah kita mempunyai aplikasi pemesanan, dimana pelanggan dapat melihat pesanan dan membuat pesanan baru.

Diagram di bawah dan penjelasan selanjutnya menunjukkan cara menjadikan aplikasi ini sebagai aplikasi satu halaman.

Apa itu Pemandangan

Sekarang, alih-alih memiliki dua halaman web berbeda, satu untuk “Lihat pesanan” dan satu lagi untuk “Pesanan Baru”, di AngularJS, Anda sebaiknya 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, maka akan muncul tampilan View Orders, sekaligus tidak meninggalkan halaman. Itu hanya akan menyegarkan bagian halaman yang ada dengan informasi “Lihat Pesanan”. Hal yang sama berlaku untuk tampilan “Orde Baru”.

Jadi dengan cara ini menjadi lebih mudah untuk memisahkan aplikasi ke dalam tampilan yang berbeda agar lebih mudah dikelola dan mudah untuk melakukan perubahan kapan pun diperlukan.

Dan setiap tampilan akan memiliki pengontrol yang sesuai untuk mengontrol logika bisnis untuk fungsi tersebut.

Petunjuk ng-view di AngularJS

“ngView” adalah arahan yang melengkapi layanan $route dengan menyertakan templat rute saat ini yang dirender ke dalam file tata letak utama (index.html).

Setiap kali rute saat ini berubah, tampilan menyertakan perubahan sesuai dengan konfigurasi layanan $route tanpa mengubah halaman itu sendiri.

Kami akan meliput rute di bab selanjutnya, untuk saat ini, kita akan fokus pada penambahan beberapa tampilan ke aplikasi kita.

Di bawah ini adalah diagram alur keseluruhan tentang cara kerja keseluruhan proses. Kami akan membahas secara rinci setiap proses dalam contoh yang ditunjukkan di bawah ini.

Petunjuk ng-view di AngularJS

Bagaimana Mengimplementasikan ng-view di AngularJS

Mari kita lihat contoh bagaimana kita bisa mengimplementasikan ng-view di AngularJS. Dalam contoh kami, kami akan menyajikan dua opsi kepada pengguna,

  • Salah satunya adalah Menampilkan “Event”, dan yang lainnya adalah menambahkan “Event”.
  • Saat pengguna mengklik link Tambahkan Acara, mereka akan diperlihatkan tampilan “Tambahkan Acara” dan hal yang sama berlaku untuk “Tampilkan Acara”.

Silakan 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 fungsi memiliki banyak rute dan tampilan. File ini dapat diunduh dari situs web AngularJS.

Menerapkan ng-view di AngularJS

Langkah 2) Tambahkan tag href & tag div.

Pada langkah ini,

  1. Tambahkan tag href yang akan mewakili tautan ke “Menambahkan Acara Baru” dan “Menampilkan Acara”.
  2. Juga, tambahkan tag div dengan direktif ng-view yang akan mewakili tampilan. Ini akan memungkinkan tampilan yang sesuai untuk dimasukkan setiap kali pengguna mengklik “Tambahkan tautan Acara Baru” atau “Tautan Tampilkan Acara.”

Menerapkan ng-view di AngularJS

Langkah 3) Dalam tag skrip Anda untuk Angular JS, tambahkan kode berikut.

Jangan khawatir tentang peruteannya, untuk saat ini, kita akan melihatnya di bab berikutnya. Mari kita lihat saja kode untuk tampilannya untuk saat ini.

  1. Bagian kode ini berarti ketika pengguna mengklik tag href “NewEvent” yang telah ditentukan dalam tag div sebelumnya. Ini akan menuju 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".
  2. Bagian kode ini berarti ketika pengguna mengklik tag href “DisplayEvent” yang telah ditentukan dalam tag div sebelumnya. Ini akan menuju 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".
  3. Bagian kode ini berarti bahwa tampilan default yang ditampilkan kepada pengguna adalah tampilan DisplayEvent

    Menerapkan ng-view di AngularJS

Langkah 4) Tambahkan pengontrol untuk memproses logika bisnis.

Berikutnya adalah menambahkan pengontrol untuk memproses logika bisnis untuk fungsi “DisplayEvent” dan “Add New Event”.

Kami hanya menambahkan variabel pesan ke setiap objek cakupan untuk setiap pengontrol. Pesan ini akan ditampilkan ketika tampilan yang sesuai ditampilkan kepada pengguna.

Menerapkan ng-view di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

    });
</script>
</body>
</html>

ARTIKEL TERKAIT

Langkah 5) Buat halaman bernama add_event.html dan show_event.html

Selanjutnya, Buat halaman bernama add_event.html dan show_event.html. Buat halamannya tetap sederhana, seperti yang ditunjukkan di bawah ini.

Dalam kasus kami, halaman add_event.html akan memiliki tag header bersama dengan teks “Tambahkan Acara Baru” dan memiliki ekspresi untuk menampilkan pesan “Ini untuk Menambahkan Acara baru”.

Demikian pula, halaman show_event.html juga akan memiliki tag header untuk menampung teks “Tampilkan Acara” dan juga memiliki ekspresi pesan untuk menampilkan pesan “Ini untuk menampilkan Acara.”

Nilai variabel pesan akan dimasukkan berdasarkan pengontrol yang terpasang pada tampilan.

Untuk setiap halaman, kita akan menambahkan variabel pesan, yang akan dimasukkan dari masing-masing pengontrol.

  • tambahkan_event.html

Menerapkan ng-view di AngularJS

<h2>Add New Event</h2>

{{message}}
  • tampilkan_acara.html

Menerapkan ng-view di AngularJS

<h2>Show Event</h2>
	
{{message}}

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Menerapkan ng-view di AngularJS

Dari outputnya kita dapat melihat 2 hal

  1. Bilah alamat akan mencerminkan tampilan apa yang sedang ditampilkan. Jadi karena tampilan defaultnya adalah menampilkan layar Tampilkan Acara, bilah alamat menampilkan alamat untuk "DisplayEvent".
  2. Bagian ini adalah Tampilan, yang dibuat dengan cepat. Karena tampilan defaultnya adalah Tampilkan Acara, inilah yang ditampilkan kepada pengguna.

Sekarang klik tautan Tambahkan Acara Baru di halaman yang ditampilkan. Anda sekarang akan mendapatkan output di bawah ini.

Menerapkan ng-view di AngularJS

Keluaran:

  1. Bilah alamat sekarang akan mencerminkan bahwa tampilan saat ini sekarang menjadi tampilan “Tambahkan Acara baru”. Perhatikan bahwa Anda masih berada di halaman aplikasi yang sama. Anda tidak akan diarahkan ke halaman aplikasi baru.
  2. Bagian ini adalah Tampilan, dan sekarang akan berubah menjadi menampilkan HTML untuk fungsi “Tambahkan acara baru”. Jadi sekarang di bagian ini tag header “Tambahkan Acara Baru” dan teks “Ini untuk Menambahkan Acara baru” ditampilkan kepada pengguna.