I encountered an error while using my app:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.2/$injector/unpr?p0=ProductResourceProvider%20%3C-%20ProductResource
The situation is as follows: the app is designed to retrieve information from a web service, but I want to simulate loading products using ng mock if the web service is not available.
My code in the head tag looks like this:
<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js" type="text/javascript"></script>
<script src="//code.angularjs.org/1.3.2/angular-resource.min.js" type="text/javascript"></script>
<script src="//code.angularjs.org/1.3.2/angular-mocks.js" type="text/javascript"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"c></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>|
<!-- Application Script -->
<script src="../Scripts/App/App.js" type="text/javascript"></script>
<!-- Services -->
<script src="../Scripts/App/Common/Services/common.services.js" type="text/javascript"></script>
<script src="../Scripts/App/Common/Services/productResource.js"></script>
<script src="../Scripts/App/Common/Services/productResourceMock.js" type="text/javascript"s></script>
<!--Controllers -->
<script src="../Scripts/App/Products/ProductListCtrl.js" type="text/javascript"></script>
The App.Js file defines the module and its dependencies:
(function () {
"use strict";
var app = angular.module("productManagement", ["common.services", "productResourceMock"]);
}());
The Product Controller is simple:
(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;
}
}
}());
The Common.Services file includes ng-resource:
(function () {
"use strict";
angular
.module("common.services",
["ngResource"])
}());
Next, we have the product resource:
(function () {
"use strict";
angular
.module("common.services")
.factory("productResource",
["$resource",
productResource]);
function productResource($resource) {
return $resource("/api/products/:productId")
}
}());
And finally, the product resource mock:
(function () {
"use strict";
var app = angular
.module("productResourceMock",
["ngMockE2E"]);
app.run(function ($httpBackend) {
// Mock product data
})
}());
I have double-checked for any spelling mistakes, but I am still unable to pinpoint the issue. Any ideas on what might be missing?
Lastly, here's the remaining HTML:
<div ng-app="productManagement" class="container">
<div class="panel panel-primary">
<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>
</div>
</div>