I am using the Play Framework (2.5.9). On my scala html template, I pull in Angular via WebJars. I next specify the module and controller I want to use for my page. However, when I try to load the page, the relevant variables that should be set to "hi" via AbstractACtrl are not being set. Also, I get the following error in the browser's console:
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.
I do not understand why module "abstractA" is not available. I am defining it right there on the view.scala.html page... I am very sure that angular.js is being pulled in, because in Chrome, the Sources shows webjars/angular.js/1.5.9/angular.js. All the console.log and console.error in my code below are just messages I'm outputting to the console for debugging. None are actually printing to the console right now, indicating that execution is never reaching them.
Things I've tried:
1) Load in angular.js directly (without WebJars).
2) Pull in angular-route.js, angular-resource.js, and/or angular-animate.js with / without WebJars.
3) "data-ng-app" - make it either "ng-app" or "x-ng-app".
4) Pass in $scope to the controller and reference all fields via "$scope."... instead of "this."...
5) Make the "var abstractA" at beginning of my JavaScript "var ab" instead.
6) Put the script which pulls in angular in the "head" portion instead of the "body" portion.
7) Remove the "this.originalAs = @aDocs;" line from the controller.
8) Put all javascript in the "head" portion of the page.
Below is my current code. Please let me know why the module "abstractA" is not available.
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>
I figured out a solution (what an annoying bug!). It wasn't documented anywhere...
I had to change this line:
to:
Then, convert it to a list using Javascript split() function for use in the rest of the page.
For some reason, the parsing error there was giving the error statement that the module itself could not be found. Took a bunch of trial-and-error to realize that this was the root cause.