简体   繁体   English

角度错误:未知提供程序:dataserviceProvider

[英]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: 我试图注入两个工厂,并且我的代码收到错误“错误:[$ injector:unpr]未知提供程序:dataserviceProvider:

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

This is the html page: 这是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>

And I am trying to inject here and if I remove quizMetrics, DataService everithing is working fine: 我试图在这里注入,如果我删除quizMetrics,则DataService可以正常工作:

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

Module names are case sensitive, in quizMetrics you have myApp instead of MyApp. 模块名称区分大小写,在quizMetrics中,您拥有myApp而不是MyApp。 this will probably solve your problem. 这可能会解决您的问题。

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 Angular模块区分大小写,因此请确保在各处使用相同的名称,其中有些“ myApp”和某些“ MyApp”,它们是不相同的
  • 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. 在尝试注入/使用依赖项之前,请确保已加载依赖项,例如,如果要在Controller中注入某些服务,请确保已在该控制器之前加载了相关服务。

Hope this helps. 希望这可以帮助。

-Thanks -谢谢

注入控制器时,请使用“ DataService”而不是“ dataservice”。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM