核心要点
在编写大型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中文网其他相关文章！
