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

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: '/' 
     }); 
    }); 

ContactController.jsは、誰もがこれで私を助けることができますか？

Answer 1

routeのresolveオプションを使用すると、データが読み込まれる前に読み込みを待機することができます。同じものを作成するには、工場のメソッド&が返品オブジェクトを介してサービスの消費者に公開されます。 ContactControllerインサイド

工場

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(); 
    } 
    } 
}) 

あなたがAPIから返されたデータを持っているであろう、依存関係としてdataを注入できます。