Currently, I am in the process of working on an AngularJS application. After creating the basic structure of the application, I moved on to implementing routing in Angular. This involved successfully setting up routing so that data from previous pages could be accessed on the page I redirected to using the $routeParams service.
Within my controller, I made a call to the $http service with input coming from the $routeParams. Despite seeing the response from the REST API in the network tab of Chrome, the success handler of the http service was not being triggered. I tried debugging the issue but couldn't reach the breakpoint.
Below is my routing configuration:
var app = angular.module('mainApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl:"main.html",
controller:'CategoriesController'
}).when('/imagedetails/:imageId',{
templateUrl: 'imagedetails.html',
controller:'ImageDetailsController'
})
.otherwise({redirectTo:'/'});
});
Hence, I passed imageId to ImageDetailsController in order to fetch data from the REST API.
This is the controller code snippet:
var ImageDetailsController = function($scope, $http, $routeParams)
{
$scope.imageId = $routeParams.imageId;
console.log("Print image id : " + $scope.imageId);
$scope.image = {};
$scope.params = $routeParams;
var downloadImageRequest = {
method: 'GET',
url: '<my-rest-api-url>',
headers: {
'Content-Type': 'application/json'
}
};
$http(downloadImageRequest).then(onImageSuccess, onImageFailure);
var onImageSuccess = function(response){ // i have put debug inside this method but never reaches controller
console.log(response );
$scope.image = response.data.results[0];
};
var onImageFailure = function(response){
alert("Failed to load image please try again!!");
console.log(response);
};
}
The Network tab in the Chrome developer tool displays the response, however, the method where I set the response data is not being triggered.
If anyone can provide assistance, it would be greatly appreciated.