How to solve [$injector:unpr] error for AngularJS?

Question

I have started learning AngularJS and facing issue while injecting a service which is in another file. I have tried many ways but nothing is working out.

This is my index.html:

` <!DOCTYPE html>
<html ng-app="employeedirectory" ng-controller="homeController as vm">

<head>
    <title>Employee Directory</title>
    <link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />

</head>

<body>
    <div class="container" >
        <br/>
        <h1 align="center">Employee Directory</h1><br/><br/>
        <table class="table">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Email</td>
                    <td>Date of Birth</td>
                    <td>Department</td>
                    <td>Gender</td>
                    <td>Age</td>
                </tr>
            </thead>

            <tbody>
                <tr>

                    <form>
                        <td>
                            <input class="form-control" ng-model="employee.name" required placeholder="Name" />
                        </td>
                        <td>
                            <input type="email" ng-model="employee.email" required class="form-control" placeholder="abc@xyz.com" />
                        </td>
                        <td>
                            <input type="text" ng-model="employee.dob" id="datepicker" class="form-control" required placeholder="YYYY-MM-DD" />
                        </td>
                        <td>
                            <input ng-model="employee.department" required class="form-control" placeholder="Department" />
                        </td>
                        <td>
                            <input ng-model="employee.gender" required class="form-control" placeholder="Gender" />
                        </td>
                        <td>
                            <input type="number" ng-model="employee.age" disabled class="form-control" placeholder="Age" />
                        </td>
                        <td>
                            <button class="btn btn-primary btn-md" ng-click="vm.addEmployee()">Add Employee</button>
                            <td><button class="btn btn-info btn-md" ng-click="updateEmployee()">Update Employee</button></td>
                        </td>

                    </form>
                </tr>


            </tbody>

        </table>
    </div>

    <script src="./../angular.min.js"></script>

    <script src="./home.controller.js"></script>
</body>

</html>`

This is my controller:

(function () {
    'use strict';

    angular.module('employeedirectory', [])
        .controller('homeController', ['homeService',homeController]);

    function homeController() {
        var vm = this;
        vm.addEmployee = function () {
            console.log("in add employee");

            // homeService.addEmployee();

        }
    }
})();

this is my service

(function () {
    'use strict';
    angular
        .module('employeedirectory')
        .service('homeService', homeService);


    function homeService() {
        // var service = {};

        // service.addEmployee = function (details) {
        //     console.log("in home service");
        // };
        // return service;
    }
})();

I am getting this error:

angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=homeServiceProvider%20%3C-%20homeService%20%3C-%20homeController
    at angular.min.js:6
    at angular.min.js:45
    at Object.d [as get] (angular.min.js:43)
    at angular.min.js:45
    at d (angular.min.js:43)
    at e (angular.min.js:43)
    at Object.invoke (angular.min.js:43)
    at S.instance (angular.min.js:94)
    at n (angular.min.js:69)
    at g (angular.min.js:61)

Quick tip: if you can, test with the unminified version to get the full error message; or make sure a source map is accessible. — tavnab, May 06 '17 at 14:28
I would mark this as a duplicate except that there are [1,811 other questions](http://stackoverflow.com/search?q=%24injector%3Aunpr) that ask about this error, and probably a third of them or more have exactly the same issue as this one, so it is difficult to find an authoritative duplicate. — Claies, May 06 '17 at 14:38
Possible duplicate of [Injecting $scope into an angular service function()](http://stackoverflow.com/questions/22898927/injecting-scope-into-an-angular-service-function) — Alon Eitan, May 06 '17 at 14:42
@AlonEitan works for me, I was just going through myself trying to figure out a way to find this kind of post for a variety of **very common** angular questions that I see all the time.... — Claies, May 06 '17 at 14:44
Go to the [link provided in the error output](https://docs.angularjs.org/error/$injector/unpr?p0=homeServiceProvider%20<-homeService%20<- homeController) and read what it tells you! — charlietfl, May 06 '17 at 15:13

Josue Martinez · Answer 1 · 2017-05-06T14:37:29.437

you have to reference your service in the index.html

<html>
<head>
    <title>Employee Directory</title>
    <link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />

</head>
<body>
    //  .....
    <script src="./../angular.min.js"></script>
    <script src="./home.controller.js"></script>
    <script src="./homeService.js"></script>
</body>

This way the controller will know what you are trying to inject.

How to solve [$injector:unpr] error for AngularJS?

1 Answers1