Angular JS Error: [$injector:modulerr]

Question

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);
});

Are you sure you are not having a typo ng-app="app" – Sai Mar 09 '14 at 19:58 — Sai, Mar 09 '14 at 19:58

score 2 · Accepted Answer · answered Mar 09 '14 at 22:07

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.

Yes this exactly what I wanted to do. The only problem i still have is that error pops up if ng-app is equal to something. If ng-app="somename" it breaks. — ryandawkins, Mar 09 '14 at 22:13
Post a plnkr or jsfiddle and I can show you. Angular defines applications in a modular way. You're saying `ng-app="app"` but you probably haven't defined an 'app' module. ```angular.module('app',[]).controller('SplitController', function(){})``` — pcw216, Mar 09 '14 at 22:19

Shimon Rachlenko · Answer 2 · 2014-07-31T09:14:09.673

1

You are mixing angular and jQuery code in a wrong way. When programming angular you should consider jQuery as a low level. No need fordocument.ready - angular will do it for you. On the other hand, you should define an application module and put it's name in ng-app directive. All the other stuff, like controllers, are defined on that module.

edited Jul 31 '14 at 09:14

answered Mar 09 '14 at 19:57

Shimon Rachlenko

5,469
40
51

I'm confused what the ng-app directive is? I'm updating my post to show the angular docs I've read. – ryandawkins Mar 09 '14 at 20:07

score 0 · Answer 3 · answered Mar 09 '14 at 19:59

0

This is a typo...

ng-app"app"

It obviously needs to be..

ng-app="app"

Also, I wouldn't wait until your ajax call finishes to bootstrap angular. You should just do it on page load and consider using the angular tools for making your ajax call such as the $http service and potentially the ngRoute resolve property

answered Mar 09 '14 at 19:59

Charlie Martin

8,208
3
35
41

This wasnt a direct copy and paste from the real code, ng="app" isnt the problem. – ryandawkins Mar 09 '14 at 20:04

score 0 · Answer 4 · answered Mar 09 '14 at 20:24

Your code isn't even close to the one you're saying it's based off of. You shouldn't use document.ready, not use $.ajax and your controller should be the one making the ajax request, not the result itself of the ajax request.

The code for step 2 looks like this:

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

If you would like to use ajax instead, you should inject the $http service into your controller and use that.

var app = angular.module('app', []);

app.controller('SplitController', function($scope, $http) {
  $http.get( // or post, put, delete
      '/transaction/split/get', 
      {some data}
  ).success(function(returndata) {
    $scope.splits = returndata;
  });
});

I only really want to use the templateing feature from Angularjs. The project I am working on is to large to do everything the Angular way without rewriting the app. How can I accomplish this instead? Basically I want something along the lines of, controller(mydata) and then it populates the ng-repeat with the data I sent in. Am I looking at the wrong part of Angular to do this? — ryandawkins, Mar 09 '14 at 20:29
It appears what I'm looking for is a service? http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js — ryandawkins, Mar 09 '14 at 20:34

score 0 · Answer 5 · answered Nov 28 '18 at 15:41

If anyone use $routeProvider, below may be the mistake:

In my case I used $routeProvider.when({}) without url as first parameter and that was the case, when I add the url like below, error was gone.

$routeProvider.when('/post/:id', {
   templateUrl: 'views/post.html',
   controller: 'PostController'
})

Angular JS Error: [$injector:modulerr]

5 Answers5

Linked