TypeError: carsService.getCars is not a function when sharing data between controllers

Question

I need to share data between controllers. I've found an answer in post Passing data between controllers in Angular JS? & made by this example. When navigating to "Profile" view I get "TypeError: carsService.getCars is not a function when sharing data between controllers"

Controller

    angular.module('myApp', [
  'ngRoute',
  'myApp.cars',
  'myApp.profile',
  'myApp.home',
  'myApp.login',
  'myApp.version'
]).
    config(['$routeProvider', function ($routeProvider) {
      $routeProvider.otherwise({
        redirectTo: '/home'
      });
    }])
.
    service('carsService', function() {
      var carList = [];

      var addUserCar = function(newObj) {
        carList.push(newObj);
        console.log("Car Added")
      };

      var getCars = function(){
        return carList;
      };

      return {
        addUserCar: addUserCar,
        getCars: getCars
      };

    });

Cars view

<ul class="cars"> 
  <li ng-repeat="car in cars">
    <div class="car">
      <div class="carView" href="car/{{car.id}}">
        <div class="imageView">
          <img alt="{{car.name}}" ng-src="{{car.image}}" />
        </div>
        <div class="carText">
          <p>{{car.title}}</p>
          <p>{{car.color}}</p>
          <p>{{car.description}}</p>
        </div>
      </div>
      <button class="addBtn" ng-click="addUserCar(car.id)">Add car</button>
    </div>
  </li>
</ul>

Car controller

.controller('carsCtrl', ['$scope', '$http', function ($scope, $http, carsService) {

$http.get('views/cars.json')
  .success(function (data) {

    $scope.cars = data;
    $scope.addCar = function(currId){
      carsService.addUserCar(currId);
    };

  })
  .error(function () {
    alert("can not get data from cars.json")
  });
}]);

Profile controller

.controller('profileCtrl', ['$scope', '$http', function ($scope, carsService) {
  $scope.userCars = carsService.getCars();
  }]);

ste2425 · Accepted Answer · 2015-10-16T08:51:16.643

You are incorrectly injecting in the service.

.controller('profileCtrl', ['$scope', '$http', function ($scope, carsService) {
      $scope.userCars = carsService.getCars();
  }]);

Should be

.controller('profileCtrl', ['$scope', '$http', 'carsService', function ($scope, carsService) {
      $scope.userCars = carsService.getCars();
  }]);

Angular's injection system finds services by name, so it doesn't matter what order you place them in your controller function. However when you minify your JavaScript the minify process changes your variable names. This breaks angular's injection system.

So Angular uses the array notation, it specifies what services your injecting so even when you minify your code and it changes the names of your variables angular can map those changed variable names to the values in the array finding the correct services.

EDIT

I noticed a second issue. You are injecting into your controller the $http service but using your own carService. If you console.log(carsService) you will see it is in actual fact the $http service you have essentially aliased it.

So you need to either remove the $http from the array like so

.controller('profileCtrl', ['$scope', 'carsService', function ($scope, carsService) {
      $scope.userCars = carsService.getCars();
  }]);

or include it in your function if it is required in your controller

.controller('profileCtrl', ['$scope', '$http', 'carsService', function ($scope, $http, carsService) {
      $scope.userCars = carsService.getCars();
  }]);

EDIT again

To whom ever edited my answer whilst i was and removed the unused $http dependency, in future it may be best to actually explain why your doing so if your going to edit a question like that as the OP my not have fully understood the issue. They would have been non the wiser otherwise.

Thanks, @ste2425. Another problem raised. When clicking "Add Car" button I see "TypeError: Cannot read property 'addUserCar' of undefined" in console — wrath1888, Oct 16 '15 at 10:49
No problem. That is the same issue. In your other controller you are including your scope, http and custom service however in your array your only including scope & http. The array needs to match the services passed into your controller function in the samr order. — ste2425, Oct 18 '15 at 09:11

TypeError: carsService.getCars is not a function when sharing data between controllers

1 Answers1