AngularJS 1延迟路由，直到模型加载答案

【问题标题】：AngularJS 1 Delay route until model is loadedAngularJS 1延迟路由，直到模型加载
【发布时间】：2017-01-16 06:11:53
【问题描述】：

我刚刚开始学习 AngularJS，并且正在建立一个网站来发展我的技能。

我正在尝试延迟 angular 从路由到新页面，直到加载 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: '/' 
        }); 
    });

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript angularjs json routing angularjs-routing

【解决方案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 返回的数据。

【讨论】：