Angular JS throwing an error: [$injector:unpr] Provider not recognized

Question

Angular JS throwing an error: [$injector:unpr] Provider not recognized

I am new to angular js and I'm attempting to create a custom service. I've copied and pasted some code for the custom service, but I keep encountering the following error:

Error: [$injector:unpr] Unknown provider: serviceProvider <- service <-         MainController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=serviceProvider%20%3C-  %20service%20%3C-%20MainController
at REGEX_STRING_REGEXP (angular.js:68)
at angular.js:4262
at Object.getService [as get] (angular.js:4409)
at angular.js:4267
at getService (angular.js:4409)
at Object.invoke (angular.js:4441)
at $get.extend.instance (angular.js:8999)
at nodeLinkFn (angular.js:8109)
at compositeLinkFn (angular.js:7541)
at publicLinkFn (angular.js:7416)(anonymous function) @ angular.js:12330

Here is the code for my custom service:

(function () {
    var myModule = angular.module('app', ['onsen']);
    myModule.service('service', ["$http", function ($http) {
        var test = function (usertoken) {
            alert("fffffffffffffffffffff");
        }
        return {
            getUserSites: getUserSites
        };
    }]);
})();

And here is my module implementation :

(function () {
    var myApp = angular.module('app', ['onsen']);

    var MainController = function ($scope, $http, $interval, service) {
        $scope.clciclme = function () {
            alert("HIIIIIIIIIIIIIIIIIIII");
        }
    }
    myApp.controller('MainController', MainController);
})();

I would appreciate any help in resolving this error. Thank you.

javascript angularjs ionic-framework onsen-ui

Answer 1

Answer №1

You're utilizing the module's setter syntax twice:

var myApp = angular.module('app', ['onsen']);

This leads to the creation of the app module twice. To switch to the getter syntax, omit the array parameter like so:

var myApp = angular.module('app');

Your revised code would appear as follows:

Controller:

(function () {
    var myApp = angular.module('app', ['onsen']); // using setter syntax once

    var MainController = function ($scope, $http, $interval, service) {
        $scope.clciclme = function () {
            alert("HIIIIIIIIIIIIIIIIIIII");
        }
    }
    myApp.controller('MainController', MainController);
})();

Service:

(function () {
    var myModule = angular.module('app'); // using getter syntax for subsequent instances

    myModule.service('service', ["$http", function ($http) {
        var test = function (usertoken) {
            alert("fffffffffffffffffffff");

        }
        return {
            getUserSites: getUserSites
        };
    }]);
})();

Answer 2

You're utilizing the module's setter syntax twice:

var myApp = angular.module('app', ['onsen']);

This leads to the creation of the app module twice. To switch to the getter syntax, omit the array parameter like so:

var myApp = angular.module('app');

Your revised code would appear as follows:

Controller:

(function () {
    var myApp = angular.module('app', ['onsen']); // using setter syntax once

    var MainController = function ($scope, $http, $interval, service) {
        $scope.clciclme = function () {
            alert("HIIIIIIIIIIIIIIIIIIII");
        }
    }
    myApp.controller('MainController', MainController);
})();

Service:

(function () {
    var myModule = angular.module('app'); // using getter syntax for subsequent instances

    myModule.service('service', ["$http", function ($http) {
        var test = function (usertoken) {
            alert("fffffffffffffffffffff");

        }
        return {
            getUserSites: getUserSites
        };
    }]);
})();

Angular JS throwing an error: [$injector:unpr] Provider not recognized

Answer №1

Similar questions

My goal is to retrieve and print the duplicated values only once from an associative array

Using AngularJS to implement validation on radio buttons

To activate a service worker in the SRC folder of your ReactJS project, you can simply register it in the index.html file

I'm new to Bootstrap and I'm looking for a way to customize the functionality of table 1 compared to table

Exploring the power of Nestjs EventEmitter Module in combination with Serverless functions through the implementation of Async

VueJS - Display a v-html tag that is initially empty but will eventually show content determined by

Defining a Global Variable using the jQuery $(this)

Enhance Your AG-Grid Experience with a Personalized Colorizing Pipe

How can I incorporate checkboxes and crosses for validation in AngularJS?

Is there a way to trigger a function in an AngularJS controller from a Backbone controller?

Tips for creating a vertical wave animation of a ribbon using svg

Expanding the functionality of the Ember JSONAPIAdapter for retrieving JSON data from a specified URL

The timestamp within Javascript setInterval remains static without updates

Obtaining the value of a specific dynamic `<td>` element using jQuery

Adding fresh data to a C3.js line graph

The latest alpha version of Angular2 Material Design (alpha.9-3) encountered a "404 not found" error when trying to access @angular

Ways to instruct tween.js to pause until a texture is shown in three.js

How can eval() be effectively replaced in JavaScript?

What is the best way to display flash messages within a Bootstrap modal dialog box?

Enable users to choose either today's date or a future date by implementing AngularJS UI Bootstrap