ฉันควรใช้ทั้ง AngularJS และ ASP.NET MVC หรือไม่

58

ฉันเริ่มเรียนรู้ AngularJS และ ASP.NET MVC แต่ไม่แน่ใจว่าทำไมต้องใช้ทั้งคู่เข้าด้วยกันในโครงการเดียวกัน

พวกเขาไม่ใช่ทั้งกรอบ MVC หรือเปล่า? ฉันควรจะใช้ทั้งสองอย่างในแอพพลิเคชั่นเดียวกันหรือไม่? มันไม่ได้เป็นอย่างใดอย่างหนึ่ง?

angularjs asp.net-mvc5

— นาตาลี
แหล่งที่มา

74

หากคุณกำลังสร้างแอพลิเคชันหน้าเดียว (SPA)แล้วคุณอาจจะไม่จำเป็นต้อง "MVC" ในASP.NET MVC มุมมองโดยเฉพาะมุมมองแบบไดนามิกมีแนวโน้มที่จะแสดงผล / จัดการฝั่งไคลเอ็นต์ จัดการเชิงมุมที่ดี

แต่บางทีคุณอาจไม่ต้องการสปา 100% แล้วไง? ลองนึกภาพแทน 10 หน้า แต่ 10 หน้านั้นดีมากพลวัต หลังจากที่ผู้ใช้เข้าสู่ระบบจะมีตราผู้ใช้ขึ้นมาเล็กน้อยที่มุมขวา นั่นไม่ใช่แบบไดนามิก มันแสดงให้เห็นบางสิ่งที่ดีเช่น "คะแนน" ของผู้ใช้และเซลฟี่ล่าสุดของผู้ใช้ คุณแคชสิ่งที่ดีเพื่อให้สามารถดึงข้อมูลได้ง่าย ทีนี้คุณสามารถไปได้สองทางกับสิ่งนี้ หากคุณเป็นนัก MVC ที่ฝั่งไคลเอ็นต์คุณก็จะดึงข้อมูลตราได้หลังจากที่โหลด HTML เริ่มต้นเหมือนกับข้อมูลอื่น ๆ ทั้งหมด แต่บางทีคุณไม่ใช่คนเจ้าระเบียบ บางทีคุณอาจจะตรงกันข้ามกับคนเจ้าระเบียบ บางทีคุณอาจเป็นคนขี้กลาก ดังนั้นแทนที่จะส่ง HTML เริ่มต้นให้ส่ง JavaScript บางส่วนที่จะโพสต์กลับไปที่เซิร์ฟเวอร์ของคุณโพสต์ผ่าน JavaScript เพื่อคว้าข้อมูลตราสัญลักษณ์จากนั้นจึงรวมข้อมูลนั้นลงในมุมมองผ่าน MVC ฝั่งไคลเอ็นต์นั่นคือ HTML เริ่มต้นของคุณ หลังจากส่ง HTML เริ่มต้นของคุณแล้วคุณดำเนินการกับการแสดง MVC ฝั่งไคลเอ็นต์ตามปกติ

ดังนั้น ... MVC บนเซิร์ฟเวอร์และบนไคลเอนต์เป็นวิธีที่สะดวกในการจัดระเบียบรหัสที่เคยเป็นระเบียบในปี 2544 คุณไม่จำเป็นต้องเลือกอย่างใดอย่างหนึ่ง คุณสามารถเลือกได้ทั้ง ได้รับยิ่งคุณทำหลังจากส่ง HTML เริ่มต้นมากเท่าไหร่คุณก็ต้องใช้ MVC ฝั่งเซิร์ฟเวอร์น้อยลง ยังคงมีสำหรับคุณถ้าคุณต้องการมัน ตัวอย่างเช่นฉันทำงานกับแอปพลิเคชัน ASP.NET MVC / Angular ที่แม่แบบ Angular ภายนอกอาจเป็น. NET MVC ActionResult นั่นหมายความว่าเซิร์ฟเวอร์คอนโทรลเลอร์ของคุณสามารถผสานข้อมูลลงในมุมมองของมันส่งไปยังแองกูลาร์เป็นเทมเพลตและคอนโทรลเลอร์ของแองกูลาร์สามารถผสานข้อมูลเข้ากับมุมมองได้ ฉันไม่ได้บอกว่านี่เป็นความคิดที่ดี แต่มันแสดงให้เห็นว่ารูปแบบหนึ่งของ MVC ไม่ได้ทำให้สิ่งอื่นล้าสมัย

นอกจากนี้ไม่ว่าคุณจะปรับใช้ Angular ได้อย่างไรคุณจะต้องมีวิธีการส่ง HTML เริ่มต้นเทมเพลตและข้อมูลที่สำคัญที่สุด ทำไมไม่ใช้แพลตฟอร์มที่ทำให้ง่ายขึ้น? มีอยู่มากมาย แต่. NET MVC นั้นไม่ใช่เรื่องเหลวไหล อย่างที่ฉันบอกคุณสามารถสร้าง HTML เริ่มต้นและเทมเพลต Angular ภายนอกเป็นผลมาจากการกระทำ MVC แต่ยังดีกว่าคุณสามารถใช้. NET'S Web APIในการส่งข้อมูล Web API นั้นอร่อยพอ ๆ กับ apricot compote

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

— โรเจอร์ขาดแคลน
แหล่งที่มา

3

การตอบสนองที่น่าอัศจรรย์ ขอบคุณมากสำหรับคำอธิบายของคุณ +1

— Natalie

คุณช่วยบอกฉันได้ไหมถ้ามีเว็บ API ที่ให้ข้อมูลฉันและฉันต้องการแสดงข้อมูลนี้ในตารางฉันจะทำลูปและเทมเพลตโดยใช้ Angular หรือ MVC หรือไม่ ฉันจะเรียกใช้บริการ web api โดยใช้วิธีใด? คุณตัดสินใจอย่างไรตั้งแต่เริ่มต้นของโครงการว่าคุณจะไปทางไหน

— นาตาลี

1

@Natalie หากข้อมูลมาจาก Web API แสดงว่าคุณกำลังดึงข้อมูลฝั่งไคลเอ็นต์ ซึ่งหมายความว่าคุณมีผลผูกพันในเชิงมุมไม่ใช่. NET MVC คุณไม่วนซ้ำอย่างชัดเจน คุณผูกข้อมูลไปยังตารางของคุณ / ตารางใช้ngRepeat หากต้องการดึงข้อมูลเป็นไปได้ว่าคุณอาจใช้โมดูล$ httpและโทรหาจุดสิ้นสุด Web API ของคุณ สำหรับการตัดสินใจเลือกวิธีการใช้งานนั่นเป็นเรื่องแปลก ไม่มีคำตอบขาวดำ คุณต้องทดลองประเมินและทำตามสัญชาตญาณของคุณ

— Scant Roger

... หนึ่งคำเตือน หากคุณไม่ได้ใช้กรอบงาน Angular หรือ JavaScript บริการเต็มรูปแบบอื่น ๆ มาก่อนคุณจะต้องใช้เวลาในการเรียนรู้เรื่องเชือก พวกเขาไม่จำเป็นต้องตรงไปตรงมา แต่ฉันรับรองได้ว่าพวกมันจะทำให้ชีวิตของคุณง่ายขึ้นในระยะยาว ทำงานหนัก. ติดกับมัน. คุณทำได้ดีมาก

— Scant Roger

1

@ScantRoger ฉันขอโทษ แต่คำตอบของคุณไม่ได้ล้างสิ่งต่าง ๆ ให้ฉัน ถ้าฉันใช้เฟรมเวิร์กฝั่งเซิร์ฟเวอร์ MVC ซึ่งวิวนั้นไม่เชื่อเรื่องพระเจ้าฉันจะผูก Angular เข้ากับมันได้อย่างไร เซิร์ฟเวอร์ (เว็บ API) มีข้อกำหนดรุ่นและคอนโทรลเลอร์อยู่แล้ว ดังนั้นถ้าฉันใช้ Angular ฉันจะถูกกำหนด MVC อีกครั้ง ดังนั้นมันจึงกลายเป็น MCVCM ... (คำจำกัดความของโมเดลและตัวควบคุมทั้งในฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์) หรือนั่นคือเหตุผลที่ฉันไม่ควรใช้เฟรมเวิร์ก MVC ฝั่งไคลเอ็นต์เช่น Angular ถ้าฉันใช้เฟรมเวิร์ก MVC สำหรับ Web API ของฉันแล้ว

— Abdul

17

ASP.NET MVC เป็นกรอบงานฝั่งเซิร์ฟเวอร์ มันไม่สนใจว่าคุณใช้ไลบรารี JavaScript อะไร AngularJS เป็นไลบรารีฝั่งไคลเอ็นต์ซึ่งไม่สนใจว่าเทคโนโลยีด้านเซิร์ฟเวอร์ใดที่ให้อำนาจเว็บไซต์ - ซึ่งอาจเป็น Python, ASP.NET MVC หรือแม้แต่ไฟล์ HTML แบบสแตติกเก่าที่เก็บไว้ในดิสก์โดยตรง

ASP.NET MVC และ AngularJS สามารถใช้งานร่วมกันได้และมีโปรเจ็กต์มากมายที่ใช้ร่วมกัน

คุณจำเป็นต้องใช้ทั้งคู่หรือไม่? ไม่ได้จริงๆ ขึ้นอยู่กับความต้องการของโครงการของคุณทั้งหมด

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

หมายเหตุด้านข้าง: คุณติดแท็กคำถาม ASP.NET MVC 3. เว้นแต่เป็นโครงการดั้งเดิมที่คุณต้องรักษาหรือคุณมีข้อ จำกัด เฉพาะเมื่อโฮสต์แอปพลิเคชันบนเซิร์ฟเวอร์ดั้งเดิมซึ่งไม่ได้อัปเดตในช่วงสี่ปีที่ผ่านมาคุณสามารถใช้ ASP .NET MVC 4 หรือ 5 แทน

— Arseni Mourzenko
แหล่งที่มา

1

ขอบคุณ MainMa ฉันรู้ว่า AngularJS เป็นฝั่งไคลเอ็นต์และ MVC เป็นฝั่งเซิร์ฟเวอร์ ฉันยังทราบว่าไลบรารีอื่น ๆ เช่น handlebars, knockoutjs สามารถใช้ใน MVC.NET และ Angular สามารถใช้ใน php, java applications สิ่งที่ถามคือทำไมต้องใช้ทั้งคู่เข้าด้วยกันเนื่องจากทั้งคู่ทำสิ่งเดียวกันซึ่งก็คือ "MVC" แต่มีฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ ทำไมการผสมเฟรมเวิร์ก MVC ในฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ เราไม่สามารถทำแอปพลิเคชันที่เป็นเพียงแอปพลิเคชันเชิงมุมได้หรือไม่ หรือแอปพลิเคชันที่เป็นแอปพลิเคชั่น MVC.net เท่านั้น

— นาตาลี

@ นาตาลี: ฉันเห็น ฉันแก้ไขคำตอบเพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนั้น การตอบสนองสั้น ๆ คือคุณผสมผสานทั้งสองเฟรมเวิร์กในโครงการที่เหมาะสมที่จะมีโครงสร้างเฉพาะบนทั้งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

— Arseni Mourzenko

คุณช่วยบอกฉันได้ไหมถ้ามีเว็บ API ที่ให้ข้อมูลฉันและฉันต้องการแสดงข้อมูลนี้ในตารางฉันจะทำลูปและเทมเพลตโดยใช้ Angular หรือ MVC หรือไม่ ฉันจะเรียกใช้บริการ web api โดยใช้วิธีใด? คุณตัดสินใจอย่างไรตั้งแต่เริ่มต้นของโครงการว่าคุณจะไปทางไหน

— นาตาลี

ฉันมีคำถามเดียวกันในใจ ฉันไม่พบเหตุผลที่จะใช้ asp.net MVC เลย ฉันหมายถึงดูเหมือนว่า Asp.net Web API ทางฝั่งเซิร์ฟเวอร์และ Angular ทางฝั่งไคลเอ็นต์จะเพียงพอ แต่ฉันคิดก่อน เว็บ API = ชั้นการเข้าถึงข้อมูล, Asp.Net MVC = ชั้นตรรกะธุรกิจ, เชิงมุม = ชั้น UI แต่จากฝั่ง Angular เราสามารถโทรผ่าน Web API ได้เท่านั้นดังนั้นเราจึงไม่สามารถใช้ฝั่งเซิร์ฟเวอร์ Asp.Net MVC ฉันคิดว่าเราต้องการตัวอย่างที่ดีว่าทำไมเราอาจต้องใช้ Asp.Net MVC

— ซาลิม

9

หากคุณกำลังใช้ visual studio มีเทมเพลตเว็บไซต์ MVC แบบ 'หน้าเดียว' ซึ่งรวมถึงตัวควบคุมเชิงมุมและ MVC Web Api

วิธีนี้ใช้งานได้ดีเพราะรหัสฝั่งเซิร์ฟเวอร์ MVC ของคุณเป็นจุดสิ้นสุด json สำหรับโค้ดฝั่งไคลเอ็นต์เชิงมุมที่จะเรียก

นอกจากนี้คุณสามารถใช้ตัวควบคุม MVC เพื่อแสดงมุมมอง html พื้นฐานหรือมุมมองสำหรับแอปหน้าเดียวของคุณ สิ่งนี้จะช่วยให้คุณมีพลังในการสร้างฝั่งเซิร์ฟเวอร์, การอนุญาต, การเปลี่ยนเส้นทาง, การจัดการข้อผิดพลาด ฯลฯ

บ่อยครั้งที่คุณต้องการเซิร์ฟเวอร์จำนวนเล็กน้อยที่สร้าง html / javascript แม้ในแอปพลิเคชันหน้าเดียวสิ่งต่าง ๆ เช่น URL ปลายทางสำหรับสภาพแวดล้อมที่แตกต่างกันภาษาที่แตกต่างกันหรือแม้แต่หน้าการรับรองความถูกต้องแปลก ๆ ซึ่งอาจทำได้ง่ายกว่าฝั่งเซิร์ฟเวอร์

— Ewan
แหล่งที่มา

1

เมื่อสร้างเทมเพลต SPA มาตรฐานใน VS 2015 CE ฉันเห็น bootstrap, jquery, สิ่งที่น่าพิศวง, ตอบกลับ, และแซมมี่ในโฟลเดอร์สคริปต์ แต่ไม่มีเชิงมุม ฉันพลาดอะไรไปรึเปล่า?

— TK-421

2

3 ปีต่อมาใช้ ASP.NET Web API เพื่อแสดงข้อมูลของคุณและ Angular (js หรือใหม่กว่า) เพื่อจัดโครงสร้างแอปของคุณในฝั่งไคลเอ็นต์ หากคุณสร้างเว็บไซต์แบบคงที่ให้ใช้ ASP.NET MVC

— user441521
แหล่งที่มา