Question

我正在阅读一本AngularJS书。我从书中复制了以下代码：

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
    <title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
    <span>{{item.title}}</span>
    <input ng-model='item.quantity'>
    <span>{{item.price | currency}}</span>
    <span>{{item.price * item.quantity | currency}}</span>
    <button ng-click="remove($index)">Remove</button>
</div>
<script src="js/lib/angular.min.js"></script>
<script>
    function CartController($scope) {
        $scope.items = [
            {title: 'Paint pots', quantity: 8, price: 3.95},
            {title: 'Polka dots', quantity: 17, price: 12.95},
            {title: 'Pebbles', quantity: 5, price: 6.95}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index, 1);
        }
    }
</script>
</body>
</html>

我已经angular.min.js了。但是，我从Chrome获得了这个输出： enter image description here

显然，代码有问题。然而，作为一个新手，我不知道它在哪里。非常感谢您的帮助。非常感谢你。

更新

以下是错误输出：

Failed to instantiate module myApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.2.10/$injector/nomod?p0=myApp
    at Error (native)
    at http://localhost:63342/angular-book/js/lib/angular.min.js:6:450
    at http://localhost:63342/angular-book/js/lib/angular.min.js:20:260
    at http://localhost:63342/angular-book/js/lib/angular.min.js:21:262
    at http://localhost:63342/angular-book/js/lib/angular.min.js:29:175
    at Array.forEach (native)
    at q (http://localhost:63342/angular-book/js/lib/angular.min.js:7:280)
    at e (http://localhost:63342/angular-book/js/lib/angular.min.js:29:115)
    at $b (http://localhost:63342/angular-book/js/lib/angular.min.js:32:232)
    at Zb.c (http://localhost:63342/angular-book/js/lib/angular.min.js:17:431

Answer 1

您必须使用您的应用“myApp”注册CartController

一种方法：

angular.module('myApp').controller('CartController',['$scope', function ($scope) {
        $scope.items = [
            {title: 'Paint pots', quantity: 8, price: 3.95},
            {title: 'Polka dots', quantity: 17, price: 12.95},
            {title: 'Pebbles', quantity: 5, price: 6.95}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index, 1);
        }
    }]);

Answer 2

来自O'Reilly的AngularJS书中有很多错误。您将不得不修复许多代码示例。

在应用顶部，您引用应用的名称，但不要注册。

<html ng-app='myApp'>

如果在此处给出值，则必须定义模块。

angular.module('myApp', []);

您还可以将模块分配给变量，以便在创建控制器等时轻松参考：

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

myApp.controller('myController',
  function myController($scope){
};

但是对于只使用一页代码的简单角度应用程序，代码最简单的解决方案就是不为ng-app属性赋值：

<html ng-app>

此示例的完整工作代码为：

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>Your Shopping Cart</title>
</head>

<body ng-controller='CartController'>
    <h1>Your Order</h1>
    <div ng-repeat='item in items'>
        <span>{{item.title}}</span>
        <input ng-model='item.quantity'>
        <span>{{item.price | currency}}</span>
        <span>{{item.price * item.quantity | currency}}</span>
        <button ng-click="remove($index)">Remove</button>
    </div>

    <script src="js/angular.min.js"></script>
<script>
function CartController($scope) {
    $scope.items = [
        {title: 'Paint pots', quantity: 8, price: 3.95},
        {title: 'Polka dots', quantity: 17, price: 12.95},
        {title: 'Pebbles', quantity: 5, price: 6.95}
    ];
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    }
}
</script>
</body>
</html>

Answer 3

正如Luke所说，你必须在某处定义myApp。依赖关系（控制器，指令等）应注入：

angular.module('myApp', [
  // myApp dependencies (controllers, etc.) injected here...
    'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  // your routes here...
}]);

然后你有你的控制器，这是注入的......

angular.module('myApp.controllers', []).
  controller('MyCtrl', [function() {

  }]);

如果您还没有，请查看Angular seed project。对于任何使用Angular的人来说，这都是一个出色的资源。

AngularJS：这段代码有什么问题？

3 个答案: