在Angular中推遲GET請求

Question

當我在終端中激活Node.js時，我注意到當我點擊Angular應用程序中的任何路由的鏈接時，沒有對該路由的GET請求。但是，當我重新加載時，GET請求突然出現。我聽說過「每資源2個請求」的行爲，但不太明白。

但是，即使第一次請求，也會顯示任何$ http.get方法。 這使我頭痛，因爲我試圖顯示通過數據庫加載的條目的動態列表。他們只出現在第二個請求。

第一 「點擊」（在服務器上的日誌，從節點）

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

的/ API /項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 

正如你所看到的，現在有一個/列表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; 
    }); 
}]) 

該控制器綁定到/列表路線

我怎能讓如此，那從第一個請求中顯示從數據庫拖出的條目？

我在這裏發現了一些有關此問題的信息：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