Rute AngularJS
- Hal Sebelumnya Animasi AngularJS
- Hal Berikutnya Aplikasi AngularJS
ngRoute Modul membantu aplikasi Anda menjadi Aplikasi Halaman Satu.
Apa itu Routing di AngularJS?
Jika Anda ingin navigasi ke halaman yang berbeda dalam aplikasi tetapi ingin aplikasi menjadi SPA (Aplikasi Halaman Satu), tanpa pemuat ulang halaman, Anda dapat menggunakan ngRoute Modul.
ngRoute Modul akan mengalihkan alih aplikasi Anda ke halaman yang berbeda tanpa memuat kembali seluruh aplikasi.
Contoh
Navigasi ke "red.htm", "green.htm" dan "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Beranda</a></p>
<a href="#!red">Merah</a>
<a href="#!green">Hijau</a>
<a href="#!blue">Biru</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 alur, Anda harus menghubungkan modul AngularJS Route:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Lalu, Anda harus menempatkan ngRoute Tambahkan sebagai ketergantungan di modul aplikasi:
var app = angular.module("myApp", ["ngRoute"]);
Sekarang aplikasi Anda dapat mengakses yang disediakan $routeProvider modul alur.
Gunakan $routeProvider Konfigurasikan alur yang berbeda di dalam aplikasi:
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Di mana dia?
Aplikasi Anda memerlukan kontainer untuk menempatkan konten yang disediakan oleh alur.
Ini adalah ng-view
Instruktur dapat disertakan dalam tiga cara berbeda di dalam aplikasi. ng-view Instruktur:
Contoh
<div ng-view></div>
Contoh
<ng-view></ng-view>
Contoh
<div class="ng-view"></div>
Aplikasi hanya dapat memiliki ng-view instruktur, yang akan menjadi placeholder untuk semua tampilan yang disediakan oleh alur.
$routeProvider
Penggunaan $routeProvider， Anda dapat menentukan halaman yang akan ditampilkan saat pengguna mengklik tautan.
Contoh
definisi $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"
});
});
dengan aplikasi config definisi metode $routeProvider。Dalam mengisi aplikasi, eksekusi yang ada di config pekerjaan yang didaftarkan di dalam
kontroler
Penggunaan $routeProvider， Anda juga dapat menentukan kontroler untuk setiap "tampilan".
Contoh
Tambahkan kontroler:
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 = "Saya mencintai London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" dan "paris.htm" adalah berkas HTML biasa, Anda dapat menambahkan ekspresi AngularJS di sana, seperti di bagian lain HTML aplikasi AngularJS.
Berkas ini terlihat seperti ini:
london.htm
<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>
paris.htm
<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>
Template
Dalam contoh sebelumnya, kami di $routeProvider.when dalam metode templateUrl .
Anda juga dapat menggunakan Atribut template Atribut, yang memungkinkan Anda menulis HTML langsung di nilai atribut, bukannya mengacu 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 otherwise
Dalam contoh sebelumnya, kami menggunakan $routeProvider metode when.
Anda juga dapat menggunakan otherwise Metode, saat semua rute lainnya tidak cocok, ia akan menjadi rute standar.
Contoh
Jika tidak ada yang mengklik tautan "Banana" maupun "Tomato", beritahu 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>Tidak Ada</h1><p>Tidak ada yang dipilih</p>"
});
});
- Hal Sebelumnya Animasi AngularJS
- Hal Berikutnya Aplikasi AngularJS
