0

I'm new to AngularJS. I don't know how to get the response in post method. I got the error below like this. I just print the response value in console. I want to know what JS files are needed to add.

 angular.js:12330 Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24httpProviderProvider%20%3C-%20%24httpProvider%20%3C-%20myapp at Error (native at)

Please help me to resolve the problem

app.js

var app= angular.module('demo', ['ngRoute']);
app.controller('myapp', ["$scope", "$http" ,"$q","$httpProvider", function($scope, $http, $q,$httpProvider) {
      $httpProvider.defaults.useXDomain = true;
                $httpProvider.defaults.withCredentials = true;
                delete $httpProvider.defaults.headers.common['X-Requested-With'];   
        var data = $.param({
            json: JSON.stringify({
                id:'SYZ2015011'
            })
        });
        console.log(data);
        $http.post('http://syzygyapp.com/apistaffattendance/index.php/api/employee/getEmployeeHours', data, config)
            .success(function (data, status, headers, config) {
                 $scope.hello = result;
            console.log($scope.hello);
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + header +
                    "<hr />config: " + config;
            });



}]);

index.html
    <!doctype html>
    <html ng-app="demo">
    <head>
    <title>Hello AngularJS</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
            <script src="app.js"></script>
    </head>
    <body>
    <div ng-controller="myapp">
    <!-- <p>The ID is {{greeting.id}}</p>
    <p>The content is {{greeting.content}}</p> -->
    <table class="table table-striped table-bordered">
            <thead>
            <th>Field1&nbsp;</th>
            <th>Field2&nbsp;</th>
            <th>Field3&nbsp;</th>
            <th>Field4&nbsp;</th>
         </thead>
            <tbody>
                <!-- <tr ng-repeat="data in greeting">
                    <td>{{data.body}}</td>
                    <td>{{data.id}}</td>
                    <td>{{data.title}}</td>
                    <td>{{data.userId}}</td> -->
                    <!-- <td>{{data.country}}</td>
                    <td><a href="#/edit-customer/{{data.customerNumber}}" class="btn">&nbsp;<i class="glyphicon glyphicon-edit"></i>&nbsp; Edit Customer</a></td> -->
               <!--  </tr> -->
            </tbody>
            </table>
            </div>
        </body>
    </html>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="app.js"></script> -->
Arnaud
  • 7,259
  • 10
  • 50
  • 71
krishnaveni
  • 21
  • 9
  • Please add your index.html file as well – Umair Farooq Sep 17 '16 at 07:29
  • index.html file is added – krishnaveni Sep 17 '16 at 09:17
  • You should use the "config" function of your module to configure your "httpProvider" (like here: http://stackoverflow.com/questions/19364450/angularjs-httpprovider-undefined), then you only use the "$http" service in your controller to do what you want. Moreover, "config" is undefined, so passing it to "post" function of "$http" could cause an issue. And, on the top of that, I would use "then" instead of "success" (see http://stackoverflow.com/questions/17080146/error-handling-in-angularjs-http-get-then-construct) – ssougnez Sep 20 '16 at 07:02

0 Answers0