Angular JS error - http://errors.angularjs.org/1.5.0/$injector/unpr?p0

Question

I keep getting the error mentioned in the title. I have tried reading Angular docs on the error and seems like I am going everything fine.

I have 3 modules App.js, planCtrl.js and gservice.js and attached them like below

index.html

<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Google Libraries -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkISJD8ay_X92_2BJxoe1k15ICtGFf5o&libraries=places"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-cookies.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>

<script src="js/app.js"></script>
<script src="js/planCtrl.js"></script>
<script src="js/gservice.js"></script>

app.js

var chaloApp = angular
     .module('chaloApp', [
        'planCtrl', 'gservice', 'ngCookies', 
        'ngRoute', 'ngMessages', 'ui.bootstrap'
    ]);

plan.js

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

planCtrl.controller('planController', ['$scope', '$rootScope', '$http', '$cookies', '$location', '$compile', '$uibModal', 'gservice', function($scope, $rootScope, $http, $cookies, $location, $compile, $uibModal, gservice){

gservice.js

angular.module('gservice', [])
    .factory('gservice', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http){

Here is the full error if details are needed.

Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=<div class="routePages ng-scope" ng-view="">copeProvider%20%3C-%20%24scope%20%3C-%20gservice
at Error (native)
at https://code.angularjs.org/1.5.0/angular.min.js:6:416
at https://code.angularjs.org/1.5.0/angular.min.js:43:7
at Object.d [as get] (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at https://code.angularjs.org/1.5.0/angular.min.js:43:69
at d (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at e (https://code.angularjs.org/1.5.0/angular.min.js:41:1)
at Object.invoke (https://code.angularjs.org/1.5.0/angular.min.js:41:86)
at Object.$get (https://code.angularjs.org/1.5.0/angular.min.js:38:460)
at Object.invoke (https://code.angularjs.org/1.5.0/angular.min.js:41:295)

Been struggling with this one for bit so appreciate any help.

Thanks,

have you included routes js file in the page? are all dependencies loaded? sometimes it might also happen when you load first the routes before angular got loaded. — Sol Stein
– Sol Stein, Commented Feb 25, 2016 at 18:53
@LJ.Wizard - Just updated the index.html code to show rest of the scripts. — manutdfan
– manutdfan, Commented Feb 25, 2016 at 18:57

user5085788 · Accepted Answer · 2016-02-25 18:58:46Z

3

Try this in index.html:

<script src="js/gservice.js"></script>
<script src="js/planCtrl.js"></script>
<script src="js/app.js"></script>

This is because planCtrl depends on gservice and chaloApp depends on planCtrl and gservice, so you need to include them first.

answered Feb 25, 2016 at 18:58

user5085788

Sign up to request clarification or add additional context in comments.

1 Comment

manutdfan Over a year ago

Thanks, Luis. I am going to try it.

cl3m · Accepted Answer · 2016-02-25 18:57:49Z

0

Have you tried to include your gservice.js file first, as other modules depends on it:

<script src="js/gservice.js"></script>
<script src="js/app.js"></script>
<script src="js/planCtrl.js"></script>

Edit
Your error message indicates that the $scope provider can't be injected in your gservice.

You should only inject $rootScope in your service:

angular.module('gservice', [])
    .factory('gservice', ['$rootScope', '$http', function($rootScope, $http)

edited Feb 25, 2016 at 18:57

answered Feb 25, 2016 at 18:54

cl3m

2,80121 silver badges21 bronze badges

1 Comment

manutdfan Over a year ago

I did that, but did not work. I am creating a plunkr to show rest of the code.

LJ.Wizard · Accepted Answer · 2016-02-25 19:12:22Z

0

I would recommend that you change the name of your gservice factory to be different to that of your factory module. Having the same name can confuse things. It also looks like you're injecting your gservice module, into your plan controller module, when it should be injected into your app model.

Try the following changes:

plan.js

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

planCtrl.controller('planController', ['$scope', '$rootScope', '$http', '$cookies', '$location', '$compile', '$uibModal', 'newGservice', function($scope, $rootScope, $http, $cookies, $location, $compile, $uibModal, newGservice){

gservice.js

angular.module('gservice', [])
    .factory('newGservice', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http){

answered Feb 25, 2016 at 19:12

LJ.Wizard

6051 gold badge6 silver badges10 bronze badges

1 Comment

manutdfan Over a year ago

Thanks, LJ. Let me try that.

Collectives™ on Stack Overflow

Angular JS error - http://errors.angularjs.org/1.5.0/$injector/unpr?p0

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related