$.ajax not working in angularjs

Question

I am trying to log my client-sided error on on the server side in my angular app. To do this, I am using stacktrace.js and I am using the following factory:

myApp.factory(
"exceptionLoggingService",
["$log","$window", "traceService",
function($log, $window, traceService){
    function error(exception, cause){

        $log.error.apply($log, arguments);

        try{
            var errorMessage = exception.toString();

            var stackTrace = traceService.print({e: exception});

            $.ajax({
                type: "POST",
                url: "/logger", 
                contentType: "application/json",
                data: angular.toJson({
                    url: $window.location.href,
                    message: errorMessage,
                    type: "exception",
                    stackTrace: stackTrace,
                    cause: ( cause || "")
                })
            });
        } catch (loggingError){
            $log.warn("Error server-side logging failed");
            $log.log(loggingError);
        }
    }
    return(error);
}]

);

My problem here, is that I am not using jQuery in my app and I'd like to avoid it as much as possible. as a result when running this code, I get the expected error:

ReferenceError: $ is not defined

How can I make an ajax request without using the $http service here (to avoir circular references in the case)?

Hum, you wanna use jQuery method without calling jQuery ? I didn't understand why you don't wanna use $http service. — enguerranws, Oct 13 '14 at 12:02
the $http services use the errorLogService so using it here would create a circular reference. angular includes jqlite so I am looking for a similar method in jqlite — Spearfisher, Oct 13 '14 at 12:08
Can you post your controller's code (where you call that service) ? You should use $http, you just have to fix the error of circular dependency. jqLite doesn't contain $.ajax() method anyway. — enguerranws, Oct 13 '14 at 12:19

sylwester · Accepted Answer · 2014-10-13T12:21:18.357

1

Please update $.ajax to $http call see code below

myApp.factory(
    "exceptionLoggingService", ["$log", "$window", "$http", "traceService",
      function($log, $window, $http, traceService) {
        function error(exception, cause) {

          $log.error.apply($log, arguments);

          try {
            var errorMessage = exception.toString();

            var stackTrace = traceService.print({
              e: exception
            });
            var data = angular.toJson({
              url: $window.location.href,
              message: errorMessage,
              type: "exception",
              stackTrace: stackTrace,
              cause: (cause || "")
            })

            $http.post("/logger", data).then(
              function(response) {
                alert("post sucess")
              },
              function(response) {
                alert("post error")
              },
            )

          } catch (loggingError) {
            $log.warn("Error server-side logging failed");
            $log.log(loggingError);
          }
        }
        return (error);
      }
    ]

edited Oct 13 '14 at 12:21

answered Oct 13 '14 at 12:13

sylwester

16,498
1
25
33

I cannot use $http in this particular case as it creates a circular reference: Circular dependency found: $rootScope <- $http <- exceptionLoggingService <- $exceptionHandler <- $rootScope – Spearfisher Oct 13 '14 at 12:14
1

@Spearfisher that might helps http://stackoverflow.com/questions/22332130/injecting-http-into-angular-factoryexceptionhandler-results-in-a-circular-de – sylwester Oct 13 '14 at 12:17
thanks I managed to fix it using var $http = $injector.get("$http"); – Spearfisher Oct 13 '14 at 12:20
@Spearfisher you're welcome just what is reason for your down vote ? – sylwester Oct 13 '14 at 12:26

$.ajax not working in angularjs

1 Answers1