Simple AngularJS app with service does not work

Question

I've got a very simple angular app that I can not figure out what is wrong with. The code is on plunkr here: http://plnkr.co/edit/QQkP2HB6VGv50KDdBPag?p=preview and generates the error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:unpr] Unknown provider: testService

The code is below

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple problem I can not figure out</title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>

    <script type="text/javascript">

        (function() {
            'use strict';

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

            myAppModule.service('testService', function (testService) {
            });

            myAppModule.config(['testService',
                function (testService) {
            }]);

        })();

        </script>

    </head>
    <body >
    <div ng-app="myApp">
        <div>
           myApp Here
        </div>
    </div>
    </body>
    </html>

Is there a reason you are injecting the service into itself? — Matthew Green
myAppModule.service('testService', function (testService) { ? You are trying to inject testService in testservice? And you cannot inject testService inside config because service would not have been instantiated yet. — PSL
@Mathew-green I'm trying to create the service and then use it in the module. clearly I'm not doing that. How do I create the service first, then use it in the module.config? — Peter Kellner
You may not use a service during the configuration phase. Only providers of services. After the configuration phase, services are instantiated and injected when they need to be. — JB Nizet
@PeterKellner Why do you need to inject a service in a config phase. Probably if you state that there could be a solution. You might be trying to solve an X/Y problem. — PSL

Himen Himen · Accepted Answer · 2015-01-13T20:51:04

There are multi phase in angular bootstraps process. in config phase you can just inject provider. for example you can use this code:

        myAppModule.config(['testServiceProvider',
            function (testServiceProvider) {
            }]);

To get more information please check this link:

https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection#configuring-providers

Simple AngularJS app with service does not work

1 Answers