AngularJS 1延遲路線，直到模型被加載

Question

我剛開始學習AngularJS，並建立一個網站來發展我的技能。

我正在嘗試延遲角度從路由到新頁面，直到JSON數據加載。

我無法找到堆棧溢出的答案，它使用角度工廠來加載JSON。

我的檔案如下。

services.js

app.factory('contactFormData', ['$http', function($http, $q) { 
    return $http.get('json/eager-contactform.json') 
    .success(function(data) { 
     return data; 
    }) 
    .error(function(err) { 
     return err; 
    }) 
}]) 

ContactController.js

app.controller('ContactController', ['$scope', 'contactFormData', '$http', function($scope, contactFormData, $http) { 
    contactFormData.success(function(data) { 
     $scope.contactFormData = data; 
    }) 

    $scope.success = false; 
    $scope.error = false; 

    $scope.sendMessage = function(value) { 
     $http({ 
      method: 'POST', 
      url: 'php/eagerContact.php', 
      data: value, 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }) 
     .success(function(data) { 
     if (data.success) { 
      $scope.success = true; 
     } else { 
      $scope.error = true; 
     } 
     }); 
    } 
}]); 

app.js

var app = angular 
    .module("eager", ['ngSanitize', 'ngRoute']) 
    .config(function ($routeProvider) { 
     $routeProvider 
     .when('/contact', { 
      controller: 'ContactController', 
      templateUrl: 'views/contact.html', 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }); 

誰能幫助我？

Answer 1

您可以使用resolve路由選項等待數據加載前的加載視圖。同樣在工廠&中創建一個方法，通過返回對象將它暴露給服務使用者。

廠

app.factory('contactFormData', ['$http', function($http, $q) { 
    var getEagerContactForm = function() { 
    return $http.get('json/eager-contactform.json'); 
    } 
    return { 
    getEagerContactForm: getEagerContactForm 
    } 
}]) 

配置

$routeProvider 
.when('/contact', { 
    controller: 'ContactController', 
    templateUrl: 'views/contact.html', 
    resolve: { 
    data: function(contactFormData){ 
     return contactFormData.getEagerContactForm(); 
    } 
    } 
}) 

裏面ContactController你可以注入data作爲依賴，這將對數據從API返回。