Pengenalan kepada AngularJS HTML Compiler_AngularJS-tutorial js-php.cn

Pengenalan kepada AngularJS HTML Compiler_AngularJS

WBOY

Lepaskan： 2016-05-16 16:28:41

asal

1462 orang telah melayarinya

Ikhtisar

Pengkompil HTML AngularJS membolehkan penyemak imbas mengenali sintaks HTML baharu. Ia membolehkan anda mengaitkan gelagat dengan elemen atau atribut HTML, malah membolehkan anda mencipta elemen baharu dengan gelagat tersuai. AngularJS memanggil sambungan tingkah laku ini sebagai "arahan"

HTML mempunyai banyak struktur perisytiharan untuk mengawal format semasa menulis halaman statik. Sebagai contoh, jika anda ingin memusatkan sekeping kandungan, anda tidak perlu memberitahu penyemak imbas untuk "mencari titik tengah tetingkap dan menggabungkannya dengan bahagian tengah kandungan." Anda hanya perlu menambah atribut align="center" pada elemen yang memerlukan kandungan untuk dipusatkan. Inilah kuasa bahasa deklaratif.

Tetapi bahasa deklaratif juga mempunyai had Salah satu sebabnya ialah anda tidak boleh menggunakannya untuk memberitahu penyemak imbas untuk mengenali sintaks baharu. Contohnya, jika anda tidak mahu kandungan dipusatkan, tetapi 1/3 ke kiri, maka kandungan itu tidak akan dapat melakukannya. Oleh itu, kami memerlukan cara untuk penyemak imbas mempelajari sintaks HTML baharu.

AngularJS disertakan dengan beberapa arahan yang sangat berguna untuk membuat APP. Kami juga berharap anda boleh membuat beberapa arahan anda sendiri yang berguna untuk aplikasi anda sendiri. Arahan lanjutan ini ialah "Bahasa Khusus Domain" di mana anda membuat APP anda.

Proses penyusunan akan berlaku pada bahagian pelayar;

Penyusun

Pengkompil ialah perkhidmatan yang disediakan oleh AngularJS Ia merentasi DOM untuk mencari sifat yang berkaitan dengannya. Keseluruhan proses penyusunan dibahagikan kepada dua peringkat.

1. Susun: Lintas DOM dan kumpulkan semua arahan yang berkaitan untuk menjana fungsi pautan.

2. Pautan: Ikat skop pada arahan dan jana paparan dinamik. Sebarang perubahan pada model skop ditunjukkan dalam paparan dan sebarang operasi pengguna pada paparan juga ditunjukkan dalam model skop. Ini menjadikan model skop satu-satunya perkara yang logik perniagaan anda perlu ambil berat.

Terdapat beberapa arahan, seperti ng-repeat, yang akan mengklon setiap elemen DOM dalam pengumpulan data. Membahagikan keseluruhan proses penyusunan kepada dua fasa: penyusunan dan pemautan, meningkatkan prestasi keseluruhan, kerana templat klon hanya perlu disusun sekali sahaja dan kemudian dipautkan kepada contoh model masing-masing.

Arahan

Arahan

menunjukkan "apa yang perlu dilakukan apabila struktur HTML yang berkaitan memasuki fasa penyusunan." Arahan boleh ditulis dalam nama elemen, dalam atribut, dalam nama kelas CSS, atau dalam ulasan. Di bawah adalah beberapa contoh penggunaan arahan ng-bind dengan fungsi yang sama.

Salin kod Kod adalah seperti berikut:

Arahan

pada asasnya hanyalah fungsi yang perlu dilaksanakan apabila pengkompil menyusun ke dalam DOM yang berkaitan. Anda boleh mendapatkan maklumat lebih terperinci tentang arahan dalam dokumentasi API arahan.

Berikut ialah arahan untuk menjadikan elemen boleh diseret. Perhatikan atribut boleh seret dalam elemen

index.html:

Salin kod Kod adalah seperti berikut:

Seret SAYA

skrip.js:

Salin kod Kod adalah seperti berikut:

angular.module('drag', []).
arahan('boleh diseret', fungsi($dokumen) {
    var startX=0, startY=0, x = 0, y = 0;
    fungsi pulangan(skop, elemen, attr) {
      element.css({
       jawatan: 'saudara',
       jidar: '1px merah pepejal',
       Warna latar belakang: 'kelabu muda',
       kursor: 'penunjuk'
      });
      element.bind('mousedown', function(event) {
        startX = event.screenX - x;
        startY = acara.skrinY - y;
        $document.bind('mousemove', mousemove);
        $document.bind('mouseup', mouseup);
      });

      fungsi mousemove(acara) {
        y = acara.skrinY - mulaY;
        x = event.screenX - startX;
        element.css({
          atas: y 'px',
          kiri: x 'px'
        });
      }

      fungsi mouseup() {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
      }
    }
});

通过加入draggable属性可以让任何HTML元素都实现这个新的行为。我们这种改进年事了浏览器新能力。我们用了一种只要开发者熟悉HTML规则，就会举得很自然的方式扩展了浏览器理解新行为新语法的能力。

理解视图

网上有很多的模板系统。他们大多数都是“将静态的字符模板和数据绑定，将静态的字符模板和数据绑定，第定，我石过innerHTML插入到页面元素中”。

这意味着数据上的任何改变，都会导致数据要重新和模板结合生成新合生成新字字第。中会出现的问题有：需要读取用户输入并和模型的数据结合，需要覆写用户的输入，需要手动管理整个更新过程，缺少丰富的表现形式。

AngularJS则不同，AngularJS编译器使用的是带指令的DOM，而不是字符串模板。它返回的是返回的是佀们数和作用域模型结合就会生成一个动态视图。这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用没有用没有用他也不用覆写用户的输入。更特别的是，Angular的指令不仅仅能使用字符串形式的绑定，还可以使用一些指示行为的结构体。

AngularJS的编译会生成一个“稳定的DOM”.发生改变。这也意味着代码中可以获取到DOM元素的实例引用并注册事件，不用担心这用引用会在模板和数据的结合时丢失。