AngularJS: отправить данные на сервер

Question

Я хочу добавить данные в мою базу данных, используя AngularJS. Сначала мне нужно выбрать категорию из списка категорий, которые я получаю с моего сервера. После этого пользователь может добавить продукт в базу данных. Я попытался достичь этого с помощью:

AngularJS

categories = angular.module('categories', []); 
categories.controller("category",function($scope, $http){ 
    var serviceBase = 'api/'; 
    $http.get(serviceBase + 'categories').then(function (results) { 
     $scope.categories = results.data; 
     for(var i = 0; i < $scope.categories.length; i++){ 
      var categories = $scope.categories[i]; 
     } 
     $scope.product = function($scope, $http, $catID){ 
     $http.post(serviceBase + 'productadd/3/1/Icetealemon/5').then(function(results){ 
     }); 
     } 
    }); 
}); 

HTML

<table id="app2" ng-app="categories" ng-cloak="" class="table table-hover"> 
    <tr > 
    <th colspan="5">Add product</th> 
    </tr> 
    <tr ng-form name="addproductForm" novalidate ng-controller="category"> 
    <td colspan="1"> 
    <select class="form-control m-b-10"> 
    <option ng-repeat= "c in categories">{{c.categoryName}}</option> 
    </select> 
    </td> 
    <td colspan="1"> 
    <select class="form-control m-b-10"> 
    <option>Antwerpen</option> 
    <option>Leuven</option> 
    </select> 
    </td> 
    <td colspan="1"> 
    <input type="text" class="form-control" placeholder="Name" ng-model="catID"></input> 
    </td> 
    <td colspan="1"> 
    <input type="text" class="form-control" placeholder="Price" width="10%"></input> 
    </td> 
    <td colspan="1"> 
    <input type="submit" class="btn btn-success" ng-click="product()"></input> 
    </td>          
</tr> 
</table> 

Я даже не используя нг-модели, чтобы использовать данные моего HTML. Он по-прежнему жестко закодирован, потому что он даже не работает. Я получаю ошибку en:

TypeError: Cannot read property 'post' of undefined

Что я делаю неправильно с моей $ http.post?

Answer 1

categories = angular.module('categories', []); 
categories.controller("category",function($scope, $http){ 
    var serviceBase = 'api/'; 
    $http.get(serviceBase + 'categories').then(function (results) { 
     $scope.categories = results.data; 
     for(var i = 0; i < $scope.categories.length; i++){ 
      var categories = $scope.categories[i]; 
     } 
     $scope.product = function($scope, $http, $catID){ 


      // NOTE: This '$http' is $scope.product function parameter 
      // variable `$http` not angular '$http' 


      $http.post(serviceBase + 'productadd/3/1/Icetealemon/5').then(function(results){ 
     }); 
     } 
    }); 
}); 

Удалить $http параметр из $scope.product функции.

Также обратите внимание на https://docs.angularjs.org/tutorial/step_05 о проблеме угловой зависимости во время минимизации и о том, как ее решить.