Cara Mengatur Route Menggunakan AngularJs

Dalam angularJs disini kita bisa memanipulasi route sesuai keinginan kita. Dimana manipulasi route ini bertujuan agar alamat link atau url yang tampil saat kita buka website kita di browser akan lebih rapih dan simple. Dan route angularjs akan saya bahas pada artikel kali ini dengan judul Cara Mengatur Route Menggunakan AngularJs . Disini kita akan membuat 3 file yang mana 1 file berfungsi untuk halaman utama atau index. Dan 2 file lain untuk halaman about dan gallery.

Cara Mengatur Route Menggunakan AngularJs Langsung saja teman-teman buat terlebih dahulu halaman about dan gallerynya seperti di bawah ini. Yang isinya hanya h1 dengan keterangan nama halamannya.

File dengan nama index2.html

<h1>Ini Halaman About</h1>

File dengan nama index3.html

<h1>Ini Halaman Gallery</h1>

Jika sudah maka kita akan lanjutkan untuk membuat file utamanya dengan nama index.html seperti script berikut ini.

<!doctype html>
<html lang="en">
  <head>
    <title>Cara Mengatur Route Menggunakan AngularJs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-route.js"></script>
  </head>
  <body ng-App="paramApp">
  	<h1>Cara Mengatur Route Menggunakan AngularJs</h1>
	<div ng-view></div>

	<script>
		var modul = angular.module("paramApp", ['ngRoute']);
		modul.config(function($routeProvider){
			$routeProvider
			.when('/about',{
				templateUrl : 'index2.html'
			})
			.when('/gallery',{
				templateUrl : 'index3.html'
			})
			.otherwise({
				redirectTo : '/'
			})
		});
	</script>
  </body>
</html>

Oke yang teman-teman harus perhatikan disini ada 2 link library angular yang saya cantumkan disini.

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

Jika sudah seperti biasa untuk mengaktifkannya dengan direktif ng-App dengan parameter yang di ambil dari module angular.

<body ng-App="paramApp">

Karena disini adala tambahan module route maka kurung kotak kita isi dengan ng-Route seperti di bawah ini.

var modul = angular.module("paramApp", ['ngRoute']);

Dan selanjutnya buat tag div dengan direktif ng-view untuk dapat memanggil filenya.

<div ng-view></div>

Dan langkah terakhir barulah kita buat script config dengan ada fungsi didalamnya dan berisikan parameter yang sudah ditentukan dari angularJs untuk mengatur route. Dan didalam fungsi kita buat dengan menggunakan when untuk memanipulasi routing yang ada dua parameter. Parameter pertama berisikan nama url dan kedua berisi template url yang akan dipanggil. When ini hampir sama dengan if else jadi jika selain url itu maka akan di direct ke halaman awal atau index dengan menggunakan otherwise seperti script di bawah ini.

modul.config(function($routeProvider){
			$routeProvider
			.when('/about',{
				templateUrl : 'index2.html'
			})
			.when('/gallery',{
				templateUrl : 'index3.html'
			})
			.otherwise({
				redirectTo : '/'
			})
		});

Demikian artikel tentang Cara Mengatur Route Menggunakan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.