2016-10-05 2 views
-1

각도 JS를 사용하는 단일 페이지 어플리케이션을 개발 중이고 라우트 구성에 상태 제공자를 사용하고 있습니다. 기본적으로 글로벌 탐색보기와 대시 보드보기가 있습니다. 네비게이션에서 몇 가지 매개 변수를 전달하여 서비스 호출을하고 그에 따라 대시 보드를 표시해야합니다. 상태를 두 개로 나누었습니다. 하나는 탐색 용이고 다른 하나는 대시 보드 용입니다. 알아낼 수없는 것은 대시 보드 데이터를 가져 오기 위해 어디에서 아약스 호출을해야하는지입니다. 해야 탐색 자체에서 그것을 통과하고 해결을 통해 전달하십시오. 아니면 그냥 대시 보드 컨트롤러에 데이터를 전달하고 거기에서 아약스 전화를해야합니다. 다음은이 완전히 당신이 사용자 경험 밖으로 재생하는 방법에 따라 내 상태각도 ui-router-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'); 
+1

내가 그것을 생각 유모차를 URL을 통해 전달하는 것이 더 낫고,'resolve' @ state 대시 보드를 사용하여 API를 호출해야합니다. –

답변

1

입니다. 대시 보드 상태로 천이 전에 를 가져 오는 모든 데이터를 수행 할 경우

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

다음 컨트롤러가 someData 주입 할 수있는 resolve 상태 구성, 예를 들어

.controller('dashboardController', function($scope, 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; 
    }); 
}) 
+0

Phil 감사합니다. 나는 두 번째 접근법을 사용했으며 제대로 작동합니다. –