Having difficulty injecting service into controller with AngularJS

Question

I am having problems injecting ServicesData into SearchCtrl, and keep getting the following error message: Error: [$injector:unpr] Unknown provider: ServicesDataProvider <- ServicesData <- SearchCtrl. What could be the cause of this?

app.js

angular.module('starter', ['ionic', 'jett.ionic.filter.bar', 'starter.controllers'])

  .state('app.playlists', {
    url: '/playlists',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlists.html',
        controller: 'SearchCtrl'
      }
    }
  });
});

controller.js

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller('SearchCtrl', ["$scope", "ServicesData", function($scope, $timeout, ServicesData, $ionicFilterBar) {

    // Get list items

    function getItems () {
      var items = [];
      for (var x = 1; x < 3; x++) {
        items.push({text: 'Item number ' + x});
      }
      $scope.items = items;
    }
    getItems();

    // Ionic filter bar

    var filterBarInstance;

    $scope.visible = true;
    $scope.nulledVisible = false;
    $scope.toggle = function(event) {
        if(event.target.id === 'nulled-search-button' && $scope.nulledVisible === false || event.target.id === 'header-search-button' && $scope.nulledVisible === false) {
          $scope.visible = !$scope.visible;  
          $scope.nulledVisible = true;
        } 
    };

    $scope.showFilterBar = function () {
      filterBarInstance = $ionicFilterBar.show({
        items: $scope.items,
        update: function (filteredItems, filterText) {
          $scope.items = filteredItems;
          if (filterText) {
            console.log(filterText);
          }
        }
      });
    };

    $scope.refreshItems = function () {
      if (filterBarInstance) {
        filterBarInstance();
        filterBarInstance = null;
      }

      $timeout(function () {
        getItems();
        $scope.$broadcast('scroll.refreshComplete');
      }, 1000);
    };
}]);

services.js

angular.module('starter.services', [])

.service("ServicesData", [function () {
    var servicesData = [
        { 
            title: 'Car Repair and Maintenance', 
            total: 7, 
            id: 1
        }
    ];

    return {
        getAllServices: function () {
            return servicesData;
        }
}])

Answer 1

2 things : fix your controller declaration

["$scope", "ServicesData", function($scope, $timeout, $ionicFilterBar) 
["$scope", "ServicesData", "$timeout", "$ionicFilterBar", function($scope, ServicesData, $timeout, $ionicFilterBar) 

add dependency to your service module so your controller iwll be able to access what have been declared in your start.services module.

angular.module('starter.controllers', ['starter.services'])

Answer 2

Seems like you have an DI problem. Try to change this:

.controller('SearchCtrl', ["$scope", "ServicesData", function($scope, $timeout, ServicesData, $ionicFilterBar)

to:

.controller('SearchCtrl', ["$scope", "$timeout", "ServicesData", "$ionicFilterBar", function($scope, $timeout, ServicesData, $ionicFilterBar)

Answer 3

Rewrite dependency injection line.

.controller('SearchCtrl', ["$scope","$timeout","ServicesData", $ionicFilterBar, function($scope, $timeout, ServicesData, $ionicFilterBar) 

the problem is sequence should be same and you have write dependency in both places.