I am trying to implement a simple $http post with angular within this controller.

app.controller('LoginCtrl',['$scope','admin','$http',function($scope,$http,admin){
    $scope.isAdmin = admin.isAdmin;
    $scope.logout = admin.logout;

    $scope.login = function(){
        if(!$scope.username || !$scope.password ){ return; }
        $http.post('/login',{ username: $scope.username, password: $scope.password });
        $scope.username = '';
        $scope.password = '';
    };
}]);

This part

$http.post('/login',{ username: $scope.username, password: $scope.password });

is throwing this error

TypeError: undefined is not a function
    at l.$scope.login (http://localhost:3000/javascripts/angularApp.js:165:9)
    at hb.functionCall (.3.10/angular.min.js:198:426)
    at Cc.(anonymous function)pile.d.on.f (.3.10/angular.min.js:214:485)
    at l.$get.l.$eval (.3.10/angular.min.js:126:193)
    at l.$get.l.$apply (.3.10/angular.min.js:126:419)
    at HTMLFormElement.<anonymous> (.3.10/angular.min.js:215:36)
    at HTMLFormElement.c (.3.10/angular.min.js:32:363)

here is the HTML for the ui-view.

<script type="text/ng-template" id="/login.html">
    <button id="logout" class="btn btn-default" ng-click="logout()" ng-show="isAdmin()">Log Out</button>
    <div ng-controller="LoginCtrl">
      <form id="login" ng-submit="login()">
        <h2>The Login Page.</h2>
        <label>Username:</label>
        <input type="text" ng-model="username" placeholder="username"/>
        <label>Password:</label>
        <input type="password" ng-model="password" placeholder="password"/>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </script>

I have checked the syntax, everything looks correct, $http is being recognized as an object when I console.log it within the controllers scope.Yet for some reason I cannot make this post request because an error is being thrown. I am using expressjs to serve the content, and my current route for '/login' is just a simple response.send('response sent!'). As you can see in the HTML I am using angular ui-router, in which I also have a .state set for it, if this needs to be provided please let me know.

I have been frustrated about this because this is clearly known function, and I cannot find any resources online to help me with the exact problem. I have tried setting the content type in the headers, and other online solutions but nothing has been helping. It seems like it may be something stupid, but I can't find it.

I would appreciate any input or help, thank you.

I am trying to implement a simple $http post with angular within this controller.

app.controller('LoginCtrl',['$scope','admin','$http',function($scope,$http,admin){
    $scope.isAdmin = admin.isAdmin;
    $scope.logout = admin.logout;

    $scope.login = function(){
        if(!$scope.username || !$scope.password ){ return; }
        $http.post('/login',{ username: $scope.username, password: $scope.password });
        $scope.username = '';
        $scope.password = '';
    };
}]);

This part

$http.post('/login',{ username: $scope.username, password: $scope.password });

is throwing this error

TypeError: undefined is not a function
    at l.$scope.login (http://localhost:3000/javascripts/angularApp.js:165:9)
    at hb.functionCall (http://ajax.googleapis./ajax/libs/angularjs/1.3.10/angular.min.js:198:426)
    at Cc.(anonymous function).pile.d.on.f (http://ajax.googleapis./ajax/libs/angularjs/1.3.10/angular.min.js:214:485)
    at l.$get.l.$eval (http://ajax.googleapis./ajax/libs/angularjs/1.3.10/angular.min.js:126:193)
    at l.$get.l.$apply (http://ajax.googleapis./ajax/libs/angularjs/1.3.10/angular.min.js:126:419)
    at HTMLFormElement.<anonymous> (http://ajax.googleapis./ajax/libs/angularjs/1.3.10/angular.min.js:215:36)
    at HTMLFormElement.c (http://ajax.googleapis./ajax/libs/angularjs/1.3.10/angular.min.js:32:363)

here is the HTML for the ui-view.

<script type="text/ng-template" id="/login.html">
    <button id="logout" class="btn btn-default" ng-click="logout()" ng-show="isAdmin()">Log Out</button>
    <div ng-controller="LoginCtrl">
      <form id="login" ng-submit="login()">
        <h2>The Login Page.</h2>
        <label>Username:</label>
        <input type="text" ng-model="username" placeholder="username"/>
        <label>Password:</label>
        <input type="password" ng-model="password" placeholder="password"/>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </script>

I have checked the syntax, everything looks correct, $http is being recognized as an object when I console.log it within the controllers scope.Yet for some reason I cannot make this post request because an error is being thrown. I am using expressjs to serve the content, and my current route for '/login' is just a simple response.send('response sent!'). As you can see in the HTML I am using angular ui-router, in which I also have a .state set for it, if this needs to be provided please let me know.

I have been frustrated about this because this is clearly known function, and I cannot find any resources online to help me with the exact problem. I have tried setting the content type in the headers, and other online solutions but nothing has been helping. It seems like it may be something stupid, but I can't find it.

I would appreciate any input or help, thank you.

• javascript
• angularjs
• post
• routes

• Have you tried forwarding it as an argument to the login method? $scope.login = function($http){ – Davion Commented Mar 15, 2015 at 14:03
• Thank you Davion, I just did this, and now I get a different error TypeError: Cannot read property 'post' of undefined – Dirk Dunn Commented Mar 15, 2015 at 14:05
• You didn't provide the correct listing for the dependencies on controller initialization. '$scope','admin','$http',function($scope,$http,admin should be '$scope','admin','$http',function($scope, admin, $http) – Davion Commented Mar 15, 2015 at 14:06
• Thank you Davion, that fixed everything. – Dirk Dunn Commented Mar 15, 2015 at 14:10

1 Answer 1

Dependency injection order is wrong

app.controller('LoginCtrl', ['$scope', 'admin', '$http',function($scope, $http, admin) { ...

should be

app.controller('LoginCtrl', ['$scope', '$http', 'admin', function($scope, $http, admin) { ...