user6934713 user6934713 - 1 month ago 10
AngularJS Question

Angular Error: Unknown provider: dataserviceProvider

I am trying to inject two factories and my code is getting the error "Error: [$injector:unpr] Unknown provider: dataserviceProvider:

<!DOCTYPE html>
<html ng-app="MyApp">......


This is the html page:

@section scripts
{
<script type="text/javascript" src="~/App/Controllers/HomeController.js"></script>
<script src="~/App/Factories/dataservice.js"></script>
<script src="~/App/Factories/quizMetrics.js"></script>
<script src="~/App/Controllers/list.js"></script>
<script src="~/App/Controllers/quiz.js"></script>
<script src="~/App/Controllers/results.js"></script>
}


<div ng-controller="HomeController as ctrl" class="md-content" ng-cloak>.... </div>


And I am trying to inject here and if I remove quizMetrics, DataService everithing is working fine:

(function () {
angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('HomeController', HomeController);

HomeController.$inject = ['$scope', '$http', '$filter', '$mdDialog', '$timeout', 'quiz','list','result','quizMetrics', 'dataservice' ];

function HomeController($scope, $http, $filter, $mdDialog, $timeout, quiz,list,result,quizMetrics, dataservice ) {
})();


And one of my scripts:

(function(){

angular.module("MyApp")
.factory("quizMetrics", QuizMetrics);

QuizMetrics.$inject = ['DataService'];

function QuizMetrics(DataService){

var quizObj = {
quizActive: false,
resultsActive: false,
changeState: changeState, // changeState is a named function below
correctAnswers: [],
markQuiz: markQuiz, // markQuiz is a named function below
numCorrect: 0
};
return quizObj;

function changeState(metric, state){
if(metric === "quiz"){
quizObj.quizActive = state;
}else if(metric === "results"){
quizObj.resultsActive = state;
}else{
return false;
}
}

function markQuiz(){
quizObj.correctAnswers = DataService.correctAnswers;
for(var i = 0; i < DataService.quizQuestions.length; i++){
if(DataService.quizQuestions[i].selected === DataService.correctAnswers[i]){
DataService.quizQuestions[i].correct = true;
quizObj.numCorrect++;
}else{
DataService.quizQuestions[i].correct = false;
}
}
}

}

})();


and dataservice.js

(function(){

angular
.module("MyApp")
.factory("DataService", DataService);

function DataService(){

var dataObj = {
quizQuestions: quizQuestions,
correctAnswers: correctAnswers
};
return dataObj;
}

var correctAnswers = [1, 2, 3, 0, 1, 0, 4, 2, 0, 3];

var quizQuestions = [
{
type: "text",
text: "How much can a loggerhead weigh?",
possibilities: [
{
answer: "Up to 20kg"
},
{
answer: "Up to 115kg"
},
{
answer: "Up to 220kg"
},
{
answer: "Up to 500kg"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "What is the typical lifespan of a Green Sea Turtle?",
possibilities: [
{
answer: "150 years"
},
{
answer: "10 years"
},
{
answer: "80 years"
},
{
answer: "40 years"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "My Question?",
possibilities: [
{
answer: "Answer1"
},
{
answer: "Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 Answer2 "
},
{
answer: "Answer3"
},
{
answer: "Answer4"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "How much can a loggerhead weigh?",
possibilities: [
{
answer: "Up to 20kg"
},
{
answer: "Up to 115kg"
},
{
answer: "Up to 220kg"
},
{
answer: "Up to 500kg"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "This is an Yes/No question?'",
possibilities: [
{
answer: "Yes"
},
{
answer: "No"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "This is five answer choices question ?",
possibilities: [
{
answer: "Loggerhead turtle"
},
{
answer: "Leatherback turtle"
},
{
answer: "Hawksbill Turtle"
},
{
answer: "Alligator Snapping Turtle"
}
,
{
answer: "Answer five"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "What is the largest sea turtle on earth?",
possibilities: [
{
answer: "Eastern Snake Necked Turtle"
},
{
answer: "Olive Ridley Sea Turtle"
},
{
answer: "Kemp's Ridley Sea Turtle'"
},
{
answer: "Leatherback"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "How much can a loggerhead weigh?",
possibilities: [
{
answer: "Up to 20kg"
},
{
answer: "Up to 115kg"
},
{
answer: "Up to 220kg"
},
{
answer: "Up to 500kg"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "How Heavy can a leatherback turtle be?",
possibilities: [
{
answer: "900kg"
},
{
answer: "40kg"
},
{
answer: "110kg"
},
{
answer: "300kg"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Which of these turtles are herbivores?",
possibilities: [
{
answer: "Loggerhead Turtle"
},
{
answer: "Hawksbill Turtle"
},
{
answer: "Leatherback Turtle"
},
{
answer: "Green Turtle"
}
],
selected: null,
correct: null
}
];
})();

Answer

Regarding the error you are getting, make sure module/Service/etc naming is correct and dependencies are loaded before they are used:

  • Angular modules are case sensitive, so make sure you use same name everywhere, there are some "myApp" and some "MyApp", they are not same
  • Make sure dependencies are loaded before you try to inject/use them, for example, if you are trying to inject some service in a Controller, make sure it's loaded before that controller.

Hope this helps.

-Thanks