i have an error between angularjs controller and $http services
The error is saying that the privileges is not defined. i am trying to post an object to an API
any idea or help, thanks in advance
var userpermissions = angular.module("userpermissions", [])
.service("Permissions", function ($http) {
var urlBase = "/UserPermissionAPI/api";
this.save = function (url) {
return $http({
method: "POST",
url: urlBase + '/' + url,
data: privileges,
async: false,
})
};
})
.controller("userpermission", function ($scope, Permissions) {
$scope.insert = function () {
var promisePost = Permissions.delete("UserPermission/delete?staffkey=" + $scope.staffkey + '&module=' + $scope.modulecd);
promisePost.then(function (pl) {
var privileges = {
Staff_Key: $scope.staffkey, Update_Per: $scope.updates, Save_Per: $scope.saves, Delete_Per: $scope.deletes, Search_Per: $scope.searches,
Add_Admin_User: $scope.staffkeyurl, Module_Code: $scope.modulecd, Report_Per: $scope.reports
};
var promisePost = Permissions.save("UserPermission/save");
promisePost.then(function () {
toastr.success("Successfully saved");
})
}, function (err) {
console.log("Err" + err);
});
}
You are not passing previleges anywhere in your service, change it as
var privileges = {
Staff_Key: $scope.staffkey, Update_Per: $scope.updates, Save_Per: $scope.saves, Delete_Per: $scope.deletes, Search_Per: $scope.searches,
Add_Admin_User: $scope.staffkeyurl, Module_Code: $scope.modulecd, Report_Per: $scope.reports
};
var promisePost = Permissions.save("UserPermission/save", previleges);
and the method inside the service to accept previleges,
this.save = function (url,previleges) {
return $http({
method: "POST",
url: urlBase + '/' + url,
data: privileges,
async: false,
})
};
var promisePost = Permissions.save("UserPermission/save");
This line needs to be changed.
In this line if you send privileges object as a one more parameter and change your save function to accept it, then this will work. Check below.
var promisePost = Permissions.save("UserPermission/save", privileges);
this.save = function (url, privileges) {
return $http({
method: "POST",
url: urlBase + '/' + url,
data: privileges,
async: false,
})
};
Related
How to pass the multiple parameters to a function using this code? I am able to pass only Username as single parameter but MarkDate is not passing to URL.
var app = angular.module("myModule", ['angularUtils.directives.dirPagination']);
//This Gets all the Pre Clients
app.controller("GetAttendance", function ($scope, $http) {
window.params = function () {
var params = {};
var param_array = window.location.href.split('?')[1].split('&');
for (var i in param_array) {
x = param_array[i].split('=');
params[x[0]] = x[1];
}
return params;
} ();
$http({
url: "../assets/services/MasterWebService.asmx/spGetAttendanceByUsernameDate",
method: "GET",
**params: { Username: window.params.Username , MarkDate : params.Markdate}**
}).then(function (response) {
console.log(response.data);
$scope.GetAttendanceData = response.data;
$scope.TotalOrders = response.data.length;
});
Your "MarkDate" param is not getting its value from the window.params object as you do with "Username". This should work:
$http({
url: "../assets/services/MasterWebService.asmx/spGetAttendanceByUsernameDate",
method: "GET",
**params: { Username: window.params.Username , MarkDate : window.params.Markdate}**
}).then(function (response) {
console.log(response.data);
$scope.GetAttendanceData = response.data;
$scope.TotalOrders = response.data.length;
});
I'm encountering a weird issue in my AngularJS app. It's supposed to access a number of values from a cookie 'login', pass those values to an API endpoint and then return the API response.
This works fine, except it keeps launching new GET queries continuously every 500ms. This results in an unending stream of the console error: "Error: 10 $digest() iterations reached. Aborting!" and forcing me to kill it manually.
Where is this weird behavior coming from, and how can I limit it to just 1 run?
workbooks.html
<body>
<div>This is the workbooks view.</div>
<span>{{callQueryWorkbooksForUser()}}</span>
<section ui-view>{{response}}</section>
</body>
workbooks.controller.js
'use strict';
(function() {
class WorkbooksComponent {
constructor($scope, $http, $cookies) {
$scope.callQueryWorkbooksForUser = function() {
var login = JSON.parse($cookies.get('login'))
var auth_token = login.authentication_token;
var siteid = login.site_id;
var userid = login.user_id;
$http({
method: 'GET',
url: '/api/sites/' + siteid + '/users/' + userid + '/workbooks',
params: {
auth_token: auth_token
}
}).then(function successCallback(response) {
$scope.response = response.data
}, function errorCallback(response) {
$scope.response = 'Server error'
});
};
}
}
angular.module('orbitApp')
.component('workbooks', {
templateUrl: 'app/workbooks/workbooks.html',
controller: WorkbooksComponent
});
})();
Make the http request in init block of your controller.
class WorkbooksComponent {
constructor($scope, $http, $cookies) {
this.$onInit = function() {
var login = JSON.parse($cookies.get('login'))
var auth_token = login.authentication_token;
var siteid = login.site_id;
var userid = login.user_id;
$http({
method: 'GET',
url: '/api/sites/' + siteid + '/users/' + userid + '/workbooks',
params: {
auth_token: auth_token
}
}).then(function successCallback(response) {
$scope.response = response.data
}, function errorCallback(response) {
$scope.response = 'Server error'
});
};
}
}
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
I would like to have service providing a resource as in the following code:
angular.module('myApp.userService', ['ngResource'])
.factory('UserService', function ($resource)
{
var user = $resource('/api/user', {},
{
connect: { method: 'POST', params: {}, isArray:false }
});
return user;
}
Then when using the connect action, I would like to dynamically pass a HTTP header, meaning that it may change for each call. Here is an example, in the controller, please see the comment in the code :
$scope.user = UserService;
$scope.connect = function ( user )
{
var hash = 'Basic ' + Base64Service.encode(user.login + ':' + user.password);
// I would like this header to be computed
// and used by the user resource
// each time I call this function
$scope.user.headers = [{Authorization: hash}];
$scope.user.connect( {},
function()
{
// successful login
$location.path('/connected');
}
,function()
{
console.log('There was an error, please try again');
});
}
Do you know a way to do that, either directly or via a trick?
Final thoughts
Accepted answer does not fully answer the question as the headers are not totally dynamic because the factory returns actually a factory (!) which is not the case in my code.
As $resource is a factory, there is no way to make it dynamic.
I finally destroy the resource object each time the user connects. This way, I have the resource with a header computed when the user connects.
The solution provided by #Stewie is useful for that, so I keep it as accepted.
Here is how I did the connect, which can be used multiple times as the resource is destroyed/recreated when (re)connecting:
this.connect = function (user)
{
self.hash = 'Basic ' + Base64Service.encode(user.login + ':' + user.password);
console.log("CONNECT login:" + user.login + " - pwd:" + user.password + " - hash:" + self.hash);
if (self.userResource)
{
delete self.userResource;
}
self.userResource = $resource('/api/user/login', {}, {
connect: {
method: 'POST',
params: {},
isArray: false,
headers: { Authorization: self.hash }
}
});
var deferred = $q.defer();
self.userResource.connect(user,
function (data)
{
//console.log('--------- user logged in ----- ' + JSON.stringify(data));
// successful login
if (!!self.user)
{
angular.copy(data, self.user);
}
else
{
self.user = data;
}
self.setConnected();
storage.set('user', self);
deferred.resolve(self);
},
function (error)
{
self.user = {};
self.isLogged = false;
storage.set('user', self);
deferred.reject(error);
}
);
return deferred.promise;
};
Starting from angularjs v1.1.1 and ngResource v.1.1.1 this is possible to accomplish using the headers property of the $resource action object.
You may wrap your resource in a function which accepts custom headers as a parameter and returns a $resource object with your custom headers set at the appropriate action definitions:
PLUNKER
var app = angular.module('plunker', ['ngResource']);
app.controller('AppController',
[
'$scope',
'UserService',
function($scope, UserService) {
$scope.user = {login: 'doe#example.com', password: '123'};
$scope.connect = function() {
// dropping out base64 encoding here, for simplicity
var hash = 'Basic ' + $scope.user.login + ':' + $scope.user.password;
$scope.user.headers = [{Authorization: hash}];
UserService({Authorization: hash}).connect(
function () {
$location.url('/connected');
},
function () {
console.log('There was an error, please try again');
}
);
};
}
]
);
app.factory('UserService', function ($resource) {
return function(customHeaders){
return $resource('/api/user', {}, {
connect: {
method: 'POST',
params: {},
isArray: false,
headers: customHeaders || {}
}
});
};
});
I set my Services up a little differently.
angular.module('MyApp').factory('UserService',function($resource, localStorageService) {
var userResource = function(headers) {
return $resource("api/user", {},
{
get: {
method: 'GET',
headers: headers
},
create: {
method: 'POST',
headers: headers
}
}
);
};
return {
api: userResource,
get: function(userid){
var service = this;
return service.api({"token": "SomeToken"}).get({userid: userid}, function (data){
return data;
});
},
create: function(user){
var service = this;
return service.api({"token": localStorageService.get("token")}).create({user: user}, function (data){
return data;
});
}
};
});
I have some code in my controller that was directly calling $http to get data.
Now I would like to move this into a service. Here is what I have so far:
My service:
angular.module('adminApp', [])
.factory('TestAccount', function ($http) {
var TestAccount = {};
TestAccount.get = function (applicationId, callback) {
$http({
method: 'GET',
url: '/api/TestAccounts/GetSelect',
params: { applicationId: applicationId }
}).success(function (result) {
callback(result);
});
};
return TestAccount;
});
Inside the controller:
TestAccount.get(3, function (data) {
$scope.testAccounts = data;
})
How can I change this so rather than passing the result of success back it
passes back a promise that I can check to see if it succeeded or failed?
Make your service to return a promise and expose it to service clients. Change your service like so:
angular.module('adminApp', [])
.factory('TestAccount', function ($http) {
var TestAccount = {};
TestAccount.get = function (applicationId) {
return $http({
method: 'GET',
url: '/api/TestAccounts/GetSelect',
params: { applicationId: applicationId }
});
};
return TestAccount;
});
so in a controller you can do:
TestAccount.get(3).then(function(result) {
$scope.testAccounts = result.data;
}, function (result) {
//error callback here...
});