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

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/22287269/angular-js-error-injectormodulerr

标签

javascript

angularjs

angularjs-injector