คุณลักษณะ SRC และ HREF
ใน AngularJS ควรเขียนเป็น NG-SRC และ HREF ควรเขียนเป็น NG-HREF ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<img ng-src = "/images/cats/{{{{{fetteritecat}}">
<a ng-href = "/shop/category = {{number}}"> บางข้อความ </a>
การแสดงออก
การดำเนินการทางคณิตศาสตร์อย่างง่ายการดำเนินการเปรียบเทียบการดำเนินการบูลีนการดำเนินการบิตอาร์เรย์อ้างอิงและสัญลักษณ์วัตถุสามารถทำได้ในเทมเพลต แม้ว่าเราสามารถทำสิ่งต่าง ๆ ได้มากมายด้วยการแสดงออก แต่การแสดงออกจะถูกดำเนินการโดยใช้ล่ามที่กำหนดเอง (ส่วนหนึ่งของเชิงมุม) แทนที่จะใช้ฟังก์ชัน JavaScript Eval () ดังนั้นจึงมีข้อ จำกัด ที่ดี
แม้ว่าการแสดงออกที่นี่จะเข้มงวดกว่า JavaScript ในหลาย ๆ ด้าน แต่พวกเขาก็มีความทนทานต่อความผิดพลาดที่ดีกว่าที่ไม่ได้กำหนดและเป็นโมฆะ หากพบข้อผิดพลาดเทมเพลตจะไม่แสดงอะไรเลยและไม่ได้ส่งข้อผิดพลาด NullPointerException ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<div ng-controller = 'somecontroller'>
<div> {{Computer () /10}} </div> // แม้ว่ามันจะถูกกฎหมาย แต่ก็ทำให้ตรรกะทางธุรกิจลงในเทมเพลตและควรหลีกเลี่ยงวิธีการนี้
</div>
แยกแยะระหว่าง UI และความรับผิดชอบของคอนโทรลเลอร์
คอนโทรลเลอร์ถูกผูกไว้กับชิ้นส่วน DOM ที่เฉพาะเจาะจงซึ่งเป็นสิ่งที่พวกเขาต้องการในการจัดการ มีสองวิธีหลักในการเชื่อมโยงคอนโทรลเลอร์เข้ากับโหนด DOM หนึ่งถูกประกาศผ่าน NG-controller ในเทมเพลตและที่สองคือการผูกมันเข้ากับส่วนเทมเพลต DOM ที่โหลดแบบไดนามิกผ่านการกำหนดเส้นทาง เทมเพลตนี้เรียกว่ามุมมอง เราสามารถสร้างคอนโทรลเลอร์ที่ซ้อนกันพวกเขาสามารถแบ่งปันแบบจำลองข้อมูลและฟังก์ชั่นโดยสืบทอดโครงสร้างตัวเลข การทำรังจริงเกิดขึ้นกับวัตถุ $ SCOPE ผ่านกลไกการสืบทอดดั้งเดิมภายในค่า $ ขอบเขตของวัตถุคอนโทรลเลอร์หลักจะถูกส่งผ่านไปยังขอบเขต $ ซ้อนภายใน (คุณสมบัติทั้งหมดรวมถึงฟังก์ชั่น) ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<div ng-controller = "ParentController">
<div ng-controller = "ChildController"> ... </div>
</div>
เปิดเผยข้อมูลรุ่นโดยใช้ $ SCOPE
คุณสามารถแสดงการสร้างแอตทริบิวต์ $ scope เช่น $ scope.count = 5 คุณยังสามารถสร้างแบบจำลองข้อมูลทางอ้อมผ่านเทมเพลตเอง
การแสดงออกผ่าน ตัวอย่างเช่น
การคัดลอกรหัสมีดังนี้:
<ปุ่ม ng-click = 'count = 3'> ตั้งค่านับเป็นสาม </button>
การใช้ NG-Model ในรายการแบบฟอร์ม
คล้ายกับนิพจน์พารามิเตอร์โมเดลที่ระบุไว้ใน NG-Model ยังทำงานภายในตัวควบคุมด้านนอก ความแตกต่างเพียงอย่างเดียวคือสิ่งนี้สร้างความสัมพันธ์ที่มีผลผูกพันสองทางระหว่างรายการแบบฟอร์มและโมเดลที่ระบุ
ตรวจสอบการเปลี่ยนแปลงในรูปแบบข้อมูลโดยใช้นาฬิกา
ลายเซ็นฟังก์ชั่นของ $ watch คือ: $ watch (watchfn, watchaction, deepwatch)
WatchFN เป็นสตริงที่มีนิพจน์เชิงมุมหรือฟังก์ชั่นที่ส่งคืนค่าปัจจุบันของโมเดลข้อมูลที่ตรวจสอบ WatchAction เป็นฟังก์ชั่นหรือนิพจน์ที่เรียกว่าเมื่อ Watchfn เปลี่ยนแปลง ลายเซ็นฟังก์ชั่นของมันคือ:
ฟังก์ชั่น (newValue, oldValue, ขอบเขต) DeepWatch หากตั้งค่าเป็น TRUE พารามิเตอร์บูลีนที่เป็นตัวเลือกนี้จะสั่ง Angular เพื่อตรวจสอบว่าคุณสมบัติแต่ละอย่างของวัตถุที่ถูกตรวจสอบมีการเปลี่ยนแปลงหรือไม่ หากคุณตรวจสอบค่าง่าย ๆ ในการตรวจสอบองค์ประกอบในอาร์เรย์หรือแอตทริบิวต์ทั้งหมดบนวัตถุแทนที่จะเป็นค่าคุณสามารถใช้พารามิเตอร์นี้ได้ โปรดทราบว่าเชิงมุมจำเป็นต้องสำรวจอาร์เรย์หรือวัตถุ หากชุดมีขนาดใหญ่ขึ้นการดำเนินการจะซับซ้อนมากขึ้น
ฟังก์ชั่น $ watch ส่งคืนฟังก์ชั่น เมื่อคุณไม่จำเป็นต้องได้รับการแจ้งเตือนการเปลี่ยนแปลงคุณสามารถใช้ฟังก์ชั่นที่ส่งคืนเพื่อออกจากระบบจอภาพ
หากเราต้องการตรวจสอบคุณสมบัติจากนั้นออกจากระบบการตรวจสอบเราสามารถใช้รหัสต่อไปนี้: var dereg = $ scope. $ watch ('somemodel.someproperty', callbackonchange ());
... dereg ();
รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<title> ตะกร้าสินค้าของคุณ </title>
<script type = "text/javascript">
ฟังก์ชั่น cartcontroller ($ scope) {
$ scope.bill = {};
$ scope.items = [
{title: 'Paint Pots', ปริมาณ: 8, ราคา: 3.95},
{title: 'polka dots', ปริมาณ: 17, ราคา: 12.95},
{title: 'Pebbles', ปริมาณ: 5, ราคา: 6.95}
-
$ scope.totalcart = function () {
var total = 0;
สำหรับ (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i]. price * $ poop.items [i] .quantity;
-
ผลตอบแทนทั้งหมด;
-
$ scope.subtotal = function () {
ส่งคืน $ scope.totalcart () - $ scope.bill.discount;
-
ฟังก์ชั่น calculatediscount (newValue, oldValue, ขอบเขต) {
$ scope.bill.discount = newValue> 100? 10: 0;
} // ฟังก์ชั่น WatchAction ที่นี่
$ scope. $ watch ($ scope.totalcart, calculatediscount); // ฟังก์ชั่นนาฬิกาที่นี่
-
</script>
</head>
<body>
<div ng-controller = "cartcontroller">
<div ng-repeat = 'รายการในรายการ'>
<span> {{item.title}} </span>
<อินพุต ng-model = 'item.quantity'>
<span> {{item.price | สกุลเงิน}} </span>
<span> {{item.price * item.quantity | สกุลเงิน}} </span>
</div>
<div> ทั้งหมด: {{TotalCart () | สกุลเงิน}} </div>
<div> ส่วนลด: {{bill.discount | สกุลเงิน}} </div>
<div> ย่อย: {{subtotal () | สกุลเงิน}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </script>
</body>
</html>
นาฬิกาข้างต้นมีปัญหาด้านประสิทธิภาพ ฟังก์ชั่น calculatedtotals ถูกดำเนินการ 6 ครั้งซึ่งสามอย่างเป็นเพราะลูปถูกทำลาย ทุกครั้งที่ลูปวนลูปข้อมูลจะถูกแสดงใหม่อีกครั้ง
ด้านล่างคือรหัสที่แก้ไขแล้ว
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<title> ตะกร้าสินค้าของคุณ </title>
<script type = "text/javascript">
ฟังก์ชั่น cartcontroller ($ scope) {
$ scope.bill = {};
$ scope.items = [
{title: 'Paint Pots', ปริมาณ: 8, ราคา: 3.95},
{title: 'polka dots', ปริมาณ: 17, ราคา: 12.95},
{title: 'Pebbles', ปริมาณ: 5, ราคา: 6.95}
-
var totalCart = function () {
var total = 0;
สำหรับ (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i]. price * $ poop.items [i] .quantity;
-
$ scope.bill.totalcart = รวม;
$ scope.bill.discount = ทั้งหมด> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
-
$ scope. $ watch ('items', totalcart, true); // ใช้ Watch to Change Items เท่านั้น
-
</script>
</head>
<body>
<div ng-controller = "cartcontroller">
<div ng-repeat = 'รายการในรายการ'>
<span> {{item.title}} </span>
<อินพุต ng-model = 'item.quantity'>
<span> {{item.price | สกุลเงิน}} </span>
<span> {{item.price * item.quantity | สกุลเงิน}} </span>
</div>
<div> ทั้งหมด: {{bill.totalcart | สกุลเงิน}} </div>
<div> ส่วนลด: {{bill.discount | สกุลเงิน}} </div>
<div> ย่อย: {{bill.subtotal | สกุลเงิน}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </script>
</body>
</html>
สำหรับอาร์เรย์ ITMS ขนาดใหญ่หากมีการคำนวณแอตทริบิวต์การเรียกเก็บเงินใหม่ทุกครั้งที่หน้าจะแสดงเป็นเชิงมุมประสิทธิภาพจะดีขึ้นมาก เราสามารถทำได้โดยการสร้างฟังก์ชั่น $ Watch ด้วย WatchFN
การคัดลอกรหัสมีดังนี้:
$ SCOPE. $ ดู (
var totalCart = function () {
var total = 0;
สำหรับ (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i]. price * $ poop.items [i] .quantity;
-
$ scope.bill.totalcart = รวม;
$ scope.bill.discount = ทั้งหมด> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
-
ตรวจสอบหลายสิ่ง
หากคุณต้องการตรวจสอบคุณสมบัติหรือวัตถุหลายรายการและดำเนินการฟังก์ชั่นเมื่อมีการเปลี่ยนแปลงใด ๆ คุณมีสองตัวเลือกพื้นฐาน:
ตรวจสอบค่าหลังจากเชื่อมต่อคุณสมบัติเหล่านี้
ใส่ไว้ในอาร์เรย์หรือวัตถุจากนั้นส่งผ่านค่าไปยังพารามิเตอร์ DeepWatch
อธิบายแยกกัน:
ในกรณีแรกหากมีวัตถุสิ่งต่าง ๆ ในขอบเขตของคุณมันมีคุณสมบัติสองคุณสมบัติ A และ B และเมื่อคุณสมบัติทั้งสองเปลี่ยนคุณต้องดำเนินการฟังก์ชั่น callme () คุณสามารถตรวจสอบคุณสมบัติทั้งสองนี้ได้ในเวลาเดียวกัน
เมื่อรายการยาวมากคุณต้องเขียนฟังก์ชั่นเพื่อส่งคืนค่าหลังจากการเชื่อมต่อ
ในกรณีที่สองคุณต้องตรวจสอบคุณสมบัติทั้งหมดของวัตถุสิ่งต่าง ๆ คุณสามารถทำได้:
การคัดลอกรหัสมีดังนี้:
$ SCOPE. $ watch ('Things', callme (... ), จริง);
จัดระเบียบการพึ่งพาโดยใช้โมดูล
ผู้ให้บริการ (ชื่อวัตถุหรือตัวสร้าง ()) คำอธิบาย: บริการที่กำหนดค่าได้การสร้างตรรกะค่อนข้างซับซ้อน หากคุณผ่านวัตถุเป็นพารามิเตอร์วัตถุวัตถุจะต้องมีฟังก์ชั่นชื่อ $ get ซึ่งจำเป็นต้องส่งคืนชื่อบริการ มิฉะนั้น AngularJS จะคิดว่าเมื่อคุณผ่านตัวสร้างการเรียกตัวสร้างจะส่งคืนวัตถุอินสแตนซ์บริการ
โรงงาน (ชื่อ, $ get function ()) คำอธิบาย: บริการที่ไม่สามารถกำหนดค่าได้ตรรกะการสร้างค่อนข้างซับซ้อน คุณต้องระบุฟังก์ชั่นและเมื่อเรียกใช้ฟังก์ชันนี้อินสแตนซ์บริการจะถูกส่งคืน มันถือได้ว่าเป็นรูปแบบของผู้ให้บริการ (ชื่อ, {$ get: $ getFunction ()})
บริการ (ชื่อ, constructor ()) เป็นบริการที่ไม่สามารถกำหนดค่าได้การสร้างตรรกะนั้นค่อนข้างง่าย คล้ายกับพารามิเตอร์ตัวสร้างของฟังก์ชั่นผู้ให้บริการด้านบน, การเรียกใช้เชิงมุมเพื่อสร้างอินสแตนซ์บริการ
ตัวอย่างการใช้โรงงานโมดูล
การคัดลอกรหัสมีดังนี้:
<html ng-app = 'ShoppingModule'>
<head>
<title> ตะกร้าสินค้าของคุณ </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
var ShoppingModule = Angular.Module ('ShoppingModule', []);
ShoppingModule.Factory ('รายการ', function () {
รายการ var = {};
items.query = function () {
กลับ [
{title: 'Paint Pots', คำอธิบาย: 'หม้อที่เต็มไปด้วยสี', ราคา: 3.95},
{title: 'Paint Pots', คำอธิบาย: 'หม้อที่เต็มไปด้วยสี', ราคา: 3.95},
{title: 'Paint Pots', คำอธิบาย: 'Pots Full of Paint', ราคา: 3.95}
-
-
รายการกลับ;
-
Function ShoppingController ($ scope, items) {
$ scope.items = items.query ();
-
</script>
</head>
<body ng-controller = 'ShoppingController'>
<H1> ร้านค้า !! </h1>
<table>
<tr ng-repeat = 'รายการในรายการ'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | สกุลเงิน}} </td>
</tr>
</table>
</body>
</html>
แนะนำโมดูลบุคคลที่สาม
ในแอปพลิเคชันส่วนใหญ่สร้างโมดูลเดียวสำหรับรหัสทั้งหมดและใส่การพึ่งพาทั้งหมดลงในโมดูลนี้ซึ่งจะทำงานได้ดี อย่างไรก็ตามหากคุณวางแผนที่จะใช้บริการหรือคำแนะนำที่จัดทำโดยแพ็คเกจบุคคลที่สามพวกเขามักจะมาพร้อมกับโมดูลของตัวเองและคุณต้องกำหนดการดูแลการพึ่งพาในโมดูลแอปพลิเคชันเพื่ออ้างอิง ตัวอย่างเช่น:
var appmod = angular.module ('แอพ', ['snazzy', 'super']);
ตัวอย่างเกี่ยวกับตัวกรอง
การคัดลอกรหัสมีดังนี้:
<html ng-app = 'ShoppingModule'>
<head>
<title> ตะกร้าสินค้าของคุณ </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
var ShoppingModule = Angular.Module ('ShoppingModule', []);
ShoppingModule.filter ('Titlecase', function () {
var titleCaseFilter = ฟังก์ชั่น (อินพุต) {
var words = input.split ('');
สำหรับ (var i = 0; i <words.length; i ++) {
คำ [i] = คำ [0] .charat (0) .touppercase () + คำ [i] .slice (1);
-
กลับคำพูดเข้าร่วม ('');
-
ส่งคืน titlecasefilter;
-
Function ShoppingController ($ scope) {
$ scope.pageheading = 'นี่คือกรณีทดสอบ';
-
</script>
</head>
<body ng-controller = 'ShoppingController'>
<H1> {{หน้าเว็บ | TitleCase}} </h1>
</body>
</html>