错误：[$injector:unpr] 未知提供者：productResourceProvider <- productResource <- ProductListCtrl答案

【问题标题】：Error: [$injector:unpr] Unknown provider: productResourceProvider <- productResource <- ProductListCtrl错误：[$injector:unpr] 未知提供者：productResourceProvider <- productResource <- ProductListCtrl
【发布时间】：2017-09-03 17:46:54
【问题描述】：

我不知道错误是什么，因为我对 angularjs 还很陌生。我正在尝试使用以下代码使用 webapi 服务。

app.js 文件：

(function () {
    "use strict";

    var app = angular.module("productManagement",
                            ["common.services"]);

}());

productListCtrl.js

(function () {
    "use strict";
    angular
        .module("productManagement")
        .controller("ProductListCtrl",
                     ["productResource" ,ProductListCtrl]);

    function ProductListCtrl(productResource) {
        var vm = this;

        productResource.query(function (data) {
            vm.products = data;
        });
    }
}());

commonservices.js

(function () {
    "use strict";

    angular.module("common.services", ["ngResource"])
    .constant("appSettings", {
        serverPath: "http://localhost:55755/"
    });
}());

productResource.js

(function () {
    "use strict";

    angular.module("common.services").
    factory("productResource", ["$resource",
        "appSettings",
        productResource])

    function productResource($resource, appSettings) {
        return $resource(appSettings.serverPath + "/api/products/:id"); 
    }
});

索引.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Acme Product Management</title>

    <!-- Style sheets -->
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>

<body ng-app="productManagement">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-brand">Acme Product Management</div>
            </div>
        </div>
    </nav>

    <div class="container">
        <div ng-include="'app/products/productListView.html'"></div>
    </div>

    <!-- Library Scripts -->
    <script src="scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <!-- Application Script -->
    <script src="app/app.js"></script>

    <!-- Services -->
    <script src="Common/common.services.js"></script>
    <script src="Common/productResource.js"></script> 
    <!-- Product Controllers -->
    <script src="app/products/productListCtrl.js"></script>
</body>

</html>

【问题讨论】：

你是否将所有内容都包含在html文件中，看起来你错过了html中的工厂文件
您能说明这些脚本在您的 HTML 文档中的加载顺序吗？
我已经添加了index.html文件，请看一下

标签： javascript asp.net angularjs asp.net-mvc asp.net-web-api

【解决方案1】：

更正您的 JS 文件顺序。

<script src="app/products/productListCtrl.js"></script>
<script src="Common/productResource.js"></script> 
<script src="Common/common.services.js"></script>
<script src="app/app.js"></script>

【讨论】：

【解决方案2】：

问题是您没有执行为productResource.js 编写的匿名功能块，这会阻止productResourceProvider 被注册：

改变这个：

productResource.js

(function () {
    "use strict";

    angular.module("common.services").
    factory("productResource", ["$resource",
        "appSettings",
        productResource])

    function productResource($resource, appSettings) {
        return $resource(appSettings.serverPath + "/api/products/:id"); 
    }
}); // <-- Problem lies here.

改为：

(function () {
    "use strict";

    angular.module("common.services").
    factory("productResource", ["$resource",
        "appSettings",
        productResource])

    function productResource($resource, appSettings) {
        return $resource(appSettings.serverPath + "/api/products/:id"); 
    }
}());  // <-- Execute the function block.

【讨论】：