AngularJS not working

Question

I am using AngularJS for the very first time and I am writing down the HTML script of the page over here:

<!DOCTYPE html>
<html>
<head>
    <title>_LayoutPersonal</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>

    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>





    <script>
        alert("india");
        function questionController($scope) {
            $scope.queList = ['a', 'b'];
            alert("India");
        }
        var queApp = angular.module("queApp", []);
        queApp.controller("queCtrl", questionController);
    </script>


</head>
<body>
    <!-- Always on top: Position Fixed-->
<header>
    Stack Overflow
</header>
<div class="subheader">
    <div style="float:left;"><h1>Stack Overflow</h1></div>
    <div class="sidebar3">
        <input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'"/>
        <input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'"/>
        <input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'"/>
        <input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'"/>
        <input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'"/>
        <input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'"/>
        <a href="/Question/Ask">Ask Question</a>
    </div>
</div>
<!-- Fixed size after header-->
<div class="content">
    <!-- Scrollable div with main content -->
    <div id="scrollable2">        

<h3>Questions</h3>

    <a href="/Question/Show/1">
        <div class="questionlistitem">
            <label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
            <label for="">9/14/2016 12:00:00 AM</label>
        </div>
    </a>
    <a href="/Question/Show/2">
        <div class="questionlistitem">
            <label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
            <label for="">9/10/2016 12:00:00 AM</label>
        </div>
    </a>
<div ng-controller="queCtrl">
    <div ng-repeat="question in queList">
        {{question}}
    </div>
</div>













    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">        

    <div class="metapost">
<h4 class="headertitle">Hot Meta Post</h4>
<div class="sidebarinnerdiv">Is it useful to edit a question I will vote to close? </div>
<div class="sidebarinnerdiv">Rewriting a Waffle question</div>
</div>

    <div class="networkquestions">
<h4>Hot Network Questions</h4>
<div class="sidebarinnerdiv">How to pronounce the English alphabet? (A, B, C, ...)</div>
<div class="sidebarinnerdiv">Why does the Black Lives Matter movement organize protests while the incident they're protesting is still under investigation?</div>
</div>


    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    Copyright 2016, Stack Overflow
</footer>    
</body>
</html>

It is not working and I am seeing {{question}} on the page. I am not able to trace down the source of the error. Please help me make my page work.

Most probably it is because you are missing an ng-app="queApp" (or Angular's bootstrap code). Place the ng-app in the <body> or <html>. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Oct 20, 2016 at 13:29

Weedoze · Accepted Answer · 2016-10-20 13:30:17Z

You forgot to add ng-app="queApp"

function questionController($scope) {
  $scope.queList = ['a', 'b'];
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);

<!DOCTYPE html>
<html ng-app="queApp">

<head>
  <title>_LayoutPersonal</title>
  <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
  <script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
  <script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>

  <script src="/Scripts/jquery.validate.min.js"></script>
  <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

</head>

<body>
  <!-- Always on top: Position Fixed-->
  <header>
    Stack Overflow
  </header>
  <div class="subheader">
    <div style="float:left;">
      <h1>Stack Overflow</h1>
    </div>
    <div class="sidebar3">
      <input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'" />
      <input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'" />
      <input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'" />
      <input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'" />
      <input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'" />
      <input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'" />
      <a href="/Question/Ask">Ask Question</a>
    </div>
  </div>
  <!-- Fixed size after header-->
  <div class="content">
    <!-- Scrollable div with main content -->
    <div id="scrollable2">

      <h3>Questions</h3>

      <a href="/Question/Show/1">
        <div class="questionlistitem">
          <label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
          <label for="">9/14/2016 12:00:00 AM</label>
        </div>
      </a>
      <a href="/Question/Show/2">
        <div class="questionlistitem">
          <label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
          <label for="">9/10/2016 12:00:00 AM</label>
        </div>
      </a>
      <div ng-controller="queCtrl">
        <div ng-repeat="question in queList">
          {{question}}
        </div>
      </div>

que1326 · Accepted Answer · 2016-10-20 13:31:07Z

1

First of all you need 'ng-app="queApp"' in order to use AngularJS (Basics AngularJS)

answered Oct 20, 2016 at 13:31

que1326

2,3454 gold badges43 silver badges59 bronze badges

Collectives™ on Stack Overflow

AngularJS not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related