3

I am new to AngularJS and I am trying to follow some structure for scalable applications, as well as trying to get Firebase working. However, I am getting a simple error on the injector. When I view the error tree, it seems to be all AngularJS references, and I do not see a reference to an object in my code. I guess I am looking in the wrong place?

Failed to instantiate module MyApp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.11/$injector/unpr?p0=e
    at Error (native)
    at     https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:6:417
    at      https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:307
    at d     (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:36:308)
    at Object.e [as invoke]     (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:37:64)
    at d     (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:301)
    at     https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:425
    at s     (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:7:302)
    at g     (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:202)
    at Ob     (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:435

This is my Plunkr sample

2
  • it seems there is a typo in you sample, templateUrl not templateURL. Besides, I don't see any injector error, everything is fine.
    – Rebornix
    Jan 29, 2015 at 5:59
  • I got this error when my angular.module('appname', ['somemodule'])' was still calling somemodule. I had removed files relating to that module but had forgotten to remove that module name off.
    – Deke
    Apr 10, 2016 at 19:54

1 Answer 1

1

It seems you don't get $scope right.

For routeProvider, it's templateUrl instead of templateURL. For TeamCtrl, if you want to bind a object to View, remember to add this object to $scope.

angular.module('MyApp').config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'TeamCtrl',
        templateUrl: 'team.html'
    })
    .otherwise({
        redirectTo: '/'
    });

});

angular.module('MyApp').controller('TeamCtrl', ['$scope', '$firebase', 'Teams', 
    function ($scope, $firebase, Teams) {

        $scope.Teams = Teams;
        $scope.team = {};

        $scope.SaveTeam = function(team) {
            $scope.Teams.$add({
                Id: $scope.team.id,
                Name: $scope.team.Name,
                Wins: $scope.team.Wins,
                Losses: $scope.team.Losses
            });
        };

        $scope.team.id = "";
        $scope.team.Name = "";
        $scope.team.Wins = "";
        $scope.team.Losses = "";
    }
]);

For team.html

<div ng-repeat="team in Teams">
    <h2>{{team.Name}}</h2>
    {{team.Wins}} / {{team.Losses}}
</div>
1
  • Thanks for the update. I had placed everything together in one file for Plunkr, instead of the broken out ones I have, hence the 'angular.module('MyApp')' instead of using 'var app =' which may mean that my dependency is based on the inclusions. I will have to check the combine JavaScript. I guess I need to check the code again on my side. Mostly trying to see how to work through the AngularJS error. Jan 29, 2015 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.