Proses operasi dasar templat dan data adalah sebagai berikut:
Halaman Mulai Aplikasi Permintaan Pengguna
Browser pengguna memulai koneksi HTTP ke server, dan kemudian memuat halaman index.html, yang berisi template
Angular dimuat ke halaman, menunggu halaman dimuat, dan mencari arahan NG-APP untuk menentukan batas templat.
Templat traversal sudut, temukan hubungan yang ditentukan dan terikat, dan akan memicu beberapa tindakan kolom: Daftarkan pendengar, lakukan beberapa operasi DOM, dan dapatkan data inisialisasi dari server. Akhirnya, aplikasi akan diluncurkan dan templat akan dikonversi menjadi tampilan DOM
Terhubung ke server untuk memuat data lain yang perlu ditampilkan kepada pengguna
Tampilkan teks
Seseorang menggunakan formulir {{}}, seperti {{ucapan}} tipe kedua ng-bind = "ucapan"
Gunakan tipe pertama, halaman yang tidak ada dapat dilihat oleh pengguna. Disarankan untuk menggunakan jenis halaman indeks kedua, dan halaman yang tersisa dapat menggunakan tipe pertama
Membentuk input
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<title> form </iteme>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<type skrip = "Teks/JavaScript">
function startupController ($ scope) {
$ scope.funding = {startestimate: 0};
computeNeeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ watch ('Funding.Startingestimate', Computeneeded); // Perubahan Model Jam Tangan
}
</script>
</head>
<body>
<bentuk ng-controller = "startupController">
Mulai: <input ng-change = "computeNeedEed ()" ng-model = "funding.startingestimate"> // Memanggil fungsi saat mengubah
Rekomendasi: {{Funding.Needed}}
</form>
</body>
</html>
Dalam beberapa kasus, kami tidak ingin segera bergerak ketika ada perubahan, tetapi kami harus menunggu. Misalnya:
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<title> form </iteme>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<type skrip = "Teks/JavaScript">
function startupController ($ scope) {
$ scope.funding = {startestimate: 0};
computeNeeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ watch ('Funding.Startingestimate', ComputeNeeded); // Watch memonitor ekspresi, dan ketika ekspresi ini berubah, fungsi panggilan balik akan dipanggil
$ scope.requestfunding = function () {
window.alert ("Maaf, dapatkan lebih banyak pelanggan terlebih dahulu.")
};
}
</script>
</head>
<body>
<bentuk ng-submit = "requestFunding ()" ng-controller = "startupcontroller"> // ng-submit
Mulai: <input ng-change = "computeNeeded ()" ng-model = "funding.startingestimate">
Rekomendasi: {{Funding.Needed}}
<button> mendanai startup saya! </button>
</form>
</body>
</html>
Interaksi pengiriman non-bentuk, ambil klik sebagai contoh
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<title> form </iteme>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<type skrip = "Teks/JavaScript">
function startupController ($ scope) {
$ scope.funding = {startestimate: 0};
computeNeeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ watch ('Funding.Startingestimate', Computeneeded);
$ scope.requestfunding = function () {
window.alert ("Maaf, dapatkan lebih banyak pelanggan terlebih dahulu.")
};
$ scope.reset = function () {
$ scope.funding.startesTiate = 0;
};
}
</script>
</head>
<body>
<bentuk ng-controller = "startupController">
Mulai: <input ng-change = "computeNeeded ()" ng-model = "funding.startingestimate">
Rekomendasi: {{Funding.Needed}}
<tombol ng-click = "requestFunding ()"> mendanai startup saya! </button>
<tombol ng-click = "reset ()"> reset </button>
</form>
</body>
</html>
Daftar, tabel, dan elemen berulang lainnya
NG-Repeat akan mengembalikan nomor elemen yang saat ini dirujuk melalui $ index. Kode sampel adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<title> form </iteme>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<type skrip = "Teks/JavaScript">
var student = [{name: 'mary', skor: 10}, {name: 'jerry', skor: 20}, {name: 'jack', skor: 30}]
Function StudentListController ($ scope) {
$ scope.students = siswa;
}
</script>
</head>
<body>
<Table ng-controller = "StudentListController">
<tr ng-repeat = 'siswa dalam siswa'>
<td> {{$ index+1}} </td>
<td> {{student.name}} </td>
<td> {{student.score}} </td>
</tr>
</boable>
</body>
</html>
Sembunyikan dan tunjukkan
Fungsi NG-Show dan NG-hide setara, tetapi efek operasinya justru sebaliknya.
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<script>
Fungsi DeathRayMenucontroller ($ scope) {
$ scope.menustate = {show: false}; // Jika Anda berubah menjadi menustate.show = false, efeknya tidak akan ditampilkan. Di masa depan, masukkan variabel di {}
$ scope.togglemenu = function () {
$ scope.menustate.show =! $ scope.menustate.show;
};
}
</script>
</head>
<body>
<Div ng-controller = 'DeathRayMenucontroller'>
<tombol ng-click = 'togglemenu ()'> Toggle menu </button>
<ul ng-show = 'menustate.show'>
<li ng-click = 'stun ()'> stun </li>
<li ng-click = 'Disintegrate ()'> Disintegrate </li>
<li ng-click = 'erase ()'> hapus dari history </li>
</ul>
</div>
</body>
</html>
Kelas dan gaya CSS
Baik NG-Class dan NG-style dapat menerima ekspresi, dan hasil eksekusi ekspresi mungkin salah satu dari nilai-nilai berikut:
String mewakili nama kelas CSS, dipisahkan oleh spasi
Array Nama Kelas CSS
Pemetaan Nama Kelas CSS ke Nilai Boolean
Contoh kode adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<type style = "text/css">
.Error {
Latar Belakang: Merah;
}
.peringatan {
Latar Belakang-Color: Kuning;
}
</tyle>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<script>
function headercontroller ($ scope) {
$ scope.iserror = false;
$ scope.iswarning = false;
$ scope.showerror = function () {
$ scope.messageText = "error !!!"
$ scope.iserror = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function () {
$ scope.messageText = "peringatan !!!"
$ scope.iswarning = true;
$ scope.iserror = true;
}
}
</script>
</head>
<body>
<Div ng-controller = "headercontroller">
<div ng-class = "{error: iSeRror, Warning: isWarning}"> {{messageText}} </div>
<tombol ng-click = "showerror ()"> kesalahan </button>
<tombol ng-click = "showwarning ()"> peringatan </button>
</div>
</body>
</html>
Pemetaan Nama Kelas CSS ke Nilai Boolean
Kode sampel adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<type style = "text/css">
.Seleksi {
Latar Belakang: Lightgreen;
}
</tyle>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<script>
Function Restaurant ($ scope) {
$ scope.list = [{name: "the gandome", cuisine: "bbq"}, {name: "green", cuisine: "salad"}, {name: "house", cuisine: 'Seafood'}];
$ scope.selectrestaurant = function (baris) {
$ scope.selectedrow = baris;
}
}
</script>
</head>
<body>
<Table ng-controller = "Restaurant">
<tr ng-repeat = 'Restaurant in list' ng-click = 'selectrestaurant ($ index)' ng-class = '{dipilih: $ index == SelectedRow}'> // Peta nama kelas CSS ke nilai boolean. Ketika nilai atribut model SelectedRow sama dengan $ indeks di NG-repeat, gaya SelectD akan diatur ke baris itu
<td> {{Restaurant.name}} </td>
<td> {{Restaurant.cuisine}} </td>
</tr>
</boable>
</body>
</html>