$ is not defined - jquery angular mixing

Question

Previously I developed all my projects with jQuery, but recently started with Angular. I created a Angular boilerplate with Yeoman generator and extend my code from it.

I translated my ajax form post jQuery code to the following Angular controller.

'use strict';


angular.module('MyApp')
.controller('ShareformCtrl', function ($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};

// process the form
$scope.processForm = function() {
    $http({
        method : 'POST',
        url : 'php/share_handling.php',
        data : $.param($scope.formData), // pass in data as strings
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
    })
    .success(function(data) {
        console.log(data);

        if (!data.success) {
            // if not successful, bind errors to error variables
            $scope.errorName = data.errors.name;
            $scope.errorSuperhero = data.errors.superheroAlias;
        } else {
            // if successful, bind success message to message
            $scope.message = data.message;
        }
    });
};
});

But jshint will fail on $.param

In my index I have angular and jquery implemented as follows:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>

So Angular should have access to $, but it doesn't or something else is happening here.

Is the coode working in the browser? I'd avoid mixing jQuery and Angular. — simeg, Dec 30 '14 at 11:27
You should create a service as a factory to consume your $http POST as a method. Then use that method in your controller. No need to do an if else statement in your success either. use .error() for your error code. Take a peek at https://www.ng-book.com/ it helps tremendously. — fauverism, Dec 30 '14 at 12:20
The $.param($scope.formData) is not needed. data: $scope.formData will work fine. If you want to pass jQuery in, use 'value' to register jQuery with the angular injector http://stackoverflow.com/questions/27700519/papaparse-with-angular-js/27702432#27702432 — Martin, Dec 30 '14 at 12:50

score 6 · Accepted Answer · answered Dec 30 '14 at 12:41

6

To tell JSHint not be worried about $ create .jshintrc in root project directory with

{
  "globals": {
     "$": false
  }
}

Docs

answered Dec 30 '14 at 12:41

Ruslan Ismagilov

1,360
7
14

score 1 · Answer 2 · answered Dec 30 '14 at 12:37

1

add below comment at the top of code to bypass jshint checking

/* global $ */

answered Dec 30 '14 at 12:37

hjl

2,794
3
18
26

Ok this helps to build it. In my console I see it is posting, but no data is sended. – moasking Dec 30 '14 at 13:18
are you sure of `$scope.formData` is not empty object? – hjl Dec 30 '14 at 13:25
console.log($scope.formData); is printing out {}, so it is empty on post :S – moasking Dec 30 '14 at 13:38
yeah, so checkout why it's empty regarding your form :D – hjl Dec 30 '14 at 13:40
Doh! forgot the ng-model, sorry guys :P Thanks for your help, one day I will love Angular. – moasking Dec 30 '14 at 13:49

$ is not defined - jquery angular mixing

2 Answers2