การผสม Angular และ ASP.NET MVC / Web api?


40

ฉันมาจากการใช้ ASP.NET MVC / Web API และตอนนี้ฉันเริ่มใช้ Angular แต่ฉันไม่ชัดเจนเกี่ยวกับวิธีการผสมที่เหมาะสม

เมื่อฉันใช้ Angular แนวคิดด้านเซิร์ฟเวอร์ MVC ยังคงให้ค่าใด ๆ หรือฉันควรใช้ Web API อย่างเคร่งครัดเพื่อรับข้อมูลสำหรับการโทร HTTP เชิงมุม

มีจุดเริ่มต้นที่น่าผิดหวังมากกว่าที่ฉันควรใช้หรือไม่ถ้าเทมเพลต VS กำลังเพิ่มสิ่งต่าง ๆ มากมายที่ฉันไม่ต้องการ

ฉันชอบความคิดของการแบ่งฝั่งเซิร์ฟเวอร์อย่างเข้มงวด = ข้อมูลบริสุทธิ์และฝั่งไคลเอ็นต์ = การประมวลผล HTML ล้วนๆ


คำตอบ:


17

วิธีที่ง่ายที่สุดในการคิดเกี่ยวกับเซิร์ฟเวอร์คือเซิร์ฟเวอร์ทำหน้าที่รัฐ Angular สามารถจัดการรวบรวมการอัปเดตให้เป็นสถานะนั้นและส่งไปยังเว็บ / api บนเซิร์ฟเวอร์ หากคุณต้องการใช้แอปหน้าเดียวมากขึ้นรหัสฝั่งเซิร์ฟเวอร์จะเป็นสถานะเริ่มต้นของแอปของคุณ

Web API เป็นจุดเริ่มต้นที่ยอดเยี่ยมสำหรับการดึงข้อมูลของคุณไปยังแอปของคุณ ในที่สุดคุณจะอัพเดตรูทีนดีฟอลต์เพื่อตอบสนองความต้องการการออกแบบสภาวะแวดล้อมของคุณและถ้าคุณต้องการ

มี Quire ไม่กี่ไลบรารีที่ ASP4 รวมอยู่ตามค่าเริ่มต้นและที่รวมอยู่ในเทมเพลต MVC4 มีหลายสิ่งหลายอย่างรวมอยู่ในหน้าเว็บที่ไม่จำเป็นเช่นเดียวกับที่รวมอยู่ในโครงการและไม่เคยอ้างถึงโดยหน้าเริ่มต้นของพวกเขา คุณควรจะเอาทุกอย่างออกอย่างปลอดภัยยกเว้น jQuery และฉันก็ไปได้ไกลถึงเอา jQueryUI ค่าเริ่มต้นจำนวนมากมีความหมายดี แต่เมื่อคุณเริ่มกรอกความรู้เกี่ยวกับโดเมนของคุณคุณจะใช้ libs ที่ตรงกับความต้องการเฉพาะของคุณ

แม้จะมีการแบ่งที่เข้มงวดคุณจะพบว่า mvc ฝั่งเซิร์ฟเวอร์ยังคงเป็นแบ็คอัพที่สะอาดในแอพเดียว เส้นทางที่มีประสิทธิภาพในการส่งหน้าของคุณและการเรียก API ของคุณเป็นตัวอย่างที่ดีเยี่ยม คุณสมบัติที่มีประโยชน์อีกอย่างคือตัวควบคุมที่ส่งคืนมุมมองที่ไม่ได้ใช้หน้าต้นแบบหรือเป็นเพียงมุมมองบางส่วน Angular มี "มุมมอง" ที่สามารถเติมเทมเพลตซึ่งอาจเป็นไฟล์แบบคงที่หรือบางส่วนจากหนึ่งในเส้นทางของคุณ

ฉันอ่านความคิดเห็นของคุณก่อนหน้านี้ในวันนี้และรวบรวมโซลูชันสาธิตเพื่อแสดงสิ่งที่ฉันพูดถึงในตอนแรก วิธีการแก้ปัญหายังมีการลบ "ขนปุย" บางส่วนออกไปแม้ว่าเมื่อเพิ่ม Angular และBootstrapคุณจะได้รับไลบรารีหลักและทุกรากที่มาด้วย นั่นคือการแลกเปลี่ยนจากการใช้ nuGet

ลองดูสิ: https://github.com/QueueHammer/AngularWithPartialViewViews

ในการเรียนรู้เชิงมุมฉันพบว่าโปรแกรม Angular-Seed มีประโยชน์อย่างเป็นธรรม โดยเฉพาะอย่างยิ่งหลังจากที่ฉันลองสาธิตบนเว็บไซต์ของพวกเขา ตัวอย่างโครงการแตกต่างกันมากพอที่จะช่วยให้คุณเรียนรู้ หลังจากนั้นฉันดู Angular-Require-Seed แต่นั่นเป็นอีกโพสต์ ขั้นตอนโดยขั้นตอนเชิงมุม http://docs.angularjs.org/tutorial เชิงมุมเมล็ดพันธุ์: https://github.com/angular/angular-seed


ดังนั้นจะทำให้มีมุมมองฝั่งเซิร์ฟเวอร์เล็กน้อยที่ปกติแล้ว MVC ทำงานอย่างไรและจากนั้นสำหรับแต่ละมุมมองเหล่านั้นจะมีมุมมองด้านไคลเอนต์หลายมุมมอง (อาจจะสร้าง / รายละเอียด / แก้ไขสำหรับเอนทิตีที่เฉพาะเจาะจง) ถ้าเป็นเช่นนั้นแล้วฉันหวังว่าฉันจะพบแม่แบบเช่นนั้นจะทำให้ผมอยู่บนเส้นทางที่ดีที่จะใช้ MVC และเชิงมุมกัน
pUnkOuter

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

เพิ่งได้รับลิงค์ของคุณ .. ดูตัวอย่าง ดูดี .. คำถามแรกก็คือ .. ดังนั้น .. คุณกำลังรักษาฟังก์ชั่น ASP.NET MVC ไว้ในตำแหน่งหน้าหลักที่คุณเริ่มต้น .. นอกเหนือจากหน้านั้นทุกอย่างอื่นคือมุมมองบางส่วนที่เป็นมุมฉาก .. คุณมี ASP หลักสองตัวได้หรือไม่ มุมมอง NET MVC กล่าวอีกนัยหนึ่ง .. มุมมอง ASP.NET MVC เป็นพาเรนต์ไปยังมุมมองเชิงมุมบางส่วน .. ตัวอย่างเช่น .. บางทีฉันอาจไม่ต้องการมุมมองบางส่วนทั้งหมดภายใต้มุมมอง ONE ASP.NET .. ที่เหมาะสม คุณช่วยบอกฉันทีได้ไหม สิ่งที่ทำให้ฉันอยู่ในจุดที่ดีสำหรับจุดเริ่มต้นที่ฉันคิดว่า .... หรือบางทีสิ่งที่ฉันพูดไม่เหมาะสม?
punkouter

และจุดของ partialsController.cs คืออะไรเพราะไม่เคยเรียกสิ่งเหล่านี้
punkouter

คุณสามารถใส่ชิ้นงานได้เกือบทุกที่ คุณสามารถควบคุมได้มากขึ้นด้วยแอ็คชั่นต่อการดูฉันใช้ "partialsController.cs" หนึ่งชุดในโครงการจับคู่กับมุมมองที่กำหนดในโมดูลแอปเชิงมุม ดังนั้นบางส่วน / view1 กำลังเรียกตัวควบคุม partials และรับ action viewOne จากนั้นรับ viewOne ในการดำเนินการที่คุณสามารถเรียกดู (); ด้วยพารามิเตอร์สตริงส่งผ่านตำแหน่งมุมมองของคุณ ดังนั้นคุณจึงมีความยืดหยุ่นในการจัดระเบียบเกือบทุกอย่างที่คุณต้องการ
QueueHammer

18

มีจุดเริ่มต้นที่น่าผิดหวังมากกว่าที่ฉันควรใช้หรือไม่ถ้าเทมเพลต VS กำลังเพิ่มสิ่งต่าง ๆ มากมายที่ฉันไม่ต้องการ

เทมเพลต VS เหล่านี้เป็นสิ่งที่ดีในการตัดการตั้งค่าเริ่มต้นและเส้นโค้งการเรียนรู้ในจุดเริ่มต้นอย่างไรก็ตามคุณจะต้องปรับแต่งให้เหมาะกับความต้องการโครงการจริงของคุณ

ยกตัวอย่างเช่นในเว็บไซต์นี้http://www.reviewstoshare.comเพื่อนของฉันใช้พร้อมกับAngularJS ASP.NET MVCโปรดทราบว่าไซต์นี้สร้างขึ้นแล้วโดยใช้ ASP.MVC + Jquery สำหรับการโต้ตอบหน้าเว็บตามต้องการ

ในทางกลับกันยังมีลักษณะ "Ajaxy" ในเว็บไซต์เช่นความคิดเห็นการลงคะแนนการตั้งค่าสถานะและอื่น ๆ ไม่แตกต่างจาก Stackoverflow เอง ก่อน AngularJS มันเป็นความยุ่งเหยิงของ Jquery ปลั๊กอินและฟังก์ชั่นในการ$(document).ready()โทรกลับไม่ต้องพูดถึงรหัส JS ไม่สามารถทดสอบได้มากนัก

โดยรวมแล้วการผสมผสานที่เหมาะสมของทั้งสองอย่างทำให้เว็บไซต์ของคุณลื่นและทำงานได้

ป้อนคำอธิบายรูปภาพที่นี่

อ้างอิงที่ดีที่จะดู:


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

สิ่งนี้เป็นจริงปัญหา SEO ได้รับการแก้ไขด้วยการอัปเดตใหม่
EL Yusubov

3
ดังนั้นไม่ต้องวิพากษ์วิจารณ์ แต่จะไม่ทำให้ข้อความเชิงลบในแผนภูมิต่ำกว่าแกน x จริงเหรอ? นั่นจะทำให้แผนภูมิดูเหมือนคลื่นบาปที่กำลังขยายตัว ฉันรู้ว่าไม่ใช่แผนภูมิของคุณ แต่เป็นวิทยาศาสตร์ที่ไม่ดี
QueueHammer

12
QueueHammer คุณต้องสนุกอย่างแท้จริงในงานปาร์ตี้ :-)
โทมัสต็อก

1
ฉันติดอยู่ที่จุดต่ำสุดของคลื่นทั้งสองด้านของ 'Very Cool!' ฟองสบู่เป็นหนึ่งนรกนรกเชิงบวกรวมกัน
MetaGuru
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.