AngularJS在應用程序之前加載數據

我有一個AngularJS應用程序，我需要一些基本信息，通過異步調用從服務器獲取，然後才能繼續加載或處理頁面。AngularJS在應用程序之前加載數據

我知道還有其他類似的問題，但我發現的其他所有其他問題都與在初始化特定部件（指令，控制器，工廠等）之前加載數據有關。

我想要的是在多個地方使用這些數據，無論是組件，指令等都無所謂。因爲如果我在其中一箇中初始化時沒有使用數據，我將無法繼續。

例如：我在我的footer中使用Google地圖顯示位置的div，所以我需要位置才能運行（當前位於指令內）放置Google地圖的代碼。我做了一個蹩腳的例子來說明這個問題（沒有解決下面提到的問題）。

https://plnkr.co/edit/2RkansVp3NQNx3Tb4lMD?p=preview

我做

我能解決使用UI路由器解決此問題，但它似乎並沒有被這樣做的正確方法。我正在使用「空白」狀態來解析數據，並將index.html中的基本元素移至此app.html頁面，這將成爲我的索引，但由於需要加載數據，因此我必須移動。

這是我的代碼：

.state('app', { 
    abstract: true, 
    views: { 
     'main': { 
      templateUrl: 'view/app.html' 
     } 
    }, 
    resolve: { 
     dataLoad: function($q, api, store) { 
      var promises = { 
       //[..loading more data..] 
       location: api.request('getLocation') 
      } 

      return $q.all(promises).then(function(resolve){ 
       //[..resolving more data..] 
       return store.location = resolve.location; 
      }) 
     } 
    } 
}) 
.state('home', { 
    parent: 'app', 
    url: '/Home', 
    views: { 
     'app': { 
      templateUrl: 'view/home.html' 
     } 
    } 
})

的index.html

<body ui-view="main"></body>

app.html

<header>[...]</header> 

<main ui-view="app"></main> 

<footer>[...]</footer>

這樣我可以正常啓動所有的數據，自app.html無線只會在父應用程序狀態的解析之後加載。

但是，正如您所看到的，我的index.html完全是空的，爲了解決這種情況，我必須創建app.html。

這是要走的路嗎？或者在啓動我的應用程序之前加載數據還是在其他區域加載數據（例如，.run），並且等到所有數據都解決爲止，是否有更好的/正確的方法？

來源

2017-03-02 celsomtrindade

您需要加載的這些數據只加載一次...或者需要多次檢索（例如，如果它隨時間變化，然後您需要再次檢索）？ – lealceldeiro

@lealceldeiro只有一次。數據可能會改變，但只有當用戶自己改變時，這不是經常進行的。 – celsomtrindade

根據[解決方案的文檔]（https://github.com/angular-ui/ui-router/wiki#resolve），只有在解析調用返回的承諾解決之後，纔會進入狀態。我注意到你的評論表明你在「$ q.all'調用的解析中」加載了更多的數據「，但沒有從中返回承諾。如果是這種情況，只要您擁有所有數據，您就需要從該呼叫中返回另一個承諾。你也可以查看嵌套狀態，並將'resolve'設置爲「root」狀態，然後使用下面的數據的狀態，如「root.home」... –

EDITED：等待異步調用，然後引導你的應用程序

(function() { 
    var initInj = angular.injector(['ng']); 
    var $http = initInj.get('$http'); 
    $http.get('<your_req_url>').then(
    function (res) { 
     //set your data camming from server in 'res' 
     //bootstrap app! 
     angular.element(document).ready(function() { 
      angular.bootstrap(document, ['myApp']); 
     }); 
    } 
); 
})();

========================== =============

原帖

您應該使用運行 FUNC的AngularJS module的。在SO上有一個related question，其中詳細解釋了這個主題。

但基本上你可以這樣做：

angular.module('app',[]) 
    .run([function(){ 
      //..load all your required data here 
    }]);

貼膜的數據後，你可以把它放在一個服務，因此，如果用戶更改數據，你可以在未來使用該服務更新。

來源

2017-03-02 22:44:11 lealceldeiro

我知道.run塊會在控制器和其他所有東西之前運行。但是，在數據仍在處理時，它不會阻止它繼續。這就是問題。當指令被激活時，我需要已經有數據。 – celsomtrindade

當你說'數據還在被處理的時候。'......我們在談論什麼類型的處理？某種類型的異步操作（或類似操作）會在該塊執行後改變數據？ – lealceldeiro

我通過$ http服務從服務器獲取這些數據。 – celsomtrindade

AngularJS在應用程序之前加載數據

回答

相關問題