AngularJS

mata teras

AngularJS, rangka kerja JavaScript yang dibangunkan oleh Google, membolehkan pemaju membuat kod front-end tanpa perlu memanipulasi model objek dokumen (DOM). Ini boleh dicapai dengan menentukan pandangan dan pengawal dinamik menggunakan arahan dan mengikat data.
AngularJS menggunakan struktur MVC (model-view-controller). Model ini ditakrifkan oleh modul sudut dan pengawal yang disambungkan ke HTML melalui arahan. Ini membolehkan pengikatan data dua hala, di mana perubahan dalam model secara automatik mengemas kini paparan dan sebaliknya.
Dalam AngularJS, Arahan memperluaskan perbendaharaan kata HTML, menyediakan templat yang lebih dinamik dan berkuasa. Contohnya termasuk NG-Repeat untuk melelehkan set, NG-klik untuk pemprosesan acara, dan NG-show untuk rendering bersyarat.
Walaupun AngularJS telah menerima beberapa kritikan untuk keluk pembelajaran dan penggunaan atribut HTML yang tidak standard, ia memberikan pendekatan yang unik untuk pembangunan web yang menggalakkan penciptaan aplikasi yang lebih komposis dan boleh diuji. Memisahkan kebimbangan reka bentuk dengan MVC mengurangkan jumlah kod yang diperlukan untuk menyambungkan komponen.

AngularJS dengan cepat menjadi salah satu kerangka JavaScript yang paling popular dengan falsafah lanjutannya. Dengan sokongan dan pembangunan Google, pendekatan AngularJS ke hadapan mungkin kelihatan agak pelik pada mulanya, tetapi anda akan tertanya-tanya mengapa anda menggunakan pendekatan lain sebelum ini. AngularJS membolehkan pemaju menulis kod front-end tanpa perlu memanipulasi DOM secara langsung. Tutorial ini akan membimbing anda melalui proses dengan membina aplikasi yang mentakrifkan pandangan dan pengawal dinamik menggunakan arahan dan pengikatan data. Jika anda sudah biasa dengan Coffeescript (tidak diperlukan oleh AngularJS), anda akan lebih berminat dengan artikel ini, tetapi menguasai asas -asas JavaScript sudah cukup. Anda mungkin telah melihat banyak aplikasi yang perlu dilakukan sebelum ini, jadi mari kita membina sesuatu yang menarik-tic toe! Kami akan bermula dengan papan penanda. AngularJS mendakwa untuk memperluaskan perbendaharaan kata HTML dan bukan menyembunyikan DOM di belakang JavaScript. Ideanya ialah HTML sendiri cukup baik, tetapi kita boleh menambah beberapa elemen dan sifat untuk membina bahasa templat yang kuat dan dinamik yang sudah anda kenal. Papan kami hanyalah jadual yang mudah. Jika kita program dengan keinginan yang baik, kita benar -benar hanya perlu melangkah ke atas papan dan mengeluarkan satu sel untuk setiap sel. Kod sebenar sangat dekat dengan idea kami:

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

tunggu, apakah unsur -unsur pelik dan kurungan janggut? Mari ambil langkah mundur dan ambil langkah demi langkah.

<tr ng-repeat="row in board.grid">

angularjs command

adalah arahan ng-repeat angularjs dan merupakan salah satu sambungan HTML yang disediakan. Ia membolehkan kami melangkah ke atas koleksi dan memberi instantiate templat untuk setiap projek. Dalam contoh ini, kami memberitahu AngularJS untuk mengulangi setiap baris dalam sifat objek board. Katakan grid adalah array dua dimensi, dan <tr> adalah objek pada tetingkap. <code>grid

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

Kemudian, kita melelehkan sel -sel dalam baris menggunakan arahan ng-repeat menggunakan angularjs pengikatan data - kandungan akan digantikan dengan atribut <td> sel yang sama. <code>marker Setakat ini, sangat mudah, bukan? Anda dapat memahami dengan segera bagaimana tag yang dihasilkan. Kami tidak perlu menggunakan alat kelas berat seperti jQuery untuk mencipta unsur -unsur baru dan mengisi mereka, kami hanya perlu menjelaskan templat kami. Ini lebih mudah untuk dikekalkan - kita hanya melihat HTML untuk mengetahui dengan tepat bagaimana DOM akan berubah tanpa menjejaki beberapa kod JavaScript yang samar -samar yang kita tidak ingat menulis.

Sekarang kita dapat memvisualisasikan keadaan lembaga, dan kami akan menyediakannya dengan sumber data dengan menentukan kandungan sebenar

. board

<tr ng-repeat="row in board.grid">

Kami mula -mula menambah beberapa kod JavaScript untuk menentukan modul AngularJS untuk permohonan kami. Parameter pertama adalah nama aplikasi,

bermakna kita memerlukan modul "ng" AngularJS, yang menyediakan perkhidmatan teras angularjs. ['ng']

Kami menyesuaikan HTML untuk menggunakan arahan

mengarahkan kami untuk menggunakan modul aplikasi kami. ng-app

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

mvc - Tentukan pengawal dan pandangan

Ciri MVC AngularJS dimainkan di sini. Kami menambah beberapa kod JS untuk memanggil fungsi pengawal pada modul aplikasi kami yang baru dibuat, lulus nama pengawal dan fungsi yang melaksanakannya.

app = angular.module('ngOughts', ['ng'])

Dalam kes ini, fungsi pengawal kami menerima parameter

, iaitu kebergantungan $scope pengawal kami. AngularJS menggunakan Suntikan Ketergantungan untuk memberi kita objek perkhidmatan ini, menyimpulkan objek yang betul dari nama parameter fungsi (terdapat juga sintaks alternatif yang juga membolehkan pengorbanan).

kami kini menambah arahan

ke templat HTML untuk menyambungkannya ke pengawal kami: ng-controller

<div ng-app='ngOughts'>

Sama, ia semudah harta dengan nama pengawal. Perkara menarik berlaku di sini - Unsur -unsur yang bersarang di dalam tag badan kita kini boleh diakses dengan objek perkhidmatan

. Harta $scope kami akan mencari pembolehubah ng-repeat dalam skop BoardCtrl, jadi mari kita tentukannya: board

app.controller "BoardCtrl", ($scope) ->

kami membuat kemajuan sekarang. Kami menyuntik

ke dalam pengawal kami, memberi instantiate dan menjadikannya tersedia dalam skop Board. BoardCtrl

mari kita teruskan dan melaksanakan kelas

yang mudah. Board

  
    <tr ng-repeat="row in board.grid">
      ...
    

Tambah kilang

kemudian kita boleh menentukan kilang

yang hanya mengembalikan kelas , yang membolehkannya disuntik ke dalam pengawal kami. Board

app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board

boleh ditakrifkan secara langsung dalam fungsi kilang, dan juga meletakkan

pada objek tetingkap, tetapi menjaga ia bebas di sini membolehkan kita menguji Board secara bebas dari sudut dan menggalakkan kebolehgunaan semula. Board

Jadi sekarang kita mempunyai papan catur kosong. Perkara menarik, bukan? Mari kita tetapkan supaya mengklik sel akan meletakkan tanda di sana.

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

kami menambah arahan <td> kepada setiap elemen <code>ng-click. Apabila kita mengklik sel meja, kita akan memanggil fungsi board pada playCell menggunakan objek sel yang diklik. Isi Board pelaksanaan:

<tr ng-repeat="row in board.grid">

Pengikatan data bidirectional

Baiklah, jadi sekarang kita telah mengemas kini model papan, kita perlu mengemas kini paparan, bukan?

tidak! Pengikatan data AngularJS adalah Bidirectional -Ia memerhatikan perubahan dalam model dan menyebarkannya kembali kepada pandangan. Begitu juga, mengemas kini paparan akan mengemas kini model yang sepadan. Tag kami akan dikemas kini dalam grid dalaman Board kami, dan kandungan <td> akan diubah segera untuk mencerminkan ini. <p> Ini menghapuskan banyak kod boilerplate yang rapuh, yang bergantung kepada pemilih yang perlu anda tulis sebelum ini. Anda boleh memberi tumpuan kepada logik aplikasi dan tingkah laku dan bukannya saluran paip. </p> <p> Ia akan menjadi lebih baik jika kita tahu seseorang akan menang. Mari melaksanakannya. Kami akan meninggalkan kod yang memeriksa kriteria yang menang di sini, tetapi ia wujud dalam kod akhir. Katakan apabila kita mencari pemenang, kita akan menetapkan atribut yang menang pada setiap sel yang membentuk pemenang. </p> <p> maka kita boleh menukar <code><td> kita kepada sesuatu seperti ini: <pre class='brush:php;toolbar:false;'>&lt;td ng-repeat=&quot;cell in row&quot;&gt; {{ cell.marker }} &lt;/td&gt;</pre> <pre class='brush:php;toolbar:false;'>app = angular.module('ngOughts', ['ng'])</pre> <p> Jika <code>winning benar, ng-class akan memohon kelas CSS "menang" untuk <td>, mari kita tetapkan latar belakang hijau yang menyenangkan untuk meraikan kemenangan kami. Anda mengatakan anda akan mempunyai permainan lain? Kami memerlukan butang Papan Reset: <pre class='brush:php;toolbar:false;'>&lt;div ng-app='ngOughts'&gt;</pre> <p> tambahkannya ke pengawal kami dan kami akan memanggil <code>reset apabila butang diklik. Penanda lembaga akan dibersihkan, semua kelas CSS akan dibersihkan, dan kami bersedia untuk memulakannya semula - tidak perlu kami mengemas kini elemen DOM.

marilah kita benar -benar memamerkan kemenangan kita:

app.controller "BoardCtrl", ($scope) ->

Perintah

ng-show membolehkan kami memaparkan elemen <h1></h1> apabila permainan menang, dan pengikatan data membolehkan kami memasukkan tag pemenang. Mudah dan ekspresif.

3

Perlu diperhatikan bahawa kebanyakan kod kami berkaitan dengan kod JavaScript lama biasa. Ini disengajakan - tidak memanjangkan objek kerangka, hanya menulis dan memanggil kod JS. Pendekatan ini membantu membuat aplikasi yang lebih mudah untuk menggabungkan dan lebih mudah untuk diuji, yang merasakan ringan. Kebimbangan reka bentuk kami dipisahkan oleh MVC, tetapi kami tidak perlu menulis banyak kod untuk menyambungkannya bersama -sama.

Walau bagaimanapun, AngularJS bukan tanpa batasan. Ramai yang mengadu tentang dokumentasi rasmi dan lengkung pembelajaran yang agak curam, ada yang bimbang tentang SEO, dan yang lain hanya membenci menggunakan atribut dan unsur-unsur HTML yang tidak standard.

Walau bagaimanapun, terdapat penyelesaian kepada masalah ini, dan pendekatan unik AngularJS untuk pembangunan web pasti bernilai masa untuk diterokai.

Anda boleh melihat kesan sebenar kod akhir pada Plunkr, atau memuat turunnya dari GitHub.

Komen dalam artikel ini telah ditutup. Ada soalan mengenai AngularJS? Mengapa tidak mengemukakan soalan di forum kami?

Soalan Lazim Mengenai Arahan AngularJS dan Data Mengikat

Apakah perbezaan antara arahan dan komponen AngularJS?

Arahan dan komponen AngularJS adalah ciri -ciri yang kuat dari kerangka AngularJS. Arahan membolehkan anda membuat elemen dan sifat HTML yang boleh diguna semula, sementara komponen adalah arahan khas yang menggunakan konfigurasi yang lebih mudah. Komponen sesuai untuk membina struktur aplikasi berasaskan komponen, yang lebih moden dan digunakan secara meluas dalam pembangunan front-end hari ini. Walau bagaimanapun, arahan lebih fleksibel dan boleh mengendalikan DOM secara langsung, yang komponen tidak boleh dilakukan.

Bagaimana data mengikat dalam angularjs berfungsi?

Pengikatan data dalam AngularJS adalah penyegerakan data automatik antara model dan komponen paparan. Angularjs melaksanakan data yang mengikat dengan cara yang membolehkan anda merawat model anda sebagai satu sumber fakta dalam aplikasi anda. Pandangan itu sentiasa menjadi unjuran model. Apabila model berubah, pandangan mencerminkan perubahan dan sebaliknya.

Bolehkah anda menerangkan perbezaan antara pengikatan data satu arah dan mengikat data dua hala?

Pengikatan data satu arah adalah aliran data mudah dari model ke pandangan atau dari pandangan ke model. Ini bermakna jika model keadaan berubah, pandangan tidak akan dikemas kini. Sebaliknya, pengikatan data bidirectional bermakna bahawa jika model keadaan berubah, paparan akan dikemas kini; Ini membolehkan kesan masa nyata, yang bermaksud perubahan (seperti input pengguna) akan segera ditunjukkan dalam keadaan model.

Bagaimana untuk membuat arahan tersuai di AngularJS?

Untuk membuat arahan tersuai di AngularJS, anda perlu menggunakan fungsi

. Anda boleh menamakan arahan anda dan kemudian membuat fungsi kilang yang akan menjimatkan semua pilihan arahan. Fungsi kilang disuntik menggunakan ketergantungan (jika ada), dan kemudian ia mengembalikan objek yang mentakrifkan pilihan arahan. .directive

Apakah skop pengasingan dalam arahan AngularJS?

Skop pengasingan dalam Arahan AngularJS membolehkan anda membuat skop baru untuk arahan. Ini bermakna apa -apa perubahan dalam skop arahan tidak akan menjejaskan skop induk dan sebaliknya. Ini sangat berguna apabila anda ingin membuat komponen yang boleh digunakan semula dan modular.

Bagaimana menggunakan transkripsi dalam arahan AngularJS?

Transkripsi adalah ciri dalam AngularJS yang membolehkan anda memasukkan kandungan tersuai ke dalam arahan. Dengan menetapkan pilihan

untuk transclude dalam objek Definisi Arahan, anda boleh menggunakan arahan true untuk memasukkan kandungan tersuai dalam templat arahan. ng-transclude

Apakah fungsi pautan dalam arahan AngularJS?

Fungsi pautan digunakan untuk arahan AngularJS untuk memanipulasi DOM atau menambah pendengar acara. Ia dilaksanakan selepas mengkloning templat. Fungsi ini biasanya digunakan untuk melaksanakan tugas seperti menetapkan pengendali acara DOM, memantau perubahan dalam sifat model, dan mengemas kini DOM.

Bagaimana menggunakan fungsi pengawal dalam arahan AngularJS?

Fungsi pengawal adalah pembina JavaScript yang digunakan untuk meningkatkan skop AngularJS. Apabila pengawal dilampirkan ke DOM melalui arahan ng-controller, AngularJS meniru objek pengawal baru menggunakan pembina pengawal yang ditentukan. Subscope baru akan diwujudkan dan diberikan kepada pengawal sebagai parameter suntikan sebagai pembina $scope.

Apakah perbezaan antara "@", "=", dan "&" dalam pilihan skop arahan?

Simbol -simbol ini digunakan untuk mengikat data ke skop arahan. "@" digunakan untuk mengikat rentetan, "=" digunakan untuk mengikat model bidirectional, dan "&" digunakan untuk mengikat kaedah. Mereka membolehkan anda mengasingkan skop, menjadikan arahan anda lebih modular dan boleh diguna semula.

Bagaimana untuk menguji arahan AngularJS saya?

AngularJS menyediakan modul yang dipanggil ngMock yang membolehkan anda menyuntik dan mengejek perkhidmatan AngularJS dalam ujian unit. Anda boleh menggunakannya untuk menguji arahan anda. Anda juga boleh menggunakan rangka kerja ujian lain seperti Jasmine atau Mocha dengan ngMock untuk menulis dan menjalankan ujian.

Atas ialah kandungan terperinci AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!