Route Provider pada AngularJS part 3
Halo teman teman di panduan Route Provider di AngularJS part 3, kali ini kita akan membangun sebuah file index dan cssnya yang nantinya akan kita tampilkan di browser, nah di bahan sebelumnya di Route Provider pada AngularJS part 2, kita telah membangun 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 : '/'
})
});Di file route.js yang kita bikin di atas kita menggunakan sebuah method when yang berfungsi bagi mengatur ketika route yang terdapat di url, dan di script diatas pun terdapat otherwise yang berfungsi bagi menangani route-route yang tak dikenal, nah seandainya ada sebuah route yang tak dikenal karenanya akan dialihkan ke root url.
Oke teman teman kita seketika saja membangun sebuah file index, dan silahkan teman teman simpan script dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Pemakaian Factory di 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>
<fitur>
<a href='#/'/>Home</a>
<a href='#/about'/>About</a>
<a href='#/galery'/>Galery</a>
<a href='#/contact'/>Contact</a>
</fitur>
<div>
<div ng-view></div>
</div>
</body>
<footer>
<p>Copy Right copy; irwan deswitansyah 2016</p>
</footer>
</div>
</html>
Nah di script index.html diatas, masih sama dengan script html yang sebelumnya hanya di 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 bagi menampilkan tampilan yang akan ditampilkan di browser.
Seandainya telah kita akan bikin sebuah file cssnya, bagi mengatur sebuah layout atau tampilannya, dan silahkan teman teman simpan script dibawah ini di folder css dengan nama file style.css
*{margin: 0; padding: 0;}
.container {width: 500px; margin: auto; background: #038995}
fitur {margin: auto; background: #68979B; height: 40px; text-align: center;}
fitur a {line-height: 40px; display: block; width: 20%; float: left; text-decoration: none; color: #022223; border-right: 1px solid}
fitur 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 seandainya kita jalankan file index.html nya karenanya tampilan nya akan seperti dibawah ini,
- Tampilan home,
- Tampilan About,
- Tampilan Galery,
- Tampilan Contact
Oke teman teman lumayan gampang bukan Route Provider di AngularJS, nya
sekianlah dulu panduan saya kali ini, mengenai Route Provider di AngularJS part 3, semoga bermanfaat
Terimakasih
silahkan Download Script
Route Provider pada AngularJS part 1
Route Provider pada AngularJS part 2
Sumber https://kursuswebsite.org
