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

当我将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页面时，一切都很好。

在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();
    }
);

引导程序.js

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

以下是我的操作方法（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和requirej的非常大的应用程序，我更喜欢加载整个应用程序使用的"大"库，这些库与requirej无关。所以我加载了一个大文件，其中包括angular、angular-route、requirejs、main.js。或者，如果使用CDN版本有意义，请从那里加载它。另一方面，我根据请求加载每个控制器、指令、过滤器和服务。我目前有50多个控制器，allready使初始加载时间有所不同。

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

首先，您不需要从"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]);
    });
  }
);

相关内容

最新更新

热门标签：