CODEWITHSUNDEEP
javascriptjqueryasp.netangularjsasp.net-web-api
Lucas Freitas
Lucas Freitas

Reputation: 1038

ASP.Net Doesn't compile AngularJS

Good Night!

I'm trying to implement a ASP.NET API, but I can't figure out why my angular doesn't compile correctly!

I just created a new empty web Project, added angular and through NUGET, and I'm trying to add the scripts like this.

Index.html

<!DOCTYPE html>
<html>

<head ng-app="palladarApp">
  <title>CodeBranch - Palladar</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>

<body ng-controller="palladarCtrl">
  <div>
    <header></header>
    <section>{{ teste }}</section>
    <hr />
    <section>{{ 13 + 31 }}</section>
    <footer></footer>
  </div>

  <!--Load Libraries-->
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <script src="Scripts/jquery-2.1.4.js"></script>
  <script src="Scripts/angular.js"></script>
  <script src="Scripts/i18n/angular-locale_pt-br.js"></script>
  <script src="Scripts/angular-route.js"></script>
  <script src="Scripts/angular-animate.js"></script>

  <!--Load Scripts-->
  <script src="app/Controllers/palladarController.js"></script>
</body>

</html>

PalladarController.js

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

app.controller('palladarCtrl', ['$scope', '$http', '$modal', function($scope, $http, $modal) {

  $http.defaults.headers.post['Content-Type'] = 'application/json';

  $scope.teste = "HUE HUE HUE";
}]);

When I run the Project, I just saw at my browser the codes..

{{ teste }}
{{ 13 + 31 }}

If I open the browser console (F12) it doesn't show any errors.

Upvotes: 0

Views: 90

Answers (1)

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

You need to put: ng-app="palladarApp" inside html tag, something like this:

<!DOCTYPE html>
<html ng-app="palladarApp">
<head>
  <title>CodeBranch - Palladar</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>

<body ng-controller="palladarCtrl">
  <div>
    <header></header>
    <section>{{ teste }}</section>
    <hr />
    <section>{{ 13 + 31 }}</section>
    <footer></footer>
  </div>

  <!--Load Libraries-->
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <script src="Scripts/jquery-2.1.4.js"></script>
  <script src="Scripts/angular.js"></script>
  <script src="Scripts/i18n/angular-locale_pt-br.js"></script>
  <script src="Scripts/angular-route.js"></script>
  <script src="Scripts/angular-animate.js"></script>

  <!--Load Scripts-->
  <script src="app/Controllers/palladarController.js"></script>
</body>

</html>

Upvotes: 1

Related Questions