Setelah secara singkat memperkenalkan kerangka kerja AngularJS, artikel ini menggunakan contoh untuk menunjukkan penggunaan metode interpolasi {{}} dan instruksi NG-Bind.
Tidak seperti JQuery, yang hanya merupakan perpustakaan kelas yang memperkuat dan menyederhanakan pengembangan ujung depan, AngularJS adalah kerangka kerja front-end yang lengkap, sehingga kurva pembelajaran jauh lebih tinggi.
AngularJS memberi saya perasaan bahwa itu mirip dengan kerangka kerja Java, yang menempelkan komponen lain di posisi wadah tengah. Banyak komponen bawaannya sudah dapat memenuhi skenario umum, dan kami dapat memperluas skenario khusus sesuai dengan ide kerangka kerja.
Mari kita mulai dengan konten paling dasar:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html ng-app>
<head>
<meta charset = "UTF-8">
<title> ng-bind directive </iteme>
</head>
<body ng-controller = "hellocontroller">
<div>
<p> Langsung output string literal </p>
Halo {{"world"}}
<Hr>
</div>
<div>
<p> Gunakan placeholder untuk output variabel </p>
Halo {{ucapan}}
<Hr>
</div>
<div>
<p> Gunakan instruksi NG-Bind untuk output variabel </p>
Halo <span ng-bind = "ucapan"> </span>
<Hr>
</div>
<skrip src = "../ lib/angularjs/1.2.26/angular.min.js"> </script>
<script>
function HelloController ($ scope) {
$ scope.greeting = "dunia";
}
</script>
</body>
</html>
NG-APP menyatakan modul AngularJS dan terbatas pada ruang lingkup mendeklarasikan tag HTML.
NG-Controller adalah pengontrol yang menyatakan AngularJS dalam modul. Pengontrol dapat memiliki beberapa pengontrol, tetapi konteksnya terisolasi, dan ruang lingkup pengontrol harus dipersempit sebanyak mungkin.
{{}} adalah sintaks interpolasi dari AngularJS, mirip dengan ekspresi EL $ {} dari JSP. Output pertama adalah karena "dunia" adalah nilai literal, dan program akan menghasilkan secara langsung; Output kedua adalah karena ucapan adalah variabel yang ditentukan dalam pengontrol, sehingga nilai yang sesuai dari variabel juga akan menjadi output, yang juga merupakan dunia; Output ketiga menggunakan instruksi atribut NG-Bind yang dibangun di AngularJS, dan hasil akhirnya setara dengan {{}}, tetapi harap dicatat bahwa instruksi = diikuti oleh string, jangan menulisnya secara tidak benar.
HelloController di JS sesuai dengan instruksi pada tubuh. Parameter entri $ lingkup adalah layanan yang disediakan oleh kerangka kerja, mewakili konteks pengontrol saat ini, dan ada layanan serupa lainnya. Kerangka kerja akan disuntikkan secara otomatis dan kami perlahan -lahan akan memahaminya nanti. Badan Metode hanya memiliki satu baris, dan mendefinisikan variabel pada $ SCOPE, yang merupakan variabel yang dirujuk dalam kode HTML.
Artikel ini sangat sederhana, dan Anda dapat menjalankan kode setelah menyalinnya. Perhatikan bahwa angular.min.js adalah versi terbaru dari cabang 1.2. Kode yang sama tidak dapat berjalan dengan versi 1.3.0. Alasannya tidak diketahui. Mungkin 1.3.0 bukan versi rilis akhir.