在您的 angularjs 应用程序中集成 requirejs

Mujeebur Rahman

3.33/5 (3投票s)

2016年1月5日

CPOL

3分钟阅读

22672

使用 RequireJS 在 AngularJS 应用程序中异步加载模块。

引言

本文详细介绍了如何在 AngularJS 应用程序中使用 RequireJS 库。

背景

RequireJS 网站将 RequireJS 定义为 JavaScript 文件和模块加载器。
使用像 RequireJS 这样的模块化脚本加载器将提高代码的速度和质量。文件将在需要时异步加载，而不是一次性加载所有文件。

如果您没有在应用程序中使用 RequireJS，您必须使用 script 标签加载所有 AngularJS 代码文件。在本文中，我们将看到如何使用 RequireJS 来延迟加载模块。

先决条件

我将使用 Bower 获取依赖项。对于那些不了解 Bower 的人来说，它是一个 Node 实用程序，可以使用命令下载所有前端依赖项。
默认情况下，所有依赖项都将保存在 bower_components 文件夹中。但是，您可以自由更改此文件夹。

要安装 Bower，您需要打开命令提示符并输入“npm install -g bower”。-g 标志用于全局安装 Bower，以便我们可以在所有项目中使用 Bower。如果您愿意，可以省略 -g 标志。

我们的演示项目有两个依赖项
1. AngularJS
2. RequireJS

开始吧

在您的硬盘驱动器上创建一个文件夹来启动我们的项目。例如，我将在我的 D: 驱动器上创建一个名为 RequireJsDemo 的文件夹。

要逐个安装它们，请通过导航到 D 盘中的上述文件夹（或您的项目所在的任何驱动器）来运行以下两个命令。
i. bower install angularjs
ii. bower install requirejs

一切安装完毕后，您应该已经创建了 bower_components 目录，并且其中包含两个文件夹，分别是 angular 和 requirejs。

步骤 1：为 RequireJS 添加配置文件 (main.js)

require.config({
    paths: {
        angular: 'bower_components/angular/angular'
    },
    shim: {
        "angular": {
            exports: "angular"
        }
    }
})

main.js 具有 RequireJS 的配置代码，我们在其中注册和导出 AngularJS。

接下来，创建一个名为 "src" 的文件夹，以及两个空的 JavaScript 文件，如下所示。

RequireJsDemo

       ---bower_components

       --src

             --controller.js

             --module.js

步骤 2：创建控制器

将以下代码粘贴到 controller.js 文件中

define([], function () {
    var myController = function ($scope) {
        $scope.message = "RequireJs Integrated successfully";
    };

    myController.$inject = ['$scope'];

    return myController;
});

我们使用 define 函数创建一个 Require 模块。它是一个全局函数，接受两个参数。
第一个是依赖文件的数组，第二个是一个函数。这里我们的控制器文件没有任何依赖项，所以我将一个空数组指定为第一个参数。
在第二个函数参数中，我包装了我的控制器。控制器只是 JavaScript 函数，所以我从这个模块返回一个函数。
我正在使用 $inject 服务来注入我的依赖项，虽然这不是强制性的，但为了使您的模块最小化安全，这是需要的。

同样，我将在 module.js 中编写代码，我将在其中创建一个 AngularJS 模块。

define(['angular', 'src/controller'], function (angular,controller) {
    angular.module('app',[])
        .controller('myController', controller);
});

在上面的代码片段中，我使用 RequireJS 的 define 全局函数定义了我的模块。这次 define 函数有两个依赖项，一个是 angular，另一个是我们的控制器文件。（请注意，我在指定依赖项时没有使用 .js 扩展名）。在下一行中，我正在创建一个模块并将控制器附加到它。

步骤 3：添加 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RequireJs Demo</title>

    <script src="bower_components/requirejs/require.js" data-main="main.js"></script>
</head>
<body ng-controller="myController">
{{message}}
</body>
</html>

请注意，我仅使用一个 script 标签来引用 RequireJS。RequireJS 库将负责加载 angular 本身以及我们的 controller.js 和 module.js 文件。

步骤 4：引导应用程序：

我不能使用 ng-app 来引导我的应用程序，因为 RequireJS 异步加载模块。幸运的是，这个问题有一个解决方案。我可以手动引导我的应用程序，如下所示。

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

添加引导代码后，我的 main.js 文件将如下所示。

require.config({
    paths: {
        angular: 'bower_components/angular/angular'
    },
    shim: {
        "angular": {
            exports: "angular"
        }
    }
});

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

就这样，继续运行应用程序。您应该在网页上看到“RequireJs 集成成功”消息。

关注点

如果您正在处理大型应用程序，其中有数十个脚本文件，则需要使用 script 标签将它们添加到 index.html 文件中。而且，它们需要以正确的顺序添加。RequireJS 通过延迟加载模块使事情变得容易。您不需要忍受对 script 标签进行排序的痛苦。