RyanDawkins RyanDawkins - 3 months ago 19
Javascript Question

Angular JS Error: [$injector:modulerr]

Edit: Now that I have actually worked using angularjs, I do not recommend anyone do what I was trying to accomplish.

This is my first Angularjs application so I am a nooby, and still trying to figure things out. But I am receiving an error in my chrome console that says this:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.1/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.1%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...1) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:30
r angular.min.js?1394393789:7
e angular.min.js?1394393789:29
cc angular.min.js?1394393789:32
c angular.min.js?1394393789:17
bc angular.min.js?1394393789:18
cd angular.min.js?1394393789:17
(anonymous function) angular.min.js?1394393789:208
l jquery-2.0.3.js:2913
c.fireWith jquery-2.0.3.js:3025
x.extend.ready jquery-2.0.3.js:398
S


Which sends me to this page: http://docs.angularjs.org/error/$injector/modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.0-beta.1%2F$injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E

I am not porting any application over from a 1.2 and under. I followed the documentation for some simple code below..

This is the angular doc this code is based off of: http://docs.angularjs.org/tutorial/step_02

What is shown in the browser is the header tag with {{split.description}}. Any thoughts?

My HTML

<html lang="en" ng-app="app">
<head>
<!-- My CSS Here -->
</head>

<body>
<div ng-controller="SplitController">
<div ng-repeat="split in splits">
<h4>{{split.description}}</h4>
</div>
</div>
</body>

</html>


My JavaScript

var Split = function(data)
{
this.description = data['description'];
}

function getSplits(parentid) {
var url = "/transaction/split/get";
var ajax = $.ajax({
type: 'GET',
dataType: 'json',
url: url,
data: {
parentid: parentid
},
beforeSend: function(data){
},
success: function(data){
data = JSON.parse(data, true);
var splits = [];
for(var i = 0; i < splits.length; i++)
{
splits.push(new Split(splits[i]));
console.log(splits[i]);
}
var app = angular.module("app", []);
app.controller('SplitController', function($scope){
$scope.splits = splits;
});
},
error: function(data){
//$('body').html(JSON.stringify(data));
}
}).done(function(data){
});
}

$(document.ready(function(){
getSplits(1);
});

Answer

I really wouldn't suggest doing this, for reasons that others already stated, but you can always get a handle to the angular $scope of a given element in some jquery handler. Just define your controller as anybody normally would (in the body of a script).

success: function(data){
  ... //splits and whatnot
  var $scope = angular.element($("div[ng-controller='SplitController']")).scope()
  $scope.$apply(function(){
    $scope.splits = splits;
  })
}

You can't define a controller like you're doing because ng-app is going to run on document.ready. It will be looking for the controller you specified with ng-controller which has yet to be defined. It's perfectly okay for you to define a SplitController that doesn't initialize 'splits' or any data, because ng-repeat will be watching for changes to 'splits' and will keep the DOM up to date.

Comments