Halo teman teman pada tutorial Route Provider pada AngularJS part 1 kali ini saya akan menjelaskan tentang Route Provider pada AngularJS, oke teman teman pada materi sebelumnya saya juga telah membahas tentang pengertian dan fungsi dari Route tersebut kalau teman teman lupa silahkan lihat pada tutorial saya sebelumnya tentang Fungsi Route pada AngularJS
Nah pada tutorial Route Provider pada AngularJS part 1 ini, kita akan mencoba membuat sebuah tampilan website menggunakan Route Provider, oke teman teman kita langsung saja masuk ke study casenya tentang Route Provider pada Angular part 1,
Untuk membuat sebuah Route pada AngularJS ada beberapa bagian sederhana yang harus kita ketahui yaitu, Header, Content, Footer. Header dan footer bersifat statis, sedangkan bagian content akan selalu bersifat dinamis.
Struktur folder yang akan kita buat nantinya yaitu seperti dibawah ini,
Berikutnya langkah pertama kita akan buat terlebih dahulu sebuah file yang bernama app.js, nah pada file app.js yang kita buat kali ini ini ada sedikit perbedaannya, dan coba teman teman perhatikan script dibawah ini,
var app=angular.module('FirstApp',['ngRoute']);
Pada file diatas kita menggunakan ngRoute, yang merupakan sebuah module untuk route yang dibuat secara terpisah dari module utama angularjs, dan untuk menggunakan route kita harus memasukannya kedalam module yang akan kita buat.
Langkah berikutnya kita akan buat 4 buah controller yang akan kita gunakan, dan silahkan teman teman simpan file nya pada folder controllers, diantaranya yaitu; HomeController.js, AboutController.js, GalleryController.js, dan ContactController.js.
Untuk yang pertama yaitu HomeController silahkan teman teman simpan script dibawah ini dengan nama HomeController.js
app.controller('HomeController',['$scope', function($scope){
$scope.header = 'Halaman Home';
$scope.article = 'Route Provider pada AngularJS';
}]);
Selanjutnya kita akan buat script untuk AboutController, dan silahkan teman teman simpan script dibawah ini dengan nama AboutController.js
app.controller('AboutController',['$scope', function($scope){
$scope.title = 'Halaman About';
$scope.message = 'Paket Kursus';
$scope.technologies = ['Web Master','Web Programming','Digital Marketing','Graphic Design','Flash Animation'];
}]);
Berikutnya kita akan buat untuk GalleryController, dan silahkan teman teman simpan script dibawah ini dengan nama GalleryController.js
app.controller('GalleryController',['$scope', function($scope){
$scope.header = 'Halaman Gallery';
}]);
Langkah selanjutnya kita akan buat ContactController, dan silahkan teman teman simpan script dibawah ini dengan nama ContactController.js
app.controller('ContactController',['$scope', function($scope){
$scope.title = 'Halaman Contact';
$scope.contacts = ['www.dumetschool.com','irwan deswitansyah'];
}]);
Nah untuk file yang lainya akan saya bahas pada Route Provider pada AngularJS part 2, oke teman teman cukup sekian tutorial saya kali ini tentang Route Provider pada AngularJS part 1, Semoga bermanfaat
Terimakasih