Baru -baru ini, seorang kolega mengalami beberapa masalah dalam proses rute pembelajaran dan templat. Jadi hari ini saya menulis contoh untuknya dan membaginya dengan mereka yang belajar AngularJS.
Omong -omong, proyek pengembangan AngularJS sangat menarik, dan kesenangan adalah model pengembangannya, membuat kode lebih jelas, lebih mudah dibaca, lebih ringkas dan lebih dapat dipelihara. Namun, ada juga hal-hal yang membuat saya pusing ketika mengembangkan menggunakan AngularJS, yaitu, kerangka kerja front-end saat ini lebih fokus pada jQuery, dan banyak plug-in mengandalkan jQuery, dan ada sangat sedikit plug-in untuk Anguljs (saya tidak tahu plug-in sudut lainnya kecuali AngularUI. Jika ada panduan utama, Anda dapat berbagi dengan saya). Untuk memastikan bahwa kode dalam pengontrol jelas dan tidak membingungkan, kami menetapkan bahwa DOM tidak diizinkan dioperasikan dalam pengontrol, jadi setiap kali kami perlu mengoperasikan elemen DOM, kami adalah instruksi untuk menyelesaikannya, jadi itu ada. Banyak plug-in jQuery perlu dikonversi menjadi instruksi untuk beroperasi, yang merupakan hal yang sangat menjijikkan. Tampaknya jauh, ok ~~
Daftar isi:
1. Pendahuluan Routing AngularJS
2. Contoh perutean AngularJS
3. AngularJS menggunakan routing mode html5 dikombinasikan dengan pengalihan server web untuk menyederhanakan alamat perutean
1. Pendahuluan Routing AngularJS
Routing AngularJS berbeda dari routing MVC backend. Routing front-end AngularJS memerlukan mendefinisikan aturan perutean (routeProvider) untuk yang ditentukan (NG-App) terlebih dahulu pada halaman template, dan kemudian memberi tahu (ng-app) halaman mana (html) untuk memuat melalui URL yang berbeda, dan kemudian menyerahkannya ke tampilan (NG-App) (NG-view). Routing MVC adalah untuk meminta tindakan pengontrol melalui permintaan URL yang berbeda, dan kemudian mengembalikan tampilan sesuai dengan aturan perutean. AngularJS adalah rute front-end murni. Nanti, kami akan menggabungkan file konfigurasi untuk menyederhanakan alamat perutean.
2. Contoh perutean AngularJS
Kami membuat file JS baru, di sini saya beri nama app.js, dan kami menulis kode berikut dalam file:
1 angular.module ("app", [2 'ngroute' 3]) 4 .config (['$ routeProvider', function ($ routeProvider) {5 $ routeProvider.when ("/list", {6 Templat: "Ini adalah halaman daftar" 7}). When ("/detail", {6. " Redirectto: "/List" 12}) 13}])
Kami membuat file html baru dan namanya index.html. Kode dan deskripsi adalah sebagai berikut:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <header> 8 <h2>This is the head</h2> 9 </header>10 <content>11 <div NG-View> </div> 12 </content> 13 <footer> 14 <h3> Ini adalah bagian bawah </h3> 15 </tfooter> 16 </body> 17 </html> 18 <skrip src = "/skrip/Angular/Angular.min.js"> </skrip> 19 <skrip src = "/script/angular.min.js"> </skrip> 19 <skrip src = "/script/script/screpule.juls"> </script> 19 <script src = "/script/script/script. <Script src = "/Scripts/app.js"> </script>
Jalankan contohnya, efeknya adalah sebagai berikut.
Buka alamat input browser: http: // localhost: 2987/index.html#/detail dan http: // localhost: 2987/index.html#/daftar masing -masing, Anda dapat melihat halaman yang ditampilkan pada gambar berikut:
3. AngularJS menggunakan routing mode html5 dikombinasikan dengan server web untuk menyederhanakan alamat perutean
Pada gambar di atas, kita dapat melihat bahwa alamat permintaan sangat panjang. Sulit bagi saya yang memiliki gangguan obsesif-kompulsif untuk menerima jenis alamat ini, jadi saya memutuskan untuk melakukan perubahan seperti itu:
1) Anguljs memungkinkan routing mode HTML5 dan menghapus nomor #:
Untuk Anguljs, standarnya adalah bahwa mode perutean HTML5 tidak dihidupkan. Kami mengaktifkan mode routing HTML5 dengan mengikuti metode berikut:
1 angular.module ("app", [2 'ngroute' 3]) 4 .config (['$ routeProvider', '$ locationProvider', function ($ routeProvider, locationProvider) {5 // buka html5 Mode routing 6 $ locationProvider.html5Mode (true) 7 $ {{truePLOP 6 $ {{{{{{{{{{{{{{lords '$ locingprovider) {{{{{{{{{tr locing ", adalah halaman daftar "9}). when ("/detail ", {10 template:" Ini adalah halaman detail "11}) 12 .otherwise ({13 Redirectto:" /404.html"14}) 15}])
Dengan cara ini, setelah menghapus nomor # sesuai dengan alamat permintaan di atas, halaman disegarkan. Prompt 404 tidak dapat menemukan halaman. Alasannya adalah bahwa jika alamat seperti itu diminta ke latar belakang IIS, file yang sesuai tidak akan ditemukan, sehingga halaman kesalahan 404 akan dikembalikan secara langsung. Oleh karena itu, kita perlu menambahkan konfigurasi webserver ke file konfigurasi dan mengarahkan kembali file sebagai berikut:
1 <system.webServer> 2 <rewrite> 3 <rules> 4 <rule name="name" > 5 <match url="^list|detail*" ignoreCase="true"/> 6 <conditions logicalGrouping="MatchAll"> 7 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/> 8 <add input="{REQUEST_FILENAME}" matchType = "isDirectory" negate = "true"/> 9 </ticy> 10 <action type = "recrite" url = "/index.html"/> 11 </sule> 12 </sultion> 13 </rovrite> 14 </system.webserver> 12
Seperti yang ditunjukkan dalam kode di atas, <match url = "^Daftar | detail*" ignorecase = "true"/> berarti bahwa jika alamat permintaan berisi daftar atau detail (tulis ekspresi reguler itu sendiri sesuai dengan persyaratan), itu akan diarahkan ke halaman index.html. Saat memasukkan http: // localhost: 2987/detail pada halaman, IIS pertama -tama akan kembali ke halaman template (index.html), dan kemudian rute Anguljs akan mulai dieksekusi.
Masukkan http: // localhost: 2987/detail di browser dan menemukan bahwa kami tidak mendapatkan hasil yang kami inginkan, yaitu, rute tidak cocok.
Setelah mencari secara online untuk waktu yang lama, saya akhirnya menemukan solusinya, yaitu menambahkan tag <Base> ke halaman HTML sebagai berikut:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 <base href="/" /> 6 </head> 7 <body> 8 <header> 9 <h2>This is the head</h2>10 </header>11 <den konten> 12 <vv ng-view> </div> 13 </content> 14 <footer> 15 <h3> Ini adalah bagian bawah </h3> 16 </tfooter> 17 </body> 18 </html> 19 <skrip src = "/skrip/sudut/angular.min.js"> </skrip> 20 skrip src = "/skrip/angular-route/angular-route.min.js"> </script> 21 <skrip src = "/skrip/app.js"> </script>
Dengan cara ini, masukkan: http: // localhost: 2987/detail di browser dan Anda akan melihat hasil yang kami inginkan. Tangkapan layar adalah sebagai berikut:
Pertanyaan Legacy: Mengapa Anda bisa berhasil dengan menambahkan tag <base href = " /" />? Saya ingin bertanya kepada semua blogger tentang pertanyaan ini.
Jika ada yang salah dengan konten di atas, silakan mengeluh tentang itu! Lai Lai
Di atas adalah konten lengkap dari contoh routing dan templat AngularJS dan metode penyederhanaan alamat routing (wajib dibaca) kepada Anda oleh editor. Saya harap semua orang akan mendukung wulin.com lebih banyak ~