cari

Rumah >hujung hadapan web >tutorial js >Pengenalan ringkas kepada nota kajian angularjs_AngularJS

Pengenalan ringkas kepada nota kajian angularjs_AngularJS

WBOY
WBOYasal
2016-05-16 15:38:021005semak imbas

1. Pengenalan kepada 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 ia menggunakan pengikatan data dan suntikan kebergantungan untuk menyelamatkan anda daripada menulis banyak kod. Ini semua dilaksanakan melalui Javascript sebelah pelayar, yang juga menjadikannya disepadukan dengan sempurna dengan mana-mana teknologi sebelah pelayan.

Setelah bercakap banyak, saya rasa anda tidak faham apa-apa. . . Betul ke? Jangan risau, izinkan saya bercakap tentang beberapa cirinya: modulariti, pengikatan data dua hala, suntikan pergantungan dan arahan. Mari kaji ciri-ciri ini di bawah.

2.angularjs adalah berdasarkan konsep MVC

Apa yang dipanggil MVC ialah modul (model data), pandangan (pandangan), pengawal (pengawal)

Sebenarnya, angularjs menggabungkan ketiga-tiga modul ini. Berikut ialah gambar rajah model yang saya lukiskan dahulu:

3. Penjelasan gabungan

Seperti yang dinyatakan di atas, ciri-ciri angularjs ialah: modularisasi, suntikan kebergantungan, pengikatan dua hala dan arahan. Sekarang izinkan saya menerangkannya kepada anda berdasarkan gambar di atas:

Modulariti: Empat petak di bawah penapis, arahan... dalam gambar di atas adalah empat kaedah perwakilan modul (saya akan menerangkan penggunaan dan fungsi setiap fungsi satu demi satu), yang juga boleh difahami Sebagai modul kecil mereka sendiri, setiap modul mempunyai fungsi yang berbeza, tetapi pembahagian kerja adalah jelas dan strukturnya jelas, mencapai modularisasi.

Suntikan kebergantungan: Empat modul kecil yang disebutkan di atas nampaknya bebas, tetapi ia saling bergantung dan boleh merujuk antara satu sama lain untuk mencapai fungsi yang berkuasa (cara rujukan akan diterangkan secara terperinci kemudian) ), ini adalah suntikan kebergantungan.

Arahan: Seperti yang dapat dilihat dari gambar di atas, arahan adalah kaedah arahan dalam gambar. Terdapat banyak arahan terbina dalam dalam angularjs, seperti ng-app (nyatakan skop angularjs), ng-model (takrifkan model data dan laksanakan pengikatan dua hala), ng-repeat (ulang label), ng- tukar ( Pantau sama ada nilai teg telah berubah), dsb., dan arahan di sini adalah fungsi yang paling penting ialah arahan tersuai (sesetengah tutorial juga mengatakan ia adalah lanjutan html).

Ikatan dua hala: Ikatan dua hala ialah modul dan paparan dalam gambar di atas, iaitu pengikatan dua hala data dan pandangan. Arahan model ng baru sahaja disebut akan digunakan.

4. Lihat contoh mudah mengikat dua hala.

index.html:

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </head>
  <body>
    <div> 
      <input type="text" ng-model="text">
      <b>Hello {{text}}</b>
    </div>
  </body>
</html>

Anda boleh membawa kod di atas ke penyemak imbas dan menjalankannya (perhatikan alamat merujuk angularjs Anda akan terkejut apabila mendapati bahawa angularjs benar-benar berkuasa! !

Biar saya terangkan secara ringkas kepada anda tempat yang sukar difahami dalam kod di atas:

ng-app menentukan skop aplikasi, yang bermaksud bahawa keseluruhan kod HTML boleh mengecam angularjs.
ng-model mengikat teks nama model data kepada elemen, dan nilai input input akan disimpan dalam model ini.
{{teks}} Ini ialah cara menulis ungkapan dalam angularjs, iaitu teks di tengah ialah pembolehubah yang sepadan dengan nama model di atas Ia boleh memantau perubahan dalam nilai input dalam masa nyata dan mengemas kini paparan paparan dalam masa nyata

Haha, angularjs agak mudah. ​​Saya harap nota kecil ini dapat membangkitkan minat semua orang terhadap angularjs saya akan terus mengemas kini nota kajian angularjs. Semoga ia membantu semua orang. Jika ada apa-apa yang anda tidak faham tentang nota di atas, tanya saya dan saya pasti akan menjawabnya untuk anda. Saya doakan anda semua hidup bahagia!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis mendalam tentang jsonp protocol principle_jsonArtikel seterusnya：Analisis mendalam tentang jsonp protocol principle_json

Artikel berkaitan

Lihat lagi