Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS app making multiple request to the backend

I have an Angular app which makes some calls (POST and GET for now) to a backend service (powered by node.js with a REST interface). While developing the app itself I noticed it makes two requests to the backend each time a button is pressed or a page is loaded. Curiously everything works but each time I press some button the backend gets two requests. I am not using any fancy package only ngRoute, ngResource and routeStyles for css partials. Anybody has an idea of what could be the reason why the app behaves like that?

I actually found another question similar to this one but the OP there was using express aside of Angular and there is no answer...

EDIT added some code.

in app.js:

 'use strict';

    var cacheBustSuffix = Date.now();

    angular.module('myApp', ['myApp.controllers', 'myApp.services', 'myApp.filters', 'ngRoute', 'ngResource', 'routeStyles'])
            .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
                    $locationProvider
                            .html5Mode({enabled: true,
                                requireBase: false})
                            .hashPrefix('!');

                    $routeProvider
                            .when('/', {redirectTo: '/myApp'})
                            .when('/myApp', {
                                templateUrl: '/partials/home.html?cache-bust=' + cacheBustSuffix,
                                controller: 'ctrlHome'
                            })
                            .when('/myApp/search', {
                                templateUrl: '/partials/search.html?cache-bust=' + cacheBustSuffix,
                                controller: 'ctrlSearch'
                            })
                            .when('/myApp/list/', {
                            templateUrl: '/partials/list.html?cache-bust=' + cacheBustSuffix,
                            controller: 'ctrlList'
                            })
                            // a bunch of other redirections
                            .otherwise({
                                templateUrl: '/partials/404.html?cache-bust=' + cacheBustSuffix,
                                controller: 'ctrl404'});
                }]);

from services.js:

'use strict';

var app = angular.module('myApp.services', ['ngResource']).
        factory('List', function ($resource) {
            return $resource(WSROOT + '/search', {}, {get: {method: 'GET', isArray: false}});
        });

from controllers.js, one controller that makes multiple requests

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

var ctrlList = controllers.controller('ctrlList', function ($scope, $window, List) {
    $window.document.title = 'myApp - List';

    List.get({}, function (data) {
        // $scope.res is an array of objects
        $scope.res = data.response;
        $scope.nitems = data.response.length;
      });
    });
    ctrlList.$inject = ['$scope', 'List'];

And the network call when loading the index+home and navigating to some other page. As you can see, it first loads the index page, the scripts and styles listed there (not shown), then the home where I have a controller similar to the one above and suddenly two wild request to my web server:

network stack

like image 211
ftabaro Avatar asked Sep 28 '22 18:09

ftabaro


1 Answers

Can we see your HTML files? I had this problem a while back. My solution was that by declaring a controller in the routing, and in the pages, a double post was created as each controller was loaded twice.

//Home
    .state('tab.home', {
        url: '/home',
        views: {
            'tab-home': {
                templateUrl: 'templates/tab-home.html',
                controller: 'HomeCtrl' // <-- This goes away
            }
        }
    })
like image 79
Oam Psy Avatar answered Oct 11 '22 16:10

Oam Psy