Route Provider pada AngularJS part 3

Halo teman teman pada tutorial Route Provider pada AngularJS part 3, kali ini kita akan membuat sebuah file index dan cssnya yang nantinya akan kita tampilkan pada browser, nah pada materi sebelumnya pada Route Provider pada AngularJS part 2, kita telah membuat file route.js nya seperti script yang dibawah ini.

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 : '/'
})
});

Pada file route.js yang kita buat di atas kita menggunakan sebuah method when yang berfungsi untuk mengatur ketika route yang terdapat pada url, dan pada script diatas juga terdapat otherwise yang berfungsi untuk menangani route-route yang tidak dikenal, nah jika ada sebuah route yang tidak dikenal maka akan dialihkan ke root url.

Oke teman teman kita langsung saja membuat sebuah file index, dan silahkan teman teman simpan script dengan nama index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Penggunaan Factory pada Angular JS part 1</title>
<!--Script JavaScript-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script  type="text/javascript" src="js/controllers/HomeController.js"></script>
    <script  type="text/javascript" src="js/controllers/AboutController.js"></script>
    <script  type="text/javascript" src="js/controllers/ContactController.js"></script>
    <script  type="text/javascript" src="js/controllers/GaleryController.js"></script>
    <script src='https://code.angularjs.org/1.4.7/angular-route.min.js'></script>
    <script src='js/route.js'></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
 	 <body ng-app="FirstApp">
 	 	<div class="container">
	 	 	<menu>
	 	 		<a href='#/'/>Home</a>
				<a href='#/about'/>About</a>
				<a href='#/galery'/>Galery</a>
				<a href='#/contact'/>Contact</a>
	 	 	</menu>		
			<div>
				<div ng-view></div>
			</div>
	
	</body>
	<footer>
		<p>Copy Right &copy; irwan deswitansyah 2016</p>
	</footer>
	</div>
</html>

Nah pada script index.html diatas, masih sama dengan script html yang sebelumnya hanya pada index.html di atas kita ada penambahan sebuah file js yaitu angular-route.min.js, karena didalam file angular-route.min.js terdapat sebuah module ngRoute nya, berikutnya yaitu ada tambahan sebuah directive ng-view yang digunakan untuk menampilkan template yang akan ditampilkan pada browser.

Jika sudah kita akan buat sebuah file cssnya, untuk mengatur sebuah layout atau tampilannya, dan silahkan teman teman simpan script dibawah ini pada folder css dengan nama file style.css

*{margin: 0; padding: 0;}
.container {width: 500px; margin: auto; background: #038995}

menu {margin: auto; background: #68979B; height: 40px; text-align: center;}
menu a {line-height: 40px; display: block; width: 20%; float: left; text-decoration: none; color: #022223; border-right: 1px solid}
menu a:hover{background: #0E494E; color: #D9DEDF}
.galery {width: 200px; height: 100px;}
ul li {list-style: inside;}
footer {background: #006973; color: #fff; text-align: center; margin-top: 20px;}

Dan jika kita jalankan file index.html nya maka tampilan nya akan seperti dibawah ini,