AngularJS : Routing dan Views
Mahir Koding – Layaknya framework-framework PHP pada umumnya, AngularJS juga memiliki fitur routings untuk mengontrol view yang akan load di browser berdasarkan url. Untuk dapat menggunakan routing di AngularJS, kita membutuhkan module ngRoute yang harus diload dalam angular module kita.
Installation – Buka homepage AngularJS lalu klik tombol download.
Lalu, tambahkan ‘ngRoute’ dalam scope pendefinisian angular modules.
var app = angular.module("myApp", ['ngRoute']);
Konsep angular route ini sama seperti ajax load yang akan mengambil isi dari templateUrl lalu di render ke dalam directive ng-view.
<body ng-app="myApps"> <div> <a href="#/">Home</a> <a href="#view">View Data</a> <a href="#add">Add Data</a> </div> <ng-view></ng-view> </body>
<script type="text/javascript">
var app = angular.module("myApps", []);
app.config(function($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
template : "<h1>Welcome</h1>"
})
.when("/view", {
templateUrl : "users/view.html"
})
.when("/add",{
templateUrl : "users/add.html"
})
.when("/edit/:userID", {
templateUrl : "users/edit.html",
controller : "userController"
})
.otherwise({
templateUrl : "404.html"
})
})
app.controller("userController", function($scope, $routeParams){
$scope.id = $routeParams.userID;
})
</script>
Jika kamu menggunakan AngularJS versi > 1.6, pastikan menambahkan baris ini :
$locationProvider.hashPrefix('');
Karena, secara default angular versi > 1.6 mempunyai default route >> (!). Untuk itu, maka kita harus menggantinya menjadi null (‘ ‘)
templateUrl digunakan untuk mengassign halaman yang ingin diload sedangkan jika ingin langsung menuliskan htmlnya, bisa menggunakan property template.
Method otherwise digunakan untuk mengkategorikan route yang tidak terdefinisikan. (like else in selection). Di contoh diatas, method otherwise akan menampilkan tag html. Namun, penggunaan method otherwise lebih sering diarahkan untuk melakukan redirect ke homepage. Berikut caranya :
.otherwise({
redirectTo : "/"
})
Jika ingin langsung menbind sebuah controller terhadap view yang akan kita load, maka tinggal tambahkan property controller di bawah template/templateUrl.
Lalu, seandainya ingin menambahkan parameter ke dalam routes yang kita buat, deklarasikan parameter tersebut dengan tanda titik dua dan kita tinggal mengaksesnya lewat $routeParams.
.when("/edit/:userID", {
templateUrl : "users/edit.html",
controller : "userController"
})
userController :
app.controller("userController", function($scope, $routeParams){
$scope.id = $routeParams.userID;
})
View edit.html :
<h1>Edit User yang akan diedit : {{ id }}</h1>
Lalu, kita juga bisa melakukan include file html lain seperti yang bisa dilakukan di php.
<div ng-include="'menu.html'"></div>
Pastikan path menu.html diberi tanda kutip agar filenya dapat di load oleh AngularJS. Mengapa? Karena directive ng-include menerima value berupa expressions. Oleh karena itu, menu.html harus kita ubah menjadi string terlebih dahulu.
View menu.html :
<a href="#/">Home</a> <a href="#view">View Data</a> <a href="#add">Add Data</a>
NB : Jika terjadi error “Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https”, pastikan dahulu web apps kita sudah berjalan di web server (localhost). Atau solusi lain adalah dengan cara force allow ketika menjalankan browser.
Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasih.
