应用错误收集

AngularJS - 基本的App示例不起作用，以及如何调试Angular

时间：2014-01-08 22:39:49

标签： angularjs

我正在按照一个例子，我可以让第一部分示例工作，但是通过添加应用程序进行一些小改动来重组它不起作用（但应该做同样的事情） - 非常基本的例子。你能帮我理解吗

1）代码有什么问题，

2）如何调试此类事情

我包括angular.min.js版本1.2.6

有效的示例

<!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>

不起作用的类似示例

<!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>

1 个答案:

答案 0 :(得分：1)

在代码标记之前加入角度脚本标记。

<!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>

事情是，在这个表达式中：

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

angular未定义

此外，Google Chrome中的tutorial for debugging也是如此。