与 Play 一起使用的 AngularJs 无法找到或实例化模块答案

【问题标题】：AngularJs used with Play cannot find or instantiate module与 Play 一起使用的 AngularJs 无法找到或实例化模块
【发布时间】：2016-12-19 21:32:22
【问题描述】：

我正在使用 Play 框架 (2.5.9)。在我的 scala html 模板上，我通过 WebJars 引入 Angular。接下来我指定要用于我的页面的模块和控制器。但是，当我尝试加载页面时，没有设置应该通过 AbstractACtrl 设置为“hi”的相关变量。此外，我在浏览器的控制台中收到以下错误：

Error: [$injector:modulerr] Failed to instantiate module abstractA due to:
[$injector:nomod] Module 'abstractA' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我不明白为什么模块“abstractA”不可用。我在 view.scala.html 页面上定义它...我非常确定 angular.js 被拉入，因为在 Chrome 中，源显示 webjars/angular.js/1.5.9/angular.js .我下面代码中的所有 console.log 和 console.error 只是我输出到控制台进行调试的消息。现在没有真正打印到控制台，表明执行永远不会到达它们。

我尝试过的事情：

1) 直接加载 angular.js（不带 WebJars）。

2) 使用/不使用 WebJars 引入 angular-route.js、angular-resource.js 和/或 angular-animate.js。

3) “data-ng-app” - 将其设为“ng-app”或“x-ng-app”。

4) 将 $scope 传递给控制器，并通过“$scope.”...而不是“this.”...引用所有字段...

5) 将“var abstractA”改为在我的 JavaScript “var ab”开头。

6) 将拉入角度的脚本放在“头部”部分而不是“主体”部分。

7) 删除“this.originalAs = @aDocs;”来自控制器的线路。

8) 将所有 javascript 放在页面的“head”部分。

以下是我当前的代码。请告诉我为什么模块“abstractA”不可用。

build.sbt:

libraryDependencies ++= Seq(
    ...
    "org.webjars"             % "angularjs"                % "1.5.9",
    "org.webjars"             % "angular-ui-bootstrap"     % "2.2.0",
    "org.webjars"             % "bootstrap"                % "3.3.7-1",
    "org.webjars"             %% "webjars-play"            % "2.5.0"
)

view.scala.html：

@(aDocs: List[String],
  webJarAssets: controllers.WebJarAssets)

<!DOCTYPE html>

<meta charset='utf-8'/>

<html lang='en'>

<head>
  <link rel='stylesheet' href='@routes.WebJarAssets.at(webJarAssets.locate("css/bootstrap.min.css"))' />
  <link rel='stylesheet' type='text/css' href='@routes.Assets.versioned("assets/stylesheets/style.css")' />
</head>

<body>

  <script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular.js"))' />

  <script type="text/javascript">
    var abstractA = {};
    abstractA.module = angular.module('abstractA', []);
    abstractA.module.controller('abstractACtrl', ['$http', AbstractACtrl]);

    function AbstractACtrl($http) {
      var controller = this;
      this.name = "Abstract A Controller";
      this.abc = "hi";
      console.log("log beginning of controller");
      console.error("error beginning of controller");
      this.originalAs = @aDocs;

      this.setUrl = function() {
        console.error("error in setUrl");
        console.log("log in setUrl");
      };
    }
  </script>

<div data-ng-app='abstractA' x-ng-controller='AbstractACtrl as abstractACtrl'>
  ...
  <div ng-repeat="originalA in abstractACtrl.originalAs">
      <p>{{originalA}}</p>
  </div>
  <p>{{abstractACtrl.abc}}</p>
  <p>{{abc}}</p>
  <button ng-click='abstractACtrl.setUrl()'>Click!</button>
</div>
</body>
</html>

【问题讨论】：

标签： javascript angularjs playframework-2.0 angularjs-module webjars

【解决方案1】：

我想出了一个解决方案（多么烦人的错误！）。它没有记录在任何地方...

我不得不改变这一行：

this.originalAs = @aDocs;

到：

this.originalAs = "@aDocs";

然后，使用 Javascript split() 函数将其转换为列表，以便在页面的其余部分使用。

由于某种原因，那里的解析错误给出了无法找到模块本身的错误语句。经过多次反复试验，才意识到这是根本原因。

【讨论】：