0

O que tem de errado com esse código? Estou tentando executar ele, mas de forma alguma ele me mostra os dados vindos do banco!

var app = angular.module('app', []);

app.controller('clienteController', ['$scope', '$http', clienteController]);

function clienteController($scope, $http) {
  $http.get('http://localhost:3091/api/ClientesWebAPI/Getcliente')
    .success(function (data) {
      $scope.listaclientes = data;

    })
    .error(function () {
      $scope.erro = "Erro: Nao foi possivel carregar.";
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<h2>Listagem de Clientes</h2>

<div data-ng-controller="clienteController">
    <div class="panel panel-default">
        <div class="panel-heading">Lista de clientes</div>
        <div class="panel-body">


    <div class="row">
                <div class="col-md-12">
                    <strong>{{erro}}</strong>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <tr>
                                <td>ID</td>
                                <td>Nome</td>
                                <td>Email</td>
                                <td>Idade</td>
                                <td>Data nascimento</td>
                                <td>Data cadastro</td>
                            </tr>
                            <tr ng-repeat="cliente in listaclientes">
                                <td>{{ cliente.id_nome }}</td>
                                <td>{{ cliente.nome }}</td>
                                <td>{{ cliente.idade }}</td>
                                <td>{{ cliente.sexo }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    

1 Resposta 1

0

Falta voce colocar o ng-app="app" para o angular iniciar e renderizar na sua página.

Aonde está <div data-ng-controller="clienteController">

Deve ficar <div ng-app="app" data-ng-controller="clienteController">

Não esqueça de verificar se você colocou as referências para os arquivos do AngularJS na sua pagina.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Abaixo segue um exemplo funcionando:

var app = angular.module('app', []);

app.controller('clienteController', ['$scope', '$http', clienteController]);

function clienteController($scope, $http) {
  $http.get('http://localhost:3091/api/ClientesWebAPI/Getcliente')
    .success(function (data) {
      $scope.listaclientes = data;

    })
    .error(function () {
      $scope.erro = "Erro: Nao foi possivel carregar.";
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<h2>Listagem de Clientes</h2>

<div ng-app="app" data-ng-controller="clienteController">
    <div class="panel panel-default">
        <div class="panel-heading">Lista de clientes</div>
        <div class="panel-body">


    <div class="row">
                <div class="col-md-12">
                    <strong>{{erro}}</strong>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <tr>
                                <td>ID</td>
                                <td>Nome</td>
                                <td>Email</td>
                                <td>Idade</td>
                                <td>Data nascimento</td>
                                <td>Data cadastro</td>
                            </tr>
                            <tr ng-repeat="cliente in listaclientes">
                                <td>{{ cliente.id_nome }}</td>
                                <td>{{ cliente.nome }}</td>
                                <td>{{ cliente.idade }}</td>
                                <td>{{ cliente.sexo }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

7
  • mesmo assim, nada ainda... que foda! 14/03/2017 às 19:41
  • quando voce clica no executar da minha resposta nao faz nada? pra mim aqui faz: ele tanta comunir o service que ta rodando na porta 3091 do localhost ... verifica se seu servico esta rodando nessa porta mesmo e se ele esta respondendo.
    – andrepaulo
    14/03/2017 às 19:43
  • verifica tambem se no seu DevTools ... se está dando alguma mensagem de erro quando voce carrega a pagina. Confere se voce fez a referencia para o angular.js , igual foi feito no exemplo que eu postei ...
    – andrepaulo
    14/03/2017 às 19:46
  • agora deu certo. O que estava causando o erro era nada mais nada menos que as bibliotecas ** <script src="ajax.googleapis.com/ajax/libs/angularjs/1.2.23/…> <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/…> ** obs: Estou desenvolvendo no visual studio, dai certa dificuldade!! Obrigado André :D 14/03/2017 às 20:59
  • essas bibliotecas estao na resposta justamente pra que o codigo funcione aqui no site. mas na sua versao, ou voce mantem essa ou declara voce msm... mas se resolveu o seu problema, está valendo!!! o que era no final das contas? de fato faltava o ng-app?
    – andrepaulo
    14/03/2017 às 21:02

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 .