I try to use .then() in my angular controller
angular.module('n2goApp')
.controller('MainCtrl', function($scope, Products) {
Products.get(). then( function ( response ) {
$scope.data = response;
console.log(response);
$scope.totalPages = response.TotalPages;
$scope.totalItems = response.total;
$scope.products = response.data;
$scope.currentPage = response.current_page;
$scope.maxSize = 5;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
});
});
but drops me an error
Error: Products.get(...).then is not a function
Service
angular.module('n2goApp')
.service('N2goservice', function N2goservice() {
// AngularJS will instantiate a singleton by calling "new" on this function
}).factory('Products', ['$resource', function($resource) {
var url = 'http://domain.com/api/products';
return $resource( url + '/:prodID',
{ bookId: '#prodID' }, {
loan: {
method: 'PUT',
params: { prodId: '#prodID' },
isArray: false
},
get:{
method: 'GET',
params: {
prodId: '#prodID',
page:'#page'
},
isArray: false
}
/* , method3: { ... } */
} );
}]);
What I'm doing wrong?
You have to get the $promise from the resource. Like this:
Products.get().$promise.then(..)
Or you can use the other syntax with callback
Products.get({},function(response) {
});
Related
It's been a while since I've used $resource for managing my service calls.
For some reason, all my calls are working ok and reaching my REST end-points, basically /api/profile and /api/profile/:id.
But for some reason, my put returns as 404.
Anyone have an Idea of what may be going on.
Thanks and Cheers!
'use strict';
angular.module('chainLinkApp')
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('profile', {
url:'/profile/:id',
templateUrl:'views/profile.html',
controller:'ProfileController',
controllerAs:'profile'
});
}])
.controller('ProfileController',['$scope', '$http', 'profileFactory', function($scope, $http, profileFactory){
$scope.updateMode = false;
$scope.comments = profileFactory.getProfiles.go().$promise.then(function(response){
$scope.comments = response;
});
$scope.getProfile = function(commentId){
$scope.comment = profileFactory.getProfile.go({id:commentId}).$promise.then(function(response){
$scope.comment = response;
$scope.updateMode = true;
}, function(error){
return console.log('An error has occured', error);
});
};
$scope.addProfile = function(comment){
profileFactory.postProfile.go(comment).$promise.then(function(){
console.log('Your post was a success');
$scope.comment = {};
}, function(error){
console.log('There was an error: ', error);
});
};
$scope.updateProfile = function(comment){
profileFactory.updateProfile.go(comment._id, comment).$promise.then(function(response){
console.log('Your profile has been updated');
$scope.updateMode = false;
$scope.comment = {};
}, function(error){
console.log('There is an error: ', error);
});
};
}])
.factory('profileFactory', ['$resource', function($resource){
return{
getProfiles: $resource('/api/profile', {}, { go: { method:'GET', isArray: true }}),
getProfile: $resource('/api/profile/:id',{},{ go: { method: 'GET', params: { id: '#id' }}}),
postProfile: $resource('/api/profile', {}, { go: { method: 'POST' }}),
updateProfile: $resource('/api/profile/:id', {}, { go: { method: 'PUT', params: { id:'#id' }}})
};
}]);
The way of you are using $resource is strange, it should be like this:
.factory('UserService', function($resource) {
return $resource('/api/users/:id', {}, {
'create': { method: 'POST' },
'update': { method: 'PUT', params: { id: '#id'} }
});
})
Then you call the service like this: UserService.create(theUserobj, function(result) { ... })
I have this code in my post.serv.js and in my controller I want to execute the function delete.
"use strict";
app.factory('JnttPost', function ($resource) {
var PostResource = $resource('/api/post/:_id', {
_id: "#id"
}, {
update: {
method: 'PUT',
isArray: false
}
}, {
delete: {
method: 'DELETE',
isArray: false
}
});
return PostResource;
});
I already know how to get and update a post, for example in my createpost.serv.js
"use stric";
app.factory('JnttCreatePost', function ($http, $q, JnttPost) {
return {
createPost: function (newPostData) {
var newPost = new JnttPost(newPostData);
var dfd = $q.defer();
newPost.$save().then(function () {
dfd.resolve();
}, function (response) {
dfd.reject(response.data.reason);
});
return dfd.promise;
}
};
});
and in my newpost.ctrl.js
"use strict";
app.controller('CtrlNewPost',
function ($scope, $location, JnttIdentity, JnttNotifier, JnttCreatePost) {
var email = ...;
$scope.newPost = function () {
var newPostData = {...};
JnttCreatePost.createPost(newPostData).then(function () {
JnttNotifier.notify('success', 'The post has been created');
$location.path('/');
}, function (reason) {
JnttNotifier.notify('error', reason);
});
};
});
I can't realize how to perform the delete request, I can do with a $http
In my new controller for do deletePost() function I have this:
$scope.deletePost = function () {
var pwd = JnttIdentity.currentUser.hashed_pwd;
var postidd = {
password: pwd,
id: $scope.post._id
};
var config = {
method: "DELETE",
url: '/api/post/',
data: postidd,
headers: {
"Content-Type": "application/json;charset=utf-8"
}
};
$http(config);
$location.path('/');
};
This actually already do this stuff but I want to do this without the $http like the create request, How I can do this? How do I can edit this code below for do the request?
createPost: function (newPostData) {
var newPost = new JnttPost(newPostData);
var dfd = $q.defer();
newPost.$save().then(function () {
dfd.resolve();
}, function (response) {
dfd.reject(response.data.reason);
});
return dfd.promise;
}
In my routes.js in express I have this route:
app.delete('/api/post/', posts.deletePost);
You can either call delete on the $resource class you create (JnttPost) or call $delete on a post that's returned from the $resource class.
The $resource class already has get/save/query/remove/delete functions included so you don't need to add the delete (save is create/POST, so you need to include update with PUT).
Here's a sample of using your $resource class to call delete:
angular.module('test', ['ngResource'])
.factory('JnttPost', function ($resource) {
var PostResource = $resource('/api/post/:_id', {
_id: "#id"
}, {
update: {
method: 'PUT',
isArray: false
}
});
return PostResource;
})
.run(function(JnttPost){
JnttPost.delete({id: 123123123});
});
I have tried to build a service that will return a $resource after the service has authenticated.
I have done it like this:
.factory('MoltinApi', ['$q', '$resource', '$http', 'moltin_options', 'moltin_auth', function ($q, $resource, $http, options, authData) {
var api = $resource(options.url + options.version + '/:path', {
path: '#path'
});
var authenticate = function () {
if (!options.publicKey)
return;
var deferred = $q.defer();
var request = {
method: 'POST',
url: options.url + 'oauth/access_token',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: "grant_type=implicit&client_id=" + options.publicKey
};
$http(request).success(function (response) {
authData = response;
deferred.resolve(api);
});
return deferred.promise;
};
return authenticate();
}])
But I can not call the resource in my controller:
.controller('HomeController', ['MoltinApi', function (moltin) {
var self = this;
moltin.get({ path: 'categories' }, function (categories) {
console.log(categories);
});
}]);
it just states that 'undefined is not a function'.
Can someone tell me what I am doing wrong?
Update 1
So after playing with the solution that was suggested, this is the outcome.
angular.module('moltin', ['ngCookies'])
// ---
// SERVICES.
// ---
.factory('MoltinApi', ['$cookies', '$q', '$resource', '$http', 'moltin_options', function ($cookies, $q, $resource, $http, options) {
var api = $resource(options.url + options.version + '/:path', {
path: '#path'
});
var authenticate = function () {
if (!options.publicKey)
return;
var deferred = $q.defer();
var authData = angular.fromJson($cookies.authData);
if (!authData) {
console.log('from api');
var request = {
method: 'POST',
url: options.url + 'oauth/access_token',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: "grant_type=implicit&client_id=" + options.publicKey
};
deferred.resolve($http(request).success(function (response) {
$cookies.authData = angular.toJson(response);
setHeaders(response.access_token);
}));
} else {
console.log('from cookie');
deferred.resolve(setHeaders(authData.access_token));
}
return deferred.promise;
};
var setHeaders = function (token) {
$http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
}
return authenticate().then(function (response) {
return api;
});
}]);
and to call it I have to do this:
.controller('HomeController', ['MoltinApi', function (moltin) {
var self = this;
moltin.then(function (api) {
api.get({ path: 'categories' }, function (categories) {
console.log(categories);
self.sports = categories.result;
});
});
}]);
but what I would like to do is this:
.controller('HomeController', ['MoltinApi', function (moltin) {
var self = this;
moltin.get({ path: 'categories' }, function (categories) {
console.log(categories);
}, function (error) {
console.log(error);
});
}]);
As you can see, the service is checking to see if we have authenticated before returning the API. Once it has authenticated then the API is returned and the user can then call the api without having to authenticate again.
Can someone help me refactor this service so I can call it without having to moltin.then()?
You are returning the authenticate function call in the MoltinApi factory, so you are returning the promise. And the method get doesn't exist in the promise
myapp.factory('serviceName', function( $http, webStorage){
var factory = {};
var resoureurlBase=some base url;
factory.genericService = function(method, payload, methodName, callbackFn, callbackError, param) {
var httpRequest = null;
if (param && param == true) {
httpRequest = $http({
url: resoureurlBase+methodName,
method: method,
params: payload,
headers: {
'Content-Type': 'application/json'
}
});
} else {
httpRequest = $http({
url: resoureurlBase+methodName,
method: method,
data: payload,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
httpRequest.then(function(response) {
if (callbackFn && callbackFn.call) {
callbackFn.call(null, response);
}
},
function(response) {
if (callbackError && callbackError.call) {
callbackError.call(response);
}
});
httpRequest.error(function(data, status, headers, config) {
});
};
return factory;
});
/*
I have written service like above how can i handle in controller
i mean
how to write call back function in controller
how to inject
etc..
*/
Simple DI(dependency injection) it into your controller:-
myapp.controller('myCtrl',['$scope','serviceName',function($scope,serviceName){
// use serviceName to call your factory function
}]);
Ref:- https://docs.angularjs.org/guide/di
You need to call service like
serviceName.genericService(--parmas--).then(function(d){
//success
})
because from service serviceName, you're returning a promise that need to resolved using .then only.
Controller
var mainController = function($scope, serviceName) {
var callbackFn = function() {
console.log('Success');
}
var callbackError = function() {
console.log('Error');
}
var parameter = {
param1: 1
},
method = 'something', payload = 100, methodName = 'something';
serviceName.genericService(method, payload, methodName, callbackFn, callbackError, parameter).then(
//success function
function(data) {
//call after call succeed
},
//error function
function(error) {
//call after call error
});
};
myapp.controller('mainController', ['$scope', 'serviceName', mainController()];
Hope this could help you. Thanks.
I have a web api which returns IHttpActionResult(myCollection) on Get.
My angular JS controller is has a function :
$scope.loadcollection = function($defer, params) {
console.log("inside loadcollection ");
mySvc.getCollection().then(function(myCollection) {
//$defer.resolve(myCollection);
$scope.recievedCollection= myCollection
console.log("invoices are : ", $scope.recievedCollection);
});
My service in angular JS is as follows :
app.factory('mySvc', ['$resource', '$q', 'serviceHelperSvc',
function($resource, $q, serviceHelper) {
var myObject= serviceHelper.collectionObj;
var getCollection= function() {
/* var d = $q.defer();
var resp = Invoice.query();
console.log("resp is : ", resp);
d.resolve(true);
return d.promise;*/
return myObject.query();
};
}]);
my serviceHelperSvc is as follows:
app.factory('serviceHelperSvc', ['$http', '$resource',
function($http, $resource) {
var config = {
"apiurl": "http://localhost:8000/"
}
var baseUrl = config.apiurl;
var buildUrl = function(resourceUrl) {
return baseUrl + resourceUrl;
};
var addRequestHeader = function(key, value) {
};
return {
AuthorizationToken: $resource(buildUrl("Token"), null, {
requestToken: {
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}
}),
collectionObj: $resource(buildUrl('api/CollectionObj/:CollectionObjId'), {
CollectionObjId: '#Id'
}, {
'update': {
method: 'PUT'
}
})
};
}
]);
when i try to run this, i get undefined is not a function at mySvc.getCollection().then(function(myCollection)
before then(function(myCollection).
when i try using the defer promise approach, i get an exception at the same place saying $promise is not defined