Doubt with Angularjs

Asked

Viewed 79 times

0

What’s wrong with this code? I’m trying to run it, but no way it shows me the data coming from the bank! 

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>

javascript html mysql angularjs

1 answer

0

Missing Voce put the ng-app="app" to start and render on your page.

Where is <div data-ng-controller="clienteController">

Should stay <div ng-app="app" data-ng-controller="clienteController">

Don’t forget to check if you have placed the references to the Angularjs files on your page.

<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>

Below follows an example working:

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>

  • still, nothing yet... that fuck!

  • When you click on the execution of my answer does nothing? for me here does: it so communicate the service that is running on port 3091 of localhost ... check if your service is running on that port and if it is responding.

  • also checks whether your Devtools ... is giving an error message when Voce loads the page. Check if Voce made the reference to angular.js , the same was done in the example I posted ...

  • now it worked. What was causing the error was nothing less than the libraries <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> Obs: I am developing in visual studio, give some difficulty!! Thanks André :D

  • these libraries are in the answer precisely for the code to work here on the site. But in your version, or Voce keeps this or declarVoce msm... but if you solved your problem, it’s worth!!! what was in the end? in fact lacked the ng-app?

  • also, the main problem was the link of the libraries declared above... had they auhauhauahuah beginner error!!

  • Then I will update the answer and then you mark!! Closed!

Show 2 more comments

Browser other questions tagged javascript html mysql angularjs

You are not signed in. Login or sign up in order to post.