หลังจากแนะนำกรอบ AngularJS สั้น ๆ บทความนี้ใช้ตัวอย่างเพื่อแสดงให้เห็นถึงการใช้วิธีการแก้ไข {{}} และคำสั่ง NG-bind
ซึ่งแตกต่างจาก jQuery ซึ่งเป็นเพียงห้องสมุดคลาสที่เสริมสร้างและทำให้การพัฒนาส่วนหน้าง่ายขึ้น AngularJS เป็นกรอบการทำงานส่วนหน้าเว็บที่สมบูรณ์ดังนั้นเส้นโค้งการเรียนรู้จึงสูงกว่ามาก
AngularJs ทำให้ฉันรู้สึกว่ามันคล้ายกับกรอบฤดูใบไม้ผลิของ Java ซึ่งกาวส่วนประกอบอื่น ๆ ในตำแหน่งคอนเทนเนอร์กลาง ส่วนประกอบในตัวจำนวนมากสามารถตอบสนองสถานการณ์ทั่วไปได้แล้วและเราสามารถขยายสถานการณ์พิเศษตามแนวคิดกรอบ
เริ่มต้นด้วยเนื้อหาพื้นฐานที่สุด:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html ng-app>
<head>
<meta charset = "utf-8">
<title> ng-bind directive </title>
</head>
<body ng-controller = "hellocontroller">
<div>
<p> ตัวอักษรสตริงเอาต์พุตโดยตรง </p>
สวัสดี {{"World"}}
<Hr>
</div>
<div>
<p> ใช้ตัวยึดตำแหน่งเพื่อเอาต์พุตตัวแปร </p>
สวัสดี {{ทักทาย}}
<Hr>
</div>
<div>
<p> ใช้คำสั่ง ng-bind เพื่อเอาต์พุตตัวแปร </p>
สวัสดี <span ng-bind = "ทักทาย"> </span>
<Hr>
</div>
<script src = "../ lib/angularjs/1.2.26/angular.min.js"> </script>
<script>
ฟังก์ชั่น hellocontroller ($ scope) {
$ scope.greeting = "World";
-
</script>
</body>
</html>
NG-APP ประกาศโมดูล AngularJS และ จำกัด ขอบเขตของการประกาศแท็ก HTML
NG-Controller เป็นคอนโทรลเลอร์ที่ประกาศ AngularJs ในโมดูล คอนโทรลเลอร์สามารถมีตัวควบคุมหลายตัว แต่บริบทนั้นแยกได้และขอบเขตของคอนโทรลเลอร์ควรแคบลงให้มากที่สุด
{{}} เป็นไวยากรณ์การแก้ไขของ AngularJs คล้ายกับ EL Expression $ {} ของ JSP ผลลัพธ์แรกเป็นเพราะ "โลก" เป็นค่าที่แท้จริงและโปรแกรมจะส่งออกโดยตรง เอาต์พุตที่สองเป็นเพราะคำทักทายเป็นตัวแปรที่กำหนดไว้ในคอนโทรลเลอร์ดังนั้นค่าที่สอดคล้องกันของตัวแปรจะเป็นเอาต์พุตซึ่งเป็นโลกด้วยเช่นกัน เอาต์พุตที่สามใช้คำสั่งแอตทริบิวต์ NG-bind ที่สร้างขึ้นใน AngularJS และผลลัพธ์สุดท้ายเทียบเท่ากับ {{}} แต่โปรดทราบว่าคำสั่ง = ตามด้วยสตริงอย่าเขียนอย่างไม่ถูกต้อง
Hellocontroller ใน JS สอดคล้องกับคำแนะนำเกี่ยวกับร่างกาย พารามิเตอร์รายการ $ เป็นบริการที่จัดทำโดยเฟรมเวิร์กซึ่งแสดงถึงบริบทของคอนโทรลเลอร์ปัจจุบันและมีบริการอื่น ๆ ที่คล้ายกัน เฟรมเวิร์กจะถูกฉีดโดยอัตโนมัติและเราจะเข้าใจช้าในภายหลัง Body Method มีเพียงหนึ่งบรรทัดและกำหนดตัวแปรใน $ SCOPE ซึ่งเป็นตัวแปรที่อ้างอิงในรหัส HTML
บทความนี้ง่ายมากและคุณสามารถเรียกใช้รหัสหลังจากคัดลอก โปรดทราบว่า Angular.min.js เป็นเวอร์ชันล่าสุดของสาขา 1.2 รหัสเดียวกันไม่สามารถเรียกใช้กับเวอร์ชัน 1.3.0 ไม่ทราบเหตุผล อาจเป็นได้ว่า 1.3.0 ไม่ใช่รุ่นสุดท้าย