I'm having a bit of trouble using $http using the AngularJS framework. I've read several of the other posts about this error but I can't work out what I'm doing wrong. Any help would be greatly appreciated. The error is 'Uncaught ReferenceError: $http is not defined' and the code is:
function removePupil(val) {
var string = 'Jon:jon#aaa.com:George:george#aaa.co.uk:Matthew:matthew#aaa.com:';
var pupilNowRemoved = string.replace(val, '');
var data = {
"customer[id]": {{ customer.id }},
"metafield[customer.pupils]": pupilNowRemoved,
};
$http.post('/a/custmeta', $.param(data),
{"headers" : {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}
}).success(function(data, status, headers, config) {
console.log('Removed pupil')
}). error(function(data, status, headers, config) {
console.log('Did not remove pupil')
});
}
Try to include $http in your controller like this:
.controller('MyController', ['$http', function ($http) {}];
Related
I have a http service which will call external json files and load it into a grid.
My problem is i need to create a custom http service so that i could use the same in different controllers. The function of that custom service should be the same (requesting external Json file)
$http.get('../JSON/permanentEmployees.json').
success(function(data, status, headers, config) {
$scope.masterArray = data;
}).
error(function(data, status, headers, config) {
$scope.errorMessage = "Requested grid data file does not exist";
});
This is my current http service. Any help would be appreciated.Please use angularjs only
wrap the code in a factory and use it. I think its better to use a factory in this situation, refer here. P.S. unable to create a mockup of the request to JSON, please check with your JSON.
JSFiddle: here
app.factory('customHTTPService', function($http){
return {
getRequest: function(url) {
return $http.get(url).
success(function(data, status, headers, config) {
return {data: data, errorMessage: "Success"};
}).
error(function(data, status, headers, config) {
return {data: "", errorMessage: "Requested grid data file does not exist"};
});
}
}
});
In the controller you can do
app.controller('MyController', function MyController($scope, customHTTPService) {
$scope.data = customHTTPService.getRequest('../JSON/permanentEmployees.json').data;
});
Error thrown:
ReferenceError: inject is not defined.
I'm trying to hit the server using angular $http method. I was able to do the same by using npm require library. When I'm trying to do the same with $http I'm facing an issue.
I got angular.mocks.js also installed through npm. can anyone please rectify it. thank you.
describe("POST /", function() {
var $http;
beforeEach (inject(function ($injector) {
$http = $injector.post("$http");
});
it('should demonstrate using when (201 status)', function () {
$http.post('http://localhost:9080/', data, config)
.success(function(data, status, headers, config) {
$scope.valid = true;
$scope.response = data;
})
.error(function(data, status, headers, config) {
$scope.valid = false;
});
expect($scope.valid).toBe(true);
});
});
studentService.js
app.factory('saveStudentService',['$http','$scope',function ($http,$scope) {
var studentData = {};
studentData.save = function(jsondata){
var action = "student";
var method = "POST";
$http({
url: action,
method: method,
headers: {'Content-Type': 'application/json'},
data: jsondata
}).success(function(data, status, headers, config) {
toastr.success(status +' : Data has been submitted successfully ');
}).error(function(data, status, headers, config) {
toastr.error(status + ' : Data has not been submitted successfully ');
});
};
return studentData;
}]);
I am getting this error
angular.js:13642Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20saveStudentService
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
If from studentService.js, $scope is being removed, i.e
app.factory('saveStudentService',['$http',function ($http) {
this code is working properly, and not getting any error message in console.
Following is the studentController.js file from where this studentService is being called.
StudentController.js
app.controller('saveStudentCtrl',['$scope', 'saveStudentService', function($scope,saveStudentService) {
$scope.submit_create_student = function() {
var jsondata = $scope.student;
saveStudentService.save(jsondata);
}
}]);
but if same thing i.e $scope is being added in the updateStudentService then this code is working as expected.
app.controller('updateStudentCtrl',['$scope','retriveStudentService', 'updateStudentService', function($scope,retriveStudentService, updateStudentService) {
$scope.getStudentDataFromServer = function() {
retriveStudentService.get();
};
$scope.submit_update_student = function(e) {
updateStudentService.update();
}
}]);
Could someone please clarify, what is happening here. Though able to use same thing in one place, but not able to use same process at someother place.
You cannot inject scope into services. You can inject it to controllers.
I'm trying to read a properties file in angular, It's neccesary to have this file at the root of my project without any kind of angular stuffs, just a simple file, like java.
This is what I'm doing.
Creating a angular.properties file.
angular.properties
{
"url": "http://localhost"
}
This is my controller where I invoke my service method:
controller
captchaService
.all()
.then(function(data) {
...
}, function (data) {
...
});
This is my service class:
service
'use strict';
angular.module('app.service', [])
.factory('myService',
['$http', '$q',
function ($http, $q) {
var _URL = "";
function getValuesFromProperties() {
$http({
method : 'GET',
url : 'angular.properties'
}).success(function (data, status, headers, config) {
_URL = data.url;
}).error(function (data, status, headers, config) {
...
});
}
function all() {
getValuesFromProperties();
var deferred = $q.defer(),
promise = deferred.promise;
sessionStorage.removeItem('X_CAPTCHA_TOKEN');
$http({
method : 'POST',
url : _URL
}).success(function (data, status, headers, config) {
...
}).error(function (data, status, headers, config) {
...
});
return promise;
}
return {
all : all,
getValuesFromProperties : getValuesFromProperties
};
}]);
But here in my services class I have two $http running on an asynchronous way for that reason I can not get the value of url everything else works perfect. How can resolve this? Maybe there is another way to do this. I don't want to create a constant class because this file it's placed at the root of the project and it will be configure for others, they don't need to enter inside a lot of folders and check the code, search and edit. Any idea?
I am trying to use the WordsAPI and everytime I try to access it using jsnop and Angular I get this error:
The code I am using is the following:
$scope.searchWord = function() {
var url = 'https://www.wordsapi.com/words/'+$scope.word+'/definitions?callback=JSON_CALLBACK&accessToken=ACCESS_TOKEN';
$http.jsonp(url).
success(function(data, status, headers, config) {
$scope.meanings = data;
console.log($scope.meanings)
}).error(function(data, status, headers, config) {
console.log(data);
});
}
So it should be getting something like:
https://www.wordsapi.com/words/word/definitions?callback=JSON_CALLBACK&accessToken=ACCESS_TOKEN
I tested this link on JSON validators and everything is fine with the JSON it gets from the server.
I am using Chrome on a Mac.
Does Anyone have any idea ?