นิพจน์เป็นตัวอย่างของรหัส JavaScript ซึ่งมักจะอยู่ในพื้นที่ที่ถูกผูกไว้ (เช่น {{Expression}}) การแสดงออกจะถูกแยกวิเคราะห์และดำเนินการผ่านบริการ $ parse (http://code.angularjs.org/1.0.2/docs/api/ng.$parse)
ตัวอย่างเช่นต่อไปนี้เป็นนิพจน์ที่ถูกต้องในเชิงมุม:
1. การแสดงออกเชิงมุมกับการแสดงออกของ JS
นี่เป็นเรื่องง่ายสำหรับผู้ที่จะเชื่อมโยงการแสดงออกของมุมมองเชิงมุมเป็นนิพจน์ JavaScript แต่สิ่งนี้ไม่ถูกต้องทั้งหมดเนื่องจาก Angular ไม่ได้ประเมินการแสดงออกผ่านการประเมินของ JavaScript () คุณสามารถนึกถึงการแสดงออกเชิงมุมเป็นนิพจน์ JavaScript ที่มีความแตกต่างต่อไปนี้:
ในทางกลับกันหากเราต้องการเรียกใช้รหัส JavaScript โดยพลการ (ในนิพจน์เชิงมุม) เราสามารถเขียนโค้ดนั้นลงในวิธีการหนึ่งของคอนโทรลเลอร์และเรียกมันว่า หากเราต้องการประเมิน () นิพจน์เชิงมุมในจาวาสคริปต์เราสามารถใช้วิธี $ eval ()
<! doctype html> <html lang = "zh-cn" ng-app = "expressiontest"> <head> <meta charset = "utf-8"> <title> expression-e1 </title> <style type = "css"> .ng-cloak {display: ไม่มี; } </style> </head> <body ng-controller = "myctrl"> 1 + 2 = {{1 + 2}} <br/> นิพจน์: <อินพุตประเภท = "ข้อความ" ng-model = "expr"/> <button ng-click = "addexp (expr) ng-click = "removeExp ($ index)" href = ""> x </a>] <tt> {{expr}} </tt> => <span ng-bind = "$ parent. $ eval (expr)"> </pan> </li> type = "text/javascript"> var app = angular.module ("ExpressionTest", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope) {var exprs = $ scope.exprs = []; $ scope.expr = "3*10 | สกุลเงิน"; $ scope.addexp = ฟังก์ชั่น (exprics) {exprss.push (exprice);}; $ scope. }); </script> </body> </html>2. การประเมินทรัพย์สิน
บริบทของสภาพแวดล้อมการแยกวิเคราะห์แบบนิพจน์เชิงมุมคือขอบเขตในขณะที่ JavaScript เป็นหน้าต่าง (ควรอ้างถึงโหมดที่เข้มงวด evel) และความต้องการเชิงมุมในการเข้าถึงวัตถุหน้าต่างทั่วโลกผ่านหน้าต่าง $ ตัวอย่างเช่นหากเราต้องการเรียกการ Alert () ที่กำหนดไว้ในวัตถุหน้าต่างในนิพจน์เราจำเป็นต้องใช้ $ window.alert () สิ่งนี้มีวัตถุประสงค์เพื่อหลีกเลี่ยงการเข้าถึงสถานะทั่วโลกโดยไม่ตั้งใจ (แหล่งที่มาทั่วไปของข้อบกพร่องที่ละเอียดอ่อน)
<! doctype html> <html lang = "zh-cn" ng-app = "propertyEvaluation"> <head> <meta charset = "utf-8"> <title> propertyEvaluation </title> <style type = "css"> .ng-cloak {จอแสดงผล: ไม่มี; } </style> </head> <body> <div ng-controller = "myctrl"> ชื่อ: <อินพุต ng-model = "name" type = "text"/> <button ng-click = "greet ()"> teed </button> </div> type = "text/javascript"> var app = angular.module ("propertyEvaluation", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope, $ window) {$ scope.name = "kitty"; $ scope.greet = function () {$ window.alert ("hello" + $ scope.name);};});3. การให้อภัย (ความอดทน, ความทนทานต่อความผิด?)
การประเมินการแสดงออกคือการให้อภัยที่ไม่ได้กำหนดและเป็นโมฆะ ใน JavaScript เมื่อ A ไม่ใช่วัตถุประเมิน ABC ข้อยกเว้นจะถูกโยนทิ้ง บางครั้งสิ่งนี้มีเหตุผลสำหรับภาษาทั่วไปและการประเมินการแสดงออกส่วนใหญ่ใช้สำหรับการเชื่อมข้อมูลและรูปแบบทั่วไปมีดังนี้:
{{abc}}
หากไม่มีการแสดงผลไม่มีการแสดงผลที่สมเหตุสมผลกว่าการทิ้งข้อยกเว้น (เว้นแต่ว่าเรารอให้เซิร์ฟเวอร์ตอบสนองซึ่งจะถูกกำหนดในระยะเวลาอันสั้น) หากนิพจน์ไม่ทนได้เพียงพอเมื่อประเมินเราจะเขียนรหัสที่มีผลผูกพันอย่างสับสน:
{{((a || {}). b || {}). c}} // นี้ ...
ในทำนองเดียวกันเมื่ออ้างถึงฟังก์ชั่น ABC () ถ้ามันไม่ได้กำหนดหรือเป็นโมฆะจากนั้นก็ส่งคืนที่ไม่ได้กำหนด
4. ไม่มีคำสั่งการควบคุมการไหล
เราไม่สามารถเขียนคำสั่งควบคุมกระบวนการในนิพจน์ เหตุผลที่อยู่เบื้องหลังคือระบบหลักของ Angular คือตรรกะของแอปพลิเคชันควรอยู่ในคอนโทรลเลอร์ (ขอบเขต) ไม่ใช่ในมุมมอง หากเราต้องการเพิ่มสาขาที่มีเงื่อนไขลูปหรือโยนข้อยกเว้นลงในนิพจน์มุมมองเราสามารถมอบหมายวิธี JavaScript แทน (คุณสามารถเรียกวิธีการในขอบเขต)
5. ตัวกรอง
เมื่อเรานำเสนอข้อมูลให้กับผู้ใช้เราอาจต้องแปลงข้อมูลจากรูปแบบดั้งเดิมเป็นรูปแบบที่เป็นมิตร (อ่านง่าย) ตัวอย่างเช่นเรามีวัตถุข้อมูลที่ต้องจัดรูปแบบตามภูมิภาคก่อนที่จะแสดงต่อผู้ใช้ เราสามารถส่งการแสดงออกไปยังชุดของตัวกรองเช่น:
ชื่อ | ตัวพิมพ์ใหญ่
ตัวประเมินนิพจน์นี้สามารถส่งผ่านค่าของชื่อไปยังตัวกรองตัวพิมพ์ใหญ่
ตัวกรองโซ่ใช้ไวยากรณ์นี้:
มูลค่า | ตัวกรอง 1 | ตัวกรอง 2
นอกจากนี้เรายังสามารถถ่ายโอนพารามิเตอร์หารด้วย colons เป็นตัวกรองตัวอย่างเช่นแสดง 123 ในสองตำแหน่งทศนิยม:
123 | หมายเลข: 2
6. คำนำหน้า "$"
เราอาจพบว่ามันแปลกความหมายของคำนำหน้า "$" คืออะไร? มันเป็นคำนำหน้าง่าย ๆ (ป้องกันความขัดแย้ง) ที่ใช้โดย Angular เพื่อแยกความแตกต่างของชื่อ API จาก API อื่น ๆ หาก Angular ไม่ได้ใช้ $ การประเมิน A.Length () จะส่งคืนไม่ได้กำหนด เพราะทั้งหรือเชิงมุมไม่มีการกำหนดคุณสมบัตินี้
เมื่อพิจารณาว่า Angular เวอร์ชันในอนาคตอาจเลือกที่จะเพิ่มความยาวซึ่งจะเปลี่ยนพฤติกรรมของนิพจน์นี้ สิ่งที่แย่กว่านั้นคือนักพัฒนาของเราอาจสร้างทรัพย์สินที่มีความยาวซึ่งจะขัดแย้งกับ Angular ปัญหานี้มีอยู่เนื่องจาก Angular ขยายวัตถุที่มีอยู่ในปัจจุบันโดยการเพิ่มวิธีการ ด้วยการเพิ่มคำนำหน้า "$", Angular ยังคงรักษาเนมสเปซที่เฉพาะเจาะจงดังนั้นนักพัฒนาเชิงมุมและนักพัฒนาซอฟต์แวร์ที่ใช้ Angular สามารถอยู่ได้อย่างกลมกลืน