AngularJS 파라메터를 이용한 동적 라우팅

Question

나는 동적 경로를 가지고 있으며 가능한 한 효율적으로 상태를 전환하려고 노력하고 있습니다.

내 컨트롤러가 매개 변수 ID와 다음 사진과 함께 아파트 개체의 목록 인 (서비스를 호출하거나 데이터를 가져 예를 들어 걸릴 것

.state("apartmentDetails", { 
     url: "/apartmentDetails/:id", 
     templateUrl: "templates/apartmentDetails.html", 
     controller: apartmentDetailsCOntroller 
}) 

인스턴스 전 의사 코드에 대한 상태가있는 경우, 가격, 건물 이름 및 기타 속성) 파일에서 다음

아마도 buildApartmentTemplate()와 같은 함수를 실행 한 다음 가서 템플릿을 구축하고 $ 범위를 통해 데이터를 전달 ?? 이것은 내가 생각할 수있는 유일한 방법이지만 템플릿을 채워야하는 함수를 포함하지 않는 더 좋은 방법이 있다고 확신합니다. 보다 역동적으로 만들 수있는 모범 사례가 있습니까?

Answer 1

이 정보가 도움이 될 수 있습니다. 당신이 당신의 해결 데이터를 사용할 수 있습니다 어디 someResolvedData 바인딩을 작성해야합니다 또한

state("apartmentDetails", 
{ 
url: "/apartmentDetails/:id", 
templateUrl: "templates/apartmentDetails.html", 
controller: apartmentDetailsCOntroller, 
resolve: { 
    someResolvedData: ($stateParams) => { 
    return YourService.getMyData($stateParams.id); 
    } 
} 
}) 

:

은 내가 일반적으로 할 것은 같은 일을 할 것입니다 귀하의 경우 일부 구성 요소를로드하기 전에 내 모든 물건을 해결하다 컨트롤러 또는 템플릿에서. YourService은 서비스 이름이며 (주입하는 것을 잊지 마십시오) getMyData()은 서비스중인 일부 기능으로 데이터를 반환합니다. 여기에 데이터를 해결하는 방법에 대한

확인 더 :

https://toddmotto.com/resolve-promises-in-angular-routes/

https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c

Answer 2

더 나은 옵션은 당신이 unnecesary 쿼리를 피하기이 방법으로, 경로 정의에 약속을 사용하고 약속이 해결 된 경우 결과를 주입입니다 템플릿이로드 된 후 약속이 거절 된 경우 404 페이지 또는 원하는대로 리디렉션 할 수 있습니다.

희망

app.service('apartamentService', ['$http', function ($http) { 
 
    this.list = function (id) { 
 
     return $http({url: '/apartaments/' + id}); 
 
\t }; \t 
 
}]); 
 
\t \t 
 
app.config(['$routeProvider', 
 
function ($routeProvider) { 
 
\t $routeProvider 
 
\t \t .when('/apartmentDetails/:id/', { 
 
\t \t templateUrl: 'templates/apartmentDetails.html', 
 
\t \t controller: 'apartmentDetailsController ', 
 
\t \t resolve: { 
 
\t \t \t apartaments: ['$route', 'apartamentService', 
 
\t \t \t \t function ($route, apartamentService) { 
 
\t \t \t \t \t return apartamentService.list($route.current.params.id) 
 
\t \t \t \t }] 
 
\t \t \t }}); 
 
\t \t \t \t \t 
 
}]); 
 

 
app.controller('apartmentDetailsController', ['$scope', 'apartaments', function ($scope, apartaments) { 
 
\t $scope.apartaments = apartaments; \t 
 
}]);

나는 **이 ** 주로 의견을 기반으로이 질문은 오프 주제에 유래에 대한 당신에게