angularjsangular-servicesangular-controller

Getting Error :[$injector:unpr] Unknown provider: dataServiceProvider <- dataService <- firstctrl


I am new to angular and creating my first application using angular in it and getting this error. "[$injector:unpr] Unknown provider: dataServiceProvider <- dataService <- firstctrl" Below is my code for which i am getting the error.

my aspx page:

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script src="../Scripts/angular.js"></script>
    <script src="../app/app.js"></script>
    <script src="../app/shared/services/dataService.js"></script>
    <script src="../app/controller/firstctrl.js"></script>
    <meta name="WebPartPageExpansion" content="full" />

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
     <div ng-app="rootapp" ng-controller="firstctrl">
        {{first}} {{last}}
    </div>
</asp:Content>

App.js

(function () {
    'use strict';

    angular
        .module('rootapp', [
            'ngRoute'
        ])
        .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

            $routeProvider
                .when('/', {
                    controller: 'firstctrl',
                    templateURL: ''
                })
                .otherwise({ redirectTo: '/' });
        }]);
})();

Controller JS firstctrl.js

    (function () {
        'use strict';
        var hostweburl;
        var appweburl;
        var SPLanguage;
        var SPClientTag;
        var SPProductNumber;
        var context = SP.ClientContext.get_current();
        var user = context.get_web().get_currentUser();
        var UserDetails = "";
        var ProjectList = "";
        var queryStringValue = {};
        var defaultQueryStringVal = '';
        var ready = false;
        var digest = "";
        var UserEmailID = "";
        var ExtLog = "";
        var lineno = 0;
        var country = '';
        var ip = '';
        var city = '';
        var SettingsList = '';
        var CurrentUser;
        var btntext;
        var UID;
        var ConsolidatedValue;
        var LiceKey;
        var checkboxval;
        var HostFlag;

        angular
            .module('rootapp', [])
            .controller('firstctrl', ["$scope", "dataService", function ($scope, dataService) {

                $scope.first = "John";
                $scope.last = "Doe";

                parseQueryString();
//replaced my api-key value from x
                TogetCountry("https://api.ipdata.co/?api-key=xxxxxxxxxxxxxxxxxxxxxxxxxx");

                function parseQueryString() {
                    var qstr = document.URL.split("?")[1].split("&");
                    var a = qstr;
                    for (var i = 0; i < a.length; i++) {
                        var b = a[i].split('=');
                        queryStringValue[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
                    }
                    SPLanguage = queryStringValue.SPLanguage || '';
                    SPClientTag = queryStringValue.SPClientTag || '';
                    SPProductNumber = queryStringValue.SPProductNumber || '';
                    hostweburl = queryStringValue.SPHostUrl;
                    appweburl = queryStringValue.SPAppWebUrl;
                    defaultQueryStringVal = "SPHostUrl=" + hostweburl + "&SPLanguage=" + SPLanguage + "&SPClientTag=" + SPClientTag + "&SPProductNumber=" + SPProductNumber + "&SPAppWebUrl=" + appweburl;

                    console.log("defaultQueryStringVal-----", defaultQueryStringVal);
                }

                function TogetCountry(url) {
                    console.log("TogetCountry");
                    dataService.GetCountry(url).then(function (result) {
                        console.log("result", result);
                    });
                    console.log("---------" + country, city, ip);
                }
            }]);
    })();

dataservice.js

(function () {
    'use strict';

    angular
        .module('rootapp')
        .service('dataService', ['$http', '$q', function ($http, $q) {
            var service = {};

            service.GetCountry = function (URL) {
                var deferred = $q.defer();
                $http.get(URL).then(function (result) {
                    deferred.resolve(result.data);
                }, function () {
                    deferred.reject();
                });
                return deferred.promise;
            }
            return service;

        }]);

})();

Appreciate if get any help in resolving this.


Solution

  • You're defining rootapp twice. Once in App.js and once in firstctrl.js. You need to remove the [] from .module('rootapp', []) in firstctrl.js.