Question

在我的终端中激活了Node.js，我注意到当我点击Angular应用程序中任何路由的链接时，没有对该路由的GET请求。但是，当我重新加载时，突然出现GET请求。我听说过“每个资源2个请求”的行为，但不太明白。

但是，即使是第一次请求，也会显示任何$ http.get方法。这让我很头疼，因为我正在尝试显示通过数据库加载的条目的动态列表。它们仅出现在第二个请求中。

首先“点击”（来自服务器上节点的日志）

GET /api/entries 200 4ms - 157b
adding the entries on the server side

/ api / entries get请求来自代码中的$ http.get

第二次“点击” - 相同的路线（通过重新加载页面实现）

GET /api/entries 200 3ms - 157b
adding the entries on the server side
GET /list 200 23ms - 713b
GET /css/app.css 304 1ms
GET /css/bootstrap/bootstrap.min.css 304 4ms
GET /js/lib/angular/angular-ui.min.js 304 7ms
GET /js/app.js 304 9ms
GET /js/services.js 304 12ms
GET /js/lib/angular/angular.js 304 7ms
GET /js/controllers.js 304 5ms
GET /js/filters.js 304 6ms
GET /js/directives.js 304 11ms
GET /partials/directives/navitem 200 4ms - 144b
GET /partials/directives/navigation 200 6ms - 88b
GET /partials/list 200 9ms - 77b
GET /favicon.ico 200 19ms - 713b

如您所见，现在有一个/ list GET请求。

我该如何解决这个问题？

这是我的列表控制器：

...在控制器之前......

.controller('ListController', ['$scope', '$http', function($scope, $http) {
    console.log('The controller has been executed');
    $http.get('api/entries')
    .success(function(data) {
        $scope.entries = data.entries;
    });
}])

此控制器绑定到/ list route

我怎么能这样做，在第一次请求时显示从数据库中拖出的条目？

我在这里找到了一些关于这个问题的信息：Does Angularjs really require two requests per resource?但是，我还没有找到解决方案。

这是用于编译HTML的列表路径

ul
    li.well(ng-repeat='entry in entries')  {{ entry.text }}

索引页

extends layout

block body

    section#container
        panel
            logo(redirect='write')  Diary 
            navigation
                item(redirect='write')  Write 
                item(redirect='list')  List 

        div(ng-view)

    script(src='js/lib/angular/angular.js')
    script(src = 'js/lib/angular/angular-ui.min.js')
    script(src='js/app.js')
    script(src='js/services.js')
    script(src='js/controllers.js')
    script(src='js/filters.js')
    script(src='js/directives.js')

Answer 1

我不完全理解你的问题，所以如果我误解了，请告诉我。

您似乎有两种不同的路由类型。客户端路由是#之后的部分，仅在客户端完成，服务器路由在这些应用程序中通常用于JSON / XML数据。

最初加载HTML / JS / CSS（从母版页）后，AngularJS会进行客户端路由。因此，从#/products导航到#/products/5只是一个客户端更改。然后，AngularJS将从缓存或服务器请求模板（如果已指定）检索并运行控制器代码，它将使用ngView将该模板放入标记中。它不会向#/products/5发送服务器请求，也不会重新下载（甚至重新评估）母版页，CSS，JS等等。除非您按F5，否则浏览器会将其全部丢弃并重新开始。 AngularJS无法控制它。

在您的场景中，我相信，母版页包含一个布局和一些CSS / JS参考。这些都由浏览器解析，AngularJS是自举的。控制器代码运行，并执行API请求。当您单击另一个客户端路由时，AngularJS会执行该控制器执行另一个请求的代码，并替换ngView。当你F5（你的第二个场景）时，整个过程重新开始。

HTH

Angular中推迟的GET请求

1 个答案: