AngularJS: sending values between controllers using service not working

Question

So, I am currently working on a solution of project, that needs 2 separate controllers and they need to share data. To be exact, they need to share data exactly once. I decided to go with service instead of using $rootScope, that would handle this data exchange. However, in my code, I cant even run anything, because I get

"Error: $injector:unpr Unknown Provider Unknown provider: simulationServiceProvider <- simulationService <- mainController"

I went through various answers to similar questions here and on other sites, but nothing helped. So why do I get injector error in my code which looks like this (notice, that controllers,module and service are all in separate files. I am also removing all the unnecessary code and leaving only code relevant to service usage)

html:

 <!DOCTYPE html>
    <html lang="sk" >
        <head>
            <meta charset="utf-8" />
            <title>...</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        </head>
        <body ng-app="App">
            <div ng-controller="mainController">
            ....code here...
            <div ng-controller="simulationController">
            ..more code here...
            </div>
            <script src="app.js"></script>
            <script src="simulationService.js"></script>
            <script src="mainController.js"></script>
            <script src="simulationController.js"></script>
        </body>
    </html>

app.js contents:

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

mainController.js content:

app.controller('mainController',['$scope','simulationService',function($scope, simulationService) {
...code...
    $scope.startSimulation = function(value) {
            simulationService.kNumber = $scope.kNumber;
            simulationService.deltaFunction =$scope.deltaFunction;
            simulationService.kSourceTracks = $scope.kSourceTracks;
            simulationService.mode = $scope.stateEnum.MODE_2_SIMULATE;
            simulationService.isActive = true;
    }
...code...
}]);

simulationController.js content:

app.controller('simulationController',['$scope','simulationService',function ($scope,simulationService) {
    if(simulationService.isActive){
        $scope.kNumber = simulationService.kNumber;
        $scope.kSourceTracks = simulationService.kSourceTracks;         
        $scope.mode = simulationService.mode;   
        if($scope.mode == 6){
            $scope.deltaFunction = simulationService.deltaFunction;
        }
    }
}]);

And finally simulationService.js:

app.service('simulationService', function() {
  var _kNumber;
  var _kSourceTracks;
  var _deltaFunction;
  var _mode;
  var _isActive = false;

  this.kNumber = _kNumber; 
  this.kSourceTracks = _kSourceTracks;
  this.deltaFunction =_deltaFunction;
  this mode = _mode;
  this.isActive =  _isActive;
});

This setup gives me injection error and I have absolutely no idea why is this happening. I am not sure about the service contents being correct or that it does what I should, but firstly I have to get it injected and running before I can move forward and work on making it doing what I want. Thank you very much for any suggestions.

frishi · Accepted Answer · 2016-01-22 11:50:04Z

1

Created a fiddle here:

https://jsfiddle.net/frishi/zxnLwz6d/8/

Check the console to see that the service is loaded correctly. Right off the bat, there is a syntax error in your service definition:

this mode = _mode; should be this.mode = _mode;

answered Jan 22, 2016 at 11:50

frishi

8821 gold badge11 silver badges28 bronze badges

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

1 Comment

fifco Over a year ago

Oh! Sir, you are right. What a stupid mistake. Thank you very much, now it is finally running and I can continue.

vamshi krishna kurella · Accepted Answer · 2016-01-22 11:57:16Z

0

This is because, your html is loading before the js files.

Include your js files at the top of the page.

your html should look like this

<!DOCTYPE html>
    <html lang="sk" >
        <head>
            <meta charset="utf-8" />
            <title>...</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="app.js"></script>
            <script src="simulationService.js"></script>
            <script src="mainController.js"></script>
            <script src="simulationController.js"></script>
        </head>
        <body ng-app="App">
            <div ng-controller="mainController">
            ....code here...
            <div ng-controller="simulationController">
            ..more code here...
            </div>            
        </body>
    </html>

EDITED: You missed dot(.) in simulationService.js

edited Jan 22, 2016 at 11:57

answered Jan 22, 2016 at 11:42

vamshi krishna kurella

3321 silver badge10 bronze badges

3 Comments

fifco Over a year ago

hm, it doesn't work even after applying this. Still exactly the same error :( My brain is frying already from this weird behaviour

vamshi krishna kurella Over a year ago

can u share folder architecture!

frishi Over a year ago

@vamshikrishna The error OP is getting is about a serviceProvider not found, so clearly he is getting to the point of his app module and controllers been registered. This has got nothing to do with JS been loaded after the HTML.

Collectives™ on Stack Overflow

AngularJS: sending values between controllers using service not working

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related