AngularJS app not running correctly

Question

I'm new to AngularJS. I'm trying to run a simple example from a book, but it's not working correctly, and I can't figure out why.

This code runs fine:

<html ng-app>
<head>
    <script src="angular.js"></script>
    <meta charset="UTF-8">
    <title>Angular </title>
</head>
<body>
    <div ng-controller="HelloController">
        <input ng-model="greeting.text"/>
        <p>{{greeting.text}}, World!</p>
    </div>
    <script src="angular.js"></script>
    <script>
             function HelloController($scope) {
                 $scope.greeting = {text: 'Hello'};
             }
    </script>
</body>
</html>

enter image description here

But this is the code I'm having problems with

<html ng-app='myApp'>
<head>
    <title>Shopping Cart</title>
    <script src="angular.js"></script>
</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="angular.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>

Expecting this output:

enter image description here

But getting this output:

enter image description here

I don't understand why I'm not getting the data output, and why it's not repeating. Basically, why the example is not running. I copy and paste the code straight from the book.

Remove the app name from ng-app, or run a .configure statement before your controller. Also, check your console, there's most likely a nice descriptive error there. — tymeJV
– tymeJV, Commented Oct 25, 2013 at 13:18
@Richard Dalton Forgot to remove that from the code. That doesn't fix the problem though. — Paul Samsotha
– Paul Samsotha, Commented Oct 25, 2013 at 13:22

D.Evangelista · Accepted Answer · 2015-03-19 20:33:51Z

18

When you write ng-app='myApp' you are saying to angular that exists a module named myApp somewhere.

Just add this line before your controllers definition:

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

You can see the docs here and here

edited Mar 19, 2015 at 20:33

answered Oct 25, 2013 at 13:22

D.Evangelista

6,5511 gold badge28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prateek · Accepted Answer · 2013-10-25 13:22:41Z

6

You should define your myApp module:

<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="lib/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.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);
            }
        }]);
    </script>
  </body>
</html>

answered Oct 25, 2013 at 13:22

Prateek

6,9852 gold badges27 silver badges37 bronze badges

1 Comment

TheHippo Over a year ago

I'm not sure, but including angular.js only once could help, too.

Sfoorti · Accepted Answer · 2014-04-02 21:06:08Z

0

Give the name of app as html ng-app="myapp" in html file and then add/define the module into the controller as var myapp = angular.module('myapp', []);

answered Apr 2, 2014 at 21:06

Sfoorti

1

Comments

Stackhelper · Accepted Answer · 2014-07-30 06:46:59Z

0

Even I faced this problem, resolved it by invoking module creation scope before controller js . Also ensure module is created in script or js file.

answered Jul 30, 2014 at 6:46

Stackhelper

631 silver badge3 bronze badges

Comments

Nabil Kadimi · Accepted Answer · 2014-12-07 01:54:40Z

0

Or you can also add the namespace:

<html lang="en" ng-app="myapp" xmlns:ng="http://angularjs.org">

Even though, adding the module is the best way.

edited Dec 7, 2014 at 1:54

Nabil Kadimi

10.5k2 gold badges56 silver badges60 bronze badges

answered Mar 25, 2014 at 7:05

Roisgoen

8141 gold badge9 silver badges16 bronze badges

Comments

MichaelHasfel · Accepted Answer · 2016-04-07 14:19:34Z

I fixed.

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shopping Cart</title>
<script src="angular-1.5.3/angular.js"></script>
<script>
var myApp = angular.module('myApp',[])

myApp.controller('CartController', 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);
    };
});
</script>   
</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>
</body>
</html>

Collectives™ on Stack Overflow

AngularJS app not running correctly

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related