premis
Pertama, Anda perlu memperkenalkan rute sudut dan sudut pada halaman. Perhatikan bahwa Anda perlu memperkenalkan Angular sebelum rute sudut.
<Script src = "../../ Bower_Components/Angular/Angular.js"> </script>
<Script src = "../../ Bower_Components/Angular-route/Angular-route.js"> </script>
Ini terutama karena sudut-route.js perlu diteruskan di jendela. Parameter langgeng, dan parameter ini hanya akan muncul setelah sudut dimuat.
(fungsi (jendela, sudut, tidak terdefinisi) {'Gunakan ketat'; ... ngrouteModule.directive ('ngview', ngviewFactory); ...}) (window, window.angular);Anda dapat mengunduhnya di situs web resmi atau menginstalnya menggunakan Bower.
menjelaskan
Fungsi perutean diimplementasikan oleh layanan RouteProvider dan NG-View. NG-View setara dengan memberikan titik pemasangan dari template halaman. Saat mengganti URL untuk melompat, templat halaman yang berbeda akan ditempatkan di lokasi NG-View; Kemudian RouteProvider digunakan untuk mengonfigurasi pemetaan rute.
Ada dua metode secara umum:
when (): Mengkonfigurasi jalur dan parameter;
Kalau tidak: Mengkonfigurasi lompatan jalur lain, Anda dapat menganggapnya sebagai default.
Parameter kedua kapan:
Pengontrol: Fungsi pengontrol atau nama jalur yang sesuai
controlleras: Berikan controller nama alias
Template: Template halaman yang sesuai dengan jalur akan muncul di NG-View, seperti "<verv> xxxx </div>"
TemplateUrl: Jalur yang sesuai dengan templat, seperti "src/xxx.html"
Resolve: Parameter ini berfokus pada fakta bahwa properti ini akan mengikat layanan atau nilai pada pengontrol terkait perutean dalam bentuk objek pasangan nilai kunci. Maka nilai hasil eksekusi atau referensi layanan yang sesuai disuntikkan ke pengontrol. Jika Resolve adalah objek janji, itu akan menunggu sampai berhasil dijalankan sebelum disuntikkan ke pengontrol. Pada saat ini, pengontrol akan menunggu hasil eksekusi dalam tekad.
Untuk contoh terperinci, silakan merujuk ke contoh -contoh berikut.
Redirectto: Alamat pengalihan
ReloadonSearch: Tetapkan apakah template yang sesuai akan dimuat hanya ketika alamat diubah; baik pencarian maupun params tidak akan dimuat.
caseinsensitiveMatch: Path adalah case sensitif
Ada beberapa acara yang umum digunakan untuk perutean:
$ routeChangestArt: Acara ini akan dipicu sebelum rute melompat
$ routechangesuccess: acara ini dipicu setelah lompatan rute berhasil
$ routeChangeError: Acara ini ditembakkan setelah lompatan rute gagal
menggunakan
Di halaman, tulis tautan tombol ke URL Jump dan tag NG-View
<Div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> klik a </a> </li> <li> <a href = "#/b"> Klik B </a> </li> </ul> <ng-view> </ng-view> </li> </ul> <ng-view> </ng-view> <!-</ul> <ng-view> </ng-view> <!
Di antara mereka, NG-View dapat dianggap sebagai elemen atau label, dll.
Konfigurasi terkait yang perlu didefinisikan dalam JavaScript
<script type = "text/javascript"> angular.module ("myapp", ["ngroute"]) .controller ("acontroller", function ($ scope, $ route) {$ scope.hello = "hello, a!";}) .controller ("bcroller", $ "sciope). .controller("myCtrl",function($scope,$location){ $scope.$on("$viewContentLoaded",function(){ console.log("ng-view content loaded!"); }); $scope.$on("$routeChangeStart",function(event,next,current){ //event.preventDefault(); //cancel url change Console.log ("Route Change Start!"); }) .config (function ($ routeProvider, $ locationProvider) {$ routeProvider .when ('/a', {templateUrl: 'a.html', controller: 'Acontroller'}. Delay: $ q, $ timeout) {var delay = $ q.defer (); </script>Dalam kode di atas, tekad di jalur /B dikaitkan dengan metode penundaan. Metode ini mengembalikan objek janji dan akan mengembalikan hasilnya hanya setelah 3 detik. Oleh karena itu, halaman B tidak akan berhasil memuat setelah 3 detik.
Dua html tambahan diperlukan:
A.html:
<Div ng-controller = "acontroller" style = "tinggi: 500px; lebar: 100%; latar belakang-warna: green;"> {{hello}} </div>
Dan b.html:
<Div ng-controller = "bconstroller" style = "tinggi: 2500px; lebar: 100%; latar belakang-warna: biru;"> {{hello}} </div>
Dengan cara ini, lompatan rute dapat dicapai.
Semua kode dapat dirujuk:
<html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "../../ bower_components/angular/angular.js"> </skrip> skrip src = "../../ bower_components/angular-route/angular-route.js"> </script> <body> <v ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> Klik A </a> </li> <li> <a href = "#" <ng-view> </ng-view> <!-<v div ng-view> </div>-> </div> <script type = "text/javascript"> angular.module ("myapp", ["ngroute"]) .controller ("acontroller", function ($ scope, $ route) {"scope." .controller ("bcontroller", function ($ scope) {$ scope.hello = "hello, b!";}) .controller ("myctrl", function ($ scope, $ location) {$ scope. $ on ("$ viewContentLoaded", function () {console.log. $ scope. $ on ("$ routeChangestArt", function (event, next, current) {//event.preventdefault (); // batal URL ubah konsol.log ("Route Change Start!");}); }) .config (function ($ routeProvider, $ locationProvider) {$ routeProvider .when ('/a', {templateUrl: 'a.html', controller: 'Acontroller'}. Delay: $ q, $ timeout) {var delay = $ q.defer (); </script> </body> </html>Di atas adalah informasi yang menyortir informasi perutean AngularJS ng-route. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!