-1

I'm following an example where I can make the first part example work, but then making a small change to restructure it by adding a application doesn't work (but should do the same thing) -- very basic example. Can you please help me understand

1) what's wrong with the code, and

2) how to debug this kind of thing

I'm including angular.min.js version 1.2.6

Example that works

<!DOCTYPE HTML>
<html ng-app="">
<head>
   <title></title>
</head>
<body >
    <div ng-controller="SimpleController">
        <input type="text" ng-model="nameText" /> <span style="font-weight:bold"> {{ nameText }}</span>
        <h3>Listing1</h3>
            <ul>
                <li ng-repeat="cust in customers | filter: nameText | orderBy: 'city' ">{{ cust.name | uppercase }} - {{ cust.city }} </li>
            </ul>
    </div>

   <script>
       function SimpleController($scope) {
           $scope.customers = [
               { name: 'Dave Jones', city: 'Phoenix'},
               { name: 'Jamie Riley', city: 'Atlanta'},
               { name: 'Heedy Wahlin', city: 'Chandler'},
               { name: 'Thomas Winter', city: 'Seattle'}
           ];
       }
    </script>
    <script src="libraries/angular.min.js"></script>
</body>
</html>

Similar Example that Doesn't Work

<!DOCTYPE HTML>
<html >
<head ng-app="demoApp">
    <title></title>
</head>
<body>
    <div ng-controller="SimpleController">
        <input type="text" ng-model="nameText" /> <span style="font-weight:bold"> {{ nameText }}</span>
        <h3>Listing1</h3>
            <ul>
                <li ng-repeat="cust in customers | filter: nameText | orderBy: 'city' ">{{ cust.name | uppercase }} - {{ cust.city }} </li>
            </ul>
    </div>

   <script>
       var demoApp = angular.module('demoApp', []);

       function SimpleController($scope) {
           $scope.customers = [
               { name: 'Dave Jones', city: 'Phoenix'},
               { name: 'Jamie Riley', city: 'Atlanta'},
               { name: 'Heedy Wahlin', city: 'Chandler'},
               { name: 'Thomas Winter', city: 'Seattle'}
           ];
       }

       demoApp.controller('SimpleController', SimpleController);

    </script>
    <script src="libraries/angular.min.js"></script>
 </body>
 </html>
Ray
  • 5,885
  • 16
  • 61
  • 97

1 Answers1

1

Include angular script tag before tag with your code.

<!DOCTYPE HTML>
<html >
<head ng-app="demoApp">
    <title></title>
</head>
<body>
    <div ng-controller="SimpleController">
        <input type="text" ng-model="nameText" /> <span style="font-weight:bold"> {{ nameText }}</span>
        <h3>Listing1</h3>
            <ul>
                <li ng-repeat="cust in customers | filter: nameText | orderBy: 'city' ">{{ cust.name | uppercase }} - {{ cust.city }} </li>
            </ul>
    </div>

   <script src="libraries/angular.min.js"></script>
   <script>
       var demoApp = angular.module('demoApp', []);

       function SimpleController($scope) {
           $scope.customers = [
               { name: 'Dave Jones', city: 'Phoenix'},
               { name: 'Jamie Riley', city: 'Atlanta'},
               { name: 'Heedy Wahlin', city: 'Chandler'},
               { name: 'Thomas Winter', city: 'Seattle'}
           ];
       }

       demoApp.controller('SimpleController', SimpleController);

    </script>
 </body>
 </html>

The thing is, that in this expression:

    <script src="libraries/angular.min.js"></script>

angular is undefined

Also, here is tutorial for debugging in Google Chrome.

Andrew Shustariov
  • 2,530
  • 1
  • 17
  • 17
  • So the example and many sites say add the JS code includes at the bottom. Is this not true with AngularJS? Any references to AngularJS on where they say to do the includes? – Ray Jan 08 '14 at 22:44
  • @Ray I meant, that script tag, that includes angular from libraries dir should be before the code, that uses angular – Andrew Shustariov Jan 08 '14 at 22:49
  • But wait a minute -- not putting it at the top should only affect the "flash of uncompiled content", not affect the operation after the page is loaded, right? – Ray Jan 08 '14 at 22:56
  • Here is a reference: http://stackoverflow.com/questions/15538125/angularjs-in-head-vs-body – Ray Jan 08 '14 at 22:58
  • 1
    @Ray Wait. I am not advicing you to put your scripts to the head tag! No way! It is good, that they are in body. The only thing you need is to swap them. – Andrew Shustariov Jan 08 '14 at 23:00
  • I see, thanks. Regarding the debugging, how is it that I could know with the debugger why this did not work. Thanks for your help. – Ray Jan 09 '14 at 00:56