角度错误:未知提供者:dataserviceProvider

时间:2016-10-21 11:46:44

标签: javascript angularjs

我正在尝试注入两个工厂,我的代码收到错误“错误:[$ injector:unpr]未知提供程序:dataserviceProvider:

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

这是html页面:

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

我正在尝试注入此处,如果我删除quizMetrics,DataService everithing工作正常:

(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 ) {
})();

我的一个剧本:

(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;
                }
            }
        }

    }

})();

和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
    }
];
})();

3 个答案:

答案 0 :(得分:1)

模块名称区分大小写,在quizMetrics中,您有myApp而不是MyApp。这可能会解决你的问题。

答案 1 :(得分:1)

关于您遇到的错误,请确保模块/服务/等命名正确并且在使用它们之前加载依赖项:

  • Angular模块区分大小写,因此请确保在任何地方使用相同的名称,有一些&#34; myApp&#34;和一些&#34; MyApp&#34;,它们不一样
  • 确保在尝试注入/使用它们之前加载依赖项,例如,如果您尝试在Controller中注入某些服务,请确保在该控制器之前加载它们。

希望这有帮助。

-Thanks

答案 2 :(得分:1)

在控制器中注入时,请使用&#39; DataService&#39;而不是数据服务&#39;。