Reputation: 372
I am trying to build a blog website using only front-end. My blog data is in an API. I have already build the blog feeds where list of different blogs are shown using AngularJS get method. But for the detailed view of the blog, I need to a single blog data result from the API.
I have already tried using $routeParams
option. But it didn't work. My blog API has id parameter which return the blog data of the specific blog ID.
blogdetail.html
(Template)
<div>
<div><h1>Blog Details</h1></div>
<div ng-repeat="xr in blog">
{{xr.BLOGID}}
<div>
</div>
blogController.js
(Controller)
'use strict';
app.controller('blogController', ['$scope','$http', function ($scope, $http, $routeParams) {
$http.get('http://example.com/api/blog/', {
params: {id: $routeParams.id}
})
.then(function(res){
$scope.blog = res.data;
}).catch(function(response) {
console.log("ERROR:", response);
});
}]);
Route Provider of blog detail part of the website:
$routeProvider
.when("/Blog/:id", {
controller : "blogController" ,
templateUrl : "views/BlogDetail.html"
})
This was the error I was getting:
TypeError: Cannot read property 'id' of undefined
Upvotes: 0
Views: 77
Reputation: 796
u need to add all parameters in the array before the function which are needed in the function, otherwise they are not defined.
the issue is here ['$scope','$http', function
'use strict';
app.controller('blogController', ['$scope','$http', '$routeParams', function ($scope, $http, $routeParams) {
$http.get('http://example.com/api/blog/', {
params: {id: $routeParams.id}
})
.then(function(res){
$scope.blog = res.data;
}).catch(function(response) {
console.log("ERROR:", response);
});
}]);
Upvotes: 1