I'm having my first experience with angularJS and trying to use services and factories to create a web api REST call. I encountered this error message even before making the call:
angular.js:13294 Error: [$injector:unpr] Unknown provider: cityResourceProvider <- cityResource <- cityListCtrl
app.js
(function() {
"use strict";
angular.module("politicalHub",["common.services"]);
}());
common.services.js
(function() {
"use strict";
angular.module("common.services", ["ngResource", "ngRoute"])
.constant("appSettings", {
serverPath: "http://localhost:49828/"
});
});
cityResource.js
(function() {
"use strict";
function cityResource($resource, appSettings) {
return $resource(appSettings.serverPath + "api/City");
}
angular
.module("common.services", [])
.factory("cityResource",
[
"$resource",
"appSettings",
cityResource
]);
}());
cityListCtrl.js (Controller)
(function() {
"use strict";
function cityListCtrl(cityResource) {
var vm = this;
cityResource.query(function(data) {
vm.cities = data;
});
}
angular
.module("politicalHub",[])
.controller("cityListCtrl",
["cityResource", cityListCtrl]);
}());
html
<form>
<div ng-controller="cityListCtrl as vm" align="center">
<div class="col-lg-12" style="padding: 0">
<select ng-options="city.city_name for city in cities" ng-model="city.name" class="form-control">
</select>
</div>
</div>
</form>
Any help on this issue would be greatly appreciated!