AngularJS，在顯示視圖前解析數據

這個問題已經被問到，但我無法弄清楚在我的情況下該怎麼做。AngularJS，在顯示視圖前解析數據

使用AngularJS 1.0.5：

顯示視圖「登陸」之前，我想要得到的一些數據和延遲視圖呈現，而數據不是從一個AJAX請求加載。

以下是主要代碼。這是好方法嗎？

angular.module('tfc', ['tfc.config', 'tfc.services', 'tfc.controllers']).config([ 
'$routeProvider', '$locationProvider', '$httpProvider', 
function($routeProvider, $locationProvider, $httpProvider) { 
    $routeProvider.when('/login', { 
    templateUrl: 'views/login.html', 
    controller: "RouteController", 
    resolve: { 
     data: function(DataResolver) { 
     return DataResolver(); 
     } 
    } 
    }); 
} 
]); 

module_services = angular.module("tfc.services", []); 

module_services.factory("DataResolver", [ 
"$route", function($route) { 
    console.log("init"); 
    return function() { 
    // Tabletop is a lib to get data from google spreadsheets 
    // basically this is an ajax request 
    return Tabletop.init({ 
     key: "xxxxx", 
     callback: function(data, tabletop) { 
     console.log("[Debug][DataResolver] Data received!"); 
     return data; 
     } 
    }); 
    }; 
} 
]);

來源

2013-03-06 Laurent

也許來自AngularJS的創建者的答案可以幫助你：http://stackoverflow.com/a/11972028/449162 – L42y 2013-03-06 13:22:52

你也可以將AJAX請求的結果分配給你的$ scope中的某些東西，並使用ng-show HTML。 – boxed 2013-03-06 16:00:01

這是一個非常可靠的方法。它比使用ng-show或ng-hide更好，因爲在你的控制器中，你已經擁有了你的數據並且可以編寫更多的同步代碼。也就是說，這比代碼審查網站更適合SO，因爲你沒有問題，只是尋找代碼的改進。 – 2014-07-31 23:58:17

AngularJS的意義在於你可以加載模板和一切，然後等待數據加載，它意味着是異步的。

您的視圖應該使用ng-hide，ng-show來檢查控制器的範圍，以便當範圍中的數據更新時，視圖將顯示。您還可以顯示一個微調，這樣用戶就不會覺得網站崩潰了。

來源

2014-07-31 23:53:31

當您加載數據以顯示在視圖中時，我可以看到您的觀點，但您可能需要取消基於異步加載的路由 – 2015-07-14 18:31:35

回答這個問題，您在顯示視圖之前顯式加載數據的方式似乎是正確的。請記住，它可能不會提供最好的體驗，因爲有一段時間才能解決問題，也許會讓人覺得應用停止了一段時間。

請參閱從John Pappa's blog一個例子來裝載一些數據之前的路由採用了棱角分明的默認路由器解決：

// route-config.js 
angular 
    .module('app') 
    .config(config); 

function config($routeProvider) { 
    $routeProvider 
     .when('/avengers', { 
      templateUrl: 'avengers.html', 
      controller: 'Avengers', 
      controllerAs: 'vm', 
      resolve: { 
       moviesPrepService: function(movieService) { 
        return movieService.getMovies(); 
       } 
      } 
     }); 
} 

// avengers.js 
angular 
    .module('app') 
    .controller('Avengers', Avengers); 

Avengers.$inject = ['moviesPrepService']; 
function Avengers(moviesPrepService) { 
    var vm = this; 
    vm.movies = moviesPrepService.movies; 
}

你基本上使用的路徑上的resolve參數，使routeProvider等待所有承諾得到解決在實例化控制器之前。請參閱docs瞭解更多信息。

來源

2015-07-14 19:38:23

使用UI路由器時，請在查看聲明狀態時的「resolve」屬性文檔：http ：//angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider#methods_state – 2015-07-14 19:42:27

AngularJS，在顯示視圖前解析數據

回答

相關問題