角度未知喷射器提供程序错误答案

【问题标题】：angular unknown injector provider error角度未知喷射器提供程序错误
【发布时间】：2015-10-27 10:55:01
【问题描述】：

我收到此错误 -- 错误：[$injector:unpr] 未知提供者：graphServiceProvider 。

我尝试了很多方法，但无法弄清楚出了什么问题？我在 index.html 文件中以错误的方式声明脚本文件吗？还是别的什么？

app.js 文件 --

angular.module('plunker', ['ui.router', 'chart.js', 'ngMessages']);

index.html 文件

<!DOCTYPE html>
<html lang="en" ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>Vote Guru Application</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/Chart.js/Chart.js"></script>
    <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>


    <script src="app.js"></script>
    <script src="controllers/mainController.js"></script>
    <script src="controllers/signupController.js"></script>
    <script src="routes.js"></script>
    <script src="run.js"></script>
    <script src="controllers/newPollController.js"></script>
    <script src="services/voteGuruService.js"></script>
    <script src="services/graphService.js"></script>
    <script src="controllers/navbarController.js"></script>
    <script src="controllers/votingPageController.js"></script>
    <script src="controllers/midbarController.js"></script>
    <script src="controllers/settingsPageController.js"></script>
    <script src="controllers/myPollsPageController.js"></script>
    <script src="controllers/usersHomePageMidbarController.js"></script>
    <script src="controllers/graphController.js"></script>
    <script src="directives/dirtyCheckDirective.js"></script>

    <link rel="stylesheet" href="style.css"/>
    <base href="/">
</head>

<body ng-controller="mainController as vm">
<div ui-view="" name="nav"></div>
<div ui-view="" name="midbar"></div>
<div ui-view="" name="content"></div>
</body>

</html>

图形控制器文件 --

/**
 * Created by sohamchakraborty on 10/22/15.
 */
/**
 * Created by sohamchakraborty on 10/12/15.
 */


    angular
        .module('plunker')
        .controller('graphController', ['graphService', function (graphService) {


            var vm = this;

            vm.activate = activate;
            vm.data=[];
            vm.labels=[];

            activate();

            function activate(){
                loadGraph();
            }

            function loadGraph(){
                vm.data=graphService.loadGraphData();
                //console.log('data = ', vm.data);
                vm.labels=graphService.loadGraphLabels();
                //console.log('labels = ', vm.labels);
                var barData = graphService.loadBarDataForGraphs(vm.data, vm.labels);
                var context = document.getElementById('clients').getContext('2d');

                var clientsChart = new Chart(context).Bar(barData);
            }
    }
        ]);

图形服务文件 --

/**
 * Created by sohamchakraborty on 10/27/15.
 */
(function (){
    'use strict';

    angular
        .module('plunker')
        .factory('graphService', [ 'voteGuruService', function (voteGuruService) {

            return {
                loadBarDataForGraphs: function (data, labels) {
                    var barData = {};
                    barData.labels = labels;
                    barData.datasets = [];
                    barData.datasets[0] = {};
                    barData.datasets[0].data = data;
                    return barData;
                },
                loadGraphData: function () {
                    var data = [];
                    var poll = voteGuruService.getPollForGraphs();
                    var len = poll.Options.length;
                    for (var i = 0; i < len; i++) {
                        data.push(poll.Options[i].votes);
                    }
                    return data;
                },
                loadGraphLabels: function () {
                    var labels = [];
                    var poll = voteGuruService.getPollForGraphs();
                    var len = poll.Options.length;
                    for (var i = 0; i < len; i++) {
                        labels.push(poll.Options[i].option);
                    }
                    return labels;
                }
            }
        }
        ]);

    });

【问题讨论】：

查看此链接docs.angularjs.org/error/$injector/unpr
我想把图形服务放到不同的文件中；这是该链接无法实现的
我认为你的graph service 没问题，当你把它放到不同的文件中时，你只是错过了代码结尾的()，请检查我的答案。
是的，我想通了

标签： javascript angularjs

【解决方案1】：

你错过了调用类似的函数

(function () {
    'use strict';

    angular
        .module('myApp')
        .factory('graphService', function () {

            return {
                //other code
            }
        });

})(); //here you missed to invoke '()'

【讨论】：