Pada langkah ini, Anda akan belajar cara membuat templat tata letak dan membangun aplikasi dengan beberapa tampilan melalui fungsi perutean.
Harap atur ulang direktori kerja:
git checkout -f Langkah -7
Perhatikan bahwa sekarang saat Anda pergi ke app/index.html, Anda akan diarahkan ke app/index.html#/ponsel dan daftar telepon yang sama ditampilkan di browser. Saat Anda mengklik tautan seluler, daftar detail ponsel juga ditampilkan.
Perbedaan terpenting antara Langkah 6 dan Langkah 7 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.
Template Multi-View, Routing dan Tata Letak
Aplikasi kami perlahan -lahan berkembang dan menjadi lebih kompleks. Sebelum langkah 7, aplikasi hanya memberi pengguna kami antarmuka sederhana (daftar semua ponsel), dan semua kode templat terletak di file index.html. Langkah selanjutnya adalah menambahkan halaman yang menampilkan detail setiap telepon dalam daftar kami.
Untuk menambahkan tampilan detail, kami dapat memperluas index.html untuk memasukkan kode template untuk kedua tampilan pada saat yang sama, tetapi ini akan dengan cepat menyebabkan kami kesulitan besar. Sebaliknya, kita perlu mengonversi template index.html menjadi "template tata letak". Ini adalah templat umum bagi kami untuk menerapkan semua pandangan. "Template tata letak lokal" lainnya kemudian diisi sesuai dengan "perutean" saat ini, sehingga membentuk tampilan lengkap untuk ditampilkan kepada pengguna.
Rute yang diterapkan di AngularJS dinyatakan melalui $ RouteProvider, yang merupakan penyedia layanan $ rute. Layanan ini memungkinkan integrasi pengendali, templat tampilan dan URL browser saat ini. Dengan menerapkan fitur ini, kami dapat mengimplementasikan tautan mendalam, yang memungkinkan kami menggunakan riwayat browser (backback atau navigasi maju) dan bookmark.
Tentang Injeksi Ketergantungan (DI), injektor dan penyedia layanan
Seperti yang Anda pelajari dari yang sebelumnya, injeksi ketergantungan adalah fitur inti dari AngularJS, jadi Anda harus tahu sedikit tentang cara kerja orang ini.
Saat aplikasi boot, AngularJS akan membuat injektor, yang akan dibutuhkan oleh semua layanan yang disuntikkan setelah aplikasi kami. Injektor ini sendiri tidak tahu apa yang dilakukan $ http dan $ rute. Bahkan, kecuali dikonfigurasi selama definisi modul, tidak tahu keberadaan layanan ini sama sekali. Satu -satunya tanggung jawab injektor adalah memuat modul layanan yang ditentukan, mendaftarkan semua penyedia layanan yang ditentukan dalam modul -modul ini, dan menyuntikkan dependensi (Layanan) ke dalam fungsi yang ditentukan saat dibutuhkan. Ketergantungan ini dipakai oleh penyedia mereka "malas" (dimuat jika diperlukan).
Penyedia adalah objek yang menyediakan (membuat) instance layanan dan menyediakan antarmuka API secara eksternal. Ini dapat digunakan untuk mengontrol perilaku penciptaan dan runtime suatu layanan. Untuk layanan $ rute, $ RouteProvider menyediakan antarmuka API ke dunia luar, memungkinkan Anda untuk menentukan aturan perutean untuk aplikasi Anda melalui antarmuka API.
Modul AngularJS memecahkan dua masalah menghilangkan keadaan global dari aplikasi dan menyediakan metode untuk mengonfigurasi injektor. Tidak seperti AMD atau membutuhkan.js (dua perpustakaan yang bukan AngularJS), modul AngularJS tidak mencoba untuk memecahkan masalah urutan pemuatan skrip dan pemuatan skrip malas. Tujuan -tujuan ini tidak ada hubungannya dengan masalah yang perlu dipecahkan oleh AngularJS, sehingga modul -modul ini dapat hidup berdampingan untuk mencapai tujuan masing -masing.
Modul aplikasi
app/js/app.js
Angular.module ('PhoneCat', []). config (['$ routeProvider', function ($ routeProvider) {$ routeProvider. When ('/phones', {TemplateUrl: 'parsial/phone-list.html', controller: 'phoneListCtrl}). Kapan ('/ponsel/: phoneid ', {TempleRistctrl}). PhoneDetailCtrl}).Untuk mengonfigurasi perutean untuk aplikasi kami, kami perlu membuat modul untuk aplikasi. Kami menyebut modul ini phonecat, dan dengan menggunakan configAPI, kami meminta $ routeProvider disuntikkan ke fungsi konfigurasi kami dan menggunakan $ routeProvider.whenapi untuk menentukan aturan perutean kami.
Perhatikan bahwa selama fase konfigurasi injektor, penyedia juga dapat disuntikkan pada saat yang sama, tetapi begitu injektor dibuat dan instance layanan dimulai, mereka tidak akan lagi diambil oleh dunia luar.
Aturan perutean kami didefinisikan sebagai berikut
Ketika segmen peta URL adalah /telepon, tampilan daftar ponsel akan ditampilkan. Untuk membangun tampilan ini, AngularJS menggunakan templat telepon-list.html dan pengontrol phoneListCtrl.
Ketika segmen peta URL adalah /Telepon /: PhoneID, tampilan Detail Telepon ditampilkan. Di sini: PhoneID adalah bagian variabel dari URL. Untuk membangun tampilan rinci telepon, AngularJS menggunakan templat telepon-detail.html dan pengontrol phonedetailctrl.
Kami menggunakan kembali pengontrol PhoneListCtrl yang kami buat sebelumnya, dan pada saat yang sama kami menambahkan pengontrol PhoneDetailCtrl baru ke tampilan terperinci telepon dan menyimpannya di file App/JS/Controllers.js.
Pernyataan $ route.otherwise ({redirectto: ' /phones'}) menyebabkan pengalihan ke /ponsel dipicu ketika alamat browser tidak dapat cocok dengan aturan perutean kami.
Perhatikan bahwa dalam Deklarasi Rute Kedua: Penggunaan Parameter Telepon. Layanan $ rute menggunakan deklarasi routing /phones /: PhoneID sebagai templat yang cocok dengan URL saat ini. Semua variabel yang dinyatakan dengan: simbol (di sini variabelnya adalah telepon) akan diekstraksi dan disimpan dalam objek $ routeParams.
Agar aplikasi kami memandu modul kami yang baru dibuat, kami juga perlu menentukan nama modul pada nilai arahan NGAPP:
app/index.html
<! Doctype html> <html lang = "en" ng-app = "phoneCat"> ...
Pengontrol
APP/JS/CONTROLER.JS
... fungsi phonedetailctrl ($ scope, $ routeParams) {$ scope.phoneid = $ routeParams.phoneid;} // phonedetailctrl. $ inject = ['$ scope', '$ routeParams'];templat
Layanan $ rute biasanya digunakan dengan NGView Directive. Peran arahan NGView adalah untuk memuat templat tampilan yang sesuai ke dalam templat tata letak untuk rute saat ini.
app/index.html
<html lang = "en" ng-app = "phoneCat"> <head> ... <script src = "lib/angular/angular.js"> </script> <script src = "js/app.js"> </script> <script src = "js/controllers.js"> </script> </script> <cript src = "js/controllers.js"> </Script> </script> src = "js/controllers.js"> </script> head> </script> </body <body> </controllers.js "> </Script> NG-VIEW> </SEV> </body> </html>
Perhatikan bahwa kami menghapus sebagian besar kode dalam templat index.html, dan kami hanya menempatkan wadah <div>, yang memiliki atribut NG-View. Kode yang kami hapus sekarang ditempatkan di Template Telepon-List.html:
Aplikasi/Partials/Telepon-list.html
<div> <div> <div> <!-Konten sidebar-> Cari: <input ng-model = "kueri"> sortir dengan: <pilih ng-model = "orderprop"> <value opsi = "name"> alfabet </tion> <option value = "usia"> Option </pect> </pilih> </Div> div> <! Filter: Query |. <p> {{phone.snippet}} </p> </li> </ul> </div> </div> </div>Pada saat yang sama, kami menambahkan template placeholder ke tampilan detail ponsel.
Aplikasi/Partials/Telepon-Detail.html
TBD: Tampilan detail untuk {{phoneId}}
Perhatikan bahwa template tata letak kami belum menambahkan properti pengontrol phoneListCtrl atau phonedetailctrl!
tes
Untuk secara otomatis memverifikasi bahwa semuanya terintegrasi dengan baik, kita perlu menulis beberapa tes ujung ke ujung, menavigasi URL yang berbeda dan memverifikasi bahwa tampilan yang benar diberikan.
... itu ('harus mengarahkan index.html ke index.html#/phones', function () {browser (). navigateto ('../../ app/index.html'); happect (browser (). Lokasi (). Url ()). TOBE ('/PHONE');} (). Detail (). URL ()). TOBE ('/PHONE');} (). Browser (). Navigateto ('../../ App/Index.html#/Phones/Nexus-S');Anda sekarang dapat menyegarkan browser Anda dan menjalankan tes ujung ke ujung lagi, atau Anda dapat menjalankannya di server AngularJS.
praktik
Coba tambahkan {{ordProp}} yang mengikat ke index.html dan tidak ada yang berubah ketika Anda berada di tampilan daftar ponsel Anda. Ini karena model OrderProp hanya terlihat di bawah ruang lingkup manajemen phoneListCtrl, yang terkait dengan elemen <v Ng-View>. Jika Anda menambahkan ikatan yang sama ke templat telepon-daftar.
Meringkaskan
Setelah menyiapkan rute dan mengimplementasikan tampilan daftar ponsel, kami sudah dapat melanjutkan ke langkah 8 untuk mengimplementasikan tampilan detail ponsel.
Di atas adalah untuk memilah informasi perutean dan multi-view, dan kami akan terus menambahkan pengetahuan yang relevan di masa depan. Terima kasih atas dukungan Anda untuk situs ini!