Atribut SRC dan HREF
Dalam AngularJS, SRC harus ditulis sebagai NG-SRC, dan HREF harus ditulis sebagai NG-HREF misalnya:
Salinan kode adalah sebagai berikut:
<img ng-src = "/gambar/kucing/{{favoritecat}}">
<a ng-href = "/shop/category = {{number}}"> Beberapa teks </a>
ekspresi
Operasi matematika sederhana, operasi perbandingan, operasi boolean, operasi bit, array referensi, dan simbol objek dapat dilakukan dalam templat. Meskipun kita dapat melakukan banyak hal dengan ekspresi, ekspresi dieksekusi menggunakan interpreter khusus (bagian dari sudut), daripada menggunakan fungsi JavaScript eval (), sehingga memiliki keterbatasan yang hebat.
Meskipun ekspresi di sini lebih ketat daripada JavaScript dalam banyak hal, mereka memiliki toleransi kesalahan yang lebih baik terhadap tidak terdefinisi dan nol. Jika kesalahan ditemui, templat hanya tidak menunjukkan apa -apa dan tidak melempar kesalahan NullpointerException. Misalnya:
Salinan kode adalah sebagai berikut:
<Div ng-controller = 'somecontroller'>
<div> {{computer () /10}} </div> // Meskipun legal, ini menempatkan logika bisnis ke dalam templat, dan pendekatan ini harus dihindari
</div>
Bedakan antara UI dan tanggung jawab pengontrol
Pengontrol terikat pada fragmen DOM tertentu, yang perlu mereka kelola. Ada dua metode utama untuk mengaitkan pengontrol ke simpul DOM. Salah satunya dinyatakan melalui NG-controller dalam templat, dan yang kedua adalah mengikatnya ke fragmen template DOM yang dimuat secara dinamis melalui perutean. Template ini disebut tampilan. Kami dapat membuat pengontrol bersarang, mereka dapat berbagi model dan fungsi data dengan mewarisi struktur angka. Sarang nyata terjadi pada objek $ scope. Melalui mekanisme pewarisan asli internal, $ ruang lingkup objek pengontrol induk akan diteruskan ke internal bersarang $ lingkup (semua properti, termasuk fungsi). Misalnya:
Salinan kode adalah sebagai berikut:
<Div ng-controller = "ParentController">
<Div ng-controller = "childController"> ... </div>
</div>
Ekspos Data Model Menggunakan $ SCOPE
Anda dapat menampilkan atribut pembuatan $ SCOPE, seperti $ scope.count = 5. Anda juga dapat secara tidak langsung membuat model data melalui templat itu sendiri.
Lulus ekspresi. Misalnya
Salinan kode adalah sebagai berikut:
<tombol ng-click = 'count = 3'> atur hitungan ke tiga </button>
Menggunakan NG-model pada item formulir
Mirip dengan ekspresi, parameter model yang ditentukan pada model NG juga berfungsi di dalam pengontrol luar. Satu-satunya perbedaan adalah bahwa ini menciptakan hubungan pengikatan dua arah antara item formulir dan model yang ditentukan.
Pantau perubahan dalam model data menggunakan jam tangan
Tanda Tangan Fungsi $ Watch adalah: $ Watch (Watchfn, WatchAction, DeepWatch)
WatchFN adalah string dengan ekspresi atau fungsi sudut yang mengembalikan nilai saat ini dari model data yang dipantau. WatchAction adalah fungsi atau ekspresi yang dipanggil saat WatchFN berubah. Tanda tangan fungsinya adalah:
Fungsi (newValue, oldValue, Scope) DeepWatch Jika diatur ke true, parameter boolean opsional ini akan memerintahkan sudut untuk memeriksa apakah setiap properti dari objek yang dipantau telah berubah. Jika Anda memantau nilai sederhana untuk memantau elemen dalam array, atau semua atribut pada objek, alih -alih nilai, Anda dapat menggunakan parameter ini. Perhatikan bahwa sudut perlu melintasi array atau objek. Jika set lebih besar, maka operasi akan lebih rumit.
Fungsi $ Watch mengembalikan fungsi. Ketika Anda tidak perlu menerima pemberitahuan perubahan, Anda dapat menggunakan fungsi yang dikembalikan untuk keluar dari monitor.
Jika kita perlu memantau properti dan kemudian keluar dari pemantauan, kita dapat menggunakan kode berikut: var dereg = $ scope. $ Watch ('somemodel.someproperty', callbackonchange ());
... Dereg ();
Kode contoh adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<title> keranjang belanja Anda </iteme>
<type skrip = "Teks/JavaScript">
fungsi cartcontroller ($ scope) {
$ scope.bill = {};
$ scope.items = [
{title: 'cat pot', kuantitas: 8, harga: 3.95},
{title: 'Polka Dots', Kuantitas: 17, Harga: 12.95},
{title: 'Pebbles', Kuantitas: 5, Harga: 6.95}
];
$ scope.totalcart = function () {
var total = 0;
untuk (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i] .price * $ scope.items [i]. Quantity;
}
total pengembalian;
}
$ scope.subtotal = function () {
return $ scope.totalcart () - $ scope.bill.discount;
}
Fungsi CalculatedIscount (NewValue, OldValue, SCOPE) {
$ scope.bill.discount = newValue> 100? 10: 0;
} // fungsi WatchAction di sini
$ scope. $ watch ($ scope.totalcart, dihitungcount); // fungsi arloji di sini
}
</script>
</head>
<body>
<Div ng-controller = "cartcontroller">
<Div ng-repeat = 'item in item'>
<span> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<span> {{item.price | Mata uang}} </span>
<span> {{item.price * item.quantity | Mata uang}} </span>
</div>
<div> Total: {{totalCart () | Mata uang}} </div>
<div> diskon: {{bill.discount | Mata uang}} </div>
<verv> subtotal: {{subtotal () | Mata uang}} </div>
</div>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
</body>
</html>
Arloji di atas memiliki masalah kinerja. Fungsi yang dihitung dieksekusi 6 kali, tiga di antaranya karena loop rusak. Setiap kali loop dililitkan, data tersebut diserahkan kembali.
Di bawah ini adalah kode yang dimodifikasi
Salinan kode adalah sebagai berikut:
<html ng-app>
<head>
<title> keranjang belanja Anda </iteme>
<type skrip = "Teks/JavaScript">
fungsi cartcontroller ($ scope) {
$ scope.bill = {};
$ scope.items = [
{title: 'cat pot', kuantitas: 8, harga: 3.95},
{title: 'Polka Dots', Kuantitas: 17, Harga: 12.95},
{title: 'Pebbles', Kuantitas: 5, Harga: 6.95}
];
var totalcart = function () {
var total = 0;
untuk (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i] .price * $ scope.items [i]. Quantity;
}
$ scope.bill.totalcart = total;
$ scope.bill.discount = Total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
}
$ scope. $ watch ('item', totalcart, true); // hanya menggunakan arloji untuk mengubah item
}
</script>
</head>
<body>
<Div ng-controller = "cartcontroller">
<Div ng-repeat = 'item in item'>
<span> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<span> {{item.price | Mata uang}} </span>
<span> {{item.price * item.quantity | Mata uang}} </span>
</div>
<verv> Total: {{bill.totalcart | Mata uang}} </div>
<div> diskon: {{bill.discount | Mata uang}} </div>
<verv> subtotal: {{bill.subtotal | Mata uang}} </div>
</div>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
</body>
</html>
Untuk array ITMS yang besar, jika hanya atribut tagihan yang dihitung ulang setiap kali halaman ditampilkan dalam sudut, kinerjanya akan jauh lebih baik. Kami dapat mencapai ini dengan membuat fungsi $ watch dengan WatchFN.
Salinan kode adalah sebagai berikut:
$ scope. $ watch (
var totalcart = function () {
var total = 0;
untuk (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i] .price * $ scope.items [i]. Quantity;
}
$ scope.bill.totalcart = total;
$ scope.bill.discount = Total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
});
Pantau banyak hal
Jika Anda ingin memantau beberapa properti atau objek dan menjalankan fungsi ketika salah satu dari mereka berubah, Anda memiliki dua opsi dasar:
Pantau nilai setelah menghubungkan properti ini
Masukkan mereka ke dalam array atau objek, dan kemudian berikan nilai ke parameter DeepWatch
Jelaskan secara terpisah:
Dalam kasus pertama, jika ada objek hal -hal dalam ruang lingkup Anda, ia memiliki dua properti A dan B, dan ketika kedua properti berubah, Anda perlu menjalankan fungsi CallMe (), Anda dapat memantau kedua properti ini pada saat yang sama $ SCOPE. $ Watch ('Things.a + Things.B', CallMe (...));
Ketika daftar sangat panjang, Anda perlu menulis fungsi untuk mengembalikan nilai setelah koneksi.
Dalam kasus kedua, Anda perlu memantau semua properti dari objek hal -hal, Anda dapat melakukan ini:
Salinan kode adalah sebagai berikut:
$ scope. $ watch ('Things', callme (...), true);
Mengatur dependensi menggunakan modul
Penyedia (Nama, Objek atau Konstruktor ()) Deskripsi: Layanan yang dapat dikonfigurasi, membuat logika relatif kompleks. Jika Anda meneruskan objek sebagai parameter, maka objek objek harus memiliki fungsi bernama $ get, yang perlu mengembalikan nama layanan. Jika tidak, AngularJS akan berpikir bahwa ketika Anda melewati konstruktor, memanggil konstruktor akan mengembalikan objek instance layanan.
Pabrik (Nama, $ get function ()) Deskripsi: Layanan yang tidak dapat dikonfigurasi, logika pembuatan relatif rumit. Anda perlu menentukan fungsi, dan ketika fungsi ini dipanggil, instance layanan akan dikembalikan. Ini dapat dianggap sebagai bentuk penyedia (nama, {$ get: $ getFunction ()}).
Layanan (Name, Constructor ()) adalah layanan yang tidak dapat dikonfigurasi, membuat logika relatif sederhana. Mirip dengan parameter konstruktor fungsi penyedia di atas, Angular memanggilnya untuk membuat instance layanan.
Contoh penggunaan pabrik modul
Salinan kode adalah sebagai berikut:
<html ng-app = 'ShoppingModule'>
<head>
<title> keranjang belanja Anda </iteme>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<type skrip = "Teks/JavaScript">
var shoppingModule = angular.module ('ShoppingModule', []);
ShoppingModule.Factory ('item', function () {
var item = {};
items.query = function () {
Kembali [
{title: 'cat pot', deskripsi: 'pot penuh cat', harga: 3.95},
{title: 'cat pot', deskripsi: 'pot penuh cat', harga: 3.95},
{title: 'cat pot', deskripsi: 'pot penuh cat', harga: 3.95}
];
};
membalas item;
});
function shoppingController ($ scope, item) {
$ scope.items = items.query ();
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> toko !! </h1>
<able>
<tr ng-repeat = 'item in item'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | Mata uang}} </td>
</tr>
</boable>
</body>
</html>
Memperkenalkan modul pihak ketiga
Di sebagian besar aplikasi, buat satu modul untuk semua kode dan masukkan semua dependensi ke dalam modul ini, yang akan bekerja dengan baik. Namun, jika Anda berencana untuk menggunakan layanan atau instruksi yang disediakan oleh paket pihak ketiga, mereka biasanya datang dengan modul mereka sendiri, dan Anda perlu mendefinisikan perawatan ketergantungan dalam modul aplikasi untuk merujuk mereka. Misalnya:
var appmod = angular.module ('app', ['snazzy', 'super']);
Contoh tentang filter
Salinan kode adalah sebagai berikut:
<html ng-app = 'ShoppingModule'>
<head>
<title> keranjang belanja Anda </iteme>
<type skrip = "Text/JavaScript" src = "Angular.min.js"> </script>
<type skrip = "Teks/JavaScript">
var shoppingModule = angular.module ('ShoppingModule', []);
ShoppingModule.filter ('titleCase', function () {
var titleCaseFilter = function (input) {
var kata = input.split ('');
untuk (var i = 0; i <words.length; i ++) {
Words [i] = Words [0] .charat (0) .tuppercase () + kata [i] .slice (1);
}
return words.join ('');
};
return titlecaseFilter;
});
function shoppingController ($ scope) {
$ scope.pageheading = 'Ini adalah kasus uji';
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> {{pageHeading | titlecase}} </h1>
</body>
</html>