AngularJs คืออะไร?
AngularJS เป็นกรอบโครงสร้างที่ออกแบบมาสำหรับแอปพลิเคชันเว็บแบบไดนามิก ช่วยให้คุณใช้ HTML เป็นภาษาเทมเพลตและโดยการขยายไวยากรณ์ HTML คุณสามารถสร้างส่วนประกอบแอปพลิเคชันของคุณได้อย่างชัดเจนและรัดกุม นวัตกรรมของมันคือมันใช้การเชื่อมโยงข้อมูลและการฉีดพึ่งพาซึ่งไม่จำเป็นต้องเขียนโค้ดจำนวนมาก ทั้งหมดนี้ถูกนำไปใช้ผ่าน JavaScript ด้านเบราว์เซอร์ซึ่งทำให้มันรวมเข้ากับเทคโนโลยีฝั่งเซิร์ฟเวอร์ใด ๆ ได้อย่างสมบูรณ์แบบ
AngularJS ได้รับการออกแบบมาเพื่อเอาชนะข้อบกพร่องของ HTML ในการสร้างแอพพลิเคชั่น HTML เป็นภาษาประกาศที่ดีที่ออกแบบมาสำหรับการแสดงข้อความแบบคงที่ แต่มันจะอ่อนแอหากคุณต้องการสร้างเว็บแอปพลิเคชัน ดังนั้นฉันจึงทำงานบางอย่าง (คุณอาจคิดว่ามันเป็นเคล็ดลับเล็กน้อย) เพื่อให้เบราว์เซอร์ทำสิ่งที่ฉันต้องการ FormatDate
โดยปกติเราใช้เทคโนโลยีต่อไปนี้เพื่อแก้ปัญหาข้อบกพร่องของเทคโนโลยีเว็บแบบคงที่ในการสร้างแอปพลิเคชันแบบไดนามิก:
1. ไลบรารีคลาส - ไลบรารีคลาสเป็นคอลเลกชันของฟังก์ชั่นที่สามารถช่วยคุณเขียนเว็บแอปพลิเคชัน มันเป็นรหัสของคุณที่นำคุณไปและขึ้นอยู่กับคุณที่จะตัดสินใจว่าจะใช้ไลบรารีคลาสเมื่อใด ห้องสมุดคลาส ได้แก่ : jQuery ฯลฯ
2. Framework - Framework เป็นเว็บแอปพลิเคชันพิเศษที่ใช้งานคุณจะต้องกรอกตรรกะทางธุรกิจเฉพาะ เฟรมเวิร์กมีบทบาทนำที่นี่และเรียกรหัสของคุณตามตรรกะแอปพลิเคชันเฉพาะ เฟรมรวมถึง: ความล้มเหลว, ต้นกล้า ฯลฯ
AngularJS ใช้วิธีการที่แตกต่างซึ่งพยายามชดเชยข้อบกพร่องของ HTML ในการสร้างแอปพลิเคชัน AngularJS ช่วยให้เบราว์เซอร์รับรู้ไวยากรณ์ใหม่โดยใช้โครงสร้างที่เราเรียกตัวระบุ ตัวอย่างเช่น:
1. ใช้การจัดฟันสองครั้ง {{}} ไวยากรณ์สำหรับการเชื่อมข้อมูล;
2. ใช้โครงสร้างการควบคุม DOM เพื่อทำซ้ำหรือซ่อนชิ้นส่วน DOM;
3. แบบฟอร์มสนับสนุนและการตรวจสอบแบบฟอร์ม;
4. สามารถเชื่อมโยงรหัสตรรกะกับองค์ประกอบ DOM ที่เกี่ยวข้อง
5. สามารถแบ่ง HTML ออกเป็นส่วนประกอบที่นำกลับมาใช้ใหม่ได้
โซลูชั่นแบบ end-to-end
AngularJS พยายามที่จะเป็นโซลูชันแบบ end-to-end ในเว็บแอปพลิเคชัน ซึ่งหมายความว่ามันไม่ได้เป็นเพียงส่วนเล็ก ๆ ของเว็บแอปพลิเคชันของคุณ แต่เป็นโซลูชันแบบ end-to-end ที่สมบูรณ์ สิ่งนี้จะทำให้ AngularJs ปรากฏ "ดื้อรั้น" เมื่อสร้างแอปพลิเคชันที่มี CRUD (เพิ่มการสร้าง, การค้นหาแบบสอบถาม, การอัปเดตอัปเดต, ลบลบ) (ข้อความต้นฉบับมีความคิดเห็นซึ่งหมายความว่ามีวิธีอื่นไม่มากนัก) แต่ถึงแม้จะมี "ความดื้อรั้น" แต่ก็ยังช่วยให้มั่นใจได้ว่า "ความดื้อรั้น" ของมันเป็นเพียงจุดเริ่มต้นของการสร้างแอปพลิเคชันของคุณและคุณยังสามารถเปลี่ยนได้อย่างยืดหยุ่น คุณสมบัติที่โดดเด่นของ AngularJS บางอย่างมีดังนี้:
1. เนื้อหาที่เป็นไปได้ทั้งหมดที่สามารถใช้ในการสร้างแอปพลิเคชัน CRUD ได้แก่ : การเชื่อมโยงข้อมูล, ตัวระบุเทมเพลตพื้นฐาน, การตรวจสอบแบบฟอร์ม, การกำหนดเส้นทาง, การเชื่อมโยงลึก, การใช้ส่วนประกอบซ้ำและการฉีดพึ่งพา
2. การทดสอบด้านต่างๆรวมถึง: การทดสอบหน่วยการทดสอบแบบครบวงจรการจำลองและกรอบการทดสอบอัตโนมัติ
3. แอปพลิเคชันเมล็ดที่มีเค้าโครงไดเรกทอรีและสคริปต์ทดสอบเป็นจุดเริ่มต้น
ความน่ารักของ angularjs
AngularJS ทำให้การพัฒนาแอปพลิเคชันง่ายขึ้นโดยนำเสนอระดับที่สูงขึ้นของสิ่งที่เป็นนามธรรมสำหรับนักพัฒนา เช่นเดียวกับเทคนิคนามธรรมอื่น ๆ สิ่งนี้ยังสูญเสียความยืดหยุ่น กล่าวอีกนัยหนึ่งแอปพลิเคชันทั้งหมดไม่เหมาะสำหรับใช้กับ AngularJs AngularJS ส่วนใหญ่พิจารณาการสร้างแอปพลิเคชัน CRUD โชคดีที่อย่างน้อย 90% ของเว็บแอปพลิเคชันเป็นแอปพลิเคชั่น CRUD แต่เพื่อให้เข้าใจถึงสิ่งที่เหมาะสมสำหรับการสร้างด้วย AngularJs คุณต้องเข้าใจสิ่งที่ไม่เหมาะสำหรับการสร้างด้วย AngularJs
เช่นเกมและตัวแก้ไขอินเทอร์เฟซกราฟิกแอปพลิเคชันที่มีการดำเนินงาน DOM ที่ซับซ้อนและซับซ้อนนั้นแตกต่างจากแอปพลิเคชัน CRUD มาก พวกเขาไม่เหมาะสำหรับการสร้างด้วย AngularJs มันอาจจะดีกว่าที่จะใช้เทคนิคที่เบากว่าง่ายกว่าเช่น jQuery เช่นนี้
อินสแตนซ์ AngularJs ที่เรียบง่าย
ด้านล่างเป็นแอปพลิเคชัน CRUD ทั่วไปที่มีแบบฟอร์ม ค่าฟอร์มได้รับการตรวจสอบครั้งแรกแล้วใช้ในการคำนวณค่ารวมซึ่งจัดรูปแบบในสไตล์ท้องถิ่น นี่คือแนวคิดทั่วไปสำหรับนักพัฒนาคุณต้องเข้าใจก่อน:
1. เชื่อมโยงโมเดลข้อมูล (โมเดลข้อมูล) เข้ากับมุมมอง (UI);
2. เขียนอ่านและตรวจสอบอินพุตของผู้ใช้
3. คำนวณค่าใหม่ตามโมเดล
4. จำกัด รูปแบบเอาต์พุต
index.html:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html ng-app>
<head>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<div ng-controller = "invoicecntl">
<b> ใบแจ้งหนี้: </b>
<br>
<br>
<table>
<tr> <td> ปริมาณ </td> <td> ราคา </td> </tr>
<tr>
<td> <อินพุต type = "จำนวนเต็ม" min = "0" ng-model = "จำนวน" ต้องการ> </td>
<td> <อินพุต type = "number" ng-model = "ราคา" ต้องการ> </td>
</tr>
</table>
<Hr>
<b> ทั้งหมด: </b> {{จำนวน * ราคา | สกุลเงิน}}
</div>
</body>
</html>
script.js:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น invoicecntl ($ scope) {
$ scope.qty = 1;
$ scope.cost = 19.95;
-
การทดสอบแบบ end-to-end:
การคัดลอกรหัสมีดังนี้:
มัน ('ควรแสดงการผูกเชิงมุม', function () {
คาดหวัง (การผูกมัด ('จำนวน * ต้นทุน')). toequal ('$ 19.95');
อินพุต ('จำนวน') ป้อน ('2');
อินพุต ('ต้นทุน') ป้อน ('5.00');
คาดหวัง (การผูกมัด ('จำนวน * ต้นทุน')). toequal ('$ 10.00');
-
ฟังก์ชั่น invoicecntl ($ scope) {$ scope.qty = 1; $ scope.cost = 19.95;}
เอฟเฟกต์การทำงาน:
การคัดลอกรหัสมีดังนี้:
ใบแจ้งหนี้:
ต้นทุนปริมาณ
รวม: {{จำนวน * ราคา | สกุลเงิน}}
ลองตัวอย่างข้างต้นแล้วลองดูว่าตัวอย่างนี้ทำงานร่วมกันอย่างไร ในแท็ก `` เราใช้ตัวระบุ `ng-app` เพื่อระบุว่านี่เป็นแอปพลิเคชัน AngularJS ตัวระบุ `ng-app` นี้จะทำให้ Angularjs ** เริ่มต้นแอปพลิเคชันของคุณโดยอัตโนมัติ เราใช้แท็ก `` เพื่อโหลดสคริปต์ AngularJS: <script src = "http://code.angularjs.org/angular-1.1.0.min.js">
โดยการตั้งค่าคุณสมบัติ NG-Model ในแท็ก <put> AngularJS จะเชื่อมโยงข้อมูลในสองทางโดยอัตโนมัติ นอกจากนี้เรายังทำการตรวจสอบข้อมูลอย่างง่ายในเวลาเดียวกัน:
การคัดลอกรหัสมีดังนี้:
ปริมาณ: <อินพุต type = "จำนวนเต็ม" min = "0" ng-model = "จำนวน" ต้องการ>
ราคา: <อินพุตประเภท = "หมายเลข" ng-model = "ราคา" ที่ต้องการ>
วิดเจ็ตของกล่องอินพุตนี้ดูธรรมดา แต่ก็ไม่ธรรมดาถ้าคุณรับรู้ประเด็นต่อไปนี้:
1. เมื่อโหลดหน้าเว็บ AngularJS จะสร้างตัวแปรที่มีชื่อเดียวกันตามชื่อรุ่น (จำนวนค่าใช้จ่าย) ที่ประกาศในวิดเจ็ต คุณสามารถนึกถึงตัวแปรเหล่านี้เป็น M (รุ่น) ในรูปแบบการออกแบบ MVC
2. โปรดทราบว่าอินพุตในวิดเจ็ตด้านบนมีความสามารถพิเศษ หากคุณไม่ป้อนข้อมูลหรือข้อมูลอินพุตไม่ถูกต้องกล่องอินพุตอินพุตนี้จะเปลี่ยนเป็นสีแดงโดยอัตโนมัติ คุณสมบัติใหม่ของกล่องอินพุตนี้ทำให้นักพัฒนาสามารถใช้ฟังก์ชั่นการตรวจสอบฟิลด์ทั่วไปได้ง่ายขึ้นในแอปพลิเคชัน CRUD
ในที่สุดเราสามารถดูการจัดฟันคู่ลึกลับ:
การคัดลอกรหัสมีดังนี้:
รวม: {{จำนวน * ราคา | สกุลเงิน}}
แท็ก {{Expression}} นี้คือการเชื่อมโยงข้อมูล AngularJS นิพจน์ในนั้นสามารถรวมกันของนิพจน์และตัวกรอง ({{{Expression | Filter}}) AngularJS ให้ตัวกรองเพื่อจัดรูปแบบข้อมูลอินพุตและเอาต์พุต
ในตัวอย่างด้านบนนิพจน์ใน {{}} ขอให้ AngularJs คูณข้อมูลที่ได้จากกล่องอินพุตจากนั้นจัดรูปแบบผลลัพธ์การคูณกับสไตล์สกุลเงินท้องถิ่นแล้วส่งออกไปยังหน้า
เป็นเรื่องที่ควรค่าแก่การกล่าวถึงว่าเราไม่เรียกวิธีการ AngularJS หรือเขียนตรรกะเฉพาะเช่นการใช้เฟรมเวิร์ก แต่เราได้ทำฟังก์ชั่นข้างต้นเสร็จแล้ว เบื้องหลังการใช้งานนี้คือเบราว์เซอร์ทำงานได้มากกว่าก่อนที่จะสร้างหน้าคงที่ทำให้สามารถตอบสนองความต้องการของแอปพลิเคชันเว็บแบบไดนามิก AngularJS ช่วยลดเกณฑ์การพัฒนาสำหรับแอปพลิเคชันเว็บแบบไดนามิกจนถึงจุดที่ไม่จำเป็นต้องใช้ไลบรารีคลาสหรือเฟรมเวิร์ก
"เซนเต่า (แนวคิด) ของ AngularJS"
Angular เชื่อว่าเมื่อสร้างมุมมอง (UIS) และการเขียนตรรกะซอฟต์แวร์รหัสประกาศจะดีกว่ารหัสที่จำเป็นมากแม้ว่ารหัสที่จำเป็นจะเหมาะมากสำหรับการแสดงตรรกะทางธุรกิจ
1. การดำเนินการ DOM และตรรกะแอปพลิเคชันเป็นความคิดที่ดีมากซึ่งสามารถปรับปรุงความสามารถในการปรับแต่งรหัสได้อย่างมาก
2. เป็นความคิดที่ดีมากที่จะรักษาการทดสอบและการพัฒนาอย่างเท่าเทียมกัน ความยากลำบากในการทดสอบขึ้นอยู่กับโครงสร้างของรหัส
3. การแยกไคลเอนต์และฝั่งเซิร์ฟเวอร์เป็นวิธีปฏิบัติที่ดีเป็นพิเศษ มันสามารถช่วยให้ทั้งสองฝ่ายพัฒนาแบบขนานและเปิดใช้งานการใช้ซ้ำทั้งสองด้าน
4. หากเฟรมเวิร์กสามารถแนะนำนักพัฒนาซอฟต์แวร์ตลอดกระบวนการพัฒนาทั้งหมด: จากการออกแบบ UI การเขียนตรรกะทางธุรกิจและจากนั้นการทดสอบมันจะช่วยนักพัฒนาได้อย่างมาก
5. เป็นการดีที่จะ "ทำให้คอมเพล็กซ์ง่ายขึ้นเป็นความเรียบง่ายและทำให้มันง่ายขึ้นเป็นศูนย์"
AngularJs สามารถปลดปล่อยคุณจากฝันร้ายต่อไปนี้:
1. ใช้การโทรกลับ: การใช้การโทรกลับจะทำลายความสามารถในการอ่านรหัสของคุณทำให้โค้ดของคุณแยกส่วนและเป็นเรื่องยากที่จะเห็นตรรกะทางธุรกิจดั้งเดิม มันเป็นสิ่งที่ดีที่จะลบรหัสทั่วไปบางอย่างเช่นการโทรกลับ การลดรหัสอย่างมากที่คุณต้องเขียนเนื่องจากการออกแบบภาษาจาวาสคริปต์สามารถช่วยให้คุณเห็นตรรกะของแอปพลิเคชันของคุณได้อย่างชัดเจนยิ่งขึ้น
2. เขียนรหัสด้วยตนเองสำหรับการใช้งานองค์ประกอบ DOM: การทำงาน DOM เป็นส่วนพื้นฐานของแอปพลิเคชัน AJAX แต่มันมักจะ "ยุ่งยาก" และผิดพลาดได้ง่าย อินเทอร์เฟซ UI ที่อธิบายไว้ในวิธีการประกาศสามารถเปลี่ยนแปลงได้ด้วยการเปลี่ยนแปลงสถานะแอปพลิเคชันช่วยให้คุณสามารถปลดปล่อยตัวเองจากการเขียนรหัสการทำงาน DOM ระดับต่ำ ในแอปพลิเคชันส่วนใหญ่ที่เขียนใน AngularJS นักพัฒนาไม่จำเป็นต้องเขียนรหัสที่ทำงาน DOM ด้วยตัวเองอีกต่อไป แต่คุณยังสามารถเขียนได้หากคุณต้องการ
3. อ่านและเขียนข้อมูลไปยังอินเตอร์เฟส UI: แอปพลิเคชัน AJAX ส่วนใหญ่คือการดำเนินการ CRUD กระบวนการคลาสสิกคือการสร้างข้อมูลเซิร์ฟเวอร์ลงในวัตถุภายในจากนั้นรวบรวมวัตถุลงในรูปแบบ HTML และผู้ใช้จะแก้ไขฟอร์มจากนั้นตรวจสอบฟอร์ม หากมีข้อผิดพลาดใด ๆ มันจะแสดงข้อผิดพลาดจากนั้นจัดระเบียบข้อมูลลงในวัตถุภายในใหม่และส่งกลับไปยังเซิร์ฟเวอร์ มีรหัสมากเกินไปที่จะทำซ้ำในกระบวนการนี้ทำให้รหัสดูเหมือนจะอธิบายกระบวนการดำเนินการทั้งหมดของแอปพลิเคชันทั้งหมดแทนที่จะเป็นตรรกะทางธุรกิจที่เฉพาะเจาะจงและรายละเอียดทางธุรกิจ
4. ก่อนที่คุณจะเริ่มคุณต้องเขียนโค้ดพื้นฐานจำนวนมาก: โดยปกติคุณต้องเขียนรหัสพื้นฐานจำนวนมากเพื่อใช้แอปพลิเคชัน "Hello World" ด้วย AngularJS จะให้บริการบางอย่างที่ช่วยให้คุณเริ่มเขียนแอปพลิเคชันของคุณได้อย่างง่ายดายและบริการเหล่านี้จะถูกเพิ่มลงในแอปพลิเคชันของคุณโดยอัตโนมัติด้วยการฉีดพึ่งพาการพึ่งพาการพึ่งพาการพึ่งพาแบบพึ่งพาแบบ Guice สิ่งที่เป็นจริงโดยเฉพาะอย่างยิ่งคือคุณสามารถเข้าใจกระบวนการเริ่มต้นของการทดสอบอัตโนมัติได้อย่างเต็มที่