Angular Controller does not render on my Index

Asked

Viewed 737 times

0

I can’t render a script on my _Layout page. I put in _Layout, together with the Bundles declarations and Chrome debug, in the Network Tab comes with 304 status. I put it at the top of the page(_Layout) and it didn’t work either. I removed the "~" and also nothing. I removed the _Layout and put it in the Index, both at the top and bottom and nothing either. See a screenshot of the Chrome debug as it is. The Angular controller(It doesn’t work) and also put a bootstrap.css and gave the same thing(304). That is the mistake:

Typentatooperadoracontroller.js:3 Uncaught Referenceerror: Typentatooperadoracontroller is not defined

inserir a descrição da imagem aqui

This is my Controller.js(Angularjs)

var app = angular.module('app', []);
app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController]);

function tipoContatoOperadora($scope, $http) {
    $http.get('http://localhost:7215/api/estruturaOrganizacional/tiposContatoOperadora').success(function (data) {

        $scope.listaTipoContatoOperadora = data.items;

    }).error(function () {

        $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';

    });
}

This is my _Layout

<!DOCTYPE html>
<html data-ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Tipo Contato Operadora", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("Lista de Tipo Contato Operadora", "Index", "GetTipoContatoOperadora", new { area = "" }, null)</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/TipoContatoOperadoraController.js"></script>

    @RenderSection("scripts", required: false)
</body>
</html>

What’s wrong with this approach? What I want is to consume a Webapi using Angularjs, nothing more.

Here is the code of my Index. Could this line be making a difference?

<div data-ng-controller="TipoContatoOperadoraController">

There you go.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Tipo Contato Operadora</h2>

<div data-ng-controller="TipoContatoOperadoraController">
    <div class="panel panel-default">
        <div class="panel-heading">Lista de Tipo de Contato das Operadoras</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>
                                <th>Cod. Tipo Contato</th>
                                <th>Nome Tipo Contato</th>
                                <th>Ind. Tipo Contato</th>
                                <th>Data Atualização</th>
                                <th>Cod. Usuário</th>
                            </tr>
                            <tr data-ng-repeat="lista in listaTipoContatoOperadora">
                                <td>{{ lista.id }}</td>
                                <td>{{ lista.nome }}</td>
                                <td>{{ lista.tipoContato }}</td>
                                <td>{{ lista.dataUltimaAtualizacao }}</td>
                                <td>{{ lista.loginUltimaAtualizacao }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
javascript angularjs asp.net-web-api

  • In the <html> just try to ng-app="app"

  • Young man, did you load the script with the controller (Angular) somewhere?

  • I made an edit and posted the Index code. It was missing.

  • Young man, you need carry the controller somewhere (usually it’s on the index, but it’s all so confusing that I don’t even know where it should be). Call it with the tag <script>, do you understand? This is essential.

  • @jbueno, I’m carrying her right here: <tr data-ng-repeat="lista in listaTipoContatoOperadora">&#xA; <td>{{ lista.id }}</td>&#xA; <td>{{ lista.nome }}</td>&#xA; <td>{{ lista.tipoContato }}</td>&#xA; <td>{{ lista.dataUltimaAtualizacao }}</td>&#xA; <td>{{ lista.loginUltimaAtualizacao }}</td>&#xA; </tr>

2 answers

4

You have a circular reference there.

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

In the definition of TipoContatoOperadoraController you are passing, as reference, TipoContatoOperadoraController - that does not yet exist.

Your definition also has another problem - the function tipoContatoOperadora is not called anywhere.

Suggestion:

app.controller('TipoContatoOperadoraController', function ($scope, $http) {
    $http.get('http://localhost:7215/api/estruturaOrganizacional/tiposContatoOperadora').success(function (data) {

        $scope.listaTipoContatoOperadora = data.items;

    }).error(function () {

        $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';

    });
}

);

2


Change your controller to:

app.controller('TipoContatoOperadoraController', function($scope, $http){
    $http.get('http://localhost:7215/api/estruturaOrganizacional/tiposContatoOperadora')
    .success(function (data) {
        $scope.listaTipoContatoOperadora = data.items;
    })
    .error(function () {
        $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
    });
};

and see if it works.

  • @Nilsonuehara, with your example I managed to remove all the errors. The list came empty, but this is another post, in case I can not solve.

Browser other questions tagged javascript angularjs asp.net-web-api

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