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

Question

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

我正在尝试 延迟 angular 从路由到新页面，直到 JSON 数据加载完毕 。

我找不到关于使用 angular 工厂加载 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.

返回数据

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

AngularJS 1 Delay route until model is loaded

javascript

angularjs

json

routing

angularjs-routing