Enigma State Enigma State - 4 months ago 27
Javascript Question

Getting error when pass data between controllers using sample service

as part of angular js learning, i created small app that will pass the data between two controllers using services..below is my code to pass the data between two controllers..

Controller code

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title></title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);

app.service('sampleService', [function () {
this.user = [name = 'pra', empno ='1234']
this.designation = 'teamlead';

}])
app.controller('NameCtrl', ['$scope','$sampleService', function ($scope,$sampleService) {
$scope.empname = $sampleService.user.name;
$scope.empnumber = $sampleService.user.empno;
$scope.empdesignation = $sampleService.designation;
$scope.changevals = function(){
$sampleService.user.empno = '9876';
$sampleService.designation = 'manager';
$scope.empnumber = $sampleService.user.empno;
$scope.empdesignation = $sampleService.designation; }
}])

app.controller('NameCtrl1', ['$scope','$sampleService', function ($scope) {
$scope.uEmpiId = $sampleService.user.empno;
$scope.uempdesignation = $sampleService.designation;
$scope.updatevals = function(){
$scope.uEmpiId = $sampleService.user.empno;
$scope.uempdesignation = $sampleService.designation; }
}])
</script>
</head>


below code is my html code

<body>
<div ng-controller="NameCtrl">
<div><b> Details - Controller 1</b></div>
<p>Name : {{empname}}</p>
<p>Location : {{empnumber}}</p>
<p>Designation : {{empdesignation}}</p>
<input type="button" value="Change Values" ng-click="changevals()" />
</div>
<br />
<div ng-controller="NameCtrl1">
<div><b>Details - Controller 2</b></div>
<input type="button" value="Change Values" ng-click="updatevals()" />
<p>Location : {{uEmpiId}}</p>
<p>Designation : {{uempdesignation}}</p>
</div>
</body>


I am not able to display the details and getting an error like this

angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24sampleServiceProvider%20%3C-%20%24sampleService%20%3C-%20NameCtrl
at Error (native)


Could any one please point me in right direction on where i am doing wrong with this code ..

Many thanks in advance....

Answer

Don't use '$' while injecting service in your controller:

change:

app.controller('NameCtrl', ['$scope','$sampleService', function ($scope,$sampleService) {

to:

app.controller('NameCtrl', ['$scope','sampleService', function ($scope,sampleService) {

EDIT

also (as @estus suggested), your service is undefined in NameCtrl1

change code of your NameCtrl2 from

app.controller('NameCtrl1', ['$scope','$sampleService', function ($scope) {

to

app.controller('NameCtrl1', ['$scope','sampleService', function ($scope, sampleService) {

In your code, whenever you're using this sampleService, dont use sampleService instead of $sampleService.


EDIT 2

change your

app.service('sampleService', [function () {
  this.user = [name = 'pra', empno ='1234']
  this.designation = 'teamlead';
}])

to

app.service('sampleService', [function() {
              this.user = {name : 'pra', empno : '1234'};
              this.designation = 'teamlead';
          }])

Final code would look like this:

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">

  <head>
      <title></title>
      <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
      <script type="text/javascript">
          var app = angular.module('myApp', []);
  
          app.service('sampleService', [function() {
              this.user = {name : 'pra', empno : '1234'};
              this.designation = 'teamlead';
  
          }])
          app.controller('NameCtrl', ['$scope', 'sampleService', function($scope, sampleService) {
              $scope.empname = sampleService.user.name;
              $scope.empnumber = sampleService.user.empno;
              $scope.empdesignation = sampleService.designation;
              $scope.changevals = function() {
                  sampleService.user.empno = '9876';
                  sampleService.designation = 'manager';
                  $scope.empnumber = sampleService.user.empno;
                  $scope.empdesignation = sampleService.designation;
              }
          }])
  
          app.controller('NameCtrl1', ['$scope', 'sampleService', function($scope, sampleService) {
              $scope.uEmpiId = sampleService.user.empno;
              $scope.uempdesignation = sampleService.designation;
              $scope.updatevals = function() {
                  $scope.uEmpiId = sampleService.user.empno;
                  $scope.uempdesignation = sampleService.designation;
              }
          }])
      </script>
  </head>
  <body>
      <div ng-controller="NameCtrl">
          <div><b> Details - Controller 1</b>
          </div>
          <p>Name : {{empname}}</p>
          <p>Location : {{empnumber}}</p>
          <p>Designation : {{empdesignation}}</p>
          <input type="button" value="Change Values" ng-click="changevals()" />
      </div>
      <br />
      <div ng-controller="NameCtrl1">
          <div><b>Details - Controller 2</b>
          </div>
          <input type="button" value="Change Values" ng-click="updatevals()" />
          <p>Location : {{uEmpiId}}</p>
          <p>Designation : {{uempdesignation}}</p>
      </div>
  </body>
</html>