AngularJS: จัดโครงสร้างเว็บแอปพลิเคชั่นด้วย ng-apps หลายตัว

blogosphere มีบทความจำนวนหนึ่งเกี่ยวกับหัวข้อของแนวทางการจัดทำแอป AngularJS เช่นสิ่งเหล่านี้ (และอื่น ๆ ):

• http://www.johnpapa.net/angular-app-structuring-guidelines/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-architecture-understanding-modules/
• http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html

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

ฉันไม่ได้อ้างถึงกรณีที่พยายามมีng-appการประกาศหลายครั้งในหน้าเดียวกัน ค่อนข้างฉันหมายถึงส่วนต่าง ๆ ของไซต์ขนาดใหญ่ที่มีng-appการประกาศเฉพาะของตนเอง

ดังที่ Scott Allen เขียนไว้ในบล็อกOdeToCodeของเขา:

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

มีแนวทางใดที่แนะนำให้ทำผิดพลาดเพื่อหลีกเลี่ยงหรือโครงสร้างตัวอย่างที่ดีของสถานการณ์นี้ที่คุณสามารถชี้ไปได้หรือไม่?

อัพเดท - 9/10/2558
โครงการหนึ่งที่มีกลยุทธ์องค์กรที่น่าสนใจคือ MEAN.JS และโฟลเดอร์โมดูล
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

อีกตัวอย่างหนึ่งมาจากตัวอย่าง ASP.NET Music Store SPA https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

นี่คือการออกแบบที่ฉันทำงานด้วย ฉันพบว่ามีประโยชน์กับโครงการขนาดใหญ่สองโครงการที่ฉันสร้างขึ้นและยังไม่เคยปิดกั้นถนนเลย

โครงสร้างโฟลเดอร์

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

• กำหนดค่าเว็บเฟรมเวิร์กเซิร์ฟเวอร์ของคุณเพื่อค้นหาapps/app1/index.htmlเมื่อมีคำขอเข้า/app1มาใช้ URL ที่จำง่าย (เช่นthe-first-application/แทนที่จะapp1/จับคู่กับแผนที่โดยใช้เทคโนโลยีเซิร์ฟเวอร์ของคุณหากจำเป็น
• เทคโนโลยีเซิร์ฟเวอร์ของคุณต้องรวมglobal.htmlไว้ด้วยindex.htmlเนื่องจากมีผู้ให้บริการรวมอยู่ด้วย (ดูด้านล่าง)
• รวมสินทรัพย์ที่แอพที่เกี่ยวข้องต้องการในindex.html(ดูด้านล่าง)
• ใส่ng-appและรากใน<div ui-view></div>index.html
• ทุกแอปและ lib เป็นโมดูลเชิงมุมแยกต่างหาก
• ทุกแอพจะได้รับ<app-name>.module.jsไฟล์ที่มีคำนิยามโมดูลเชิงมุมและรายการการพึ่งพา
• ทุกแอพจะได้รับ<app-name>.jsไฟล์ที่มีโมดูลการตั้งค่าและบล็อกการทำงานและการกำหนดเส้นทางการกำหนดค่าซึ่งเป็นส่วนหนึ่งของมัน
• แอปทุกคนได้รับpartsโฟลเดอร์ที่มีการใช้งานควบคุมมุมมองการให้บริการและคำสั่งในโครงสร้างที่ทำให้รู้สึกสำหรับแอปที่เฉพาะเจาะจง ฉันไม่ได้พิจารณาโฟลเดอร์ย่อยอย่างเช่นcontrollers/มีviews/ประโยชน์ ฯลฯ เพราะไม่ได้ปรับขนาด แต่ใช้ YMMV
• Libs ปฏิบัติตามโครงสร้างเดียวกันกับแอพ แต่ไม่ต้องมีสิ่งอื่น ๆ

เริ่มต้นด้วยบริการและคำสั่งต่างภายในแอพที่ใช้งาน ทันทีที่คุณต้องการบางสิ่งในแอปอื่นเช่นกันให้ไปที่ไลบรารีอีกครั้ง พยายามสร้างไลบรารี่ที่สอดคล้องกับการใช้งานไม่ใช่เพียงแค่คำสั่งทั้งหมดหรือไลบรารี่ทั้งหมด

สินทรัพย์

ฉันย่อทั้งไฟล์ JS และ CSS สำหรับรุ่นบิลด์ แต่ทำงานกับไฟล์ที่ไม่ระบุในระหว่างการพัฒนา นี่คือการตั้งค่าที่รองรับสิ่งนี้:

• global.htmlจัดการผู้จัดจำหน่ายรวมทั่วโลกใน วิธีนี้สิ่งที่หนักสามารถโหลดได้จากแคชเมื่อนำทางระหว่าง SPAs ตรวจสอบให้แน่ใจแคชทำงานอย่างเหมาะสม
• index.htmlสินทรัพย์ต่อสปาที่กำหนดไว้ใน สิ่งนี้ควรรวมไฟล์เฉพาะแอปและไลบรารีที่ใช้แล้วเท่านั้น

โครงสร้างโฟลเดอร์ด้านบนทำให้ง่ายต่อการค้นหาไฟล์ที่เหมาะสมสำหรับขั้นตอนการสร้างการลดขนาด

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

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

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

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

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

หากแอปพลิเคชันของคุณต้องการการประกาศแอปพลิเคชัน ng หลายรายการในหน้าเดียวกันคุณจำเป็นต้องบูตโมดูล AngularJS ด้วยตนเองด้วยการฉีดชื่อโมดูลดังที่แสดงด้านล่าง:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

ตัวรวบรวมเสียงนี้จะ อธิบายถึงวิธีที่เราสามารถ bootstrap AngularJS ด้วยตนเองได้