角度で経路を使用する

Question

私は誰かが私を助けることを望んでいます。ビューを表示する前にデータがロードされるまで待つ必要があります。私の計画はルートでの解決を使用することですが、私はそれを把握していないようです。

ルート：

.when('/profile', { 
    title: 'Profile', 
    templateUrl: 'views/profile.html', 
    controller: 'profileCtrl', 
    requiresAuthentication: true 
}) 

コントローラ：（この記事のために簡略化）

app.controller('profileCtrl', function ($scope, $log, $http, $timeout, Data, Auth, dataShare, $sessionStorage, $rootScope, $confirm) { 
    $timeout(function() { 

     Data.get('profile/'+$rootScope.user.uid).then(function(data){ 
     $scope.profs = data.data; 
     $scope.buttonText = 'Update Profile'; 
     }); 

    }, 100); 
}); 

任意のヘルプははるかに高く評価されます。

Answer 1

申し訳ありませんが、私はここで試しています。私はしかし、私はしかし、時間については、実際に自分自身を多くのこの機能を使用していない。私は、この質問からSOのAPIを介してデータを取得して、サンプルを含むプランナーを作成しました。

要するに、以下のコードスニペットのようにresolveを設定する必要があります。解決の各オブジェクトは、Angularの$ qで見つかるように、データがロードされる前にナビゲーションを防ぐことができる$ promiseでなければなりません。約束が「解決」されない場合、ナビゲーションは発生しません。この場合の約束は、要求が成功したことを意味します。オブジェクトが約束でない場合、ルーティングは成功/失敗に関係なく継続されます。

「動作しません」に行くと、ビューがロードされないことがわかります。これは、$ httpに提供されたURLが悪いため、約束が解決されていないためです。

https://plnkr.co/edit/IyP1Myt6ewzju4eU6TaT?p=preview

解決機能は、コードのこの部分である：それはスタートです

when('/loaddata', { 
    templateUrl: 'load_data.html', 
    controller: 'LoadDataCtrl', 
    resolve: { 
     stackQuestion: function($http){ 
     // We must return something with a promise. $http already does that, so does $resource. 
     // See: https://docs.angularjs.org/api/ng/service/$q 
     return $http({ 
      method: 'GET', 
      url: 'https://api.stackexchange.com/2.2/questions/37491743?order=desc&sort=activity&site=stackoverflow' 
     }) 
     } 
    } 
    }). 

。それはあなたが望むものを私が信じるようにするが、それはまだエラーを処理していない。

参照

• $ Q：https://docs.angularjs.org/api/ng/service/ $ Q
• $のhttp：https://docs.angularjs.org/api/ng/service/ $ HTTP
• $ routeProvider：https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider