AngularJS Routing
Routing dalam AngularJS memungkinkan pengembang untuk membuat aplikasi web yang menggunakan tautan URL untuk menavigasi antara berbagai bagian atau halaman dalam aplikasi. Ini memungkinkan Anda untuk membuat aplikasi berbasis satu halaman (single-page applications/SPA) di mana konten dinamis dimuat tanpa perlu memuat ulang halaman utama.
Berikut langkah-langkah umum untuk menggunakan routing dalam AngularJS:
-
Aktifkan Modul Routing: Pastikan modul ngRoute sudah diaktifkan di aplikasi AngularJS Anda. Anda harus menyertakan modul ngRoute saat mendefinisikan modul utama aplikasi Anda.
Contoh:
var myApp = angular.module('myApp', ['ngRoute']);
-
Konfigurasi Routing: Anda perlu menentukan rute atau tautan URL yang akan diarahkan ke komponen-komponen spesifik dalam aplikasi Anda. Ini biasanya dilakukan dalam fungsi konfigurasi aplikasi.
Contoh:
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'AboutController'
})
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'ContactController'
})
.otherwise({ redirectTo: '/' });
});
Dalam contoh ini, setiap rute ditentukan bersama dengan template HTML yang akan dimuat dan kontroler yang terkait dengan rute tersebut.
-
Buat Template dan Kontroler: Buat file template HTML untuk setiap rute yang telah Anda definisikan dalam konfigurasi routing. Setiap template ini akan menampilkan konten yang sesuai dengan rute tersebut. Selain itu, Anda juga perlu membuat kontroler-kontroler yang terkait dengan masing-masing template.
-
Gunakan Directive ngView: Tempatkan directive ng-view dalam file HTML utama aplikasi Anda di tempat di mana konten dari rute-rute yang telah Anda definisikan akan dimuat.
Contoh:
htmlCopy code
<div ng-view></div>
ng-view adalah tempat di mana konten dari rute yang sedang aktif akan dimuat.
Setelah langkah-langkah ini diimplementasikan, aplikasi Anda seharusnya dapat menggunakan URL untuk menavigasi antara berbagai bagian atau halaman yang telah Anda definisikan dalam konfigurasi routing.
