Kami telah melakukan banyak pelatihan dasar di langkah sebelumnya, jadi sekarang kami dapat melakukan beberapa hal sederhana. Kami ingin menambahkan fungsi pencarian teks lengkap (ya, ini sangat sederhana!). Pada saat yang sama, kami juga akan menulis tes ujung ke ujung, karena tes ujung ke ujung yang baik dapat banyak membantu. Ini memantau aplikasi Anda dan melaporkan dengan cepat saat regresi terjadi.
Harap atur ulang direktori kerja:
checkout git -f Langkah -3
Aplikasi kami sekarang memiliki kotak pencarian. Perhatikan bahwa daftar telepon di halaman berubah saat pengguna masuk ke dalam kotak pencarian.
Perbedaan paling penting antara Langkah 2 dan Langkah 3 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.
Pengontrol
Kami tidak membuat perubahan pada pengontrol.
templat
app/index.html
<dv> <div> <div> <!-Konten sidebar-> Cari: <input ng-model = "query"> </div> <v div> <!-konten tubuh-> <ul> <li ng-repeat = "Telepon di Ponsel | Filter: query"> {{phone.name} <P> {{{{phone> {{phone} <p> {phones/phonpet {phone> </div> </div>Kami sekarang menambahkan tag <sput> dan menggunakan fungsi $ filter AngularJS untuk menangani input dari NgRepeat Directive.
Ini memungkinkan pengguna untuk memasukkan kriteria pencarian dan segera melihat hasil pencarian untuk daftar telepon. Mari kita jelaskan kode baru:
Ikatan Data: Ini adalah fitur inti dari AngularJS. Ketika halaman dimuat, AngularJS akan mengikatnya dengan variabel dengan nama yang sama dalam model data berdasarkan nama nilai properti dari kotak input untuk memastikan sinkronisasi antara keduanya.
Dalam kode ini, nama data yang dimasukkan oleh pengguna di kotak input disebut kueri, yang akan segera digunakan sebagai input ke filternya dengan daftar iterator (telepon di ponsel | filter: query`). Ketika model data menyebabkan perubahan dalam input iterator, iterator dapat secara efisien memperbarui DOM untuk mencerminkan keadaan terbaru dari model data.
Gunakan Filter Filter: Fungsi filter menggunakan nilai kueri untuk membuat array baru yang hanya cocok dengan catatan kueri.
NGREPEAT akan secara otomatis memperbarui tampilan berdasarkan array data catatan seluler yang dihasilkan oleh filter filter. Seluruh proses transparan untuk pengembang.
tes
Pada Langkah 2, kami belajar cara menulis dan menjalankan tes. Pengujian unit sangat nyaman untuk menguji pengontrol dan komponen lain yang kami tulis di JS, tetapi tidak dapat dengan mudah menguji operasi DOM dan integrasi aplikasi. Untuk ini, pengujian ujung ke ujung adalah pilihan yang lebih baik.
Fitur pencarian diimplementasikan sepenuhnya melalui templat dan pengikatan data, sehingga tes ujung ke ujung pertama kami memverifikasi bahwa fitur-fitur ini memenuhi harapan kami.
test/e2e/skenario.js:
Jelaskan ('Aplikasi PhoneCat', function () {jelas ('Tampilan Daftar Telepon', Function () {sebelum reach (function () {browser (). navigateto ('../ app/index.html');}); ite ('harus memfilter daftar telepon sebagai pengguna mengetik ke dalam kotak pencarian', function () {repeater). input (query '). ENTER (' Nexus ');Meskipun sintaks kode uji ini terlihat sangat mirip dengan uji unit yang kami tulis di Jasmine sebelumnya, uji ujung-ke-ujung menggunakan antarmuka yang disediakan oleh tester ujung-ke-ujung AngularJS.
Jalankan tes ujung ke ujung dan buka salah satu berikut di tab Browser Baru:
node.js pengguna: http: // localhost: 8000/test/e2e/runner.html
Pengguna Menggunakan Server HTTP Lainnya: http: // localhost: [port-number]/[context-path] /test/e2e/runner.html
Pengunjung: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
Tes ini memverifikasi bahwa kotak pencarian dan iterator terintegrasi dengan benar. Anda dapat menemukan betapa mudahnya menulis tes ujung-ke-ujung di AngularJS. Meskipun contoh ini hanyalah tes sederhana, mudah untuk membangun tes ujung ke ujung yang kompleks dan dapat dibaca.
praktik
Tambahkan {{query}} yang mengikat ke template index.html untuk menampilkan nilai saat ini dari model kueri dalam waktu nyata, dan kemudian amati bagaimana mereka berubah sesuai dengan nilai di kotak input.
Sekarang mari kita lihat bagaimana kita dapat membuat nilai model kueri muncul pada judul halaman HTML.
Anda mungkin berpikir bahwa menambahkan ikatan ke tag judul seperti ini:
<Title> galeri telepon Google: {{query}} </iteme>
Namun, ketika Anda memuat ulang halaman, Anda tidak bisa mendapatkan hasil yang diinginkan. Ini karena model kueri hanya valid dalam ruang lingkup yang ditentukan oleh elemen tubuh.
<body ng-controller = "phoneListCtrl">
Jika Anda ingin elemen <title> mengikat ke model kueri, Anda harus memindahkan deklarasi NgController ke elemen HTML, karena itu adalah leluhur umum dari judul dan elemen tubuh.
<html ng-app ng-controller = "phoneListCtrl">
Pastikan untuk menghapus deklarasi NG-Controller tentang elemen tubuh.
Kami dapat mencapai tujuan kami ketika mengikat dua kawat gigi keriting pada elemen judul, tetapi Anda mungkin menemukan bahwa mereka sudah ditampilkan kepada pengguna saat halaman dimuat. Solusi yang lebih baik adalah menggunakan arahan NGBind atau NGBindTemplate, yang tidak terlihat oleh pengguna saat halaman dimuat:
<title ng-bind-template = "galeri telepon google: {{query}}"> galeri telepon Google </iteme>
Tambahkan kode uji end-to-end berikut ke blok gambarkan tes/e2e/skenario.js:
itu ('harus menampilkan nilai filter saat ini dalam elemen dengan id "status"', function () {harapkan (elemen ('#status'). Teks ()). TOMATCH (/filter saat ini:/s*$/); input ('kueri'). ENTER ('Nexus'); elemen ('#status'). Teks ()). TOMATCE (/NEXUS CURRATE '); ELEMENT ('#). TEXT (). TEXT (). TOMATCE (/NEXUS CURRATE); ELEMENTS ('STATUS/STATUS/TEXT ()). TOMATCE (/NEXUS CURRERSIONS); nilai ikatan menggunakan ('#status'). Harapkan (mengikat ('kueri')). Tobe ('nexus');});Segarkan browser dan penguji ujung ke ujung akan melaporkan kegagalan tes. Untuk mendapatkan tes lulus, edit index.html dan tambahkan elemen div atau p dengan "status" id, yang merupakan pengikatan kueri, dan filter saat ini: awalan. Misalnya:
<Div id = "Status"> Filter saat ini: {{query}} </div>
Tambahkan jeda (); Pernyataan untuk tes ujung ke ujung dan jalankan lagi. Anda akan menemukan bahwa tester dijeda! Ini memungkinkan Anda memiliki kesempatan untuk melihat status aplikasi Anda selama uji coba. Aplikasi pengujian adalah real-time! Anda dapat mengubah konten pencarian untuk membuktikannya. Dengan sedikit pengalaman Anda akan tahu betapa pentingnya hal ini untuk dengan cepat menemukan masalah dalam pengujian ujung ke ujung.
Meringkaskan
Kami sekarang telah menambahkan fitur pencarian teks lengkap dan menyelesaikan tes untuk membuktikan bahwa pencarian itu benar! Sekarang mari kita lanjutkan ke langkah 4 untuk melihat penambahan fungsi penyortiran ke aplikasi seluler kami.
Di atas adalah kompilasi data penyaringan Iterator AngularJS, dan kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!