Có ý nghĩa gì khi sử dụng Require.js với Angular.js không? [đóng cửa]

Tôi là người mới sử dụng Angular.js và cố gắng hiểu nó khác với Backbone.js như thế nào ... Chúng tôi đã từng quản lý các gói phụ thuộc của mình với Require.js trong khi sử dụng Backbone. Liệu nó có ý nghĩa để làm điều tương tự với Angular.js?

Có, nó có ý nghĩa để sử dụng angular.jscùng với require.jstrong đó bạn có thể sử dụng require.jsđể mô đun hóa các thành phần.

Có một dự án hạt giống sử dụng both angular.js and require.js.

Để nói lại những gì tôi nghĩ rằng câu hỏi của OP thực sự là:

Nếu tôi đang xây dựng một ứng dụng chủ yếu trong Angular 1.x và (hoàn toàn) làm như vậy trong kỷ nguyên của Grunt / Gulp / Broccoli và Bower / NPM, và tôi có thể có thêm một vài phụ thuộc thư viện, thì Yêu cầu thêm rõ ràng, cụ thể giá trị vượt quá những gì tôi nhận được bằng cách sử dụng Angular mà không cần Yêu cầu?

Hoặc, đặt một cách khác:

"Vanilla Angular có cần Yêu cầu quản lý tải thành phần Angular cơ bản một cách hiệu quả không, nếu tôi có cách xử lý tải tập lệnh cơ bản khác? "

Và tôi tin rằng câu trả lời cơ bản cho điều đó là: "trừ khi bạn có điều gì khác đang diễn ra và / hoặc bạn không thể sử dụng các công cụ mới hơn, hiện đại hơn".

Chúng ta hãy rõ ràng ngay từ đầu: RequireJS là một công cụ tuyệt vời giải quyết một số vấn đề rất quan trọng và bắt đầu chúng ta đi theo hướng ứng dụng Javascript chuyên nghiệp hơn, có thể mở rộng hơn. Điều quan trọng, đây là lần đầu tiên nhiều người gặp phải khái niệm mô đun hóa và đưa mọi thứ ra khỏi phạm vi toàn cầu. Vì vậy, nếu bạn định xây dựng một ứng dụng Javascript cần mở rộng quy mô, thì Yêu cầu và mẫu AMD không phải là công cụ tồi để thực hiện điều đó.

Nhưng, có điều gì đặc biệt về Angular khiến cho Require / AMD trở nên đặc biệt phù hợp không? Trên thực tế, Angular cung cấp cho bạn mô hình đóng gói và mô đun hóa của riêng nó, theo nhiều cách, nó làm cho dư thừa các tính năng mô đun hóa cơ bản của AMD. Và, việc tích hợp các mô-đun Angular vào mẫu AMD không phải là không thể, nhưng nó hơi ... khó hiểu. Bạn chắc chắn sẽ dành thời gian để có được hai mẫu để tích hợp độc đáo.

Đối với một số quan điểm từ chính nhóm Angular, có điều này , từ Brian Ford, tác giả của Angular Batarang và hiện là thành viên của nhóm nòng cốt Angular:

Tôi không khuyên bạn nên sử dụng RequireJS với AngularJS. Mặc dù điều đó chắc chắn là có thể, tôi đã không thấy bất kỳ trường hợp nào mà RequireJS có lợi trong thực tế.

Vì vậy, về câu hỏi rất cụ thể của AngularJS: Angular và Require / AMD là trực giao và ở những nơi chồng chéo. Bạn có thể sử dụng chúng cùng nhau, nhưng không có lý do cụ thể liên quan đến bản chất / mô hình của chính Angular.

Nhưng những gì về quản lý cơ bản của các phụ thuộc bên trong và bên ngoài cho các ứng dụng Javascript có thể mở rộng? Không yêu cầu làm điều gì đó thực sự quan trọng đối với tôi ở đó?

Tôi khuyên bạn nên kiểm tra Bower và NPM, và đặc biệt là NPM. Tôi không cố bắt đầu một cuộc chiến thần thánh về lợi ích so sánh của các công cụ này. Tôi chỉ muốn nói: có những cách khác để da mèo, và những cách có thể thậm chí còn tốt hơn so với AMD / Yêu cầu. (Họ chắc chắn có động lực phổ biến hơn nhiều vào cuối năm 2015, đặc biệt là NPM, kết hợp với các mô-đun ES6 hoặc CommonJS. Xem câu hỏi SO liên quan .)

Thế còn lười tải?

Lưu ý rằng lười tải và lười tải là khác nhau. Tải lười biếng của Angular không có nghĩa là bạn kéo chúng trực tiếp từ máy chủ. Trong một ứng dụng kiểu Yeoman với tự động javascript, bạn đang ghép và thu nhỏ toàn bộ shebang lại thành một tệp duy nhất. Họ có mặt, nhưng không được thực hiện / khởi tạo cho đến khi cần. Các cải tiến về tốc độ và băng thông mà bạn có được khi thực hiện điều này rất lớn, vượt xa mọi cải tiến bị cáo buộc từ việc lười tải xuống một bộ điều khiển 20 dòng cụ thể. Trong thực tế, độ trễ mạng bị lãng phí và phí truyền tải cho bộ điều khiển đó sẽ là một thứ tự có độ lớn lớn hơn kích thước của chính bộ điều khiển.

Nhưng hãy nói rằng bạn thực sự cần tải xuống một cách lười biếng, có lẽ đối với các phần được sử dụng không thường xuyên của ứng dụng của bạn, chẳng hạn như giao diện quản trị viên. Đó là một trường hợp rất chính đáng. Yêu cầu thực sự có thể làm điều đó cho bạn. Nhưng cũng có nhiều lựa chọn khác , có khả năng linh hoạt hơn để thực hiện điều tương tự. Và Angular 2.0 rõ ràng sẽ giải quyết vấn đề này cho chúng tôi, tích hợp sẵn cho bộ định tuyến . ( Chi tiết .)

Nhưng những gì về quá trình phát triển trên dev boxen địa phương của tôi?

Làm cách nào tôi có thể tải tất cả hàng chục / hàng trăm tệp script mà không cần phải đính kèm tất cả chúng vào index.html theo cách thủ công?

Hãy xem các máy phát phụ trong góc máy phát của Yeoman, hoặc tại các mẫu tự động hóa được thể hiện trong góc máy phát điện , hoặc tự động hóa Webpack tiêu chuẩn cho React. Những cách này cung cấp cho bạn một cách rõ ràng, có thể mở rộng để: tự động đính kèm các tệp tại thời điểm các thành phần được tạo ra hoặc chỉ đơn giản là lấy tất cả chúng một cách tự động nếu chúng có trong một số thư mục nhất định / khớp với các mẫu hình cầu nhất định. Bạn không bao giờ cần phải suy nghĩ về việc tải tập lệnh của riêng mình một khi bạn đã có các tùy chọn sau.

Điểm mấu chốt?

Yêu cầu là một công cụ tuyệt vời, cho những thứ nhất định. Nhưng hãy đi với hạt bất cứ khi nào có thể, và tách những mối quan tâm của bạn bất cứ khi nào có thể. Hãy để Angular lo lắng về mô hình mô đun hóa riêng của Angular và xem xét sử dụng các mô-đun ES6 hoặc CommonJS làm mô hình mô đun hóa chung. Hãy để các công cụ tự động hóa hiện đại lo lắng về việc tải tập lệnh và quản lý phụ thuộc. Và hãy quan tâm đến việc tải async theo cách chi tiết, thay vì làm rối nó với hai mối quan tâm khác.

Điều đó nói rằng, nếu bạn đang phát triển ứng dụng Angular nhưng không thể cài đặt Node trên máy của mình để sử dụng các công cụ tự động hóa Javascript vì một số lý do, thì Require có thể là một giải pháp thay thế tốt. Và tôi đã thấy các thiết lập thực sự phức tạp, nơi mọi người muốn tải động các thành phần Angular mà mỗi cái khai báo các phụ thuộc của riêng chúng hoặc một cái gì đó. Và trong khi tôi có thể cố gắng giải quyết vấn đề đó theo cách khác, tôi có thể thấy giá trị của ý tưởng, cho tình huống rất đặc biệt đó.

Nhưng nếu không ... khi bắt đầu từ đầu với một ứng dụng Angular mới và linh hoạt để tạo ra một môi trường tự động hóa hiện đại ... bạn đã có rất nhiều lựa chọn khác, linh hoạt hơn, hiện đại hơn.

(Được cập nhật liên tục để theo kịp với cảnh JS đang phát triển.)

Vâng, nó có ý nghĩa.

Các mô-đun góc không cố gắng giải quyết vấn đề đặt hàng tải tập lệnh hoặc tìm nạp tập lệnh lười biếng. Những mục tiêu này là trực giao và cả hai hệ thống mô-đun có thể sống cạnh nhau và hoàn thành mục tiêu của chúng.

Nguồn: Trang web chính thức của Angular JS

Điều này tôi tin là một câu hỏi chủ quan, vì vậy tôi sẽ cung cấp ý kiến ​​chủ quan của tôi.

Angular có một cơ chế mô đun hóa được tích hợp sẵn. Khi bạn tạo ứng dụng của mình, điều đầu tiên bạn sẽ làm là

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

và sau đó

app.directive(...);

app.controller(...);

app.service(...);

Nếu bạn nhìn vào hạt giống góc cạnh là ứng dụng khởi động gọn gàng cho góc cạnh, họ đã tách các chỉ thị, dịch vụ, bộ điều khiển, vv thành các mô-đun khác nhau và sau đó tải các mô-đun đó làm phụ thuộc vào ứng dụng chính của bạn.

Cái gì đó như :

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

Angular cũng lười tải các mô-đun này (vào bộ nhớ) chứ không phải các tệp script của chúng.

Về mặt lười biếng tải các tập tin tập lệnh, thành thật mà nói, trừ khi bạn đang viết một cái gì đó cực kỳ lớn, nó sẽ là một việc quá mức vì góc cạnh bởi bản chất của nó làm giảm số lượng mã bạn viết. Một ứng dụng điển hình được viết trong hầu hết các khung khác có thể mong đợi giảm khoảng 30-50% ở LỘC nếu được viết ở góc.

Sử dụng RequireJS với AngularJS có ý nghĩa nhưng chỉ khi bạn hiểu cách mỗi hoạt động của chúng liên quan đến việc tiêm phụ thuộc , vì mặc dù cả hai đều tiêm phụ thuộc, họ tiêm những thứ rất khác nhau.

AngularJS có hệ thống phụ thuộc riêng cho phép bạn tiêm các mô đun AngularJS vào một mô đun mới được tạo để sử dụng lại các triển khai. Giả sử bạn đã tạo một mô-đun "đầu tiên" thực hiện bộ lọc AngularJS "chào":

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

Và bây giờ, giả sử bạn muốn sử dụng bộ lọc "chào" trong một mô-đun khác gọi là "thứ hai" thực hiện bộ lọc "tạm biệt". Bạn có thể thực hiện việc tiêm mô-đun "thứ nhất" vào mô-đun "thứ hai":

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

Vấn đề là để làm cho công việc này hoạt động chính xác mà không cần RequireJS, bạn phải đảm bảo rằng mô-đun AngularJS "đầu tiên" được tải trên trang trước khi bạn tạo mô-đun AngularJS "thứ hai". Trích dẫn tài liệu:

Tùy thuộc vào một mô-đun ngụ ý rằng mô-đun cần thiết phải được tải trước khi mô-đun yêu cầu được tải.

Theo nghĩa đó, đây là nơi RequireJS có thể giúp bạn vì RequireJS cung cấp một cách rõ ràng để đưa tập lệnh vào trang giúp bạn tổ chức các phụ thuộc tập lệnh giữa nhau.

Quay trở lại các mô-đun AngularJS "thứ nhất" và "thứ hai", đây là cách bạn có thể thực hiện bằng cách sử dụng RequireJS tách các mô-đun trên các tệp khác nhau để tận dụng tải phụ thuộc tập lệnh:

// 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 + '!';
      }
    });
});

Bạn có thể thấy rằng chúng tôi phụ thuộc vào tệp "FirstModule" được chèn trước khi nội dung của cuộc gọi lại RequireJS có thể được thực thi, cần tải mô-đun AngularJS "thứ nhất" để tạo mô-đun AngularJS "thứ hai".

Lưu ý bên lề: Việc tiêm "angular" trên các tệp "FirstModule" và "secondModule" là phụ thuộc được yêu cầu để sử dụng AngularJS bên trong chức năng gọi lại RequireJS và nó phải được cấu hình trên cấu hình RequireJS để ánh xạ "góc" vào mã thư viện. Bạn cũng có thể tải AngularJS vào trang theo cách truyền thống (thẻ script) mặc dù đánh bại các lợi ích của RequireJS.

Thêm chi tiết về việc có hỗ trợ RequireJS từ lõi AngularJS từ phiên bản 2.0 trên bài đăng trên blog của tôi.

Dựa trên bài đăng trên blog của tôi "Tạo cảm giác về RequireJS với AngularJS" , đây là liên kết .

Như @ganaraj đã đề cập AngularJS có tiêm phụ thuộc vào cốt lõi của nó. Khi xây dựng các ứng dụng hạt giống đồ chơi có và không có RequireJS, cá nhân tôi thấy RequireJS có thể là quá mức cần thiết cho hầu hết các trường hợp sử dụng.

Điều đó không có nghĩa là RequireJS không hữu ích cho khả năng tải tập lệnh của nó và giữ cho cơ sở mã của bạn sạch sẽ trong quá trình phát triển. Kết hợp trình tối ưu hóa r.js ( https://github.com/jrburke/r.js ) với hạnh nhân ( https://github.com/jrburke/almond ) có thể tạo ra một câu chuyện tải tập lệnh rất mỏng. Tuy nhiên, vì các tính năng quản lý phụ thuộc của nó không quan trọng bằng cốt lõi của ứng dụng, bạn cũng có thể đánh giá các ứng dụng khách khác (HeadJS, LABjs, ...) hoặc thậm chí cả phía máy chủ (MVC4 Bundler, ...) cho ứng dụng cụ thể của bạn.

Vâng, nó làm, đặc biệt cho SPA rất lớn.

Trong một số kịch bản, RequireJS là phải. Ví dụ: tôi phát triển các ứng dụng PhoneGap bằng AngularJS cũng sử dụng Google Map API. Nếu không có trình tải AMD như RequireJS, ứng dụng sẽ đơn giản gặp sự cố khi khởi chạy khi ngoại tuyến vì nó không thể cung cấp các tập lệnh API Google Map. Trình tải AMD cho tôi cơ hội hiển thị thông báo lỗi cho người dùng.

Tuy nhiên, việc tích hợp giữa AngularJS và RequireJS là một chút khó khăn. Tôi đã tạo angularAMD để biến điều này thành một quá trình ít đau đớn hơn:

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

Câu trả lời ngắn gọn là, nó có ý nghĩa. Gần đây, điều này đã được thảo luận trong ng-conf 2014. Đây là bài nói về chủ đề này:

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

Thật hợp lý khi sử dụng các yêu cầu với angularjs nếu bạn có kế hoạch lười biếng tải các bộ điều khiển và chỉ thị, v.v., đồng thời kết hợp nhiều phụ thuộc lười biếng vào các tệp tập lệnh để tải nhanh hơn nhiều. RequireJS có một công cụ tối ưu hóa giúp việc kết hợp trở nên dễ dàng. Xem http://ify.io/USE-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

Vâng, thật hợp lý khi sử dụng allowJS với Angular, tôi đã dành vài ngày để thử nghiệm một số giải pháp kỹ thuật.

Tôi đã tạo một hạt giống góc với RequireJS ở phía máy chủ. Rất đơn giản. Tôi sử dụng ký hiệu SHIM cho không có mô-đun AMD và không phải AMD vì tôi nghĩ rất khó đối phó với hai hệ thống tiêm phụ thuộc khác nhau.

Tôi sử dụng grunt và r.js để ghép các tệp js trên máy chủ tùy thuộc vào tệp cấu hình SHIM (phụ thuộc). Vì vậy, tôi chỉ giới thiệu một tập tin js trong ứng dụng của mình.

Để biết thêm thông tin, hãy truy cập vào Hạt giống góc github của tôi: https://github.com/matohawk/angular-seed-requirejs

Tôi sẽ tránh sử dụng Require.js. Các ứng dụng tôi đã thấy làm điều này tạo ra một mớ hỗn độn của nhiều loại kiến ​​trúc mô-đun mô-đun. AMD, tiết lộ, các hương vị khác nhau của IIFE, v.v ... Có nhiều cách khác để tải theo yêu cầu như mod loadOnDemand Angular . Việc thêm các nội dung khác chỉ giúp lấp đầy mã của bạn đầy đủ và tạo ra tín hiệu thấp cho tỷ lệ nhiễu và làm cho mã của bạn khó đọc.

Đây là cách tiếp cận tôi sử dụng: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-appluggest/

Trang này cho thấy khả năng triển khai AngularJS + RequireJS, trong đó mã được phân chia theo các tính năng và sau đó là loại thành phần.

Trả lời từ Brian Ford

AngularJS có hệ thống mô-đun riêng, thường không cần thứ gì đó như RJS.

Tham khảo: https://github.com/yeoman/generator-angular/issues/40

Tôi nghĩ rằng nó phụ thuộc vào độ phức tạp của dự án của bạn vì góc được mô đun hóa khá nhiều. Bộ điều khiển của bạn có thể được ánh xạ và bạn chỉ có thể nhập các lớp JavaScript đó trong trang index.html của mình.

Nhưng trong trường hợp dự án của bạn trở nên lớn hơn. Hoặc bạn dự đoán kịch bản như vậy, bạn nên tích hợp góc cạnh với các yêu cầu. Trong này bài viết, bạn có thể thấy một ứng dụng demo cho hội nhập như vậy.