Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unknown provider error for controller

this is what my app.js file looks like:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    ionic.Platform.fullScreen()
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      // StatusBar.styleDefault();
      StatusBar.hide();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/rubyonic/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.alerts', {
    url: "/alerts",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/alerts.html"
      }
    }
  })

  .state('app.profile', {
    url: "/profile",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/profile.html"
      }
    }
  })

  .state('app.rank-charts', {
    url: "/rank_charts",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/rank_charts.html"
      }
    }
  })

  .state('overview', {
    url: "/overview",
    controller: 'OverviewCtrl',
    templateUrl: "templates/rubyonic/overview.html"
  })

  .state('app.claim-details', {
    url: "/claim-details",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/claim_details.html"
      }
    }
  })

  .state('app.scorecards', {
    url: "/scorecards",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/scorecards.html"
      }
    }
  })

  .state('app.fnol', {
    url: "/fnol",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/fnol.html"
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/overview');
});

Here is my controller.js:

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

.controller('OverviewCtrl', function($scope,Surveys) {
        $scope.surveys = Surveys.all();
})

.controller('NavigationCtrl', function($scope, $state,$ionicHistory) {

  // Function to go states. We're using ng-click="go('app.state')" in all our anchor tags
  $scope.go = function(path){
      // console.log('working. Click was Triggered');
      $state.go(path);
      // console.log($ionicHistory.viewHistory());
  }

  //Function to go back a step using $ionicHistory
  $scope.goBackAStep = function(){
      console.log('clicked');
      $ionicHistory.goBack();
  }

});

And here is my services.js:

var app = angular.module('starter.services', [])

.factory('Surveys',function(){
    var surveys = [{
      id: 0,
      name: 'Honda Survey Results'
    },

    {
      id: 1,
      name: 'Toyota Survey Results'
    },
    {
      id: 2,
      name: 'BMW Survey Results'
    },
    {
      id: 3,
      name: 'Nissan Survey Results'
    },
    {
      id: 4,
      name: 'Tesla Survey Results'
    },
    {
      id: 5,
      name: 'Mazda Survey Results'
    },
    {
      id: 6,
      name: 'Ford Survey Results'
    },
    {
      id: 7,
      name: 'Apple Survey Results'
    },
    {
      id: 8,
      name: 'Microsoft Survey Results'
    },
    {
      id: 9,
      name: 'IBM Survey Results'
    },
    {
      id: 10,
      name: 'Amazon Survey Results'
    }
    ];
    return {
    all: function() {
      return surveys;
    },

    get: function(surveyId) {
      // Simple index lookup
      return surveys[surveyId];
    }
};
})

I get an Error: [$injector:unpr] Unknown provider: SurveysProvider <- Surveys <- OverviewCtrl error on my console. I think I am injecting the service correctly in the controller don't see what the problem is. Any help would be really appreciated

like image 343
user1585869 Avatar asked Jul 06 '15 05:07

user1585869


2 Answers

You forgot to specify starter.services as a dependency in the module starter.controllers. This is important because you are injecting Surveys in your OverviewCtrl controller.

This is how your controller.js should look like:

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

.controller('OverviewCtrl', function($scope,Surveys) {
        $scope.surveys = Surveys.all();
})

.controller('NavigationCtrl', function($scope, $state,$ionicHistory) {

  // Function to go states. We're using ng-click="go('app.state')" in all our anchor tags
  $scope.go = function(path){
      // console.log('working. Click was Triggered');
      $state.go(path);
      // console.log($ionicHistory.viewHistory());
  }

  //Function to go back a step using $ionicHistory
  $scope.goBackAStep = function(){
      console.log('clicked');
      $ionicHistory.goBack();
  }

});
like image 177
nalinc Avatar answered Oct 14 '22 15:10

nalinc


Inject your service module to another module as dependency where you want to access it.

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

You are using services in contollers module, so you need to declare dependency as well.

like image 33
Laxmikant Dange Avatar answered Oct 14 '22 14:10

Laxmikant Dange