การผูกข้อมูล
คุณทำการสร้างเว็บเพจของคุณและวาง {{data bindings}} ต่อไปทุกครั้งที่คุณรู้สึกว่ามีข้อมูลแบบไดนามิก Angular จะให้ตัวจัดการ $ scope ซึ่งคุณสามารถเติม (แบบคงที่หรือผ่านการเรียกไปยังเว็บเซิร์ฟเวอร์)
นี่เป็นความเข้าใจที่ดีของการเชื่อมโยงข้อมูล ฉันคิดว่าคุณผิดพลาดแล้ว
การจัดการ DOM
สำหรับการจัดการ DOM อย่างง่ายซึ่งไม่เกี่ยวข้องกับการจัดการข้อมูล (เช่นการเปลี่ยนสีใน mousehover การซ่อน / แสดงองค์ประกอบเมื่อคลิก) jQuery หรือ js โรงเรียนเก่านั้นเพียงพอและสะอาดกว่า สิ่งนี้อนุมานว่าโมเดลใน mvc ของแองกูลาร์เป็นอะไรที่สะท้อนข้อมูลในหน้าและด้วยเหตุนี้คุณสมบัติ css เช่นสีการแสดง / ซ่อน ฯลฯ การเปลี่ยนแปลงจะไม่มีผลกับโมเดล
ฉันเห็นจุดของคุณที่นี่เกี่ยวกับการจัดการ DOM แบบ "เรียบง่าย" ที่สะอาดกว่า แต่ไม่ค่อยบ่อยและมันจะต้อง "ง่าย" จริงๆ ฉันคิดว่าการจัดการ DOM เป็นหนึ่งในพื้นที่เช่นเดียวกับการผูกข้อมูลซึ่ง Angular ส่องแสงจริงๆ การเข้าใจสิ่งนี้จะช่วยให้คุณเห็นว่า Angular พิจารณามุมมองอย่างไร
ฉันจะเริ่มต้นด้วยการเปรียบเทียบวิธีเชิงมุมกับแนวทางวานิลลา js กับการจัดการ DOM ตามเนื้อผ้าเราคิดว่า HTML ไม่ใช่ "ทำอะไร" และเขียนเช่นนั้น ดังนั้นอินไลน์ js เช่น "onclick" ฯลฯ เป็นแนวปฏิบัติที่ไม่ดีเพราะพวกเขาวาง "กำลังทำ" ในบริบทของ HTML ซึ่งไม่ได้ "ทำ" พลิกมุมที่แนวคิดบนหัวของมัน เมื่อคุณเขียนมุมมองคุณคิดว่า HTML สามารถ "ทำ" สิ่งต่างๆมากมาย ความสามารถนี้ถูกแยกออกไปในคำสั่งเชิงมุม แต่ถ้ามันมีอยู่แล้วหรือคุณเขียนมันขึ้นมาคุณไม่จำเป็นต้องพิจารณาว่ามันทำอย่างไรคุณแค่ใช้พลังที่มีให้คุณใน HTML ที่เพิ่มขึ้นนี้ เชิงมุมช่วยให้คุณใช้ นอกจากนี้ยังหมายความว่าตรรกะการดูทั้งหมดของคุณมีอยู่ในมุมมองอย่างแท้จริง ไม่ได้อยู่ในไฟล์จาวาสคริปต์ของคุณ อีกครั้งเหตุผลก็คือคำสั่งที่เขียนในไฟล์จาวาสคริปต์ของคุณอาจถูกพิจารณาว่าเป็นการเพิ่มขีดความสามารถของ HTML ดังนั้นคุณจึงให้ DOM กังวลเกี่ยวกับการจัดการตัวเอง (เพื่อพูด) ฉันจะสาธิตด้วยตัวอย่างง่ายๆ
นี่คือมาร์กอัปที่เราต้องการใช้ ฉันให้ชื่อที่เข้าใจง่าย
<div rotate-on-click="45"></div>
ครั้งแรกผมต้องการเพียงเพื่อแสดงความคิดเห็นว่าถ้าเราได้รับ HTML ของเราทำงานนี้ผ่านทางที่กำหนดเองเชิงมุมสั่งที่เรากำลังทำอยู่แล้ว นั่นคือลมหายใจของอากาศบริสุทธิ์ เพิ่มเติมเกี่ยวกับที่ในสักครู่
การใช้งานกับ jQuery
การสาธิตสดที่นี่ (คลิก)
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
การดำเนินการกับเชิงมุม
การสาธิตสดที่นี่ (คลิก)
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
ค่อนข้างเบาสะอาดมากและนั่นเป็นเพียงการจัดการที่ง่าย! ในความคิดของฉันวิธีการเชิงมุมชนะในทุกเรื่องโดยเฉพาะอย่างยิ่งวิธีการทำงานที่เป็นนามธรรมออกไปและมีการประกาศการจัดการ dom ใน DOM ฟังก์ชั่นนั้นติดอยู่กับองค์ประกอบผ่านทางแอตทริบิวต์ html ดังนั้นจึงไม่จำเป็นต้องค้นหา DOM ผ่านตัวเลือกและเรามีการปิดที่ดีสองครั้ง - ปิดหนึ่งครั้งสำหรับโรงงานคำสั่งที่มีการใช้ตัวแปรร่วมกันในทุกคำสั่ง และหนึ่งการปิดสำหรับแต่ละการใช้คำสั่งในlinkฟังก์ชั่น (หรือcompileฟังก์ชั่น)
การเชื่อมโยงข้อมูลแบบสองทางและคำสั่งสำหรับการจัดการ DOM เป็นเพียงจุดเริ่มต้นของสิ่งที่ทำให้ Angular ยอดเยี่ยม Angular ส่งเสริมรหัสทั้งหมดเป็นแบบแยกส่วนนำมาใช้ใหม่และทดสอบได้ง่ายและยังมีระบบการกำหนดเส้นทางแอปหน้าเดียว เป็นสิ่งสำคัญที่จะต้องทราบว่า jQuery เป็นห้องสมุดของวิธีการอำนวยความสะดวก / ข้ามเบราว์เซอร์ที่ต้องการโดยทั่วไป แต่ Angular เป็นเฟรมเวิร์กที่มีคุณสมบัติครบถ้วนสำหรับการสร้างแอปหน้าเดียว สคริปต์เชิงมุมประกอบด้วย jQuery เวอร์ชัน "lite" ของตัวเองเพื่อให้วิธีการที่สำคัญที่สุดบางอย่างพร้อมใช้งาน ดังนั้นคุณอาจโต้แย้งว่าการใช้ Angular IS ใช้ jQuery (เบา) แต่ Angular ให้ "เวทมนต์" มากขึ้นเพื่อช่วยคุณในกระบวนการสร้างแอป
นี่เป็นโพสต์ที่ยอดเยี่ยมสำหรับข้อมูลที่เกี่ยวข้องเพิ่มเติม: ฉันจะ“ คิดใน AngularJS” ได้อย่างไรถ้าฉันมีพื้นหลัง jQuery
ความแตกต่างทั่วไป
ประเด็นข้างต้นมุ่งเป้าไปที่ข้อกังวลเฉพาะของ OP ฉันจะให้ภาพรวมของความแตกต่างที่สำคัญอื่น ๆ ฉันขอแนะนำให้อ่านเพิ่มเติมเกี่ยวกับแต่ละหัวข้อด้วย
ไม่สามารถเปรียบเทียบเชิงมุมกับ jQuery ได้
Angular เป็นเฟรมเวิร์ก jQuery เป็นไลบรารี กรอบมีที่ของพวกเขาและห้องสมุดมีที่ของพวกเขา อย่างไรก็ตามไม่มีคำถามว่ากรอบงานที่ดีมีพลังในการเขียนแอปพลิเคชันมากกว่าห้องสมุด นั่นคือจุดของกรอบ คุณยินดีที่จะเขียนโค้ดของคุณใน JS ธรรมดาหรือคุณสามารถเพิ่มในไลบรารีของฟังก์ชั่นทั่วไปหรือคุณสามารถเพิ่มกรอบการทำงานเพื่อลดรหัสที่คุณต้องการในการทำสิ่งต่างๆให้สำเร็จ ดังนั้นคำถามที่เหมาะสมกว่าคือ:
ทำไมต้องใช้เฟรมเวิร์ก
เฟรมเวิร์กที่ดีสามารถช่วยออกแบบโค้ดของคุณเพื่อให้เป็นแบบแยกส่วน (ดังนั้นสามารถใช้ซ้ำได้), DRY, สามารถอ่านได้, มีประสิทธิภาพ jQuery ไม่ใช่เฟรมเวิร์กดังนั้นจึงไม่ช่วยในเรื่องนี้ เราทุกคนเห็นกำแพงทั่วไปของรหัสสปาเก็ตตี้ jQuery นี่ไม่ใช่ความผิดของ jQuery - เป็นความผิดของนักพัฒนาที่ไม่ทราบวิธีการออกแบบรหัส อย่างไรก็ตามหาก devs รู้วิธีการออกแบบรหัสพวกเขาจะต้องเขียน "framework" ที่น้อยที่สุดเพื่อให้พื้นฐาน (achitecture และอื่น ๆ ) ที่ฉันพูดถึงเมื่อไม่นานมานี้หรือพวกเขาจะเพิ่มบางสิ่งบางอย่างเข้ามาเช่นคุณ อาจเพิ่ม RequireJS เพื่อทำหน้าที่เป็นส่วนหนึ่งของกรอบงานของคุณสำหรับการเขียนโค้ดที่ดี
นี่คือบางสิ่งที่กรอบการทำงานสมัยใหม่ให้บริการ:
- templating
- การผูกข้อมูล
- การกำหนดเส้นทาง (แอปหน้าเดียว)
- สถาปัตยกรรมแบบโมดูลาร์ที่สะอาดและนำกลับมาใช้ซ้ำได้
- ความปลอดภัย
- ฟังก์ชั่น / คุณสมบัติเพิ่มเติมเพื่อความสะดวก
ก่อนที่ฉันจะพูดคุยเกี่ยวกับ Angular ต่อไปฉันอยากจะชี้ให้เห็นว่า Angular ไม่ใช่คนเดียว ตัวอย่างเช่น Durandal เป็นกรอบงานที่สร้างขึ้นจาก jQuery, Knockout และ RequireJS อีกครั้ง jQuery ไม่สามารถจัดเตรียมสิ่งที่น่าพิศวง, RequireJS และกรอบทั้งหมดที่สร้างไว้ด้านบน มันไม่เทียบเท่า
หากคุณต้องการทำลายดาวเคราะห์และคุณมีดาวมรณะให้ใช้ดาวมรณะ
เชิงมุม (มาเยือน)
จากจุดก่อนหน้านี้ของฉันเกี่ยวกับกรอบการทำงานที่มีให้ฉันอยากจะยกย่องวิธีที่ Angular ให้พวกเขาและพยายามอธิบายว่าทำไมเรื่องนี้ถึงสำคัญกว่า jQuery เพียงอย่างเดียว
การอ้างอิง DOM
ในตัวอย่างด้านบนของฉันมันหลีกเลี่ยงไม่ได้อย่างแน่นอนที่ jQuery ต้องขอเข้า DOM เพื่อให้สามารถใช้งานได้ ซึ่งหมายความว่ามุมมอง (html) เกี่ยวข้องกับการทำงาน (เพราะมีป้ายกำกับที่มีตัวระบุบางอย่างเช่น "ตัวเลื่อนภาพ") และ JavaScript มีความกังวลเกี่ยวกับการให้บริการการทำงานนั้น เชิงมุมกำจัดแนวคิดดังกล่าวผ่านทางนามธรรม โค้ดที่ถูกเขียนอย่างเหมาะสมด้วย Angular หมายความว่ามุมมองนั้นสามารถประกาศพฤติกรรมของตนเองได้ ถ้าฉันต้องการที่จะแสดงนาฬิกา:
<clock></clock>
เสร็จสิ้น
ใช่เราต้องไปที่ JavaScript เพื่อทำให้สิ่งนั้นมีความหมาย แต่เรากำลังทำสิ่งนี้ในลักษณะตรงกันข้ามกับวิธี jQuery คำสั่งเชิงมุมของเรา (ซึ่งอยู่ในโลกเล็ก ๆ ของตัวเอง) มี "augumented" html และ html ที่เชื่อมโยงการทำงานเข้ากับตัวมันเอง
Architecure MVW / โมดูล / การพึ่งพาการฉีด
เชิงมุมช่วยให้คุณสามารถจัดโครงสร้างโค้ดของคุณได้อย่างตรงไปตรงมา ดูสิ่งต่าง ๆ ที่อยู่ในมุมมอง (html) ฟังก์ชันการทำงานของมุมมองที่เพิ่มขึ้นอยู่ในคำสั่งตรรกะอื่น ๆ (เช่นการโทร ajax) และฟังก์ชันที่อยู่ในบริการและการเชื่อมต่อบริการและตรรกะกับมุมมองนั้นอยู่ในตัวควบคุม มีองค์ประกอบเชิงมุมอื่น ๆ เช่นกันที่ช่วยจัดการกับการกำหนดค่าและการปรับเปลี่ยนการบริการ ฯลฯ ฟังก์ชั่นใด ๆ ที่คุณสร้างขึ้นสามารถใช้ได้โดยอัตโนมัติทุกที่ที่คุณต้องการผ่านระบบย่อย Injector ซึ่งดูแลการฉีดพึ่งพาตลอดทั้งแอปพลิเคชัน เมื่อเขียนแอปพลิเคชัน (โมดูล) ฉันจะแบ่งมันเป็นโมดูลที่สามารถนำกลับมาใช้ใหม่ได้แต่ละตัวมีองค์ประกอบที่ใช้ซ้ำได้ของตัวเองแล้วรวมไว้ในโครงการที่ใหญ่กว่า เมื่อคุณแก้ปัญหากับ Angular แล้วคุณจะ แก้ไขโดยอัตโนมัติในวิธีที่มีประโยชน์และจัดโครงสร้างเพื่อนำมาใช้ใหม่ในอนาคตและรวมไว้ในโครงการถัดไปได้อย่างง่ายดาย ขนาดใหญ่โบนัสทั้งหมดนี้คือรหัสของคุณจะง่ายขึ้นในการทดสอบ
การทำสิ่งต่าง ๆ เป็น "งาน" ในเชิงมุมไม่ใช่เรื่องง่าย
ขอบคุณพระเจ้า. รหัสสปาเก็ตตี้ jQuery ดังกล่าวเป็นผลมาจาก dev ที่ทำบางสิ่งบางอย่าง "ทำงาน" แล้วย้ายไป คุณสามารถเขียนโค้ด Angular ที่ไม่ดี แต่มันยากกว่ามากที่จะทำเช่นนั้นเพราะ Angular จะต่อสู้กับคุณ ซึ่งหมายความว่าคุณต้องใช้ประโยชน์ (อย่างน้อยบ้าง) กับสถาปัตยกรรมที่สะอาดที่มีให้ กล่าวอีกนัยหนึ่งเป็นการยากที่จะเขียนโค้ดที่ไม่ดีด้วย Angular แต่สะดวกกว่าในการเขียนโค้ดที่สะอาด
เชิงมุมอยู่ไกลจากความสมบูรณ์แบบ โลกการพัฒนาเว็บมีการเติบโตและเปลี่ยนแปลงอยู่ตลอดเวลาและมีวิธีการใหม่ ๆ ที่ดีกว่าในการแก้ปัญหา ยกตัวอย่างเช่น React and Flux ของ Facebook มีข้อได้เปรียบเหนือ Angular แต่มีข้อเสียของตัวเอง ไม่มีอะไรสมบูรณ์แบบ แต่ Angular ได้รับและยังยอดเยี่ยมสำหรับตอนนี้ เช่นเดียวกับ jQuery ที่ครั้งหนึ่งเคยช่วยให้เว็บโลกก้าวไปข้างหน้าดังนั้น Angular จึงมีหลายอย่างที่จะตามมา