Yesterday, I began my journey with angularjs and found myself at this particular section of the tutorial that demonstrates the usage of $resource to access data from services. In my ASP.Net MVC setup, I encountered a slight hiccup due to the difference in configuration of where the json files are stored. The json file containing the phone list and the detailed description files for each phone are located in separate directories. The issue seems to stem from this line of code:
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
Based on my directory structure, I had to make modifications to the line above in order to access the json file containing the phone list.
return $resource('/MyAngularScripts/:phoneId.json.htm', {}, {
query: { method: 'GET', params: { phoneId: 'jsonPhonedata' }, isArray: true }
The reason for changing the extension to .htm was to avoid adding another handler to IIS express. Despite successfully viewing the phone list, I encountered an issue when attempting to access the detailed description of each phone from a separate directory. The directory in question is:
/Content/PhoneData/{all the various phone data json files here}
When trying to view the detail file located at
/Content/PhoneData/motorola-xoom-with-wi-fi.json.htm
by hitting the url /MyAngularScripts/motorola-xoom-with-wi-fi.json.htm
, a 404 not found error is generated.
How can I update my Service to accommodate two different URLs?
Current Service code:
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function ($resource) {
return $resource('/MyAngularScripts/:phoneId.json.htm', {}, {
query: { method: 'GET', params: { phoneId: 'jsonPhonedata' }, isArray: true }
});
}]);
Current controller code for retrieving phone list: $scope.phones = Phone.query();
Current controller code for retrieving details of selected phone:
$scope.phone = Phone.get({ phoneId: $routeParams.phoneId }, function (phone) {
$scope.mainImageUrl = phone.images[0];
});
How should I adjust the controller code to invoke the services accordingly?