How to recover information from database by id on Ionic?

Question

I have an app I’m developing on ionic and angularjs I’m using routes and I’m fetching the data from a database on a remote server, I have a page where and listed me several categories and each category has a id associate of the category. My problem is now by clicking on the category send the id to php and on the next page list me the establishments corresponding to this category but do not know how to do, I would like a help tips how I can do this.

Route

.state('app.estabelecimentos', {
  url: "/estabelecimentos/:id",
  views: {
  'menuContent': {
    templateUrl: "templates/estabelecimentos.html",
    controller: 'ListaDistritos'
    //controller: 'CategoriaComer'
  }
 }
})

Listing of categories

<div class="row" ng-repeat="cat_comer in comer">
        <div class="col">
            <a href="#/app/estabelecimentos/{{cat_comer.id}}">
                <div style="background: url(https://www.sabeonde.pt/gtm/anexos/colecoes/{{cat_comer.id_anexo}}.{{cat_comer.tipo}}); border-radius: 6px; height: 200px; background-size: 100% 100%; background-repeat: no-repeat;">
                    <div class="texto_categorias">
                        <div class="titulo_estabelecimentos">{{cat_comer.campo_slug}} ESTABELECIMENTOS</div>
                        {{cat_comer.titulo}}
                    </div>
                </div>
            </a>
        </div>
    </div>

Answer 1

If you are passing the ID through the route, just retrieve it as follows in your controller.

app.controller('ListaDistritos', ['$rootScope', '$http', '$stateParams', function($rootScope, $http, $stateParams) {
   $rootScope.Lista = null;

   $http.post('/RecuperarLista', {id: $routeParams.id})
   .success(function(response){
       $rootScope.Lista = response;
   });
}]);

Note that I am recovering using the $stateParams and accessing the field 'id' that has been set on its route (:id).

$routeParams

When using in your control, it must return an object containing all the parameters defined in state (route).

Reference.

I also recommend reading in the use of ui-sref.

Answer 2

Suppose you have the following controller:

angular.module('stackoverflow.example',[])
.controller('TestCtrl', function($scope, $http) {

//Rota que possui o JSON que você quer consumir.
var url = 'http://seusite.com.br/estabelecimentos/' + $scope.categoria_id

$http.get(url).
success(function(data) {
    //O parâmetro data é responsável por devolver as informações capturadas pelo servidor no seu banco de dados.
    //Você pode agora setar uma variável com estas informações (suponha que o servidor retorne um objeto Estabelecimento
    $scope.estabelecimento = data.estabelecimento;

    //Caso queira ver a resposta completa do servidor:
    console.log(data)
}).
    error(function(data, status, headers, config) {
    //É possível tratar os erros dentro desta função.
});

}

Stay tuned for the correct import of dependency $http in the declaration of the controller concerned. Whenever you use such a dependency, whether in controller or services, etc you need to import it correctly in order to use it.

Answer 3

At the angle you need to create a Service and inject the competent $http, then you call your PHP file that should return a JSON =

// Simple GET request example :
$http.get('/urldoarquivo.php').
  success(function(data, status, headers, config) {
   //aqui você recebe o json
  }).
  error(function(data, status, headers, config) {
    //Pega os erros
  });

Take a look at the documentation https://docs.angularjs.org/api/ng/service/$http