Angular 在使用 RequireJS 加载时无法实例化模块答案

【问题标题】：Angular unable to instantiate module when loaded using RequireJSAngular 在使用 RequireJS 加载时无法实例化模块
【发布时间】：2014-05-28 09:50:42
【问题描述】：

当我将 RequireJS 与 AngularJS 一起使用时，发生了一些非常奇怪的事情。我设法通过 RequireJS 加载了我所有的角度依赖项。当我在 Chrome 的开发者工具中打开 Sources 窗格时，我可以看到下载的这些脚本。但是 Angular 一直在控制台中抛出一个错误，它无法实例化模块：

Uncaught Error: [$injector:modulerr] Failed to instantiate module MyTestApp due to:
Error: [$injector:nomod] Module 'MyTestApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure...<omitted>...0)

Angular 在加载 RequireJS 时似乎无法与 HTML 页面中的 ng-app 标记绑定。我不确定是否是这种情况，但对我来说似乎是这样，因为当我将 angular.min.js 手动导入 HTML 页面时，一切正常。

在 Angular 中使用 RequireJS 时我做错了什么吗？我应该如何将两者结合使用？这是我的代码的样子：

index.html

<!doctype html>
<html lang="en" ng-app="MyTestApp">
<head>
  <meta charset="utf-8">
  <title>AngularJS</title>
  <link rel="stylesheet" href="css/style.css"/>
  <script data-main="main" src="js/require.js"></script>
</head>
<body>
  <div ng-controller="TestController">{{helloMessage}}</div>
</body>
</html>

main.js

require.config({
    baseUrl: "scripts/app",

    shim: {
        "angular": {
            exports: "angular"
        },
        "angular.route": {
            deps: ["angular"]
        },
        "bootstrapper": {
            deps: ["angular", "angular.route"]   
        },

    },

    paths: {
        "angular": "../angular",
        "angular.route": "../angular-route",
        "bootstrapper": "bootstrapper"
    }
});

require(["angular", "angular.route", "bootstrapper"],
    (angular, ngRoute, bootstrapper) => {
        bootstrapper.start();
    }
);

bootstrapper.js

function run() {
       app = angular.module("MyTestApp", ["ngRoute"]);
       app.controller("TestController", TestController);
       console.log(app); //Prints object to console correctly, ie, angular was loaded.
}

【问题讨论】：

标签： javascript angularjs requirejs

【解决方案1】：

首先，您不需要从“angular.route”的负载中获取变量。该模块将直接以角度加载。

我认为您还应该等待 dom 就绪事件，并创建一个 requirejs 应用程序模块，该模块将负责加载所有应用程序依赖项：

app/app.js：

define([
  "angular",
  "angular-route",
  "app/controllers",
  "app/directives",
  [...]
], function(angular){
  var app = angular.module('app', [
    "ngRoute",
    "app.controllers",
    "app.directives",
    [...]
    ])
    .config([function(){
      // app configuration goes here
    }]);

    return app;
})

main.js

require(["angular", "app/app"],
  function (angular, app){
    angular.element(document).ready(function() {
      angular.bootstrap(document, [app.name]);
    });
  }
);

【讨论】：

【解决方案2】：

我会这样做 (DEMO)。

在 main.js 中，需要 angular、您的应用程序，可能还有 controllers.js 和其他文件：

require(['angular', 'app'], function (app) {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['MyTestApp']);
    });
});

在app.js，需要角度和角度路线：

define(['angular', 'angular.route'], function() {
    var app = angular.module("MyTestApp", ["ngRoute"]);

    return app;
});

这是手动引导，因此根本不需要 ng-app 标记。

我目前正在使用 angular 和 requirejs 开发一个相当大的应用程序，我更喜欢独立于 requirejs 加载整个应用程序使用的“大”库。所以我一开始就加载了一个大文件，其中包括angular、angular-route、requirejs、main.js。或者，如果使用 CDN 版本有意义，请从那里加载。另一方面，我根据请求加载每个控制器、指令、过滤器和服务。我目前有 50 多个控制器，它们已经对初始加载时间产生了影响。

但这一切都取决于您的应用程序的大小。

【讨论】：

谢谢，你让我开心:)