AngularJS - Menu Navigasi

Hai sana, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menarik AngularJS dan belajar membuat menu navigasi. Sebagai guru komputer yang ramah di lingkungan Anda, saya di sini untuk menghidahkan Anda melalui perjalanan ini langkah demi langkah. Jadi, ambil minumannya yang favorit, betahlah, dan mari kita mulai petualangan coding ini bersama!

AngularJS - Nav Menu

Apa Itu Menu Navigasi?

Sebelum kita masuk ke kode, mari kitaambil waktu untuk memahami apa itu menu navigasi. Bayangkan Anda berada di sebuah perpustakaan besar dengan jutaan buku. Bagaimana Anda akan menemukan buku yang Anda inginkan? Anda mungkin mencari tanda atau direktori, kan? Well, menu navigasi di website adalah seperti direktori perpustakaan itu. Itu membantu pengguna menemukan jalannya di website Anda dengan mudah.

Mengapa Menggunakan AngularJS untuk Menu Navigasi?

Anda mungkin bertanya-tanya, "Mengapa harus menggunakan AngularJS untuk menu navigasi?" Well, teman curioso, AngularJS membuat membuat menu dinamis dan interaktif menjadi mudah. Itu seperti memiliki pisau swiss army super-powered untuk pengembangan web!

Memulai dengan Menu Navigasi AngularJS

Langkah 1: Menyiapkan Proyek Anda

Pertama-tama, mari kita siapkan proyek kita. Kita akan memasukkan AngularJS ke dalam file HTML kita. Ini caranya:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Menu Navigasi AngularJS Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Konten kita akan berada di sini -->
<script src="app.js"></script>
</body>
</html>

Dalam kode ini, kita memberitahu HTML kita bahwa kita menggunakan AngularJS dengan menambahkan ng-app="myApp" ke tag <html>. Kita juga memasukkan pustaka AngularJS dan file JavaScript kita sendiri (app.js) tempat kita akan menulis kode AngularJS.

Langkah 2: Membuat Modul dan Controller AngularJS

Sekarang, mari kita buat modul dan controller AngularJS. Dalam file app.js, tambahkan kode berikut:

var app = angular.module('myApp', []);

app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Beranda', url: '#/' },
{ name: 'Tentang', url: '#/about' },
{ name: 'Kontak', url: '#/contact' }
];
});

Di sini, kita membuat modul AngularJS yang disebut myApp dan controller yang disebut NavController. Controller ini memiliki array item menu yang kita gunakan untuk menghasilkan menu navigasi kita.

Langkah 3: Membuat HTML untuk Menu Navigasi

Sekarang, mari kita tambahkan HTML untuk menu navigasi kita. Perbarui file HTML Anda untuk mencakup ini:

<body ng-controller="NavController">
<nav>
<ul>
<li ng-repeat="item in menuItems">
<a href="{{item.url}}">{{item.name}}</a>
</li>
</ul>
</nav>

<script src="app.js"></script>
</body>

Dalam kode ini, kita menggunakan direktif ng-controller untuk memberitahu AngularJS untuk menggunakan controller NavController. Kita juga menggunakan direktif ng-repeat untuk mengulang item menu kita dan membuat item daftar untuk setiap item.

Fitur Lanjut

Menambahkan State Aktif ke Item Menu

Mari kita membuat menu kita lebih menarik dengan menambahkan state aktif ke halaman saat ini. Perbarui controller Anda di app.js:

app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Beranda', url: '#/' },
{ name: 'Tentang', url: '#/about' },
{ name: 'Kontak', url: '#/contact' }
];

$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});

Dan perbarui HTML Anda:

<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
</li>

Sekarang, item menu halaman saat ini akan memiliki kelas 'active'.

Membuat Menu Dropdown

Mari kita tingkatkan dan menambahkan menu dropdown. Perbarui controller Anda:

$scope.menuItems = [
{ name: 'Beranda', url: '#/' },
{
name: 'Layanan',
url: '#/services',
subItems: [
{ name: 'Desain Web', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Kontak', url: '#/contact' }
];

Dan perbarui HTML Anda:

<nav>
<ul>
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
<ul ng-if="item.subItems">
<li ng-repeat="subItem in item.subItems">
<a href="{{subItem.url}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</nav>

Kesimpulan

Dan begitu juga, teman-teman! Anda telah membuat menu navigasi dinamis dan interaktif menggunakan AngularJS. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba gaya dan fitur yang berbeda.

Berikut adalah tabel yang menguraikan direktif AngularJS utama yang kita gunakan:

Direktif	Tujuan
ng-app	Menentukan elemen root dari aplikasi AngularJS
ng-controller	Menentukan controller mana yang akan digunakan untuk elemen HTML
ng-repeat	Mengulang set HTML sejumlah tertentu
ng-class	Mengikat satu atau lebih kelas CSS ke elemen HTML secara dinamis
ng-if	Menentukan secara kondisional apakah elemen HTML akan ditampilkan

Terus coding, terus belajar, dan yang paling penting, terus bersenang-senang! Sampaijumpa lagi, ini adalah guru komputer yang ramah Anda yang menutup. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Dalam Baris

Tutorial Seterusnya:

AngularJS - Menu Tukar