https://i.sstatic.net/TxQSt.png
Being new to angularjs, I'm facing an error that I can't quite figure out. My goal is to consume a webapi service with the following code.
The app.js file:
(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>