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 
    } 
}]) 

Config

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

Внутри ContactController можно придать data как зависимость, которая будет иметь данные, возвращаемые из API.