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:

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

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

<tr ng-repeat="row in board.grid"> <p> angularjs command </p>
<h2> </h2>
 <p> adalah arahan <code>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
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
 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

<code class="language-html"><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, <p> bermakna kita memerlukan modul "ng" AngularJS, yang menyediakan perkhidmatan teras angularjs. <code>['ng']</code>
</p> Kami menyesuaikan HTML untuk menggunakan arahan <p> mengarahkan kami untuk menggunakan modul aplikasi kami. <code>ng-app</code>
</p>
<pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>
 
 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. 


<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
 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

<code class="language-html"><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 <p>. Harta <code>$scope</code> kami akan mencari pembolehubah <code>ng-repeat</code> dalam skop <code>BoardCtrl</code>, jadi mari kita tentukannya: <code>board</code>
</p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">app.controller "BoardCtrl", ($scope) -></code>
 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

<code class="language-html"><div ng-controller="BoardCtrl">
  <table>
    <tr ng-repeat="row in board.grid">
      ...
    </tr>
  </table>
</div></code>
 
 Tambah kilang 
 
 kemudian kita boleh menentukan kilang 
  yang hanya mengembalikan kelas , yang membolehkannya disuntik ke dalam pengawal kami. Board

<code class="language-javascript">app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board</code>
 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. 
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
 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: 
<code class="language-html"><tr ng-repeat="row in board.grid">
<p> </p>
<h2> Pengikatan data bidirectional </h2> 
<p> Baiklah, jadi sekarang kita telah mengemas kini model papan, kita perlu mengemas kini paparan, bukan? </p>
<p> tidak! Pengikatan data AngularJS adalah <em> Bidirectional </em> -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 <code>Board</code> kami, dan kandungan <code><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"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>
<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
 Jika 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;code class=&quot;language-html&quot;&gt;&lt;div ng-app=&quot;ngOughts&quot;&gt;
&lt;p&gt; tambahkannya ke pengawal kami dan kami akan memanggil &lt;code&gt;reset&lt;/code&gt; 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. &lt;/p&gt;
&lt;p&gt; marilah kita benar -benar memamerkan kemenangan kita: &lt;/p&gt;
&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;app.controller &quot;BoardCtrl&quot;, ($scope) -&gt;&lt;/code&gt;</pre>
Perintah <p> <code>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.