I'm new to Angular. I'm trying to post a tag under a BlogPost.
Here's what I started with (Angularjs Service):
angular.module('app.tags').factory("Tags", ['$resource', function($resource) {
return $resource('posts/:postID/tags/:tagId', {
tagId: '#_id',
postID: // Post ID?
}, {
update: {
method: 'PUT'
}
});
}]);
How would I get the postID to match up with my Post's ID?
Documented with $route service the current.params object holds all of the current route parameters.
$route.current.params
So, you can address postId by injecting $route and asking for:
$route.current.params.postId
Related
I am a newbie for Angular.
I am having the following Angular JS(v.1.7) ui-router
.state('helpPage', {
url: "/help",
data: {
roles: []
},
views: {
helpDoc: {
templateUrl: 'app/modules/help/help.tpl.html',
controller: 'helpCtrl'
}
}
})
When the User hits this page I want to retrieve the Headers.
Can I get them in the Controller or in the ui-route's resolve method itself ?
Tried HttpInterceptor but it is not helping out.
Any help is much appreciated.
Use the headers property of the $http response object:
$http.head(url).then(function(response) {
var headerGetter = response.headers;
console.log(headerGetter("headerName"));
});
For more information, see
AngularJS $http Service API Reference - $http.head
I am trying to make a POST request via $resource object in Angular.
I have something like
(function (angular) {
angular.module('myApp')
.factory('myService', [
'$resource',
function ($resource) {
var serviceObj = $resource('http://testProject/products/', {id: '#id'},{
'createItem' : {
url: 'http://testProject/item/:id',
method: 'POST',
params: {type: ‘#type'}
}
});
return serviceObj;
}
]);
})(angular);
in my controller
//omit the controller codes…
myService.type = ‘Detail’;
myService.createItem(function(data) {
console.log(data)
});
I see stuff back from the console.log but it has the wrong data because the type is shown as ‘Name’ instead of ‘Detail’. I know api supports that and I don’t see anything wrong with my service. Can someone help me out for it? Thanks a lot!
It looks like your are getting data back,
I would try:
console.log(data.data);
Since your are returning an object from your service.
I am using a MEAN stack and I am a little confused on how the $resource works. I understand that the $resource factory is a service that retrieves data for controllers. However, I have two model objects, Compositions and Critiques. What I am trying to do is get critiques based off the url, which looks something like this: /compositions/:compositionId/review.
For some reason whenever I call
Reviews.query(function(review) {
console.log(review);
$scope.reviews= review;
});
I get this error:
GET localhost:3000/compositions/review 500 (Internal Server Error)
Here are my services:
angular.module('mean').factory('Reviews', ['$resource',
function($resource) {
return $resource('compositions/:docId/review', {
docId: '#docId'
},
{
update: {
method: 'PUT'
}
});
}
]);
angular.module('mean').factory('Compositions', ['$resource',
function($resource) {
return $resource('compositions/:compositionId', {
compositionId: '#_id'
},
{
update: {
method: 'PUT'
}
});
}
]);
The second one works if I navigate to /compositions/:compId, but the first one does not. Instead I get the error above. Why isn't the docId being passed in? Any ideas?
I want the compositionId, which is the docId in the 'critique' object models terms, but I want to get back critique objects. What am I doing wrong? Any help or advice is appreciated, thanks!
You are passing callback to query() - that is wrong. You should pass there a params object with your docId. This is how you should do that (in Angular 1.2)
Reviews.query({docId: 5}).$promise.then(function(review) {
console.log(review);
});
I'm trying to grab a single result from my expressjs api from within my AngularJS factory.
The factory looks like this and grabs all posts from my api(written in expressjs and getting data from mongodb), which is working fine:
angular.module('bonsaiService', ['ngResource']).
factory('bonsaiService', function($q,$resource) {
var bonsaiResource = $resource('http://localhost:8888/api/bonsais/:bonsaiId',{},{
get:{
method: 'GET',
params:{bonsaiId:''},
isArray: true
}
});
return {
get:function(){
var q = $q.defer();
bonsaiResource.get({
},
function(resp){
q.resolve(resp);
},function(httpResponse){
q.reject(httpResponse);
});
return q.promise;
}
//find by id
};
});
What i've tried so far is adding :bonsaiId after the $resource url and adding params for that id like this: params:{bonsaiId: ''}.
The server part (expressJS) look like this:
router.route('/bonsais/:bonsaiId')
.get(function(req,res){
Bonsai.findOne(req.params.bonsaiId,function(err,bonsai){
if(err)
res.send(err);
res.json(bonsai)
})
})
When I call a local url (with and existing _id from mongodb) it works fine and returns my data in json :
http://localhost:8888/api/bonsais/536be2e2ae54668818000001
Now in the controller im trying to get this data in my scope, which is not working.
bonsaiService.get({bonsaiId:$routeParams.bonsaiId}).then(
function(data){
$scope.trees = data;
console.log(data);
});
How do I make this work?
You could use a more simple approach here.
The query method for $resource already defines a GET on an array, which is QUERY.
Why not write your service this way :
.factory('bonsaiService', ['$resource',
function($resource) {
return $resource('http://localhost:8888/api/bonsais/:bonsaiId', {
bonsaiId: '#bonsaiId'
});
}
])
And in your controller, it would work like this :
bonsaiService.query({
bonsaiId: $routeParams.bonsaiId
}, function success() {
//Your code
}, function err() {
//Your code
});
Don't forget to inject the service in the controller or the app file, if it's not done already.
I'm having trouble using $resource to POST something new... It works great for updates & queries, but when I try and create a new 'article', its getting a little confusing.
Basically my POST should be sent to "/articles/". The ID of the article is set through the form on the front end, however when I submit the POST it is sent to "/articles/ARTICLE_ID"(ARTICLE_ID being replaced with whatever I set on the form).
Here is my article service:
angular.module('testapp.articles')
.factory("Articles", ['$resource', function($resource) {
return $resource('articles/:articleId', {
articleId: '#articleId'
}, {
update: {
method: 'PUT'
}
});
}]);
This is my controller:
$scope.create = function() {
var article = new Articles({
articleId: this.articleId
});
article.$save(function(response){
console.log(response);
});
};
Any help is appreciated, thanks!
It goes off to /articles/ARTICLE_ID because that is what you specified while creating the Article. You do not need to supply article_id as a parameter.
$scope.create = function() {
var article = new Articles();
article.articleId = this.articleId
article.$save();
...
};
With the newer versions of AngularJS, articleId will be picked up anyway. Your service could be simplified as follows:
angular.module('testapp.articles')
.factory("Articles", ['$resource', function($resource) {
return $resource('articles/:articleId', null,
{
'update': { method: 'PUT' }
});
}]);
AngularJS $resource