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

Question

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

5

当我使用RequireJS和AngularJS时，出现了一些非常奇怪的问题。我通过RequireJS成功加载了所有的angular依赖项。当我在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)

似乎当使用RequireJS加载Angular时，无法与HTML页面中的“ng-app”标签绑定。我不确定这是否是问题，但在手动将angular.min.js导入到HTML页面中时，一切都正常运行。

当我使用RequireJS和Angular时，我有什么做错了吗？我应该如何结合使用这两个技术？以下是我的代码示例： 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.
}

- Carven

2个回答

1

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

我认为您还应等待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]);
    });
  }
);

- Charles

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcel Gwerder · Accepted Answer

这里是我会做的方法（演示）。

在 main.js 中，引入 Angular、你的应用程序以及可能需要的 controllers.js 和其他文件：

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

在app.js中，需要引入angular和angular路由：

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版本有意义，则从CDN中加载。 另一方面，我根据请求加载每个控制器，指令，过滤器和服务。 我目前有50多个控制器，这已经使初始加载时间有所差异。
但这完全取决于您的应用程序大小。