AngularJS是否像RequireJS一樣支持AMD？

Question

在這個回購中， AngularJS對AMD的RequireJS表示贊賞。

在這個回購中 ，AngularJS團隊為AMD開發了一個不包含RequireJS的AngularJS項目。

• 我是否以錯誤的方式思考這個問題 - IE是否解決了不同的問題？
• AngularJS圖書館現在支持AMD嗎？
• 是否不再需要將RequireJS與AngularJS項目一起使用？

Answer 1

將RequireJS與AngularJS一起使用是有意義的，但前提是你理解它們如何在依賴注入方面工作 ，因為雖然它們都注入依賴關系，但它們注入了非常不同的東西。

AngularJS有自己的依賴系統，允許您將AngularJS模塊注入新創建的模塊，以便重用實現。 假設你創建了一個實現AngularJS過濾器“greet”的“第一個”模塊：

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

現在讓我們假設您想在另一個名為“second”的模塊中使用“greet”過濾器來實現“再見”過濾器。 您可以將“第一”模塊注入“第二”模塊：

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”文件在可以執行RequireJS回調的內容之前注入，需要加載“第一個”AngularJS模塊來創建“第二個”AngularJS模塊。

附注：為了在RequireJS回調函數中使用AngularJS，需要在“firstModule”和“secondModule”文件上注入“angular”作為依賴項，並且必須在RequireJS config上配置它以將“angular”映射到庫代碼。 你也可以用傳統的方式將AngularJS加載到頁面（腳本標記），盡管會損害RequireJS的好處。

有關在我的博客文章中從2.0版本獲得AngularJS核心的RequireJS支持的更多細節。

基於我的博客文章“用AngularJS理解RequireJS” ，這里是鏈接 。

Answer 2

是的，你可以使用帶棱角的RequireJS。 您需要做一些額外的工作才能使其正常運行，如您所包含的鏈接，但它是可能的。

但總的來說，我還沒有發現AMD對Angular有任何需求。 AMD的整個想法是，它允許您以聲明方式指定腳本之間的依賴關系，而不必擔心將它們包含在頁面中的順序。 但是，Angular通過其依賴注入機制為您解決了這個問題，因此在這方面使用AMD並沒有真正獲得任何好處。

tl; dr我沒有找到使用AMD與Angular.js的令人信服的理由。

Answer 3

您可以使用提供程序延遲加載Angular.js組件。 來自文章 ：

提供程序本質上是用於創建和配置AngularJS工件實例的對象。 因此，為了注冊一個惰性控制器，你可以使用$controllerProvider 。 ...

總之，您首先要定義應用程序模塊以保留相關提供程序的實例。 然后，您將定義您的懶惰文物，以使用提供程序而不是模塊API注冊自己。 然后使用在路由定義中返回promise的'resolve'函數，您將加載所有惰性偽像並在加載后解析promise。 這確保了在呈現相關路線之前所有懶惰的人工制品都可用。 另外，不要忘記解決$ rootScope中的承諾。$ apply，如果解決方案將在AngularJS之外發生。 然后，您將創建一個“引導程序”腳本，該腳本在引導應用程序之前首先加載應用程序模塊。 最后，您將鏈接到'index.html'文件中的引導腳本。

http://ify.io/lazy-loading-in-angularjs/