http function undefined on angular

Question

I'm new to angular and MEAN stack, and prior to this, I asked a question here: Angular Routing ngRoute fails to pull my other HTML files

Basically, I didn't properly set my app routing and the solution is I have to modify my link to #! from #, and someone there said that it was caused by breaking change in Angular 1.6, before this I had a working implementation but it wasn't a proper one-page app since it didn't pull only the appropriate HTML of the app. Okay, so now I can view and navigate the app.

Then I ran into another problem when I tried to communicate with the app which supposedly registered me into the app, when I clicked on the button on my HTML page

<form class="form-auth" ng-submit="register()">
  <h2>Register</h2>
  <p class="text-warning">{{error_message}}</p>
  <input type="username" ng-model="user.username" placeholder="Username" class="form-control"><br>
  <input type="password" ng-model="user.password" placeholder="Password" class="form-control"><br>
  <input type="submit" value="Register" class="btn btn-primary" />

I got an error on the console log, saying

Error: $http.post(...).success is not a function
at b.$scope.register (iotApp.js:73)
at fn (eval at compile (angular.js:15152), <anonymous>:4:144)
at e (angular.js:26673)
at b.$eval (angular.js:17958)
at b.$apply (angular.js:18058)
at HTMLFormElement.<anonymous> (angular.js:26678)
at bg (angular.js:3613)
at HTMLFormElement.d (angular.js:3601)(anonymous function) @ angular.js:14324(anonymous function) @ angular.js:10834$apply @ angular.js:18063(anonymous function) @ angular.js:26678bg @ angular.js:3613d @ angular.js:3601

This is the part of the code indicated by the console where the error is

 app.controller('authController', function($scope, $http, $rootScope, $location){
   $scope.user = {username: '', password: ''};
   $scope.error_message = '';

   $scope.login = function(){
     $http.post('/auth/login', $scope.user).success(function(data){
       if(data.state == 'success'){
         $rootScope.authenticated = true;
         $rootScope.current_user = data.user.username;
         $location.path('/');
       }
       else{
         $scope.error_message = data.message;
       }
     });
   };

   $scope.register = function(){
     $http.post('/auth/signup', $scope.user).success(function(data){
       if(data.state == 'success'){
         $rootScope.authenticated = true;
         $rootScope.current_user = data.user.username;
         $location.path('/');
       }
       else{
         $scope.error_message = data.message;
       }
     });
   };
 });

I have read some of the other answers but most of them have accidentally put the dependency in the method parameters where the controller is already imported. It works fine when I use the Advanced REST Client, which is a chrome extension to manually send a register request, but not when I use the app. Any help or just general pointers would be appreciated. Thank you!

.success was deprecated a few versions back, try using `.then()` instead — Fissio, Dec 14 '16 at 11:43
Thanks! It's working now. Most of my codes didn't work because I was following an old tutorial on MEAN stack. @Fissio — blueblood, Dec 14 '16 at 14:11

score 0 · Accepted Answer · answered Dec 14 '16 at 11:43

From the $http.post documentation:

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

http function undefined on angular

1 Answers1