4

Tenho o script atual:

(function () {
    'use strict';

    var numeros = angular.module("myModule", [])
    .controller("myController", function ($scope, $http, $log) {

        var sucessoCalBack = function (response) {
            $scope.detalhes = response.data;
        };

        var erroCalBack = function (response) {
            $scope.error = response.data;
        };

		//não está funcionando
        $scope.getAll = function (idusuario) {
            var config = {
                method: 'GET',
                url: 'http://www.sistemaguardiao.com.br/webapi/api/AspNetWebApi/consulta/JogosPorID/' + idusuario
            };
            $http(config).then(sucessoCalBack, erroCalBack);
        };

		
        //assim funciona, passando o parametro direto 
        $http({
            method: 'GET',
            params: { idusuario: 5 },
            url: 'http://www.sistemaguardiao.com.br/webapi/api/AspNetWebApi/consulta/JogosPorID/5'})
            .then(sucessoCalBack,erroCalBack);
        });



})();

Tenho o HTML:

<!DOCTYPE html>
<html ng-app="myModule">
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8">
    <!-- Bootstrap-->
    <link href="Content/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="Content/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link href="Content/style.css" rel="stylesheet" media="screen" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>


</head>


<body ng-controller="myController">

            <div class="container">
                <br><br>

                <table class="table table-striped table-bordered table-hover table-condensed">
                    <thead>
                        <tr>
                            <th>idjogodetalhe</th>
                            <th>nJogo</th>
                            <th>valor</th>
                            <th>total</th>
                            <th>idusuario</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="success" ng-repeat="detalhe in detalhes" >
                            <td>{{detalhe.idjogodetalhe}}</td>
                            <td>{{detalhe.nJogo}}</td>
                            <td>{{detalhe.valor}}</td>
                            <td>{{detalhe.total}}</td>
                            <td>{{detalhe.idusuario}}</td>

                        </tr>
                    </tbody>
                </table>

            <form action="">
                <div class="input-append">
                     <input class="input-xlarge" type="text" placeholder="Consultar usuário..." required>
                     <button class="btn btn-primary  " ng-click="getAll(5)" >Listar Dados</button>
                </div>
            </form>



            </div>



            <!--javascript-->
            <script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>

Tenho a resposta atual:

inserir a descrição da imagem aqui

1
  • passa o parâmetro na URL 9/01/2016 às 3:52

1 Resposta 1

1

Eu recomendo criar um service pra trabalhar com as API's, deixar tudo no controller não é uma boa prática.

Ex:

angular.module("oraculo").factory("colaboradorAPI", function ($http, config) {

    var _getColaboradores = function(id){
        return $http.get(config.baseURL + "/SistemaWS/colaborador/colaboradores/" + id);
    };

    return {
        getColaboradores: _getColaboradores

    };
});

Não esqueça de colocar o caminho desse service no index.html.

Então no Controller você pode fazer algo como isso:

 var carregarInicial = function(id) {
     //Passa o id como parametro pro método que está no service
     colaboradorAPI.getColaboradores(id) then(function(res) {
         $scope.lista = res.data;
     }, function(err) {
         alert('Failed: ' + err);
     });
 }

Você tem que injetar o service no seu controller, ex:

angular.module("oraculo").controller("colaboradorController", function($scope, colaboradorAPI)

Não fiz uma implementação melhor pois estou um pouco sem tempo, creio que você consegue adaptar esse exemplo de acordo com sua necessidade, caso não consiga depois melhoro a resposta.

3
  • Olá, estava passando só de curioso @Techies, por que não é indicado fazer a comunicação da API via controller?
    – pmargreff
    19/04/2016 às 20:50
  • 1
    @pmargreff pois pode gerar uma "repetição" de código, dessa forma é mais simples criar um service e sempre que precisar chamar esse service no controller. 20/04/2016 às 19:35
  • 1
    entendi, faz bestante sentido, me ajuda em algumas situações, valeu!
    – pmargreff
    20/04/2016 às 19:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .