I can not render a script on my _Layout page. I put it in the _Layout, next to the Bundles declarations and in the Chrome debug, the Aba Network comes with 304 status. I placed it at the top of the page (_Layout) and it also did not work. I removed the "~" and also nothing. I removed it from the _Layout and put it on Index, both on the top and bottom, and nothing too. See a chrome debug image as is. The controller of the Angular (It does not work) and also put a bootstrap.css and gave the same thing (304). This is the error:
TypeContactOperatorController.js: 3 Uncaught ReferenceError: TypeOperatorController is not defined
ThisismyController.js(AngularJS)
varapp=angular.module('app',[]);app.controller('TipoContatoOperadoraController',['$scope','$http',TipoContatoOperadoraController]);functiontipoContatoOperadora($scope,$http){$http.get('http://localhost:7215/api/estruturaOrganizacional/tiposContatoOperadora').success(function(data){$scope.listaTipoContatoOperadora=data.items;}).error(function(){$scope.erro='Erro:Nãofoipossívelcarregaralistadotipodecontatodasoperadoras.';});}Thisismy_Layout
<!DOCTYPEhtml><htmldata-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>© @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 is wrong with this approach? What I want is to consume a WebAPI using AngularJS, nothing more.
Here is my index code. Could this line be making a difference?
<div data-ng-controller="TipoContatoOperadoraController">
There it is.
@{
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>