Kuldeep Yadav Kuldeep Yadav - 1 year ago 126
AngularJS Question

Call jquery function inside Angularjs controller

I have an angularjs controller. I am calling a restful webservice.

app.controller('ordersCtrl', function($scope, $http, $filter) {

$scope.fetchOrders = function () {
var url = "http://localhost:8080/blah/blah";
// $http({method: 'POST', url : url})

var data = $.param({"title": "kuldeep"});

$http({method: 'POST',
url: url,
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.success(function(data) {

I want to submit form data. So using jquery to convert object to form data. But getting the error :

$ is not defined
at Scope.$scope.fetchOrders (ordersModule.js:34)

What should I do to inject jquery inside controller. Or any alternate to make form data will be appreciated.

Answer Source

No Need to Use Jquery param function use angular params serializer:

$httpParamSerializerJQLike Alternative $http params serializer that follows jQuery's param() method logic. The serializer will also sort the params alphabetically.

  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'

.controller(function($http, $httpParamSerializerJQLike) {

    url: myUrl,
    method: 'POST',
    data: $httpParamSerializerJQLike(myData),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'


OR read Angular API Doc: == Click Me > $httpParamSerializerJQLike

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download