AngularJS应用程序向后端发出多个请求

时间:2015-06-03 12:41:20

标签: javascript angularjs node.js

我有一个Angular应用程序,它对后端服务进行一些调用(现在是POST和GET)(由带有REST接口的node.js提供支持)。在开发应用程序本身时,我注意到每次按下按钮或加载页面时它会向后端发出两个请求。奇怪的是一切都有效,但每次按下某个按钮,后端都会收到两个请求。我没有使用任何花哨的包只有ngRoute,ngResource和routeStyles用于css partials。任何人都知道应用程序的行为可能是什么原因?

我实际上发现了另一个类似于这个的question,但OP使用了Angular的表达并且没有答案......

EDIT添加了一些代码。

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'});
                }]);
来自services.js的

'use strict';

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

,一个发出多个请求的控制器

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'];

加载索引+ home并导航到其他页面时的网络调用。正如您所看到的,它首先加载索引页面,其中列出的脚本和样式(未显示),然后是我有一个类似于上面的控制器的主页,突然有两个疯狂的请求到我的Web服务器:

network stack

1 个答案:

答案 0 :(得分:5)

我们可以看到您的HTML文件吗?我曾经有过这个问题。我的解决方案是,通过在页面中声明路由器中的控制器,在每个控制器加载两次时创建了一个双帖。

//Home
    .state('tab.home', {
        url: '/home',
        views: {
            'tab-home': {
                templateUrl: 'templates/tab-home.html',
                controller: 'HomeCtrl' // <-- This goes away
            }
        }
    })