Table of Content
Introduction
Routing merupakan konsep untuk menampilkan beberapa template dalam satu buah halaman. Istilah lainnya adalah SPA(Single Page Application) Jadi halamannya tetap, tidak berubah, namun konten isinya saja yg berubah.
script.js
let app = angular.module('belajar', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
template: "<a href='#!/about'>About</a>"
})
.when('/about', {
template: "<a href='#!/'>Home</a>"
})
})index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<div ng-view></div>
</body>
</html>Note : jangan lupa tambahkan file angular-route.js (ada di folder download-an angularjs)
Menghilangkan tanda #!
Secara default, angular menggunakan tanda #! untuk urusan routingnya.
script.js
let app = angular.module('belajar', ['ngRoute']);
app.config(function($locationProvider){
$locationProvider.html5Mode(true)
})
app.config(function($routeProvider){
$routeProvider
.when('/', {
template: "<a href='/about'>About</a>"
})
.when('/about', {
template: "<a href='/'>Home</a>"
})
})Penjelasan :
- $locationProvider.html5Mode(true) untuk menghilangkan tanda #!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="script.js"></script>
<base href="/">
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<div ng-view></div>
</body>
</html>Jangan lupa tambahkan <base href="/"> di dalam tag head