Panduan Awal untuk AngularJS - Views
Hai teman-teman masa depan para pemrogrammer! 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, sama seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!
apa itu Views di AngularJS?
Sebelum kita masuk ke detailnya, mari kita pahami apa itu Views di AngularJS. Bayangkan Views sebagai "wajah" aplikasi Anda - itu adalah apa yang pengguna lihat dan interaksi. Di AngularJS, Views adalah template HTML yang menampilkan data dan merespon tindakan pengguna.
Sekarang, mari kita jelajahi alat-alat yang AngularJS berikan kepada kita untuk bekerja dengan Views.
Direktif ng-view: Jendela ke Konten Dinamis
Apa itu ng-view?
Direktif ng-view adalah seperti jendela spesial dalam aplikasi AngularJS Anda. Itu adalah tempat aplikasi Anda menampilkan konten yang berbeda berdasarkan rute (atau URL) saat ini tanpa perlu reload seluruh halaman. Keren, kan?
Cara Menggunakan ng-view
Menggunakan ng-view sangat mudah, hanya perlu menambahkannya ke elemen di HTML Anda. Ini contohnya:
<div ng-view></div>Itu saja! Div ini sekarang akan bertindak sebagai wadah di mana AngularJS akan muat views berbeda berdasarkan rute saat ini.
Contoh Dunia Nyata
Ayo katakan kita sedang membuat situs web sederhana untuk sebuah toko buku. Kita mungkin akan memiliki halaman utama yang terlihat seperti ini:
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>My Awesome Bookstore</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>Welcome to My Awesome Bookstore</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 toko buku kita (seperti daftar buku, detail buku individual, dll.) akan ditampilkan.
Direktif ng-template: Blueprint untuk Views
Apa itu ng-template?
Jika ng-view adalah jendela, maka ng-template adalah seperti blueprint untuk apa yang akan masuk ke dalam jendela itu. Itu memungkinkan Anda mendefinisikan template yang dapat digunakan kembali oleh AngularJS untuk mengisi views Anda.
Cara Menggunakan ng-template
Anda menggunakan ng-template dengan memberikan ID kepadanya, yang Anda bisa gunakan untuk merujuk dalam konfigurasi routing Anda. Ini contoh sederhana:
<script type="text/ng-template" id="book-list.html">
<h2>Our Books</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>Template ini mendefinisikan daftar buku yang kita bisa tampilkan di view.
Layanan $routeProvider: Controller Lalu Lintas
Apa itu $routeProvider?
Layanan $routeProvider adalah seperti controller lalu lintas untuk aplikasi Anda. Itu menentukan view mana yang akan ditampilkan berdasarkan URL saat ini.
Cara Menggunakan $routeProvider
Anda biasanya mengkonfigurasi $routeProvider dalam fase konfigurasi aplikasi Anda. Ini contoh:
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Welcome to our bookstore!</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 mengalihkan ke '/'.
Contoh Lengkap
Ayo gabungkan semua ini dengan contoh yang lebih lengkap dari aplikasi toko buku kita:
<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>My Awesome Bookstore</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>Welcome to My Awesome Bookstore</h1>
<nav>
<a href="#!">Home</a>
<a href="#!books">Books</a>
</nav>
<div ng-view></div>
<script type="text/ng-template" id="book-list.html">
<h2>Our Books</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} by {{book.author}}</li>
</ul>
</script>
<script>
var app = angular.module('bookstoreApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Welcome to our bookstore!</h2><p>Check out our amazing collection of books.</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 antara views.
- Kita tentukan template untuk daftar buku menggunakan
ng-template. - Kita mengonfigurasi rute menggunakan
$routeProvider. - Kita membuat controller untuk menyediakan data untuk daftar buku.
Ketika Anda menjalankan aplikasi ini dan mengklik tautan "Books", Anda akan melihat daftar buku muncul di div ng-view. Magic, kan?
Kesimpulan
Dan itu saja, teman-teman! Kita telah mengambil langkah pertama ke dunia AngularJS Views. Kita telah belajar tentang ng-view, ng-template, dan $routeProvider, dan bagaimana mereka bekerja bersama untuk membuat aplikasi single-page dinamis.
Ingat, belajar mengoding adalah seperti belajar menunggang sepeda - mungkin tampak wobble pada awalnya, tapi dengan latihan, Anda akan mulai berjalan cepat dalam waktu singkat. Tetap mencoba, tetap belajar, dan terutama, bersenang-senang!
Credits: Image by storyset