Routing AngularJS
Mampu melompat dari satu tampilan halaman ke halaman lainnya sangat penting untuk aplikasi satu halaman. Ketika aplikasi menjadi semakin kompleks, kami membutuhkan cara yang masuk akal untuk mengelola antarmuka yang dilihat pengguna saat digunakan. Praktik AngularJS untuk memecah tampilan menjadi tata letak dan templat, dan menampilkan tampilan yang sesuai sesuai dengan URL yang saat ini diakses oleh pengguna.
Artikel ini memberikan contoh sederhana dari routing AngularJS dan menyebutkan beberapa konsep yang dilibatkannya.
1. Halaman tata letak
Kutipan skrip:
<script src = "../ Scripts/jQuery-1.9.1.min.js"> </script> <script src = "../ skrip/angular.min.js"> </script> <script src = "../ skrip/angular-route.min.js"> </script>
Tata letak halaman relatif sederhana:
<Div> <ul> <li> <a href = "#page1"> go page 1 </a> </li> <li> <a href = "#page2"> go page 2 </a> </li> <li> <a href = "#lainnya"> ke halaman lain </a> </li> </ul> </div> </div- div-
NG-View adalah arahan khusus yang disediakan oleh modul NGROUTE yang memberi tahu AngularJS di mana membuat templat. Dalam contoh ini, kami meletakkan konten yang perlu kami render ke div di bawah ini. Tiga tautan A di atas masing -masing menunjuk ke tiga tampilan tampilan.
2. Halaman Template
Buat dua halaman template, masing -masing disebut subpage_1.html dan subpage_2.html.
3. Routing Ruleing Routing Config
angular.module ("myrouteApp", ["ngroute"]) .config (['$ routeProvider', function ($ routeProvider) {$ routeProvider .when ("/page1", {TemplateUrl: "Subpage_1.html"}) .whne (" }) .otherwise ({redirectto: "/"});Muat modul NGROUTE sebagai ketergantungan dalam aplikasi kami. Gunakan fungsi konfigurasi untuk menentukan rute dalam modul atau aplikasi, dan gunakan dua metode yang disediakan oleh AngularJS untuk menentukan rute ke aplikasi.
TemplateUrl:
Aplikasi membaca tampilan melalui XHR (atau dibaca dari $ Templatecache) berdasarkan jalur yang ditentukan oleh properti TemplateUrl. Jika template ini dapat ditemukan dan dibaca, AngularJS membuat konten template menjadi elemen DOM dengan arahan NG-View.
Redirectto:
Jika nilai properti Redirectto adalah string, jalur akan diganti dengan nilai ini dan perubahan perutean akan dipicu sesuai dengan jalur target. Jika nilai properti Redirectto adalah fungsi, jalur akan diganti dengan nilai pengembalian fungsi dan perubahan perutean akan dipicu sesuai dengan jalur target ini.
Hasil berjalan
Klik GO Halaman 1
Klik GO Halaman 2
Kode contoh rute routing sudut di atas adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.