4

내각 기능이 뛰어난 단일 페이지 응용 프로그램 내에 완전히 기능적인 고정 라우터가 있으며 이제는 특정 경로를 동적으로 만드는 작업을 수행합니다.AngularJS - UI-Router를 사용한 동적 라우팅

말 나는 다음과 같은 매개 변수 경로를 가지고 지금까지 :

  • ^/user/:userName
  • ^/product/:productName
  • ^/category/:categoryName

지금 그들은 모두를 만들 것, 경로 ^/:slug에 응답 할 필요를 해당 슬러그에 해당하는 리소스 유형을 얻고 마지막으로 요청을 전달하는 일부 백엔드 API 호출 t를 특정 controller (구체적으로 resolve, templateUrl, abstractdata)로 변경합니다.

의견이 있으십니까?


은 (편집 : 나는 같은 기능을 내부적으로 다른 경로 트리거 요청한 것보다 가, 경로 변경이 공개적으로 볼 수없는 경우에도 경로 거울 (일명 투명 전달) 가능한 것 같아요. 하지만이 중 어떤 것이 각도 또는 ui-router에서 가능한지 아직 알지 못합니다 ...)

답변

3

알아 냈습니다. 그것은 꽤 아니지만 멋지게 작동합니다.

^/:username (별칭 '프로필'), ^/:productName (별명 '제품')와 ^/:categoryName (별칭 '카테고리')에 위의 기존 루트의 이름을 변경 외에, 나는 그것의 컨트롤러 ResolverController와 새로운 일반적인 경로 /:slug를 만들었습니다. 후자는 $stateProvider에서 먼저 선언해야합니다.

function ($state, $stateParams, resource) { 
    switch (resource) { 
    case 'user': 
    $state.go('profile', {'username': $stateParams.slug}); 
    break; 
    case 'product': 
    $state.go('products', {'productName': $stateParams.slug}); 
    break; 
    case 'category': 
    $state.go('category', {'categoryName': $stateParams.slug}); 
    break; 
    default: 
    // 404 
    break; 
    } 
} 

당신은 세 번째 매개 변수 resource에 대해 궁금 할 것이다 :

ResolverController는 다음과 같은 기능입니다. 이 상태의 해결에 의해 반환되며 요청 된 슬러그의 리소스 유형에 대한 정보를 보유합니다.