AngularJS service dependency injection error

Question

<!DOCTYPE html>
<html ng-app="myApp">

<head></head>
<head>

</head>

<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used on diferent view -->
<body ng-controller="MainCtrl as main" class="{{$state.current.data.specialClass}}" landing-scrollspy id="page-top">

<!-- Main view  -->
<div ui-view></div>

<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-3.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- Anglar App Script -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services/myService.js"></script>
</body>
</html>

I have an angularJS app which was working fine before adding a service. I am getting the following error. myService.js:3 Uncaught Reference Error: myApp is not defined Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr? I am tying all the controllers to the module. I have also added the myService file to the index.html Below is the code that I have in controller:

function MainCtrl($scope, $rootScope, $http, $state, myService){
};

angular
    .module('myApp')
    .controller('MainCtrl', MainCtrl)
    .controller('FinalViewCtrl', FinalViewCtrl);

This is what I have in myService.js
    'use strict';
    myApp.factory('myService', ['$http', function($http) {
    }]);

Let me know if I am missing anything?

The problem seems to be your controller, you are trying to inject service in your controller before you have declared it. Move myservice.js before controller.js in script declaration — Kumar Nitesh
– Kumar Nitesh, Commented Feb 13, 2018 at 1:19

Kalyan · Accepted Answer · 2018-02-12 22:01:22Z

1

Add the myapp variable initiation just above the service code.

var myapp = angular.module('myApp');
   myApp.factory('myService', ['$http', function($http) {
    }]);

answered Feb 12, 2018 at 22:01

Kalyan

1,2001 gold badge11 silver badges23 bronze badges

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

4 Comments

sai123 Over a year ago

I am still getting Uncaught Error: [$injector:modulerr] even though the first error is gone.

sai123 Over a year ago

angular.js:13236 Error: [ng:areq] errors.angularjs.org/1.5.0/ng/… at angular.js:38 at sb (angular.js:1825) at Sa (angular.js:1835) at angular.js:9831 at A (angular.js:8852) at u (angular.js:8898) at g (angular.js:8226) at g (angular.js:8229) at angular.js:8106 at angular.js:1696

Kalyan Over a year ago

@sai123. Seems the error is related the controller loading. Move your controller function underneath the following statement. angular .module('myApp') .controller('MainCtrl', MainCtrl) .controller('FinalViewCtrl', FinalViewCtrl);

Kalyan Over a year ago

@sai123: Seems the error is related the controller loading. Since you are using the controller in Body you need to move all <script> references under the <body> tag to <head> tag of the index.html

Tyler · Accepted Answer · 2018-02-12 22:11:52Z

0

Without the html, it will be hard to tell, but are you adding your JavaScript files in the correct order? You have to make sure that your file with angular.module('myApp') is loaded before any controllers or services. I've had the same error you have when adding my service before my app.

answered Feb 12, 2018 at 22:11

Tyler

1,0491 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS service dependency injection error

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related