Question

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

Answer 1

问题是您没有执行为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.

Answer 2

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

错误：[$ injector：unpr]未知提供者：productResourceProvider＆lt; - productResource＆lt; - ProductListCtrl

2 个答案: