มันสมเหตุสมผลไหมที่จะใช้ Require.js กับ Angular.js? [ปิด]

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

ใช่มันเหมาะสมที่จะใช้angular.jsพร้อมกับที่require.jsนั้นคุณสามารถใช้require.jsสำหรับการทำส่วนประกอบโมดูล

มีเป็นโครงการเมล็ดพันธุ์both angular.js and require.jsที่ใช้

ในการทบทวนสิ่งที่ฉันคิดว่าคำถามของ OP คือ:

ถ้าฉันกำลังสร้างแอพพลิเคชั่นเป็นหลักใน Angular 1.x และ (โดยปริยาย) ทำเช่นนั้นในยุคของ Grunt / Gulp / Broccoli และ Bower / NPM และฉันอาจมีการพึ่งพาไลบรารีเพิ่มเติมสองสามอย่างต้องเพิ่มชัดเจนเฉพาะเจาะจง คุ้มค่าเกินกว่าที่ฉันจะได้รับจากการใช้ Angular โดยไม่ต้องใช้

หรือใช้วิธีอื่น:

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

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

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

แต่มีอะไรเป็นพิเศษเกี่ยวกับ Angular ที่ทำให้ Require / AMD เหมาะสมอย่างยิ่งหรือไม่? ไม่ในความเป็นจริง Angular มีรูปแบบการทำให้เป็นโมดูลและการห่อหุ้มของคุณเอง และการรวมเอาโมดูล Angular เข้ากับรูปแบบของ AMD นั้นเป็นไปไม่ได้ แต่มันเป็นเรื่องที่ค่อนข้างยาก คุณจะต้องใช้เวลาในการทำให้ทั้งสองรูปแบบรวมเข้าด้วยกัน

สำหรับมุมมองบางอย่างจากทีม Angular นั้นมีสิ่งนี้จาก Brian Ford ผู้เขียน Angular Batarang และปัจจุบันเป็นสมาชิกของทีมหลักของ Angular:

ฉันไม่แนะนำให้ใช้ RequireJS กับ AngularJS แม้ว่าจะเป็นไปได้อย่างแน่นอน แต่ฉันไม่ได้เห็นอินสแตนซ์ใด ๆ ที่ RequireJS มีประโยชน์ในทางปฏิบัติ

ดังนั้นในคำถามที่เฉพาะเจาะจงมากของ AngularJS: Angular และ Require / AMD นั้นมีมุมฉากและในสถานที่ทับซ้อนกัน คุณสามารถใช้มันร่วมกันได้ แต่ไม่มีเหตุผลใดที่เกี่ยวข้องกับธรรมชาติ / รูปแบบของ Angular โดยเฉพาะ

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

ฉันขอแนะนำให้ตรวจสอบ Bower และ NPM และโดยเฉพาะอย่างยิ่ง NPM ฉันไม่ได้พยายามที่จะเริ่มสงครามศักดิ์สิทธิ์เกี่ยวกับประโยชน์เปรียบเทียบของเครื่องมือเหล่านี้ ฉันแค่อยากจะบอกว่า: มีวิธีอื่น ๆ ในการดูแลแมวและวิธีการเหล่านั้นอาจดีกว่า AMD / ต้องการ (แน่นอนพวกเขามีโมเมนตัมที่เป็นที่นิยมมากขึ้นในช่วงปลายปี 2015 โดยเฉพาะ NPM รวมกับโมดูล ES6 หรือ CommonJS ดูคำถาม SO ที่เกี่ยวข้อง )

สิ่งที่เกี่ยวกับการโหลดขี้เกียจ?

โปรดทราบว่าการโหลดที่ขี้เกียจและการดาวน์โหลดที่ขี้เกียจนั้นแตกต่างกัน การโหลดแบบสันหลังยาวของ Angular ไม่ได้หมายความว่าคุณจะดึงมันโดยตรงจากเซิร์ฟเวอร์ ในแอปพลิเคชันสไตล์ Yeoman ที่มีระบบอัตโนมัติ javascript คุณกำลังเชื่อมต่อและทำให้ shebang ทั้งหมดรวมกันเป็นไฟล์เดียว มีอยู่ แต่ไม่ถูกเรียกใช้ / อินสแตนซ์จนกว่าจะมีความจำเป็น การปรับปรุงความเร็วและแบนด์วิดท์ที่คุณได้รับจากการทำเช่นนี้มหาศาลเกินกว่าการปรับปรุงที่ถูกกล่าวหาอย่างมากจากการดาวน์โหลดตัวควบคุม 20 บรรทัดที่ขี้เกียจ ในความเป็นจริงเวลาแฝงของเครือข่ายที่สูญเปล่าและโอเวอร์เฮดการส่งข้อมูลสำหรับคอนโทรลเลอร์นั้นจะเป็นลำดับที่มีขนาดใหญ่กว่าขนาดของคอนโทรลเลอร์

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

แต่สิ่งที่เกี่ยวกับระหว่างการพัฒนาในกล่อง dev ท้องถิ่นของฉัน

ฉันจะโหลดไฟล์สคริปต์หลายสิบ / ร้อยไฟล์ทั้งหมดโดยไม่ต้องแนบไฟล์ทั้งหมดกับ index.html ด้วยตนเองได้อย่างไร

ดูที่เครื่องกำเนิดไฟฟ้าย่อยในเครื่องกำเนิดไฟฟ้าเชิงมุมของ Yeoman หรือที่รูปแบบระบบอัตโนมัติเป็นตัวเป็นตนในgenerator-gulp-angularหรือที่ Webpack automation มาตรฐานสำหรับการตอบสนอง สิ่งเหล่านี้มอบวิธีที่สะอาดและปรับขนาดได้ให้กับคุณ: แนบไฟล์โดยอัตโนมัติในเวลาที่ส่วนประกอบนั่งร้านหรือจะจับพวกมันทั้งหมดโดยอัตโนมัติหากมีอยู่ในโฟลเดอร์ / จับคู่รูปแบบกลมบางอย่าง คุณไม่จำเป็นต้องคิดถึงการโหลดสคริปต์ของคุณเองอีกเมื่อคุณมีตัวเลือกหลัง

ด้านล่างบรรทัด?

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

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

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

(อัปเดตซ้ำ ๆ เพื่อให้ทันกับฉาก JS ที่พัฒนาขึ้น)

ใช่มันสมเหตุสมผลแล้ว

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

ที่มา: เว็บไซต์ทางการของ Angular JS

ฉันเชื่อว่านี่เป็นคำถามเชิงอัตวิสัยดังนั้นฉันจะให้ความเห็นส่วนตัวของฉัน

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

var app = angular.module("myApp");

แล้ว

app.directive(...);

app.controller(...);

app.service(...);

หากคุณดูที่แองกูลาร์ - เมล็ดซึ่งเป็นแอพเริ่มต้นที่เรียบร้อยสำหรับแองกูลาร์พวกเขาได้แยกคำสั่งบริการผู้ควบคุม ฯลฯ ออกเป็นโมดูลที่แตกต่างกันแล้วโหลดโมดูลเหล่านั้นเป็นการพึ่งพาในแอพหลัก

สิ่งที่ต้องการ :

var app = angular.module("myApp",["Directives","Controllers","Services"];

Angular ยังขี้เกียจโหลดโมดูลเหล่านี้ (ในหน่วยความจำ) ไม่ใช่ไฟล์สคริปต์

ในแง่ของการโหลดไฟล์สคริปต์ที่ขี้เกียจตรงไปตรงมาเว้นแต่ว่าคุณกำลังเขียนสิ่งที่มีขนาดใหญ่มากมันจะเกินความจริงเพราะมุมของมันจะลดจำนวนรหัสที่คุณเขียนลงไปมาก แอพทั่วไปที่เขียนในกรอบอื่น ๆ ส่วนใหญ่อาจคาดว่าจะลดลงประมาณ 30-50% ใน LOC หากเขียนเป็นมุม

การใช้ RequireJS กับ AngularJS นั้นสมเหตุสมผล แต่ถ้าคุณเข้าใจว่าแต่ละคนทำงานอย่างไรเกี่ยวกับการฉีดขึ้นอยู่กับว่าทั้งคู่ฉีดการพึ่งพาพวกเขาฉีดสิ่งต่าง ๆ มาก

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

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

และตอนนี้สมมติว่าคุณต้องการใช้ตัวกรอง "ทักทาย" ในโมดูลอื่นที่เรียกว่า "วินาที" ซึ่งใช้ตัวกรอง "ลาก่อน" คุณสามารถทำการฉีดโมดูล "แรก" ไปยังโมดูล "ที่สอง":

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

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

ขึ้นอยู่กับโมดูลที่บอกเป็นนัยว่าจำเป็นต้องโหลดโมดูลก่อนที่จะโหลดโมดูลที่ต้องการ

ในกรณีดังกล่าวนี่คือที่ RequireJS สามารถช่วยคุณได้เนื่องจาก RequireJS มีวิธีที่สะอาดในการแทรกสคริปต์ลงในหน้าเพื่อช่วยให้คุณจัดระเบียบสคริปต์ที่ต้องพึ่งพาซึ่งกันและกัน

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

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

คุณจะเห็นว่าเราขึ้นอยู่กับไฟล์ "firstModule" ที่จะถูกฉีดก่อนที่เนื้อหาของการเรียกกลับ RequireJ สามารถดำเนินการได้ซึ่งต้องการโมดูล AngularJS "แรก" ที่จะโหลดเพื่อสร้างโมดูล "ที่สอง"

หมายเหตุด้านข้าง: การฉีด "angular" ในไฟล์ "firstModule" และ "secondModule" เป็นสิ่งจำเป็นสำหรับการพึ่งพาเพื่อใช้ AngularJS ภายในฟังก์ชันการเรียกกลับ RequireJS และต้องกำหนดค่าใน RequireJS config เพื่อแม็พ "angular" กับโค้ดไลบรารี คุณอาจโหลด AngularJS ไปยังหน้าเว็บด้วยวิธีดั้งเดิมเช่นกัน (แท็กสคริปต์) แม้ว่าจะเอาชนะผลประโยชน์ RequireJS

รายละเอียดเพิ่มเติมเกี่ยวกับการรองรับ RequireJS จาก AngularJS core จากรุ่น 2.0 ในโพสต์บล็อกของฉัน

ขึ้นอยู่กับการโพสต์บล็อกของฉัน"ทำให้ความรู้สึกของ RequireJS กับ AngularJS"นี่คือการเชื่อมโยง

ในฐานะที่เป็น @ganaraj กล่าวถึง AngularJS มีการฉีดพึ่งพาที่แกนกลางของมัน เมื่อสร้างแอปพลิเคชั่นของเล่นที่มีและไม่มี RequireJS ฉันพบว่า RequireJS นั้นอาจเกินความจำเป็นสำหรับกรณีการใช้งานส่วนใหญ่

นั่นไม่ได้หมายความว่า RequireJS นั้นไม่ได้มีประโยชน์สำหรับความสามารถในการโหลดสคริปต์และทำให้ codebase ของคุณสะอาดระหว่างการพัฒนา การรวมเครื่องมือเพิ่มประสิทธิภาพ r.js ( https://github.com/jrburke/r.js ) กับอัลมอนด์ ( https://github.com/jrburke/almond ) สามารถสร้างเรื่องราวการโหลดสคริปต์ที่บางเฉียบได้ อย่างไรก็ตามเนื่องจากคุณสมบัติการจัดการการพึ่งพาไม่สำคัญกับแองกูลาร์ที่เป็นแกนหลักของแอปพลิเคชันของคุณคุณยังสามารถประเมินด้านไคลเอนต์อื่น ๆ (HeadJS, LABjs, ... ) หรือแม้แต่ฝั่งเซิร์ฟเวอร์ (MVC4 Bundler, ... ) สำหรับแอปพลิเคชันเฉพาะของคุณ

ใช่มันเป็นพิเศษสำหรับสปาขนาดใหญ่มาก

ในบางสถานการณ์ต้องใช้ JJ เป็นสิ่งจำเป็น ตัวอย่างเช่นฉันพัฒนาแอปพลิเคชัน PhoneGap โดยใช้ AngularJS ซึ่งใช้ Google Map API ด้วย หากไม่มีตัวโหลด AMD เช่น RequireJS แอปจะหยุดทำงานทันทีที่เปิดตัวเมื่อออฟไลน์เนื่องจากไม่สามารถจัดหาสคริปต์ Google Map API ได้ ตัวโหลด AMD ให้โอกาสฉันในการแสดงข้อความแสดงข้อผิดพลาดแก่ผู้ใช้

อย่างไรก็ตามการรวมระหว่าง AngularJS และ RequireJS นั้นค่อนข้างยุ่งยาก ฉันสร้าง angularAMD เพื่อทำให้กระบวนการเจ็บปวดน้อยลง:

http://marcoslin.github.io/angularAMD/

คำตอบสั้น ๆ คือมันสมเหตุสมผล เมื่อเร็ว ๆ นี้มีการพูดคุยกันใน ng-conf 2014 นี่คือการพูดคุยในหัวข้อนี้:

http://www.youtube.com/watch?v=4yulGISBF8w

มันสมเหตุสมผลที่จะต้องใช้ requirejs กับ angularjs ถ้าคุณวางแผนเกี่ยวกับตัวควบคุมการโหลดแบบขี้เกียจและคำสั่งอื่น ๆ ในขณะที่ยังรวมการพึ่งพาแบบอิงหลาย ๆ อย่างเข้าด้วยกันเป็นไฟล์สคริปต์เดี่ยว RequireJS มีเครื่องมือเพิ่มประสิทธิภาพที่ทำให้การรวมเป็นเรื่องง่าย ดูhttp://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

ใช่มันสมเหตุสมผลแล้วที่จะใช้ requireJS กับ Angular ฉันใช้เวลาหลายวันในการทดสอบโซลูชันทางเทคนิคหลายอย่าง

ฉันสร้าง Angular Seed ด้วย RequireJS ทางฝั่งเซิร์ฟเวอร์ ง่ายมาก ฉันใช้สัญลักษณ์ SHIM สำหรับโมดูล AMD และไม่ใช่ AMD เพราะฉันคิดว่ามันยากมากที่จะจัดการกับระบบฉีดพึ่งพาสองแบบที่แตกต่างกัน

ฉันใช้ grunt และ r.js เพื่อเชื่อมไฟล์ js บนเซิร์ฟเวอร์ขึ้นอยู่กับไฟล์คอนฟิกูเรชัน SHIM (การพึ่งพา) ดังนั้นฉันจึงอ้างถึงไฟล์ js เดียวในแอปของฉัน

สำหรับข้อมูลเพิ่มเติมไปที่เมล็ดพันธุ์ Angular ของฉัน Github: https://github.com/matohawk/angular-seed-requirejs

ฉันจะหลีกเลี่ยงการใช้ Require.js แอพที่ฉันเห็นแล้วว่าทำสิ่งนี้ให้ยุ่งเหยิงไปกับสถาปัตยกรรมรูปแบบโมดูลหลายประเภท เอเอ็มดีเผยรสชาติที่แตกต่างกันของ IIFE ฯลฯ มีวิธีอื่น ๆ เพื่อโหลดตามความต้องการเช่นเป็นmod loadOnDemand เชิงมุม การเพิ่มสิ่งอื่น ๆ เพียงเติมรหัสของคุณเต็มไปด้วย cruft และสร้างอัตราส่วนสัญญาณต่อสัญญาณรบกวนต่ำและทำให้รหัสของคุณอ่านยาก

นี่คือวิธีที่ฉันใช้: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

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

คำตอบจาก Brian Ford

AngularJS มีระบบโมดูลของตัวเองโดยทั่วไปไม่ต้องการอะไรอย่าง RJS

การอ้างอิง: https://github.com/yeoman/generator-angular/issues/40

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

แต่ในกรณีที่โครงการของคุณใหญ่ขึ้น หรือคุณคาดการณ์สถานการณ์ดังกล่าวคุณควรรวมเชิงมุมกับ requirejs ในนี้บทความที่คุณสามารถดูแอปสาธิตเพื่อบูรณาการดังกล่าว