2

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

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

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

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

/api/entries 获取请求源自代码中的 $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 路由

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

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

这是 Jade，编译为 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')
4

1 回答 1

0

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

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

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

我相信，在您的场景中，母版页包含一个布局和一些 CSS/JS 引用。这些都由浏览器解析，AngularJS 被引导。控制器代码运行，并执行 API 请求。当您单击另一个客户端路由时，AngularJS 会执行该控制器的代码，该代码执行另一个请求，并替换ngView. 当您 F5（您的第二种情况）时，整个过程将重新启动。

高温高压

于 2013-08-07T09:30:45.040 回答