Routing dengan AngularJS

AngularJS adalah framework javascript yang sedang populer saat ini. Keunggulan AngularJS ini adalah penulisan scriptnya yang ringkas dan juga dapat memanipulasi tampilan secara realtime. Salah satu fitur yang ada pada AngularJS ini adalah tentang bagaimana caranya me-routing. Sesuai dengan pembahasan artikel kita kali ini adalah bagaimana routing dengan AngularJS. Routing adalah suatu aksi yang akan kita lakukan dengan alamat browser yang kita ketik dan akan menampilkan hasilnya pada halaman website sesuai dengan routing yang kita masukan.

Bagaimana cara membuatnya ? kalian bisa ikuti langkah-langkah berikut ini. Hal pertama yang kalian harus buat adalah membuat halaman utamanya terlebih dahulu. Agar mempersingkat waktu kalian bisa ikuti contoh code berikut ini.

main.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    })
    .when("/green", {
        templateUrl : "green.html"
    })
    .when("/blue", {
        templateUrl : "blue.html"
    });
});
</script>
</body>
</html>

Setelah sudah kalian simpan file tersebut dengan nama main.html. Sekarang kita lanjut untuk membuat file lainya sesuai dengan rout yang akan kita buat. Disini kita buat 4 route. Yang pertama route main, yang mengarah pada file main.html. Yang kedua adalah route red, yang akan menampilkan halaman red.html. Yang ketiga adalah route green, akan menampilkan halaman green.html dan yang terakhir adalah route blue untuk menampilkan halaman blue.html.

Sekarang kita buat masing-masing halaman untuk red, green, dan blue. Kurang lebih semua halamanya akan seperti ini, yang perlu dirubah hanya warna dan isi teksnya saja.

red.html

<h1 style="color:red">Red</h1>

Kalian simpan sesuai dengan nama warna masing-masing. Jika sudah kalian bisa lihat hasilnya dengan membuka file main.html terlebih dahulu. Dan lihat hasilnya.

routing-dengan-angularjs-rangga11-210717

Sekarang coba untuk klik menu yang ada. Misalnya apabila kalian klik menu red, maka nanti halamanya akan berubah langsung sesuai dengan isi halaman red.html.

routing-dengan-angularjs-rangga22-210717

Dan begitu juga menu lainya. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara routing dengan AngularJS. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *