如何解决 AngularJS 的 [$injector:unpr] 错误？答案

【问题标题】：How to solve [$injector:unpr] error for AngularJS?如何解决 AngularJS 的 [$injector:unpr] 错误？
【发布时间】：2017-05-06 14:22:50
【问题描述】：

我已经开始学习 AngularJS 并在注入另一个文件中的服务时遇到问题。我尝试了很多方法，但没有任何效果。

这是我的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>`

这是我的控制器：

(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();

        }
    }
})();

这是我的服务

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


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

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

我收到此错误：

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)

【问题讨论】：

你没有将服务添加到 index.html
快速提示：如果可以，请使用未缩小的版本进行测试以获取完整的错误消息；或确保可以访问源地图。
非常感谢，你救了我@PaoloMangia
Injecting $scope into an angular service function()的可能重复
@AlonEitan 适合我一直……

标签： javascript angularjs angular-services angular-controller

【解决方案1】：

你必须在 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>

这样控制器就会知道你要注入什么。

【讨论】：