angular page reload stuck in a loop

Question

I build an Angular app for which I need a page reload when I the app goes to '#/browse'. When the browse.html is reached the app should reload the page. Right now the app keeps on reloading the page over and over again. It is stuck in a kind of loop. Does anyone knows how to break this loop? Thanks a lot.

browse.html.

<div class="header">
<div class="container-fluid">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <form class="navbar-form navbar-left searchbarNav" role="search">

        </form>
        <ul class="nav nav-pills pull-right" ng-controller="NavbarController">

            <li ng-class="{active:getActive('/home')}"><a href="#/products">Browse products</a></li>
            <li ng-class="{active:getActive('/browse')}"><a href="#/browse">Explore products</a></li>

            </ul>
        </div>
    </div>
</div>



<div class="ContentFlow">

<div class="loadIndicator"><div class="indicator"></div></div>

    <div class="flow" >

    <img ng-repeat="p in products" class="item" ng-src="static/products/img/{{p.thumbnail}}"
         title="{{p.name}} &#8364;{{p.price}}"  ng-href="#/products/{{p.id}}">

</div>
<div class="globalCaption"></div>
<div class="scrollbar">
    <div class="slider"><div class="position"></div></div>
</div>

</div>

controller.js

app.controller('BrowseController', function($scope, $window, Product){

Product.query(function(data){
    $scope.products = data
})

$window.location.reload()

})

app.js 'use strict';

var app = angular.module('pgApp', ['ui']);

app.config(function ($routeProvider, $httpProvider) { $routeProvider

.when('/home',
  {
    controller: 'ProductListController',
    templateUrl: 'static/products/app/partials/products.html'
  })
.when('/products/:productId',
  {
    controller: 'ProductDetailController',
    templateUrl: 'static/products/app/partials/product.html',

  })
.when('/browse',{
      controller: 'BrowseController',
      templateUrl: 'static/products/app/partials/browse.html'
  })
.when('/about',
  {
    templateUrl: 'static/products/app/partials/about.html'
  })
.otherwise({ redirectTo: '/home' });

$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
});

Answer 1

I just ran into this issue. For me the problem turned out to be the port I was using. It took me forever to figure it out because I had been using that port 4202 for that app for a long time. But suddenly it was causing this issue. I served the app on a different port and it worked fine. I could find nothing on my system (Ubuntu 22.10) using that port, so I have no idea how that was manifesting itself.

Answer 2

I found the solution to the deeper problem where this question came from. I used a js plugin called contentflow.js. However this plugin is not really good in handling async data. In order to solve this I put the piece of code of the plugin which was responsible for the problem in a function and called this function in the controller.

controller

 app.controller('BrowseController', function($scope, $window, $location, Product){

     Product.query(function(data){
          $scope.products = data
     })

     ContentFlowGlobal.load()
 })

Here the changed code in the contentflow.js. The function can be found in the line number 202, right after the "init the rest" comment.

 /* init the rest */

        ContentFlowGlobal.load = function(){
            setTimeout(function(){
                var divs = document.getElementsByTagName('div');
                DIVS: for (var i = 0; i < divs.length; i++) {
                    if (divs[i].className.match(/\bContentFlow\b/)) {

                        for (var j=0; j<ContentFlowGlobal.Flows.length; j++) {
                            if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS;
                        }
                        var CF = new ContentFlow(divs[i],{}, false);
                        CF.init();
                    }
                }
            },1000)
        }

The problem was that the elements were not completely rendered before the js file was called. That is why the element could not be found on the page and the array could not be filled with the data needed to display. This is solved by using the setTimeout.

It might not be the best solution but it works. If you have a better solution feel free to add.