Question

当我使用RequireJS和AngularJS时，有一些非常奇怪的事情。我设法通过RequireJS加载我所有的角度依赖项。当我在Chrome的开发者工具中打开“源”窗格时，我可以看到下载的脚本。但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页面时，一切正常。

使用带角度的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.
}

Answer 1

我会这样做（DEMO）。

在main.js中，需要有角度，您的应用以及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多个控制器，它们已经在初始加载时间方面有所不同。

但这完全取决于你的应用程序的大小。

Answer 2

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

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

应用程序/ 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]);
    });
  }
);

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

2 个答案: