Apa itu AngularJS?
AngularJS adalah kerangka kerja struktural yang dirancang untuk aplikasi web yang dinamis. Ini memungkinkan Anda untuk menggunakan HTML sebagai bahasa templat, dan dengan memperluas sintaks HTML, Anda dapat membangun komponen aplikasi Anda dengan lebih jelas dan ringkas. Inovasinya adalah menggunakan injeksi pengikatan dan ketergantungan data, yang menghilangkan kebutuhan untuk menulis banyak kode. Semua ini diimplementasikan melalui JavaScript sisi browser, yang juga membuatnya dikombinasikan dengan sempurna dengan teknologi sisi server.
AngularJS dirancang untuk mengatasi kekurangan HTML dalam membangun aplikasi. HTML adalah bahasa deklaratif yang baik yang dirancang untuk tampilan teks statis, tetapi akan lemah jika Anda ingin membangun aplikasi web. Jadi saya melakukan beberapa pekerjaan (Anda mungkin berpikir itu sedikit trik) untuk membuat browser melakukan apa yang saya inginkan. formatDate
Biasanya, kami menggunakan teknologi berikut untuk menyelesaikan kekurangan teknologi web statis dalam membangun aplikasi dinamis:
1. Kelas Perpustakaan - Perpustakaan Kelas adalah kumpulan fungsi yang dapat membantu Anda menulis aplikasi web. Kode Anda yang menuntun Anda, dan terserah Anda untuk memutuskan kapan menggunakan pustaka kelas. Perpustakaan kelas meliputi: jQuery, dll.
2. Framework - Framework adalah aplikasi web khusus yang diimplementasikan, Anda hanya perlu mengisi logika bisnis tertentu. Kerangka kerja memainkan peran utama di sini, dan itu memanggil kode Anda berdasarkan logika aplikasi tertentu. Bingkai meliputi: KO, Sproutcore, dll.
AngularJS menggunakan pendekatan yang berbeda, yang mencoba menebus kekurangan HTML itu sendiri dalam membangun aplikasi. AngularJS memungkinkan browser untuk mengenali sintaks baru dengan menggunakan struktur yang kami sebut pengidentifikasi. Misalnya:
1. Gunakan kawat gigi ganda {{}} sintaks untuk pengikatan data;
2. Gunakan struktur kontrol DOM untuk mengulang atau sembunyikan fragmen DOM;
3. Formulir Dukungan dan Verifikasi Bentuk;
4. Dapat mengaitkan kode logis dengan elemen DOM terkait;
5. Dapat membagi HTML menjadi komponen yang dapat digunakan kembali.
Solusi ujung ke ujung
AngularJS berusaha menjadi solusi ujung ke ujung dalam aplikasi web. Ini berarti bukan hanya sebagian kecil dari aplikasi web Anda, tetapi juga solusi ujung ke ujung yang lengkap. Ini akan membuat AngularJS tampak "keras kepala" saat membangun aplikasi yang memiliki crud (tambahkan create, query retrieve, update update, delete delete) (teks asli didapat, yang berarti tidak ada banyak cara lain). Namun terlepas dari "keras kepala", ia masih memastikan bahwa "keras kepala" hanya pada titik awal membangun aplikasi Anda, dan bahwa Anda masih dapat berubah secara fleksibel. Beberapa fitur luar biasa AngularJS adalah sebagai berikut:
1. Semua konten yang mungkin dapat digunakan untuk membangun aplikasi CRUD meliputi: pengikatan data, pengidentifikasi templat dasar, verifikasi bentuk, perutean, tautan mendalam, penggunaan kembali komponen, dan injeksi ketergantungan.
2. Aspek pengujian meliputi: pengujian unit, pengujian ujung ke ujung, simulasi dan kerangka kerja pengujian otomatis.
3. Aplikasi Seed dengan tata letak direktori dan skrip uji sebagai titik awal.
Kelucuan angularjs
AngularJS menyederhanakan pengembangan aplikasi dengan menghadirkan tingkat abstraksi yang lebih tinggi untuk pengembang. Seperti teknik abstrak lainnya, ini juga kehilangan beberapa fleksibilitas. Dengan kata lain, tidak semua aplikasi cocok untuk digunakan dengan AngularJS. AngularJS terutama mempertimbangkan aplikasi membangun kasar. Untungnya, setidaknya 90% aplikasi web adalah aplikasi CRUD. Tetapi untuk memahami apa yang cocok untuk membangun dengan AngularJS, Anda harus memahami apa yang tidak cocok untuk membangun dengan AngularJS.
Seperti permainan dan editor antarmuka grafis, aplikasi dengan operasi DOM yang sering dan kompleks sangat berbeda dari aplikasi CRUD. Mereka tidak cocok untuk membangun dengan AngularJS. Mungkin lebih baik menggunakan beberapa teknik yang lebih ringan dan lebih sederhana seperti jQuery seperti ini.
Contoh AngularJS sederhana
Di bawah ini adalah aplikasi crud khas yang berisi formulir. Nilai bentuk pertama diverifikasi dan kemudian digunakan untuk menghitung nilai total, yang diformat dalam gaya lokal. Berikut adalah beberapa konsep umum untuk pengembang, Anda perlu memahami terlebih dahulu:
1. Hubungan model data (model data) ke tampilan (UI);
2. Tulis, baca dan verifikasi input pengguna;
3. Hitung nilai baru berdasarkan model;
4. Lokalisasi format output.
index.html:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html ng-app>
<head>
<skrip src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<skrip src = "script.js"> </script>
</head>
<body>
<Div ng-controller = "invoiceCntl">
<b> Faktur: </b>
<br>
<br>
<able>
<tr> <td> Kuantitas </td> <td> Biaya </td> </tr>
<tr>
<td> <input type = "integer" min = "0" ng-model = "qty" diperlukan> </td>
<td> <input type = "number" ng-model = "biaya" diperlukan> </td>
</tr>
</boable>
<Hr>
<b> Total: </b> {{qty * cost | mata uang}}
</div>
</body>
</html>
Script.js:
Salinan kode adalah sebagai berikut:
fungsi invoiceCntl ($ scope) {
$ scope.qty = 1;
$ scope.cost = 19,95;
}
Tes End-to-End:
Salinan kode adalah sebagai berikut:
itu ('harus menunjukkan pengikat sudut', function () {
harapkan (mengikat ('qty * cost')). Toequal ('$ 19,95');
input ('qty'). Enter ('2');
input ('biaya'). Enter ('5.00');
harapkan (mengikat ('qty * cost')). Toequal ('$ 10,00');
});
fungsi invoiceCntl ($ scope) {$ scope.qty = 1; $ scope.cost = 19.95;}
Efek Menjalankan:
Salinan kode adalah sebagai berikut:
Faktur:
Biaya kuantitas
Total: {{qty * biaya | mata uang}}
Coba contoh di atas, dan mari kita lihat bagaimana contoh ini bekerja bersama. Dalam tag ``, kami menggunakan identifikasi `ng-app` untuk menunjukkan bahwa ini adalah aplikasi AngularJS. Pengidentifikasi `ng-app` ini akan menyebabkan AngularJS ** untuk secara otomatis menginisialisasi aplikasi Anda. Kami menggunakan tag `` untuk memuat skrip AngularJS: <skrip src = "http://code.angularjs.org/angular-1.1.0.min.js">
Dengan mengatur properti NG-Model di tag <sput>, AngularJS akan secara otomatis mengikat data dalam dua arah. Kami juga melakukan beberapa verifikasi data sederhana pada saat yang sama:
Salinan kode adalah sebagai berikut:
Kuantitas: <input type = "integer" min = "0" ng-model = "qty" diperlukan>
Biaya: <input type = "angka" ng-model = "biaya" diperlukan>
Widget kotak input ini terlihat biasa, tetapi tidak biasa jika Anda mengenali poin -poin berikut:
1. Ketika halaman dimuat, AngularJS akan menghasilkan variabel dengan nama yang sama sesuai dengan nama model (qty, biaya) yang dinyatakan dalam widget. Anda dapat menganggap variabel -variabel ini sebagai M (model) dalam pola desain MVC;
2. Perhatikan bahwa input dalam widget di atas memiliki kemampuan khusus. Jika Anda tidak memasukkan data atau data input tidak valid, kotak input input ini akan secara otomatis berubah merah. Fitur baru dari kotak input ini memudahkan pengembang untuk mengimplementasikan fungsi verifikasi bidang umum dalam aplikasi CRUD.
Akhirnya, kita dapat melihat kawat gigi ganda yang misterius:
Salinan kode adalah sebagai berikut:
Total: {{qty * biaya | mata uang}}
Tag {{{{}} ini adalah pengikatan data AngularJS. Ekspresi di dalamnya dapat berupa kombinasi ekspresi dan filter ({{{ekspresi | filter}}). AngularJS menyediakan filter untuk memformat data input dan output.
Dalam contoh di atas, ekspresi dalam {{}} meminta AngularJS untuk melipatgandakan data yang diperoleh dari kotak input, kemudian format hasil perkalian ke gaya mata uang lokal, dan kemudian output ke halaman.
Perlu disebutkan bahwa kami tidak menyebut metode AngularJS atau menulis logika spesifik seperti menggunakan kerangka kerja, tetapi kami telah menyelesaikan fungsi di atas. Di belakang implementasi ini adalah bahwa browser melakukan lebih banyak pekerjaan daripada sebelumnya untuk menghasilkan halaman statis, memungkinkannya untuk memenuhi kebutuhan aplikasi web yang dinamis. AngularJS menurunkan ambang pengembangan untuk aplikasi web yang dinamis ke titik di mana tidak perlu untuk pustaka atau kerangka kerja kelas.
"Zen Tao (konsep)" AngularJS "
Angular percaya bahwa ketika membangun tampilan (UI) dan menulis logika perangkat lunak, kode deklaratif akan jauh lebih baik daripada kode imperatif, meskipun kode imperatif sangat cocok untuk mengekspresikan logika bisnis.
1. Operasi DOM DOCOUPLING DAN LOGIC APLIKASI adalah ide yang sangat bagus, yang dapat sangat meningkatkan tunabilitas kode;
2. Ini adalah ide yang sangat, sangat bagus untuk mengobati pengujian dan pengembangan secara setara. Kesulitan pengujian tergantung sebagian besar pada struktur kode;
3. Decoupling Sisi klien dan server adalah praktik yang sangat baik. Ini dapat memungkinkan kedua belah pihak untuk berkembang secara paralel dan memungkinkan penggunaan kembali kedua belah pihak;
4. Jika kerangka kerja dapat memandu pengembang di seluruh proses pengembangan: dari merancang UI, menulis logika bisnis, dan kemudian menguji, itu akan sangat membantu pengembang;
5. Selalu baik untuk "menyederhanakan kompleks menjadi penyederhanaan, dan menyederhanakannya menjadi nol".
AngularJs dapat membebaskan Anda dari mimpi buruk berikut:
1. Gunakan Callbacks: Penggunaan callback akan mengganggu keterbacaan kode Anda, membuat kode Anda terfragmentasi, dan sulit untuk melihat logika bisnis asli. Adalah hal yang baik untuk menghapus beberapa kode umum, seperti panggilan balik. Secara drastis mengurangi kode yang harus Anda tulis karena desain bahasa JavaScript dapat memungkinkan Anda untuk melihat logika aplikasi Anda lebih jelas.
2. Kode tulis secara manual untuk elemen DOM operasi: Operasi DOM adalah bagian yang sangat mendasar dari aplikasi AJAX, tetapi selalu "rumit" dan rawan kesalahan. Antarmuka UI yang dijelaskan dengan cara deklaratif dapat berubah dengan perubahan status aplikasi, memungkinkan Anda untuk membebaskan diri dari menulis kode operasi DOM tingkat rendah. Dalam sebagian besar aplikasi yang ditulis dalam AngularJS, pengembang tidak perlu lagi menulis kode yang beroperasi sendiri, tetapi Anda masih dapat menulisnya jika Anda mau.
3. Baca dan tulis data ke antarmuka UI: Sebagian besar aplikasi AJAX adalah operasi CRUD. Proses klasik adalah untuk membentuk data server menjadi objek internal, kemudian mengkompilasi objek menjadi formulir HTML, dan pengguna memodifikasi formulir dan kemudian memverifikasi formulir. Jika ada kesalahan, itu akan menampilkan kesalahan, dan kemudian mengatur ulang data menjadi objek internal dan mengembalikannya ke server. Ada terlalu banyak kode untuk diulang dalam proses ini, membuat kode tampaknya selalu menggambarkan seluruh proses eksekusi aplikasi, daripada logika bisnis dan rincian bisnis tertentu.
4. Anda harus menulis banyak kode dasar sebelum Anda mulai: Biasanya Anda perlu menulis banyak kode dasar untuk mengimplementasikan aplikasi "Hello World". Dengan AngularJS, ini akan menyediakan beberapa layanan yang memungkinkan Anda untuk mulai menulis aplikasi dengan mudah, dan layanan ini secara otomatis ditambahkan ke aplikasi Anda dengan injeksi ketergantungan ketergantungan ketergantungan-injeksi-injeksi gaya-seperti-injeksi, yang memungkinkan Anda untuk dengan cepat memasuki pengembangan aplikasi spesifik Anda. Yang benar adalah bahwa Anda dapat sepenuhnya memahami proses inisialisasi pengujian otomatis.