CODEWITHSUNDEEP
javascriptangularjs
IloveR
IloveR

Reputation: 13

angular unknown injector provider error

I am getting this error -- Error: [$injector:unpr] Unknown provider: graphServiceProvider <- graphService <- graphController.

I tried so many approaches but not able to figure out what is going wrong ? Am i declaring the script files in the wrong manner in the index.html file ? Or something else ?

app.js file --

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

index.html file

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

graph controller file -- 

/**
 * 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);
            }
    }
        ]);

graph service file -- 

/**
 * 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;
                }
            }
        }
        ]);

    });

Upvotes: 0

Views: 101

Answers (1)

Tasnim Reza
Tasnim Reza

Reputation: 6060

You missed to invoke the function like

(function () {
    'use strict';

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

            return {
                //other code
            }
        });

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

Upvotes: 1

Related Questions