Apakah AngularJS? Pengenalan kepada AngularJS_AngularJS

Apakah AngularJS?

AngularJS ialah rangka kerja struktur yang direka untuk aplikasi WEB dinamik. Ia membolehkan anda menggunakan HTML sebagai bahasa templat, dan dengan memanjangkan sintaks HTML, anda boleh membina komponen aplikasi anda dengan lebih jelas dan ringkas. Inovasinya ialah dengan menggunakan pengikatan data dan suntikan kebergantungan, ia menjimatkan anda daripada menulis banyak kod. Ini semua dilaksanakan melalui Javascript sebelah pelayar, yang juga menjadikannya disepadukan dengan sempurna dengan mana-mana teknologi sebelah pelayan.

AngularJS direka untuk mengatasi kelemahan HTML dalam membina aplikasi. HTML ialah bahasa perisytiharan yang baik direka untuk paparan teks statik, tetapi ia adalah lemah apabila ia datang untuk membina aplikasi WEB. Jadi saya melakukan beberapa kerja (helah jika anda mahu) untuk mendapatkan penyemak imbas melakukan apa yang saya mahu. formatTarikh

Biasanya, kami menggunakan teknologi berikut untuk menyelesaikan kekurangan teknologi laman web statik dalam membina aplikasi dinamik:

1. Pustaka kelas - Pustaka kelas ialah koleksi fungsi yang boleh membantu anda menulis aplikasi WEB. Kod andalah yang mengawal dan anda sendiri yang menentukan masa untuk menggunakan pustaka. Perpustakaan kelas termasuk: jQuery, dsb.

2. Rangka kerja adalah aplikasi WEB khas yang telah dilaksanakan Anda hanya perlu mengisinya dengan logik perniagaan tertentu. Rangka kerja di sini memainkan peranan utama, memanggil kod anda mengikut logik aplikasi tertentu. Rangka kerja termasuk: kalah mati, sproutcore, dsb.

AngularJS menggunakan pendekatan yang berbeza, cuba mengimbangi kelemahan HTML itu sendiri dalam membina aplikasi. AngularJS membolehkan pelayar mengenali sintaks baharu dengan menggunakan struktur yang kami panggil arahan. Contohnya:

1. Gunakan sintaks {{}} pendakap kerinting untuk mengikat data; 2. Gunakan struktur kawalan DOM untuk mengulang atau menyembunyikan serpihan DOM; 3. Borang sokongan dan pengesahan borang; 4. Keupayaan untuk mengaitkan kod logik kepada elemen DOM yang berkaitan; 5. Keupayaan untuk mengumpulkan HTML kepada komponen yang boleh digunakan semula.


Penyelesaian hujung ke hujung

AngularJS cuba untuk menjadi penyelesaian hujung ke hujung untuk aplikasi WEB. Ini bermakna ia bukan hanya sebahagian kecil daripada aplikasi WEB anda, tetapi penyelesaian hujung ke hujung yang lengkap. Ini akan menjadikan AngularJS sangat "berpendapat" (teks asal adalah pendapat, bermakna tidak banyak cara lain) apabila membina aplikasi CRUD (tambah Cipta, Dapatkan pertanyaan, kemas kini Kemas kini, padam Padam). Walau bagaimanapun, walaupun ia "degil", ia tetap memastikan bahawa "kedegilan"nya hanya pada titik permulaan apabila anda membina aplikasi, dan anda masih mempunyai fleksibiliti untuk berubah. Beberapa ciri cemerlang AngularJS adalah seperti berikut: 1. Semua yang mungkin digunakan untuk membina aplikasi CRUD termasuk: pengikatan data, pengecam templat asas, pengesahan borang, penghalaan, pemautan dalam, penggunaan semula komponen dan suntikan kebergantungan.

2. Ujian termasuk: ujian unit, ujian hujung ke hujung, simulasi dan rangka kerja ujian automatik.

3. Aplikasi benih dengan susun atur direktori dan skrip ujian sebagai titik permulaan.

Kecomelan AngularJS

AngularJS memudahkan pembangunan aplikasi dengan mempersembahkan pembangun dengan tahap abstraksi yang lebih tinggi. Seperti teknik abstraksi lain, beberapa kelenturan hilang. Dengan kata lain, tidak semua aplikasi sesuai untuk AngularJS. Kebimbangan utama AngularJS ialah membina aplikasi CRUD. Nasib baik, sekurang-kurangnya 90% daripada aplikasi WEB adalah aplikasi CRUD. Tetapi untuk memahami apa yang sesuai untuk membina dengan AngularJS, anda perlu memahami perkara yang tidak sesuai untuk membina dengan AngularJS. Sebagai contoh, permainan, editor antara muka grafik, aplikasi dengan operasi DOM yang kerap dan kompleks adalah sangat berbeza daripada aplikasi CRUD, dan ia tidak sesuai untuk dibina dengan AngularJS. Dalam situasi seperti ini mungkin lebih baik untuk menggunakan beberapa teknologi yang lebih ringan dan mudah seperti jQuery.

Contoh AngularJS yang mudah

Berikut ialah aplikasi CRUD biasa yang mengandungi borang. Nilai borang mula-mula disahkan dan kemudian digunakan untuk mengira jumlah nilai, yang akan diformatkan dalam gaya setempat. Berikut ialah beberapa konsep biasa dalam kalangan pembangun yang perlu anda fahami dahulu: 1. Kaitkan model data (model data) dengan paparan (UI); 2. Tulis, baca dan sahkan input pengguna; 3. Kira nilai baharu mengikut model; 4. Setempatkan format output.

index.html:

Salin kod

Kod adalah seperti berikut:

   
       
       
   
   
       

            Invois:
           

           

           
                KuantitiKos
               
                   
                   
               
           
           

---

            Jumlah: {{qty * kos | mata wang}}
       

   

script.js:

复制代码 代码如下:

function InvoiceCntl($scope) {
    $scope.qty = 1;
    $scope.cost = 19.95;
}

ujian hujung ke hujung:

复制代码 代码如下:

it('should show of angular binding', function() {
    jangkakan(mengikat('qty * kos')).toEqual('$19.95');
    input('qty').enter('2');
    input('kos').masukkan('5.00');
    jangkakan(mengikat('qty * kos')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

运行效果：

复制代码 代码如下:

Invois:
Kuantiti  Kos
Jumlah: {{qty * kos | mata wang}}

试一下上面这个例子，然后我们一起来看下这个例子的工作原理。 在``金理。 在``金第`标识符标明这是一个AngularJS应用。这个`ng-app`标识符会使AngularJS**自动初始化**(auto initialize)你的应用。 我们用``标签来加载AngularJS脚本ular：