Route Provider pada AngularJS part 1

Halo teman teman di panduan Route Provider di AngularJS part 1 kali ini saya akan menjelaskan mengenai Route Provider di AngularJS, oke teman teman di bahan sebelumnya saya pun telah membahas mengenai pengertian dan manfaat dari Route tersebut kalau teman teman lupa silahkan lihat di panduan saya sebelumnya mengenai Fungsi Route pada AngularJS

Nah di panduan Route Provider di AngularJS part 1 ini, kita akan mencoba merancang sebuah tampilan laman menggunakan Route Provider, oke teman teman kita seketika saja masuk ke study casenya mengenai Route Provider di Angular part 1,

Bagi merancang sebuah Route di AngularJS ada beberapa bagian sederhana yang mesti kita ketahui yaitu, Header, Content, Footer. Header dan footer bersifat statis, sedangkan bagian content akan selalu bersifat dinamis.

Struktur folder yang akan kita bikin nantinya yaitu seperti dibawah ini,

Berikutnya langkah pertama-tama kita akan bikin terlebih dahulu sebuah file yang bernama app.js, nah di file app.js yang kita bikin kali ini ini ada sedikit perbedaannya, dan coba teman teman perhatikan script dibawah ini,

var app=angular.module('FirstApp',['ngRoute']);

Di file diatas kita menggunakan ngRoute, yang adalah sebuah module bagi route yang dibangun secara terpisah dari module utama angularjs, dan bagi menggunakan route kita mesti memasukannya kedalam module yang akan kita bikin.

Langkah berikutnya kita akan bikin 4 buah controller yang akan kita gunakan, dan silahkan teman teman simpan file nya di folder controllers, diantaranya yaitu; HomeController.js, AboutController.js, GalleryController.js, dan ContactController.js.

Bagi yang pertama-tama 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 di AngularJS';
}]);

Berikutnya kita akan bikin script bagi 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 bikin bagi GalleryController, dan silahkan teman teman simpan script dibawah ini dengan nama GalleryController.js

app.controller('GalleryController',['$scope', function($scope){
$scope.header = 'Halaman Gallery';
}]);

Langkah berikutnya kita akan bikin 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.sourcecodeaplikasi.info','irwan deswitansyah'];
}]);

Nah bagi file yang lainya akan saya bahas di  Route Provider pada AngularJS part 2, oke teman teman lumayan sekianlah panduan saya kali ini mengenai Route Provider di AngularJS part 1, Semoga bermanfaat

Terimakasih

Route Provider pada AngularJS part 2

Route Provider pada AngularJS part 3

Sumber https://kursuswebsite.org