Route Parameter pada AngularJS

Halo teman teman di kesempatan kali ini saya akan menjelaskan mengenai Route Parameter di AngularJS, Route Parameter di AngularJS berfungsi bagi mengambil sebuah parameter yang berada di url, nah seandainya teman teman telah pernah membaca panduan saya sebelumnya mungkin teman teman telah tak asing yang namanya url, di meteri Fungsi Route Pada AngularJS di panduan sebelumnya saya pun telah menjelaskan mengenai parameter tersebut, Berikut pengertian mengenai Route Parameter di AngularJS, Route Parameter adalah sebuah komponen bagi mengambil sebuah parameter yang terdapat di url. Coba teman teman perhatikan di url dibawah ini,

http:// www.example.com/index.html#data5/123

Di url di atas angka 123 adalah sebuah parameter, dengan adanya parameter ini kita dapat mengambil atau menarik sebuah nilai di parameter 123 bagi kita tampilkan datanya, selaku contoh, misalkan kita mengambil sebuah data yang mempunyai id 123, karenanya data yang akan muncul ialah menurut id dari 123

Nah bagi lebih jelasnya kita akan coba masuk ke study case nya, biar teman teman lebih paham, disini saya menggunakan script yang sebelumnya di bahan Route Provider pada AngularJS part 3, dan silahkan teman teman unduh script yang sebelumnya tersebut di panduan Route Provider pada AngularJS part 3.

Bila telah kita akan menambah kan sebuah controller baru yang bernama ParamController dan silahkan teman teman simpan script dibawah ini dengan nama ParamController.js, dan kemudian simpan di folder controller yang telah teman teman unduh sebelumnya

pp.controller('ParamController',['$scope','$routeParams', function($scope,$routeParams){
$scope.title = 'Halaman Parameter';
$scope.param = $routeParams.theparam;
}]);

Nah di script diatas ada sebuah komponen baru yang kita masukan yaitu $routeParams yang berfungsi bagi mengambil nilai dari sebuah parameter yang berada di url.

Bagi konfigurasinya kita akan tambahkan route baru dan silahkan teman teman tambah kan script dibawah ini di file route.js

.when('/param/:theparam',{
templateUrl : 'pages/param.html',
controller : 'ParamController'
})

Di konfigurasi route kita dapat mendefinisikan nama sebuah parameter yang akan diambil via controller, seperti parameter theparam yang terdapat di atas.

Selanjut nya kita akan bikin tema yang akan kita tampilkan di browser, dan silahkan teman teman simpan script dibawah ini di folder pages dengan nama param.html

<h3>{{title}}</h3>
The parameter is {{param}}

Langkah yang terakhir kita akan bikin sebuah file koneksinya, dan kita akan menambah kan sebuah controller baru, silahkan teman teman tambahkan script dibawah ini di file index.html

<script  type=text/javascript src=js/controllers/ParamController.js></script>

<a href='#/param/angular'>Parameter</a>

Bila telah silahkan jalankan di browser nya karenanya hasilnya akan seperti dibawah ini,..

Download Script

Bagaimana teman teman lumayan gampang bukan, mengenai Route Parameter di AngularJS nya

Sekianlah dulu panduan saya kali ini, semoga bermanfaat.

Terimakasih.

Sumber https://kursuswebsite.org