Halo teman teman pada kesempatan kali ini saya akan menjelaskan tentang Route Parameter pada AngularJS, Route Parameter pada AngularJS berfungsi untuk mengambil sebuah parameter yang berada pada url, nah jika teman teman sudah pernah membaca tutorial saya sebelumnya mungkin teman teman sudah tidak asing yang namanya url, pada meteri Fungsi Route Pada AngularJS pada tutorial sebelumnya saya juga telah menjelaskan tentang parameter tersebut, Berikut pengertian tentang Route Parameter pada AngularJS, Route Parameter merupakan sebuah komponen untuk mengambil sebuah parameter yang terdapat pada url. Coba teman teman perhatikan pada url dibawah ini,
http:// www.example.com/index.html#data5/123
Pada url di atas angka 123 merupakan sebuah parameter, dengan adanya parameter ini kita dapat mengambil atau menarik sebuah nilai pada parameter 123 untuk kita tampilkan datanya, sebagai contoh, misalkan kita mengambil sebuah data yang memiliki id 123, maka data yang akan muncul adalah berdasarkan id dari 123
Nah untuk lebih jelasnya kita akan coba masuk ke study case nya, biar teman teman lebih paham, disini saya menggunakan script yang sebelumnya pada materi Route Provider pada AngularJS part 3, dan silahkan teman teman download script yang sebelumnya tersebut pada tutorial Route Provider pada AngularJS part 3.
Jika sudah 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 pada folder controller yang telah teman teman download sebelumnya
pp.controller('ParamController',['$scope','$routeParams', function($scope,$routeParams){
$scope.title = 'Halaman Parameter';
$scope.param = $routeParams.theparam;
}]);
Nah pada script diatas ada sebuah komponen baru yang kita masukan yaitu $routeParams yang berfungsi untuk mengambil nilai dari sebuah parameter yang berada pada url.
Untuk konfigurasinya kita akan tambahkan route baru dan silahkan teman teman tambah kan script dibawah ini pada file route.js
.when('/param/:theparam',{
templateUrl : 'pages/param.html',
controller : 'ParamController'
})
Pada konfigurasi route kita dapat mendefinisikan nama sebuah parameter yang akan diambil melalui controller, seperti parameter theparam yang terdapat di atas.
Selanjut nya kita akan buat template yang akan kita tampilkan pada browser, dan silahkan teman teman simpan script dibawah ini pada folder pages dengan nama param.html
<h3>{{title}}</h3>
The parameter is {{param}}
Langkah yang terakhir kita akan buat sebuah file koneksinya, dan kita akan menambah kan sebuah controller baru, silahkan teman teman tambahkan script dibawah ini pada file index.html
<script type="text/javascript" src="js/controllers/ParamController.js"></script>
<a href='#/param/angular'>Parameter</a>
Jika sudah silahkan jalankan pada browser nya maka hasilnya akan seperti dibawah ini,..
Bagaimana teman teman cukup mudah bukan, tentang Route Parameter pada AngularJS nya
Sekian dulu tutorial saya kali ini, semoga bermanfaat.
Terimakasih.