Rute AngularJS
- Hal Sebelumnya Anima AngularJS
- Hal Berikutnya Aplikasi AngularJS
ngRoute Modul akan membantu aplikasi anda menjadi aplikasi halaman tunggal.
Apa itu routing di AngularJS?
Jika anda mahu pindah ke halaman lain di dalam aplikasi tetapi ingin aplikasi anda menjadi SPA (Aplikasi Halaman tunggal) tanpa pemuat kembali halaman, anda boleh gunakan ngRoute Modul.
ngRoute Modul akan alihkan aplikasi anda ke halaman lain tanpa memuat kembali seluruh aplikasi.
Contoh
Pindah ke "red.htm", "green.htm" dan "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Laman Utama</a></p>
<a href="#!red">Kuning</a>
<a href="#!green">Hijau</a>
<a href="#!blue">Bleu</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 mengandung 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 dalam 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 nya?
Aplikasi Anda memerlukan kontainer untuk menempatkan konten yang disediakan oleh alur.
Ini adalah kontainer ng-view
Instruksi dapat disertakan dalam tiga cara berbeda di dalam aplikasi. ng-view Instruksi:
Contoh
<div ng-view></div>
Contoh
<ng-view></ng-view>
Contoh
<div class="ng-view"></div>
Aplikasi hanya dapat memiliki ng-view instruksi, ini 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 method $routeProvider。Dalam pertama kali aplikasi dimuat, yang akan dijalankan di config kerja yang didaftarkan di dalam
pengawal
Penggunaan $routeProvider，Anda juga dapat menentukan pengawal untuk setiap "tampilan".
Contoh
Tambahkan pengawal:
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 cinta London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" dan "paris.htm" adalah dokumen HTML biasa, di mana anda boleh menambah ekspresi AngularJS, seperti di mana pun bagian lain HTML aplikasi AngularJS lain.
Dokumen ini kelihatan 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>
templat
Dalam contoh sebelum ini, kami di dalam $routeProvider.when di dalam kaedah templateUrl aturan.
Anda boleh menggunakan aturan aturan, ia membenarkan anda menulis HTML secara langsung di dalam nilai aturan, bukannya merujuk halaman.
Contoh
Tulis templat:
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>"
});
});
kaedah otherwise
Dalam contoh sebelum ini, kami menggunakan $routeProvider kaedah when.
Anda boleh menggunakan otherwise Kaedah, apabila tiada laluan lain yang padan, ia akan menjadi laluan lalai.
Contoh
Jika tiada klik pautan "Banana" ataupun "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>None</h1><p>Tiada apa yang dipilih</p>"
});
});
- Hal Sebelumnya Anima AngularJS
- Hal Berikutnya Aplikasi AngularJS
