Route Provider pada AngularJS part 2

Halo teman teman di panduan Route Provider di AngularJS part 2, kali ini kita akan membangun bikin sebuah tampilan dan Route Providernya, nah di panduan sebelumnya kita telah membangun sebuah controller, jikalau teman teman lupa silahkan lihat lagi di Route Provider pada AngularJS part 1.

Oke teman teman langkah berikutnya yang akan kita bikin bagi Route Provider yaitu halaman pages nya sebanyak 4 buah karena kita menggunakan 4 buah controller, Dari masing masing controller yang telah kita bikin di panduan sebelumnya sekarang ini kita akan membangun script html yang terletak di folder pages.

Script yang pertama-tama yang akan kita simpan didalam folder pages yaitu, home, dan silahkan teman teman simpan script dibawah ini dengan nama home.html

<div class=container>
<h3>{{header}}</h3>
<p>{{article}}</p>
</div>

Script yang kedua yaitu about, dan silahkan teman teman simpan script dibawah ini dengan nama about.html

<h3>{{title}}</h3>
{{message}}
<ul ng-repeat='t in technologies'>
<li>{{t}}</li>
<ul>

Script yang ketiga yaitu gallery, dan silahkan teman teman simpan script dibawah ini dengan nama gallery.html

<div class=container>
<h3>{{header}}</h3>
<div class=top>
<img src=https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s100-c-k-no-mo-rj-c0xffffff/photo.jpg>
<img src=http://a2.mzstatic.com/us/r30/Purple71/v4/60/8b/13/608b13b7-10e7-1a2b-532c-793ae5db1b63/icon100x100.png>
<img src=http://a3.mzstatic.com/us/r30/Purple62/v4/26/1a/04/261a04e4-421a-022e-832a-d42705ca81c5/icon100x100.png>
</div>

<div class=buttom>
<iframe class=gallery src=https://www.youtube.com/embed/YTTuxGADsmo frameborder=0 allowfullscreen></iframe>
<iframe class=gallery src=https://www.youtube.com/embed/zdFBacgqTgc frameborder=0 allowfullscreen></iframe>
</div>
</div>

Dan script yang terakhir yang akan kita masukan kedalam folder pages yaitu contact, dan silahkan teman taman simpan script dibawah ini dengan nama contact.html

<h3>{{title}}</h3>
<ul ng-repeat='e in contacts'>
<li>{{e}}</li>
<ul>

Nah jikalau telah, jikalau seluruh controller, dan tampilan telah kita bikin, ketika nya sekarang ini kita menjalankan konfigurasi bagi route nya. Karena kita sebelumnya telah kita membangun sebuah module ngRoute, karenanya bagi mengakses route kita menggunakan $routeProvider, karena komponen yang terdapat di $routeProvider inilah yang nantinya kita gunakan selaku konfigurasi.

Berikutnya kita akan bikin sebuah file baru yang bernama route.js, dan silahkan teman teman simpan file route.js tersebut di pada folder js yang telah kita bikin sebelumnya.

app.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl : 'pages/home.html',
controller : 'HomeController'
})
.when('/about',{
templateUrl : 'pages/about.html',
controller : 'AboutController'
})
.when('/gallery',{
templateUrl : 'pages/gallery.html',
controller : 'GalleryController'
})
.when('/contact',{
templateUrl : 'pages/contact.html',
controller : 'ContactController'
})
.otherwise({
redirectTo : '/'
})
});

Oke teman teman saya rasa lumayan gampang ya, nah bagi berikutnya silakan teman teman lihat di Route Provider di AngularJS part 3

Lumayan demikian dulu panduan saya kali ini mengenai Route Provider di AngularJS part 2, semoga bermanfaat.

Terimakasih

Route Provider pada AngularJS part 1

Route Provider pada AngularJS part 3

Sumber https://kursuswebsite.org