Search code examples
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

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....

Solution

  • 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>