RyanDawkins RyanDawkins - 1 year ago 244
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

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?


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

<div ng-controller="SplitController">
<div ng-repeat="split in splits">


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]));
var app = angular.module("app", []);
app.controller('SplitController', function($scope){
$scope.splits = splits;
error: function(data){


Answer Source

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.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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download