Ekspresi AngularJS
AngularJS menggunakan ekspresi untuk mengikat data ke HTML.
Ekspresi AngularJS ditulis dalam kawat gigi ganda: {{ekspresi}} .
Ekspresi AngularJS mengikat data ke HTML, yang mirip dengan arahan NG-bind .
AngularJS akan "mengeluarkan" data di lokasi di mana ekspresi ditulis.
Ekspresi AngularJS sangat mirip dengan ekspresi JavaScript : mereka dapat berisi literal, operator, dan variabel.
Instance {{5 + 5}} atau {{firstName + "" + lastName}}
Contoh kode:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div ng-app><p>My first expression: {{ 5 + 5 }} </p> </div> </body> </html>Hasil Menjalankan:
Ekspresi pertama saya: 10
Angka AngularJS
Nomor AngularJS seperti nomor JavaScript:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <skrip src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv n ng-app = ""> </script> </head> <body> <dv n ng-app = ""> </script> </head> <body> <dv n ng-app = "" "> </script> </head> <body> <body>" coP = "" "" "</script> </head> <body> <body>" piPS = "" "" "" "" " Harga: {{kuantitas * biaya}} </p> </div> </body> </html>Hasil Menjalankan:
Harga Total: 5
Contoh yang sama menggunakan NG-bind:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <skrip src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv n ng-app = ""> </script> </head> <body> <dv n ng-app = ""> </script> </head> <body> <dv n ng-app = "" "> </script> </head> <body> <body>" coP = "" "" "</script> </head> <body> <body>" piPS = "" "" "" "" " Harga: <span ng-bind = "kuantitas * biaya"> </span> </p> </div> </body> </html>
Hasil Menjalankan:
Harga Total: 5
Catatan: Menggunakan NG-init tidak terlalu umum. Anda akan belajar cara yang lebih baik untuk menginisialisasi data dalam bab pengontrol.
String AngularJS
String AngularJS seperti string JavaScript:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv-app-app = ""> </script> </head> <dev> ng-init = "firstName = 'John'; lastName = 'doe'"> <p> Nama: {{firstName + "" + LastName}} </p> </div> </body> </html>Hasil Menjalankan:
Nama: John Doe
Contoh yang sama menggunakan NG-bind:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv-app-app = ""> </script> </head> <dev> ng-init = "firstName = 'John'; lastName = 'doe'"> <p> Nama: <span ng-bind = "FirstName + '' + LastName"> </span> </p> </div> </body> </html>
Hasil Menjalankan:
Nama: John Doe
Objek AngularJS
Objek AngularJS seperti objek JavaScript:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv-app-app = ""> </script> </head> <dev> ng-init = "person = {firstName: 'John', lastName: 'doe'}"> <p> Nama belakang adalah {{person.LastName}} </p> </div> </body> </html>Hasil Menjalankan:
Bernama doe
Contoh yang sama menggunakan NG-bind:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv-app-app = ""> </script> </head> <dev> ng-init = "person = {firstName: 'John', lastName: 'doe'}"> <p> Nama belakang adalah <span ng-bind = "person.lastname"> </span> </p> </div> </body> </html>Hasil Menjalankan:
Bernama doe
Array AngularJS
Array AngularJS seperti array JavaScript:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv-app-app = ""> </script> </head> <dev> ng-init = "point = [1,15,19,2,40]"> <p> Nilai ketiga adalah {{point [2]}} </p> </div> </body> </html>Hasil Menjalankan:
Nilai ketiga adalah 19
Contoh yang sama menggunakan NG-bind:
Contoh kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <dv-app-app = ""> </script> </head> <dev> ng-init = "point = [1,15,19,2,40]"> <p> Nilai ketiga adalah <span ng-bind = "point [2]"> </span> </p> </div> </body> </html>
Hasil Menjalankan:
Nilai ketiga adalah 19
Ekspresi AngularJS dan Ekspresi JavaScript
Mirip dengan ekspresi JavaScript, ekspresi AngularJS dapat berisi huruf, operator, dan variabel.
Tidak seperti ekspresi JavaScript, ekspresi AngularJS dapat ditulis dalam HTML.
Tidak seperti ekspresi JavaScript, ekspresi AngularJS tidak mendukung penilaian, loop, dan pengecualian bersyarat.
Tidak seperti ekspresi JavaScript, ekspresi AngularJS mendukung filter.
Di atas adalah kompilasi bahan ekspresi AngularJS. Kami akan terus menambahkannya nanti. Saya berharap ini dapat membantu mempelajari angularjs teman sekelas.