在AngularJS應用程序中使用requirejs

核心要點

• RequireJS是一個簡化JavaScript依賴項加載並提高代碼庫可維護性的JavaScript庫。在大型項目中，它特別有用，因為在大型項目中跟踪依賴項可能具有挑戰性。
• Angular的依賴注入系統和RequireJS的依賴管理具有不同的功能。 AngularJS處理組件中所需的Object，而RequireJS處理模塊或JavaScript文件。
• AngularJS組件可以定義為RequireJS模塊，並且由於需要異步加載必需的腳本文件，因此可以手動引導AngularJS應用程序。
• Grunt之類的工具可用於組合和壓縮RequireJS模塊以進行部署，從而優化腳本文件的下載速度。此過程可以自動化，並可以針對部署的每個階段進行不同的配置。

在編寫大型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的結合使用

本文附帶的可下載代碼是一個包含兩個頁面的簡單應用程序。它具有以下外部依賴項：

• RequireJS
• jQuery
• AngularJS
• Angular Route
• Angular Resource
• Angular UI ngGrid

這些文件應按此處列出的順序直接加載到頁面中。我們有五個自定義腳本文件，其中包含所需AngularJS組件的代碼。讓我們看看這些文件是如何定義的。

將AngularJS組件定義為RequireJS模塊

任何AngularJS組件都包含：

• 函數定義
• 依賴注入
• 向Angular模塊註冊

在上述三個任務中，我們將在各個模塊內執行前兩個任務，而第三個任務將在負責創建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中文網其他相關文章！