TechAlpine – All About Technology

อะไรคือสิ่งที่ AngularJS?

AngularJS ที่มีประสิทธิภาพและโครงสร้าง กรอบ JavaScript ซึ่งเป็นเรื่องง่ายที่จะใช้ในการใช้งานเว็บเดียวและช่วยให้การจัดระเบียบที่มีขนาดใหญ่, หนักใช้งานของลูกค้าเป็นสิ่งที่จัดการได้. มันเป็นแหล่งเปิดกรอบโปรแกรมประยุกต์บนเว็บ, ฟรีและใช้โดยนับพันของนักพัฒนาทั่วโลก.

AngularJS จะขึ้นอยู่กับ MVC (รุ่นควบคุมมุมมอง) รูปแบบที่มีจุดมุ่งหมายเพื่อสร้างการใช้งานเว็บอินเทอร์เน็ตที่หลากหลายและลดความซับซ้อนของการพัฒนาและการทดสอบการใช้งานโดยใช้สถาปัตยกรรม MVC และแยกการใช้งานอินเทอร์เน็ตที่อุดมไปด้วยของคุณในรูปแบบ, มุมมองและควบคุม. AngularJS สร้างการใช้งานหน้าเดียว, ซึ่งหมายความว่าเบราว์เซอร์ที่เป็นไปในการโหลดหน้าเดียวโดยไม่คำนึงถึงขนาดของการประยุกต์ใช้ของคุณ.

AngularJS ได้รับการพัฒนาโดย Miskohevery และ อดัม Abron,การเก็บรักษาโดย Google; ใช้ภายในโดยพวกเขาและเอ็มไอที. มันเป็นเรื่องที่ได้รับใบอนุญาตภายใต้ใบอนุญาตรุ่นอาปาเช่ 2.0. มันได้รับการปล่อยตัวครั้งแรกใน 2009 และรุ่นเสถียรปัจจุบัน 1.3.5 (Decemeber 1, 2014).

AngularJS: ในส่วนนี้, ให้เราสรุปพื้นฐานของ AngularJS.

• เป็นห้องสมุดที่เขียนใน JavaScript
• ไม่ได้เป็นแพลตฟอร์มหรือภาษา
• ไม่ได้เป็นปลั๊กอินหรือส่วนขยาย
• มันยาวยืด HTML, CSS และ JavaScript
• ไม่ได้เป็นห้องสมุดจัดการ DOM เช่น jQuery
• ไม่ต้องใช้ jQuery หรือมรดก
• ไม่จำเป็นต้องมีข้อมูลทางเดียวผูกพันและรหัสสำเร็จรูป

ทำไม AngularJS?

• มันขึ้นอยู่กับรูปแบบการออกแบบ MVC ซึ่งมีหลายวิธีในการสร้างโปรแกรมประยุกต์บนเว็บที่ฝั่งไคลเอ็นต์.
• มันจะช่วยให้สร้างโปรแกรมประยุกต์ด้านลูกค้าที่มีรหัสน้อยลงและความยืดหยุ่นมากขึ้น.
• มันยาวยืด HTML โดยใช้การทำงานของคำสั่ง, คุณลักษณะ, การแสดงออกและแม่แบบเพื่อ HTML.
• AngularJS เป็นสถาปัตยกรรม MVC ซึ่งช่วยลดความยุ่งยากในการพัฒนาและการทดสอบการใช้งานได้อย่างง่ายดายสำหรับฝั่งไคลเอ็นต์.
• มันเป็นสิ่งที่ดีในการพัฒนาโปรแกรมหน้าเดียวและปลายด้านหน้าสำหรับการใช้งานบนเว็บ.
• มันมีกรอบการทำงานที่มีความยืดหยุ่นและคุณสมบัติหลากหลาย. ดังนั้นมันจึงถูกนำมาใช้สำหรับการตรวจสอบทั้งโครงการขนาดใหญ่และการใช้งานเล็ก ๆ น้อย ๆ เล็ก ๆ.

Features:

AngularJS (จาวาสคริปต์ตามกรอบ) สร้างการใช้งานในทางที่เร็วขึ้นโดยใช้คุณสมบัติหลายอย่างเช่น:

• มันเป็นเทคโนโลยีด้านลูกค้าซึ่งมีสิ่งที่มีประสิทธิภาพในการสร้างโปรแกรมเว็บแบบไดนามิก.
• มันเป็นกรอบ MVC ตาม, ช่วยให้ผู้ใช้ในการสร้างสถาปัตยกรรมที่เหมาะสมและการใช้งานเว็บการบำรุงรักษา.
• มันเป็นแหล่งเปิดเว็บกรอบใบสมัครใช้โดยนับพันของนักพัฒนาทั่วโลก.
• จะช่วยให้การใช้งานของชิ้นส่วนที่นำมาใช้ใหม่และนำมาใช้รหัส.
• มันทำให้การสร้างส่วนติดต่อผู้ใช้ (UI) ง่ายผ่านการประมวลผลข้อมูลที่มีผลผูกพัน.
• วิธี HTML เปิดเผย.
• มันจะช่วยให้การแบ่งงานของคุณเป็นส่วนเล็ก.

แผนภาพสถาปัตยกรรมและส่วนประกอบ: ให้เราได้ดูที่แผนภาพสถาปัตยกรรมของกรอบ AngularJS และส่วนประกอบของมัน.

Figure: AngularJS สถาปัตยกรรม

AngularJS มี โมดูล ซึ่งทำหน้าที่เป็นภาชนะสำหรับประเภทของการใช้งานเช่นการควบคุม, มุมมอง, สั่ง, โรงงาน ฯลฯ. โมดูลระบุว่าโปรแกรมที่ควรจะ bootstrapped. ใช้โมดูล, กระบวนการจะง่ายต่อการเข้าใจ; คุณสามารถนำมาใช้ใหม่รหัส, จบสิ้นการทดสอบใช้โมดูลที่จะแทนที่การตั้งค่า ฯลฯ. มันเป็นสถานที่สำหรับการสร้าง, ลงทะเบียนและเรียกโมดูลเชิงมุม.

การกำหนดค่า องค์ประกอบที่ยอมรับเฉพาะผู้ให้บริการจากโมดูล, หมายถึงบริการทุก, โรงงาน ฯลฯ เป็นกรณีของผู้ให้บริการ. มันมีทุกกรณีเหล่านี้ไปยังเส้นทาง.

The เส้นทาง ถูกนำมาใช้สำหรับการเชื่อมโยง URL ที่จะควบคุมและมุมมอง.

The เข้าชม ถูกนำมาใช้เพื่อเพิ่มการจัดการความซับซ้อนของเหตุการณ์ที่ผู้ใช้. จะใช้ งะมุมมองคำสั่งที่เติมเต็มบริการเส้นทางจากแม่แบบของเส้นทางปัจจุบันไปยังรูปแบบหลัก (index.html) ไฟล์.

The ตัวควบคุม ควบคุมข้อมูลของการใช้งาน AngularJS ซึ่งเป็นปกติวัตถุ JavaScript. AngularJS กำหนด ตัวควบคุมคำสั่งที่สร้างวัตถุควบคุมใหม่โดยใช้ฟังก์ชั่นการควบคุม. และลูกใหม่ที่สามารถใช้ได้กับฟังก์ชั่นการควบคุมเป็น $ขอบเขตดังแสดงในแผนภาพ.

The มุมมอง ส่งองค์ประกอบหรือแอตทริบิวต์ไป สั่ง ซึ่งจะบอกคอมไพเลอร์ HTML AngularJS ที่จะแนบพฤติกรรมที่เฉพาะเจาะจงไปยังองค์ประกอบ DOM และเด็ก.

The โรงงาน ถูกนำมาใช้ในการกำหนดบริการ AngularJS และมันจะถูกเรียกเมื่อบริการจะต้องมีการยกตัวอย่าง.

เริ่มต้นกับ AngularJS:

AngularJS เป็นเรื่องง่ายที่จะเริ่มต้นด้วย. มันมีคุณสมบัติเหมือนสองวิธีการผูกข้อมูลซึ่งทำให้แท็กที่กำหนดเอง, คุณลักษณะที่แค็ปซูลในตัวคำสั่งที่ทำให้การขยายการทำงานของ HTM​​L ได้ง่ายขึ้น.

• มันมีการกระจายไฟล์ JavaScript และสามารถนำมาใช้ในหน้าเว็บโดยรวมทั้งห้องสมุด AngularJS ตามที่แสดงด้านล่าง:

[รหัส]

<สคริปต์ src =”ที่ http:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>

 

</สคริปต์>

 

[/รหัส]

 

นอกจากนี้คุณยังสามารถตรวจสอบรุ่นล่าสุดของ AngularJS บนเว็บไซต์อย่างเป็นทางการของ.

• คุณสามารถสร้างแอปพลิเค AngularJS ที่แสดงด้านล่าง:

[รหัส]

<htmlng แอปพลิ></html ที่>

หรือ

<html ที่งะแอปพลิ = "MyApp"></html ที่>

หรือ

<divng แอปพลิ></div>

หรือ

<div งะแอปพลิ = "MyApp"></div>

[/รหัส]

The แอพพลิเค คุณลักษณะที่เป็นองค์ประกอบหลักของ app AngularJS.

• ควบคุมสามารถกำหนดเป็นดังต่อไปนี้:

[รหัส]

<Div แอปพลิ = "" ของตัวควบคุม = "MyController">

<ประเภทการป้อนข้อมูล = "ข้อความ" นาโนรุ่น = "ข้อความ">

</div>

[/รหัส]

The ตัวควบคุมสั่งกำหนดควบคุมแอพลิเคชัน. The รูปแบบสั่งผูกค่าของการควบคุม HTML เช่นช่องใส่, เลือก ฯลฯ ข้อมูลแอพลิเคชัน.

• ดำเนินการควบคุมโดยใช้ $ขอบเขต วัตถุตามที่เขียนไว้ด้านล่าง:

[รหัส]

functionMyController($ขอบเขต){

$scope.message = "ใส่ชื่อคุณ";

}

[/รหัส]

The $ขอบเขต วัตถุหมายถึงรูปแบบโปรแกรมที่เรียกตัวควบคุมที่สร้าง ข้อความ สถานที่ให้บริการในขอบเขต.

 

แนวคิดหลัก:ในส่วนนี้เราจะมีการอภิปรายรายละเอียดเกี่ยวกับองค์ประกอบหลักและแนวคิดที่อยู่เบื้องหลังพวกเขา.

• โมดูล
• สั่ง
• ขอบเขต
• ตัวควบคุม
• การแสดงออก
• แม่แบบ
• สายงานการผลิต
• ตัวกรอง

โมดูล:

โมดูลให้กลไกที่ดีเยี่ยมสำหรับการแบ่งการประยุกต์ใช้เป็นส่วนประกอบเล็ก ๆ นำมาใช้ใหม่และระบุวิธีการประยุกต์ใช้ควรจะ bootstrapped. โมดูลระบุว่าคุณกำหนดส่วนประกอบในการประยุกต์ใช้และทำให้โปรแกรมอ่านได้มากขึ้น. แต่ละโมดูลจะถูกระบุด้วยชื่อที่ไม่ซ้ำ.

สั่ง:

คำสั่งที่มีการก่อสร้างตึกหลักของ AngularJS ที่ใช้ในการสร้างแท็กที่กำหนดเองและสามารถอยู่ในชื่อองค์ประกอบ, คุณลักษณะและความคิดเห็น. คำสั่งที่สามารถใช้เป็นคำสั่ง HTM​​L ที่สร้างเครื่องมือที่ซับซ้อนที่มีฟังก์ชั่นชั้น.

ขอบเขต:

ขอบเขตเป็นวัตถุที่ผูกมุมมองที่จะควบคุมได้. ในโครงสร้าง MVC, มันหมายถึงรูปแบบการประยุกต์ใช้. ขอบเขตสามารถดูสำนวนและเผยแพร่เหตุการณ์ที่พวกเขาจะจัดในโครงสร้างลำดับชั้น.

ตัวควบคุม:

ตัวควบคุมเป็นวัตถุจาวาสคริปต์ที่กำหนดพฤติกรรมที่แท้จริงของ app ของคุณ. มันเป็นความรับผิดชอบสำหรับการตั้งค่าคุณสมบัติรูปแบบและฟังก์ชั่โดยใช้ $ขอบเขต วัตถุ. ควบคุมไม่ได้เก็บของรัฐและไม่ได้มีผลกระทบกับการให้บริการระยะไกล.

การแสดงออก:

นิพจน์จะเขียนภายในวงเล็บปีกกา "{{ }}"หมายถึงการผูกซึ่งอ้างอิงกับรูปแบบโปรแกรมของเรา. นิพจน์ไม่สนับสนุนงบการควบคุมการไหล. AngularJS จะส่งออกข้อมูลที่พวกเขาจะใช้.

แม่แบบ:

แม่แบบเป็นเพียงเก่าธรรมดา HTML ที่ไม่รวมถึงแม่แบบไฟล์ที่เฉพาะเจาะจงใด ๆ มุม. มันมาพร้อมกับชุดของแม่มีชีวิตอยู่เพื่อสร้างตัวควบคุม ฯลฯ โดยใช้แม่แบบเครื่องยนต์. แม่แบบที่ใช้ในการแสดงข้อมูลจากรูปแบบและตัวควบคุม.

สายงานการผลิต:

มันถูกใช้สำหรับการเชื่อมโยงของ URL ไปยังตัวควบคุมและมุมมอง. สายงานการผลิตได้รับการดูแลโดยผู้ให้บริการที่เรียกว่า $ผู้ให้บริการเส้นทาง ที่จะจัดการกับเส้นทางที่เป็นผู้ให้บริการที่ $เส้นทาง บริการ. ในคำอื่น ๆ, มันโหลดย่อยแม่แบบขึ้นอยู่กับ URL ของหน้า.

ตัวกรอง:

กรองถูกนำมาใช้กับการแสดงออกที่จะเปลี่ยนหรือแก้ไขข้อมูลที่ได้จากแบบจำลอง. เราสามารถเพิ่มการแสดงออกหรือคำสั่งโดยใช้ตัวอักษรท่อ. AngularJS มีบางส่วนของตัวกรองที่ใช้กันทั่วไปเช่น:

• เงินตรา: แปลงหมายเลขรูปแบบสกุลเงิน.
• ตัวพิมพ์ใหญ่: สายแปลงเป็นตัวพิมพ์ใหญ่.
• ตัวพิมพ์เล็ก: สายแปลงเป็นตัวพิมพ์เล็ก.
• กรอง: เลือกชุดย่อยของรายการจากอาร์เรย์.
• orderby: อาร์เรย์คำสั่งซื้อโดยการแสดงออกเช่นเรียงตามอักษรสำหรับสตริงและตัวเลขสำหรับตัวเลข.

ตัวอย่าง:

ขอสร้างตัวอย่างหนึ่งที่เรียบง่ายใช้ห้องสมุด AngularJS และสร้างไฟล์ HTML เป็น FirstExample.html ที่แสดงด้านล่าง:

Listing1: โปรแกรมที่ง่าย AngularJS

[รหัส]

<!DOCTYPE html ที่>

<html ที่>

<หัว>

<สคริปต์ src = “ที่ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></สคริปต์>

</หัว>

<ตัว>

<div งะแอปพลิ =”” ควบคุม =”MyController”>

ใส่ชื่อ: <ประเภทการป้อนข้อมูล =”text” รูปแบบ =”ชื่อผู้ใช้”><br>

<br>

ชื่อเต็ม: {{ชื่อผู้ใช้}}

</div>

<สคริปต์>

functionMyController($ขอบเขต) {

$scope.userName = “เดวิด”;

}

</สคริปต์>

</ตัว>

</html ที่>

[/รหัส]

ตามที่กล่าวไว้, เราได้รวม AngularJS JavaScript แฟ้มในหน้า HTML ที่กำหนดไว้ภายใน <หัว> tag. ส่วนต่อไปจะมีการตรวจสอบ AngularJS ซึ่งถูกกำหนดให้ใช้ แอพพลิเค แอตทริบิวต์ทำงานภายใน <div> tag.

The ตัวควบคุม สั่งกำหนดควบคุมแอพลิเคชัน. AngularJS จะเรียก "MyController" กับ $ขอบเขต วัตถุที่สร้างสถานที่ให้บริการที่เรียกว่า "ชื่อผู้ใช้" ในขอบเขต.

กําหนดชื่อรูปแบบการใช้ รูปแบบข้อบังคับที่กำหนดไว้ใน <การป้อนข้อมูล> tag. มันผูกช่องใส่เพื่อควบคุมสถานที่ให้บริการ "ชื่อผู้ใช้".

เปิด FirstExample.html ในเบราว์เซอร์และเห็นผลตามที่แสดงในภาพหน้าจอด้านล่าง:

Figure: AngularJS ตัวอย่าง

ข้อสรุป: เราได้กล่าวแล้วทุกด้านของ AnguarJS. ก่อนที่เราจะสรุปได้, ให้เราสรุปจุด. AngularJS (ยังเป็นที่รู้จักเชิงมุม)เป็นแหล่งเปิดกรอบโปรแกรมประยุกต์บนเว็บ. จะให้ลูกค้าด้านสถาปัตยกรรม MVC พร้อมกับส่วนประกอบที่ใช้กันทั่วไปที่จำเป็นสำหรับการใช้งานอินเทอร์เน็ตที่อุดมไปด้วย. AngularJS ดังนี้แบบการเขียนโปรแกรมที่เปิดเผยในการสร้างส่วนติดต่อผู้ใช้. เป้าหมายหลักของกรอบนี้คือการทำให้การพัฒนาและการทดสอบได้ง่ายขึ้น.

หวังว่าคุณจะได้มีความเข้าใจที่ชัดเจนของกรอบ AngularJS. เพลิดเพลินไปกับการอ่านใน www.techalpine.com