AngularJS $http calling infinitely

Question

Can someone explain why is the $http request sending infinite number of requests to the server? In my application, this code sends infinite requests to the server

(function(){
    var app = angular.module("GrahamsSocksProducts", ["ngCookies"]);
    app.controller("ProductsController", ["$controller", "$http", "$cookies", function($controller, $http, $cookies){
.
.
.
this.setCookie = function(){
        username = "Some random guy"
        alert(45)

        $http({
            method : "GET",
            url : "http://_____________",
            params : { username : username }
        }).then(function(){
            //do something
        })
    }

However, when I remove the http request, only a single request is passed to the server, like this :

.
.    
.
this.setCookie = function(){
        username = "Some random guy"
        alert(45)
}
.
.
.

HTML :

<div ng-app="GrahamsSocksProducts">
        <div ng-controller="ProductsController as products">
        {{ products.setCookie() }}
            <div class="row">
                <div ng-repeat="product in products.products">
                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img ng-src="{{products.getImageTag(product)}}">
                            <div class="caption">
                                <h4 class="pull-right">${{ product.price }}</h4>
                                <h4>
                                    <a href="#"> {{ product.name }}</a>
                                </h4>
                                <p>{{ product.description }}</a>.</p>
                                </div>
                    </div>
                    <div class="ratings">
                        <p class="pull-right">{{ product.ratings }} / 5</p>
                        <p>
                                <span ng-class="products.getStarColor(product.ratings, 1)" ng-click="product.ratings=1"></span>
                                <span ng-class="products.getStarColor(product.ratings, 2)" ng-click="product.ratings=2"></span>
                                <span ng-class="products.getStarColor(product.ratings, 3)" ng-click="product.ratings=3"></span>
                                <span ng-class="products.getStarColor(product.ratings, 4)" ng-click="product.ratings=4"></span>
                                <span ng-class="products.getStarColor(product.ratings, 5)" ng-click="product.ratings=5"></span>
                        </p>
                    </div>
                    <div>
                        <button class="btn btn-primary" ng-click="products.addToCart(product)">Add to Cart</button>
                        <button class="btn btn-default">Checkout</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="container">                 
                        <div class="jumbotron">
                            <ul class="list-group"ng-repeat="cartProduct in products.getCartNameAndQuantity()">
                                <li class="list-group-item">{{ cartProduct.name }}  ({{ cartProduct.quantity }})</li>
                            </ul>
                            Cart products price : {{ products.getCartPrice() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

I have read other questions such as this: Infinite loop when trying to make Angularjs display a promise They have answered about how AngularJS allows two-way data-binding but in this case, when the $http code is removed, the request is sent once, otherwise infinite times.

Austin · Accepted Answer · 2016-03-29 19:18:05Z

4

The expression {{ products.setCookie() }} is run every time the digest loop is run which is A LOT. Every time the page changes, click, events, etc. I'm not sure why you have this expression on the view itself but you'll need to put it elsewhere

answered Mar 29, 2016 at 19:18

Austin

1,29110 silver badges19 bronze badges

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

5 Comments

ichigolas Over a year ago

If OP wants to run this when ProductsController gets instantiated, should put that in the body of the controller definition.

Austin Over a year ago

Yes, that's a much better place for it to be. It will only be run when the controller gets instantiated

Austin Over a year ago

You should also remove this function call from the view and bind to a value that gets set in the controller: <img ng-src="{{products.getImageTag(product)}}">

Mustehssun Iqbal Over a year ago

didn't know about the digest loop before; I should have mentioned "newbie in AngularJS". Thanks

Austin Over a year ago

what better way to learn about it than to have it make your app explode :)

Collectives™ on Stack Overflow

AngularJS $http calling infinitely

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related