AngularJS未知提供者

AngularJS Unknown Providor

本文关键字：提供者 未知 AngularJS      更新时间：2023-09-26

我得到以下错误:

Uncaught ReferenceError: productresource is not definedangular.js:12416错误:[$injector:unpr]未知提供商:productResourceProvider <- productResource <- ProductListCtrlhttp://errors.angularjs.org/1.4.5/$喷射器/unpr ? p0 = productResourceProvider % 20% 3 c - 3 c % 20 productresource % 20% % 20 productlistctrl

这是我的观点:

<head>
<title>Acme Product Management</title>
<script src="Scripts/angular.js"></script>
<script src="app/app.js"></script>
<script src="app/products/productListCtrl.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="Scripts/angular-resource.js"></script>
<script src="common/services/common.services.js"></script>
<script src="common/services/productResource.js"></script>
<script src="Scripts/angular-mocks.js"></script>
<script src="common/services/productResourceMock.js"></script>
</head>
<body ng-app="productManagement">
<div class="panel panel-primary"></div>
<div class="panel-heading" style="font-size:large">
    Product List
</div>
<div class="panel-body">
    <table class="table" ng-controller="ProductListCtrl as vm">
        <thead>
            <tr>
                <td><button type="button" class="btn btn-primary" ng-click="vm.toggleImage()">{{vm.showImage ? "Hide" : "Show" }} Image</button></td>
                <td>Product</td>
                <td>Code</td>
                <td>Available</td>
                <td>Price</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in vm.products">
                <td><img ng-if="vm.showImage" ng-src="{{product.imageUrl}}" style="width:50px; margin:2px" title="{{product.productName}}" /></td>
                <td>{{product.productName}}</td>
                <td>{{product.productCode}}</td>
                <td>{{product.releaseDate}}</td>
                <td>{{product.price | currency}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是我的控制器:

(function () {
"use strict";
angular
.module("productManagement")
.controller("ProductListCtrl", ['productResource', ProductListCtrl]);
function ProductListCtrl(productResource) {
    var vm = this;
    productResource.query(function (data) {
        vm.products = data;
    });
    vm.showImage = false;
    vm.toggleImage = function () {
        vm.showImage = !vm.showImage;
    }
}
}());

这是我的常用服务:

    (function () {
"use strict";
angular
.module("common.services", ["ngResource"]);
}());

下面是我的ProductResource服务:

(function () {
"use strict";
angular
.module("common.services")
.factory("productResource", ['$resource', productResource]);
function productResource($resource) {
    return $resource("/api/products/:productId")
}
}());

这是我的productResourceMock模块。

    (function () {
"use strict";
var app = angular.module("productResourceMock", ["ngMockE2E"]);
app.run(function ($httpBackend) {
    var products = [
        {
            "productId": 1,
            "productName": "Leaf Rake",
            "productCode": "GDN-0011",
            "releaseDate": "March 19, 2009",
            "description": "Leaf rake with 48-inch handle.",
            "cost": 9.00,
            "price": 19.95,
            "category": "garden",
            "tags": ["leaf", "tool"],
            "imageUrl": "that.jpg"
        },
        {
           "productId": 5,
           "productName": "Hammer",
           "productCode": "TBX-0048",
           "releaseDate": "May 21,2013",
           "description": "Curved claw steel hammer",
           "cost": 1.00,
           "price": 8.99,
           "category": "toolbox",
           "tags": ["tool"],
           "imageUrl": "this.jpg"
       }
    ];
    var productUrl = "/api/products"
    $httpBackend.whenGET(productUrl).respond(products);
})
}());
谁能告诉我我做错了什么?

我想你只是打错了。将product的所有实例更改为product。

正确的依赖注释应该是:

.factory("productResource", ['$resource', productResource]);

注意，'$resource'是一个字符串。您正在传递一些$resource未声明的变量，因此第一个纯javascript ReferenceError。第二个是Angular抛出的，因为你从来没有提供依赖信息。

相关文章：