Pandangan AngularJS - Panduan Pemula
Hai sana, para pemrogram masa depan! Hari ini, kita akan melihat dunia menarik AngularJS Views. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah bagi Anda dalam perjalanan ini, seperti yang saya lakukan bagi ribuan murid selama tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!
Apa Itu Views di AngularJS?
Sebelum kita masuk ke detail, mari kita pahami apa itu Views di AngularJS. Anggaplah Views sebagai "wajah" aplikasi Anda - itu adalah apa yang pengguna lihat dan interaksikan. Di AngularJS, Views adalah template HTML yang menampilkan data dan merespon tindakan pengguna.
Sekarang, mari kita jelajahi alat-alat yang AngularJS memberikan untuk bekerja dengan Views.
Direktif ng-view: Jendela ke Konten Dinamis
Apa ng-view?
Direktif ng-view adalah seperti jendela khusus dalam aplikasi AngularJS Anda. Itu adalah tempat aplikasi Anda menampilkan konten yang berbeda berdasarkan rute saat ini (atau URL) tanpa perlu reload seluruh halaman. Menarik, kan?
Bagaimana Menggunakan ng-view
Menggunakan ng-view adalah sangat sederhana seperti menambahkannya ke elemen dalam HTML Anda. Ini contohnya:
<div ng-view></div>Itu saja! Elemen ini sekarang akan bertindak sebagai wadah di mana AngularJS akan muat views yang berbeda berdasarkan rute saat ini.
Contoh Dunia Nyata
mari katakan kita sedang membuat website sederhana untuk sebuah toko buku. Kita mungkin memiliki halaman utama yang tampak seperti ini:
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Toko Buku Saya yang Menakjubkan</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Selamat Datang di Toko Buku Saya yang Menakjubkan</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>Dalam contoh ini, <div ng-view></div> adalah tempat di mana halaman-halaman berbeda dari toko buku kita (seperti daftar buku, detil buku individual, dll.) akan ditampilkan.
Direktif ng-template: Blueprint untuk Views
Apa ng-template?
Jika ng-view adalah jendela, maka ng-template adalah seperti blueprint untuk apa yang masuk ke dalam jendela itu. Itu memungkinkan Anda mendefinisikan template yang dapat digunakan kembali agar AngularJS dapat mengisi views Anda.
Bagaimana Menggunakan ng-template
Anda menggunakan ng-template dengan memberikan ID kepadanya, yang Anda kemudian dapat merujuk dalam konfigurasi ruting Anda. Ini contoh sederhana:
<script type="text/ng-template" id="book-list.html">
<h2>Buku-Buku Kami</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>Template ini mendefinisikan daftar buku yang kita dapat tampilkan di view.
Layanan $routeProvider: Controller Lalu Lintas
Apa $routeProvider?
Layanan $routeProvider adalah seperti controller lalu lintas untuk aplikasi Anda. Itu menentukan view mana yang akan ditampilkan berdasarkan URL saat ini.
Bagaimana Menggunakan $routeProvider
Anda biasanya mengkonfigurasikan $routeProvider dalam fase konfigurasi aplikasi Anda. Ini contoh:
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Selamat datang di toko bukunya kami!</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});Dalam konfigurasi ini:
- Ketika URL hanya '/', itu menampilkan pesan selamat datang.
- Ketika URL adalah '/books', itu menggunakan template 'book-list.html' dan 'BookListController'.
- Untuk URL lainnya, itu dialihkan ke '/'.
Contoh Lengkap
Mari kita gabungkan semuanya dengan contoh yang lebih lengkap dari aplikasi toko buku kita:
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Toko Buku Saya yang Menakjubkan</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Selamat Datang di Toko Buku Saya yang Menakjubkan</h1>
<nav>
<a href="#!">Beranda</a>
<a href="#!books">Buku</a>
</nav>
<div ng-view></div>
<script type="text/ng-template" id="book-list.html">
<h2>Buku-Buku Kami</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} oleh {{book.author}}</li>
</ul>
</script>
<script>
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Selamat datang di toko bukunya kami!</h2><p>Lihat koleksi buku yang menakjubkan kami.</p>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('BookListController', function($scope) {
$scope.books = [
{title: 'To Kill a Mockingbird', author: 'Harper Lee'},
{title: '1984', author: 'George Orwell'},
{title: 'The Great Gatsby', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>Apa yang Terjadi Disini?
- Kita membuat struktur HTML dasar dengan tautan untuk ber navigasi antar views.
- Kita mendefinisikan template untuk daftar buku menggunakan
ng-template. - Kita mengonfigurasikan rute menggunakan
$routeProvider. - Kita membuat controller untuk menyediakan data untuk daftar buku.
Ketika Anda menjalankan aplikasi ini dan mengklik tautan "Buku", Anda akan melihat daftar buku muncul di ng-view div. Magic, kan?
Kesimpulan
Dan begitu, teman-teman! Kita telah mengambil langkah pertama ke dalam dunia AngularJS Views. Kita telah belajar tentang ng-view, ng-template, dan $routeProvider, dan bagaimana mereka bekerja bersama untuk menciptakan aplikasi single-page dinamis.
Ingat, belajar mengoding adalah seperti belajar menunggang sepeda - mungkin tampak wobble di awal, tapi dengan latihan, Anda akan berjalan cepat dalam waktu singkat. Terus eksperimen, terus belajar, dan yang paling penting, bersenang-senang!
Credits: Image by storyset