How to add item in API

Question

I’m doing a basic forum just for testing, I’m using the mongo and postman to add some things for testing. However, now, I want from the page, I send such data. Use of http://localhost:3000/topico/cadastrar to add the items.

Follow the codes made so far with some modifications, using as an example on this site http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/

$scope.adicionaItem = function () {
  $scope.itens.push({titulo: $scope.item.titulo, assunto: $scope.item.assunto, descricao: $scope.item.descricao});
  //$scope.item.produto = $scope.item.quantidade = '';
  toastr.success("Tópico Adicionado com Sucesso");
};

describe('Lista Compras Unitário', function () {
  describe('ListaComprasController', function () {
    beforeEach(function () {
      this.$scope = {};
      this.controller = new ListaComprasController(this.$scope);
    });

    it('deve criar "itens" com 2 ítens', function () {
      expect(this.$scope.itens.length).toBe(2);
    });

    describe('adicionaItem', function () {
      it('deve adicionar um novo ítem à lista com dados do escopo', function () {
        this.$scope.item = {};
        this.$scope.item.titulo;
        this.$scope.item.assunto;
        this.$scope.item.descricao;
        this.$scope.adicionaItem();
        expect(this.$scope.itens.length).toBe(3);
        expect(this.$scope.itens[2].titulo).toBe('Carne');
        expect(this.$scope.itens[2].assunto).toBe(5);
        expect(this.$scope.itens[2].descricao).toBeFalse;
      });
    });
  });
});

html:

<form class="form-horizontal">
  <div class="form-group">
    <label for="titulo" class="col-sm-2 control-label">Titulo</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" id="titulo" placeholder="Titulo da sua questão, seja especifico" ng-model=" item.titulo" required>
    </div></div>

    <div class="form-group">
  <label class="col-md-2 control-label" for="selectbasic">Assunto:</label>
  <div class="col-md-3">
    <select id="tipos" name="" class="form-control" ng-model=" item.assunto" required>
      <option value="ensino">Ensino</option>
      <option value="saude">Saúde</option>
        <option value="trabalho">Mercado de Trabalho</option>
      <option value="lazer">Lazer</option>
      <option value="trabalho">Compras</option>
      <option value="outros">Outros</option>     
    </select>
  </div>
</div>  

      <div class="form-group">
  <label class="col-md-2 control-label" for="textarea"></label>
  <div class="col-md-7">
    <textarea class="form-control" id="descricao" name="descricao" rows=5 ng-model=" item.descricao" required></textarea>
  </div>
</div>
      <br>
      <center><button type="submit" class="btn btn-info ng-click="adicionaItem()"> Criar Tópico</button></center>

Answer 1

First in your controller you should instantiate the $http angular parameter, like this:

function ListaComprasController($scope, $http) {

In your add item method, you include a call to your api. Until then you are just loading the values to $Scope.items.

$scope.adicionaItem = function () {
    $scope.itens.push({titulo: $scope.item.titulo, assunto: $scope.item.assunto, descricao: $scope.item.descricao});

var rota = 'topico/cadastrar' //caminho da sua api;
$http({
        url: rota,
        method: "POST",
        data: {itens: $scope.itens},
     }).then(function successCallback(response) {
        toastr.success("Tópico Adicionado com Sucesso");
     }, function errorCallback(response) {
        console.log(response);
    });
    //$scope.item.produto = $scope.item.quantidade = '';
};