AngularJs 与 Play 一起使用无法找到或实例化模块
AngularJs used with Play cannot find or instantiate module
我正在使用 Play Framework (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 只是我输出到控制台进行调试的消息。 None 现在实际上正在打印到控制台,表明执行永远不会到达它们。
我尝试过的事情:
1) 直接加载 angular.js(没有 WebJars)。
2) 拉入angular-route.js, angular-resource.js, and/or angular-animate.js with / 没有 WebJars。
3) "data-ng-app" - 使其成为 "ng-app" 或 "x-ng-app".
4) 将 $scope 传递给控制器并通过“$scope”引用所有字段...而不是 "this."...
5) 把我的 JavaScript 开头的 "var abstractA" 改为 "var ab"。
6) 将拉入 angular 的脚本放在 "head" 部分而不是 "body" 部分。
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>
我想出了一个解决方案(多么烦人的错误!)。它没有在任何地方记录...
我不得不更改这一行:
this.originalAs = @aDocs;
至:
this.originalAs = "@aDocs";
然后,使用 Javascript split() 函数将其转换为列表以用于页面的其余部分。
由于某种原因,那里的解析错误给出了无法找到模块本身的错误声明。反复试验后发现这是根本原因。
我正在使用 Play Framework (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 只是我输出到控制台进行调试的消息。 None 现在实际上正在打印到控制台,表明执行永远不会到达它们。
我尝试过的事情:
1) 直接加载 angular.js(没有 WebJars)。
2) 拉入angular-route.js, angular-resource.js, and/or angular-animate.js with / 没有 WebJars。
3) "data-ng-app" - 使其成为 "ng-app" 或 "x-ng-app".
4) 将 $scope 传递给控制器并通过“$scope”引用所有字段...而不是 "this."...
5) 把我的 JavaScript 开头的 "var abstractA" 改为 "var ab"。
6) 将拉入 angular 的脚本放在 "head" 部分而不是 "body" 部分。
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>
我想出了一个解决方案(多么烦人的错误!)。它没有在任何地方记录...
我不得不更改这一行:
this.originalAs = @aDocs;
至:
this.originalAs = "@aDocs";
然后,使用 Javascript split() 函数将其转换为列表以用于页面的其余部分。
由于某种原因,那里的解析错误给出了无法找到模块本身的错误声明。反复试验后发现这是根本原因。