Perutean AngularJS
Modul ngRoutemembantu aplikasi Anda menjadi Aplikasi Satu Halaman.
Apa itu Perutean di AngularJS?
Jika Anda ingin menavigasi ke halaman yang berbeda di aplikasi Anda, tetapi Anda juga ingin aplikasi menjadi SPA (Single Page Application), tanpa memuat ulang halaman, Anda dapat menggunakan ngRoutemodul.
Modul ngRoutemerutekan aplikasi Anda ke halaman yang berbeda tanpa memuat ulang seluruh aplikasi.
Contoh:
Arahkan ke "red.htm", "green.htm", dan "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
Apa yang Saya Butuhkan?
Untuk membuat aplikasi Anda siap untuk perutean, Anda harus menyertakan modul Rute AngularJS:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Maka Anda harus menambahkan ngRoutesebagai dependensi dalam modul aplikasi:
var app = angular.module("myApp", ["ngRoute"]);
Sekarang aplikasi Anda memiliki akses ke modul rute, yang menyediakan file $routeProvider.
Gunakan $routeProvideruntuk mengonfigurasi rute yang berbeda di aplikasi Anda:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Kemana perginya?
Aplikasi Anda membutuhkan wadah untuk meletakkan konten yang disediakan oleh perutean.
Wadah ini adalah ng-viewarahannya.
Ada tiga cara berbeda untuk memasukkan ng-viewarahan dalam aplikasi Anda:
Contoh:
<div ng-view></div>
Contoh:
<ng-view></ng-view>
Contoh:
<div
class="ng-view"></div>
Aplikasi hanya dapat memiliki satu ng-viewarahan, dan ini akan menjadi pengganti untuk semua tampilan yang disediakan oleh rute.
$routeProvider
Dengan $routeProviderAnda dapat menentukan halaman apa yang akan ditampilkan ketika pengguna mengklik link.
Contoh:
Tentukan $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
Tentukan metode $routeProviderpenggunaan configaplikasi Anda. Pekerjaan yang terdaftar dalam configmetode akan dilakukan saat aplikasi sedang dimuat.
Pengendali
Dengan itu $routeProviderAnda juga dapat menentukan pengontrol untuk setiap "tampilan".
Contoh:
Tambahkan pengontrol:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
"london.htm" dan "paris.htm" adalah file HTML biasa, yang dapat Anda tambahkan ekspresi AngularJS seperti yang Anda lakukan dengan bagian HTML lain dari aplikasi AngularJS Anda.
File terlihat seperti ini:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Templat
Pada contoh sebelumnya kita telah menggunakan templateUrlproperti di dalam
$routeProvider.whenmetode.
Anda juga dapat menggunakan templateproperti, yang memungkinkan Anda untuk menulis HTML langsung di nilai properti, dan tidak merujuk ke halaman.
Contoh:
Tulis template:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
Metode sebaliknya
Dalam contoh sebelumnya kita telah menggunakan whenmetode $routeProvider.
Anda juga dapat menggunakan otherwisemetode, yang merupakan rute default ketika tidak ada yang cocok.
Contoh:
Jika tautan "Pisang" atau "Tomat" tidak diklik, beri tahu mereka:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});