Route Provider pada AngularJS part 2

Halo teman teman pada tutorial Route Provider pada AngularJS part 2, kali ini kita akan mebuat buat sebuah template dan Route Providernya, nah pada tutorial sebelumnya kita telah membuat sebuah controller, jika teman teman lupa silahkan lihat lagi pada Route Provider pada AngularJS part 1.

Oke teman teman langkah berikutnya yang akan kita buat untuk Route Provider yaitu halaman pages nya sebanyak 4 buah karena kita mengunakan 4 buah controller, Dari masing masing controller yang telah kita buat pada tutorial sebelumnya sekarang kita akan membuat script html yang terletak pada folder pages.

Script yang pertama 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 galery, dan silahkan teman teman simpan script dibawah ini dengan nama galery.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="galery" src="https://www.youtube.com/embed/YTTuxGADsmo" frameborder="0" allowfullscreen></iframe>
			<iframe class="galery" 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 jika sudah, jika semua controller, dan template sudah kita buat, saat nya sekarang kita melakukan konfigurasi untuk route nya. Karena kita sebelumnya telah kita membuat sebuah module ngRoute, maka untuk mengakses route kita mengunakan $routeProvider, karena komponen yang terdapat pada $routeProvider inilah yang nantinya kita gunkan sebagai konfigurasi.

Selanjudnya kita akan buat sebuah file baru yang bernama route.js, dan silahkan teman teman simpan file route.js tersebut di dalam folder js yang telah kita buat sebelumnya.

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

Oke teman teman saya rasa cukup mudah ya, nah untuk kelanjudnya silahkaan teman teman lihat pada Route Provider pada AngularJS part 3

Cukup sekian dulu tutorial saya kalini tentang Route Provider pada AngularJS part 2, semoga bermanfaat.

Terimakasih

Route Provider pada AngularJS part 1

Route Provider pada AngularJS part 3

The post Route Provider pada AngularJS part 2 appeared first on Kursus Website Terbaik.