角度ui-router-ajaxコールオンロード

Question

私たちは角度JSを使用して単一ページアプリケーションを開発しており、ルートを設定するために状態プロバイダを使用しています。基本的には、グローバルナビゲーションビューとダッシュボードビューがあります。私はサービスコールを行うためにナビゲーションからいくつかのパラメータを渡さなければなりません。それに応じてダッシュボードを表示しなければなりません。ナビゲーションとその他のダッシュボード用に2つの状態を分割します。私が把握することができないのは、ダッシュボードデータを取得するためにajax呼び出しをどこで行うべきかということです。私はナビゲーション自体でそれを作って、それを解決に渡すべきですか？または私はダッシュボードコントローラにデータを渡し、そこからajax呼び出しを行うべきですか？以下は私の状態です

$stateProvider 
.state('home', { 
    url: '/', 
    templateUrl: 'templates/home.htm', 
    controller: 'homeController', 
}) 
.state('dashboard', { 
    url: 'contact', 
    templateUrl: 'templates/dashboard.htm', 
    controller: 'dashboardController' 
}) 
.state('state3', { 
    url: '/articles', 
    templateUrl: 'templates/state3.htm', 
    controller: 'state3Controller' 
}); 
$urlRouterProvider.otherwise('/home'); 

Answer 1

これは完全にあなたがプレイする方法に依存します。

ダッシュボードの状態に遷移する前を取得するすべてのデータを行いたい場合は、resolve状態の構成を使用

.state('dashboard', { 
    url: '/contact', 
    templateUrl: 'templates/dashboard.htm', 
    controller: 'dashboardController', 
    resolve: { 
     someData: function($http) { 
      return $http.get('something').then(res => res.data); 
     } 
    } 
} 

、あなたのコントローラが

.controller('dashboardController', function($scope, someData) { ... }) 

例えば、someDataを注入することができます

someName約束が解決され、データがコントローラ内ですぐに利用可能であることを意味するまで状態遷移を待たせるでしょう。あなたはすぐにダッシュボードの状態に移行したい（そしておそらくなどのローディングメッセージ、スピナーを示す）しかし、あなたはコントローラに取り出したデータを移動したい場合

---

は

.controller('dashboardController', function($scope, $http) { 
    $scope.loading = true; // just an example 
    $http.get('something').then(res => { 
     $scope.loading = false; 
     $scope.data = res.data; 
    }); 
})