AngularJS - Menu Navigasi

Hai teman-teman, 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 sekitar Anda, saya disini untuk mengarahkan Anda dalam perjalanan ini langkah demi langkah. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai petualangan coding ini bersama!

AngularJS - Nav Menu

Apa Itu Menu Navigasi?

Sebelum kita masuk ke dalam kode, mari kitaambil waktu untuk memahami apa itu menu navigasi. Bayangkan Anda berada di 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 jalan di website Anda dengan mudah.

Mengapa Menggunakan AngularJS untuk Menu Navigasi?

Anda mungkin berpikir, " Mengapa harus menggunakan AngularJS untuk menu navigasi?" Well, teman curius, 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. Berikut adalah cara kita melakukannya:

<!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 mengatakan kepada HTML 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. Di file app.js, tambahkan kode berikut:

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

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

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

Langkah 3: Membuat HTML Menu Navigasi

Sekarang, mari kita tambahkan HTML untuk menu navigasi kita. Perbarui file HTML Anda untuk termasuk 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 satu.

Fitur Lanjut

Menambahkan State Aktif ke Item Menu

Marilah kita membuat menu kita sedikit 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: 'Home', url: '#/' },
{ name: 'About', url: '#/about' },
{ name: 'Contact', 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 'aktif'.

Membuat Menu Dropdown

Marilah kita tingkatkan dan tambahkan menu dropdown. Perbarui controller Anda:

$scope.menuItems = [
{ name: 'Home', url: '#/' },
{
name: 'Services',
url: '#/services',
subItems: [
{ name: 'Web Design', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Contact', 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 itu dia, teman-teman! Anda telah membuat menu navigasi dinamis dan interaktif menggunakan AngularJS. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba gaya dan fitur yang berbeda.

Berikut adalah tabel yang menggabungkan 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 harus ditampilkan

Terus coding, terus belajar, dan terutama, terus bersenang-senang! Sampai jumpa lagi, ini adalah guru komputer yang ramah Anda yang menutup. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Dalam Baris

Tutorial Selanjutnya:

AngularJS - Menu Pergantian