CODEWITHSUNDEEP
javascriptangularjs
JBT
JBT

Reputation: 8746

AngularJS: What is wrong with this code snippet?

I am reading an AngularJS book. I copied the following code from the book:

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

I have the angular.min.js in place. However, I got this output from Chrome: enter image description here

Apparently, there is something wrong with the code. However, as a newbie, I cannot tell where it is. Your help is greatly appreciated. Thank you very much.

update

Here is the error output:

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

Upvotes: 0

Views: 3013

Answers (3)

MThebert
MThebert

Reputation: 68

The AngularJS book from O'Reilly has lots of errors in it. You will have to fix lots of the code samples.

At the top of your app, you reference the name of the app, but don't register it.

<html ng-app='myApp'>

If you give a value here, you have to define the module. 

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

You can also can assign the module to a variable for easy reference when you create controllers, etc:

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

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

But for a simple angular app using just one page of code, the easiest solution for your code is to just not assign a value to the ng-app attribute:

<html ng-app>

My complete working code for this example was:

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

Upvotes: 3

chrisjordanme
chrisjordanme

Reputation: 612

As Luke mentioned, you must define myApp somewhere. Dependencies (controllers, directives, etc) should be injected there:

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

Then you have your controller, which is what gets injected...

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

  }]);

If you haven't already, take a look at the Angular seed project. This is an outstanding resource for anyone ramping up with Angular.

Upvotes: 1

Fedaykin
Fedaykin

Reputation: 4552

You must register the CartController with your app "myApp"

One way to do it:

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);
        }
    }]);

Upvotes: 5

Related Questions