核心要點
在編寫大型JavaScript應用程序時，最簡單的方法之一是將代碼庫分成多個文件。這樣做可以提高代碼的可維護性，但會增加在主HTML文檔中丟失或放錯腳本標籤的可能性。隨著文件數量的增加，跟踪依賴項變得困難。此問題在大型AngularJS應用程序中也同樣存在。我們已經可以使用許多工具來處理應用程序中依賴項的加載。在本文中，我們將了解如何將RequireJS與AngularJS一起使用，以簡化加載依賴項的工作。我們還將研究如何使用Grunt生成包含RequireJS模塊的組合文件。
RequireJS簡介
RequireJS是一個JavaScript庫，有助於延遲加載JavaScript依賴項。模塊只是包含一些RequireJS語法糖的JavaScript文件。 RequireJS實現了CommonJS指定的異步模塊。 RequireJS提供簡單的API來創建和引用模塊。 RequireJS需要一個主文件，其中包含基本配置數據，例如模塊和墊片的路徑。以下代碼段顯示了main.js文件的框架：
require.config({
map: {
//映射
},
paths: {
//模块的别名和路径
},
shim: {
//模块及其依赖模块
}
});應用程序中的所有模塊都不需要在paths部分中指定。其他模塊可以使用其相對路徑加載。要定義模塊，我們需要使用define()塊。
define([
//依赖项
], function (
//依赖项对象
) {
function myModule() {
//可以使用上面接收到的依赖项对象
}
return myModule;
});模塊可能有一些依賴模塊。通常，在模塊結束時返回一個對象，但這並非強制性要求。
Angular的依賴注入與RequireJS依賴管理
我從Angular開發人員那裡聽到的一個常見問題是關於Angular的依賴管理和RequireJS的依賴管理之間的區別。重要的是要記住，這兩個庫的目的完全不同。 AngularJS中內置的依賴注入系統處理組件中所需的Object；而RequireJS中的依賴管理處理模塊或JavaScript文件。當RequireJS嘗試加載模塊時，它會檢查所有依賴模塊並首先加載它們。加載的模塊的對像被緩存，並且在再次請求相同模塊時提供服務。另一方面，AngularJS維護一個注入器，其中包含名稱列表和相應的對象。創建組件時，將條目添加到注入器中，並且每當使用註冊的名稱引用對象時，都會提供該對象。
RequireJS和AngularJS的結合使用
本文附帶的可下載代碼是一個包含兩個頁面的簡單應用程序。它具有以下外部依賴項：
這些文件應按此處列出的順序直接加載到頁面中。我們有五個自定義腳本文件，其中包含所需AngularJS組件的代碼。讓我們看看這些文件是如何定義的。
將AngularJS組件定義為RequireJS模塊
任何AngularJS組件都包含：
在上述三個任務中，我們將在各個模塊內執行前兩個任務，而第三個任務將在負責創建AngularJS模塊的單獨模塊中執行。首先，讓我們定義一個config塊。 config塊不依賴於任何其他塊，並在最後返回config函數。但是，在我們加載另一個模塊內的config模塊之前，我們需要加載config塊所需的一切。 config.js中包含以下代碼：
require.config({
map: {
//映射
},
paths: {
//模块的别名和路径
},
shim: {
//模块及其依赖模块
}
});請注意上面代碼段中依賴注入的方式。我使用$inject將依賴項注入，因為上面定義的config函數是一個普通的JavaScript函數。在關閉模塊之前，我們返回config函數，以便可以將其發送到依賴模塊以供進一步使用。我們對定義任何其他類型的Angular組件也採用相同的方法，因為這些文件中沒有任何特定於組件的代碼。以下代碼段顯示了控制器的定義：
define([
//依赖项
], function (
//依赖项对象
) {
function myModule() {
//可以使用上面接收到的依赖项对象
}
return myModule;
});應用程序的Angular模塊取決於迄今為止定義的每個模塊。此文件從所有其他文件中獲取對象，並將它們與AngularJS模塊掛鉤。此文件可能返回也可能不返回任何內容，因為此文件的 Angular 模塊可以使用 angular.module() 從任何地方引用。以下代碼塊定義了一個Angular模塊：
require.config({
map: {
//映射
},
paths: {
//模块的别名和路径
},
shim: {
//模块及其依赖模块
}
});由於異步加載了所需的腳本文件，因此無法使用ng-app指令引導Angular應用程序。這裡正確的方法是使用手動引導。這必須在一個名為main.js的特殊文件中完成。這需要首先加載定義Angular模塊的文件。此文件的代碼如下所示。
define([
//依赖项
], function (
//依赖项对象
) {
function myModule() {
//可以使用上面接收到的依赖项对象
}
return myModule;
});配置Grunt以組合RequireJS模塊
在部署JavaScript繁重的應用程序時，應組合和壓縮腳本文件以優化腳本文件的下載速度。 Grunt之類的工具可以方便地自動化這些任務。它定義了許多任務，使任何前端部署過程都更容易。它有一個任務，grunt-contrib-requirejs，用於按正確的順序組合RequireJS文件模塊，然後壓縮結果文件。與任何其他grunt任務一樣，可以將其配置為針對部署的每個階段表現不同。以下配置可用於演示應用程序：
define([], function () {
function config($routeProvider) {
$routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
.when('/details/:id', {templateUrl: 'templates/ideaDetails.html', controller: 'ideaDetailsController'})
.otherwise({redirectTo: '/home'});
}
config.$inject = ['$routeProvider'];
return config;
});此配置將在使用dev選項運行Grunt時生成未壓縮的文件，並在使用release選項運行grunt時生成壓縮的文件。
結論
當應用程序的大小超過一定數量的文件時，管理依賴項就會變得具有挑戰性。像RequireJS這樣的庫使定義依賴項並不用擔心文件加載順序變得更容易。依賴管理正成為JavaScript應用程序不可或缺的一部分。 AngularJS 2.0將內置支持AMD。
(FAQs部分已省略，因為篇幅過長且與偽原創目標不符。FAQs部分內容可以根據需要重新生成。)
以上是在AngularJS應用程序中使用requirejs的詳細內容。更多資訊請關注PHP中文網其他相關文章！
