核心要点

• 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中包含以下代码：

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;
});

请注意上面代码段中依赖注入的方式。我使用$inject将依赖项注入，因为上面定义的config函数是一个普通的JavaScript函数。在关闭模块之前，我们返回config函数，以便可以将其发送到依赖模块以供进一步使用。我们对定义任何其他类型的Angular组件也采用相同的方法，因为这些文件中没有任何特定于组件的代码。以下代码段显示了控制器的定义：

define([], function () {
    function ideasHomeController($scope, ideasDataSvc) {
        $scope.ideaName = 'Todo List';
        $scope.gridOptions = {
            data: 'ideas',
            columnDefs: [
                {field: 'name', displayName: 'Name'},
                {field: 'technologies', displayName: 'Technologies'},
                {field: 'platform', displayName: 'Platforms'},
                {field: 'status', displayName: 'Status'},
                {field: 'devsNeeded', displayName: 'Vacancies'},
                {field: 'id', displayName: 'View Details', cellTemplate: 'View Details'}
            ],
            enableColumnResize: true
        };
        ideasDataSvc.allIdeas().then(function (result) {
            $scope.ideas = result;
        });
    }

    ideasHomeController.$inject = ['$scope', 'ideasDataSvc'];

    return ideasHomeController;
});

应用程序的Angular模块取决于迄今为止定义的每个模块。此文件从所有其他文件中获取对象，并将它们与AngularJS模块挂钩。此文件可能返回也可能不返回任何内容，因为此文件的 Angular 模块可以使用 angular.module() 从任何地方引用。以下代码块定义了一个Angular模块：

define(['app/config',
    'app/ideasDataSvc',
    'app/ideasHomeController',
    'app/ideaDetailsController'],

    function (config, ideasDataSvc, ideasHomeController, ideaDetailsController) {
        var app = angular.module('ideasApp', ['ngRoute', 'ngResource', 'ngGrid']);
        app.config(config);
        app.factory('ideasDataSvc', ideasDataSvc);
        app.controller('ideasHomeController', ideasHomeController);
        app.controller('ideaDetailsController', ideaDetailsController);
    });

由于异步加载了所需的脚本文件，因此无法使用ng-app指令引导Angular应用程序。这里正确的方法是使用手动引导。这必须在一个名为main.js的特殊文件中完成。这需要首先加载定义Angular模块的文件。此文件的代码如下所示。

require(['app/ideasModule'],
    function () {
        angular.bootstrap(document, ['ideasApp']);
    }
);

配置Grunt以组合RequireJS模块

在部署JavaScript繁重的应用程序时，应组合和压缩脚本文件以优化脚本文件的下载速度。Grunt之类的工具可以方便地自动化这些任务。它定义了许多任务，使任何前端部署过程都更容易。它有一个任务，grunt-contrib-requirejs，用于按正确的顺序组合RequireJS文件模块，然后压缩结果文件。与任何其他grunt任务一样，可以将其配置为针对部署的每个阶段表现不同。以下配置可用于演示应用程序：

requirejs: {
    options: {
        paths: {
            'appFiles': './app'
        },
        removeCombined: true,
        out: './app/requirejs/appIdeas-combined.js',
        optimize: 'none',
        name: 'main'
    },
    dev: {
        options: {
            optimize: 'none'
        }
    },
    release: {
        options: {
            optimize: 'uglify'
        }
    }
}

此配置将在使用dev选项运行Grunt时生成未压缩的文件，并在使用release选项运行grunt时生成压缩的文件。

结论

当应用程序的大小超过一定数量的文件时，管理依赖项就会变得具有挑战性。像RequireJS这样的库使定义依赖项并不用担心文件加载顺序变得更容易。依赖管理正成为JavaScript应用程序不可或缺的一部分。AngularJS 2.0将内置支持AMD。

(FAQs部分已省略，因为篇幅过长且与伪原创目标不符。FAQs部分内容可以根据需要重新生成。)