Javascript 错误：[$injector:unpr]未知提供程序：productResourceProvider<；-productResource<；-ProductListCtrl_Javascript_Asp.net_Angularjs_Asp.net Mvc_Asp.net Web Api

Javascript 错误：[$injector:unpr]未知提供程序：productResourceProvider<；-productResource<；-ProductListCtrl

javascript asp.net angularjs asp.net-mvc asp.net-web-api

Javascript 错误：[$injector:unpr]未知提供程序：productResourceProvider<；-productResource<；-ProductListCtrl,javascript,asp.net,angularjs,asp.net-mvc,asp.net-web-api,Javascript,Asp.net,Angularjs,Asp.net Mvc,Asp.net Web Api,我不知道错误是什么，因为我对angularjs很陌生。我试图使用以下代码使用webapi服务 app.js文件： (function () { "use strict"; var app = angular.module("productManagement", ["common.services"]); }()); productListCtrl.js (function () { "use strict";

我不知道错误是什么，因为我对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"); 
    }
});

Index.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>


Acme产品管理
Acme产品管理

更正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>

问题在于您没有执行为

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.

（函数（）{
“严格使用”；
angular.module（“common.services”）。
工厂（“productResource”、[“$resource”，
“应用设置”，
产品资源]）
函数productResource（$resource，appSettings）{
返回$resource（appSettings.serverPath+“/api/products/：id”）；
}
}); // 你是否在html文件中包含了所有内容，看起来你在HTMLC中遗漏了factory文件？你可以显示这些脚本加载到html文档中的顺序吗？我已经添加了index.html文件，请查看一下
(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.