URL이없는 상태간에 데이터를 전달하는 AngularJS UI 라우터


146

URL에 데이터를 노출시키지 않고 두 상태간에 데이터를 전달하는이 문제에 직면하고 있습니다. 사용자가 실제로이 상태에 직접 도달 할 수없는 것처럼 보입니다.

예를 들어. "A"와 "B"의 두 가지 상태가 있습니다. 상태 "A"에서 일부 서버 호출을 수행하고 호출 응답을 상태 "B"로 전달합니다. 서버 호출의 응답은 문자열 메시지이므로 꽤 길기 때문에 URL에 노출 할 수 없습니다.

따라서 url 매개 변수를 사용하지 않고 각 UI 라우터에서 상태간에 데이터를 전달하는 방법이 있습니까?

답변:


185

우리가 사용할 수있는 params, 새로운 UI를-라우터의 기능을 :

API 참조 서 / ui.router.state / $ stateProvider

paramsURL에 선언 된 매개 변수를 선택적으로 구성하거나 URL이 아닌 추가 매개 변수를 정의하는 맵입니다. 구성중인 각 매개 변수에 대해 매개 변수 이름을 입력 한 구성 오브젝트를 추가하십시오.

부분을 참조하십시오 : " ... 또는 추가 비 URL 매개 변수를 정의 ... "

따라서 상태 정의는 다음과 같습니다.

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

위에서 언급 한 의사를 구성하는 몇 가지 예는 다음과 같습니다.

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

확장-실례 : http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

다음은 상태 정의의 예입니다.

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

이것은 ui-sref를 사용하는 호출 일 수 있습니다.

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

여기 예를 확인 하십시오


제안한 바와 같이, 중첩 상태 (예 : "/ user / profile / contacts")에서 매개 변수를 사용해 보았습니다. 오류가 발생했습니다. 부모 상태에 대한 "매개 변수"도 정의해야합니까?
vijay tyagi

자세한 답변 덕분에 부모가 매개 변수를 정의 할 필요는없는 것 같습니다.
vijay tyagi

어쨌든 도움이된다면 훌륭합니다.) 강력한 UI 라우터를 즐기십시오
Radim Köhler

1
불행하게도 이것은 0.2.10 라우터의 UI와 함께 일을하지 않는 그것은, 0.2.10로 버전 변경에이 오류가있어 내가 사용하고있다 - 오류 : 잘못된 PARAMS를 '집'상태
비제이 tyagi

1
@vijaytyagi, 업그레이드해야합니다. 단순히 이전 버전을 계속 실행할 이유가 없습니다. 그리고 내가 기억하는 한, 움직임은 매끄러 워야합니다 ...
Radim Köhler

38

params 객체는 $ stateParams에 포함되어 있지만 URL의 일부는 아닙니다.

1) 경로 구성에서 :

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) 컨트롤러에서 :

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A) 컨트롤러에서 상태 변경

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B) HTML에서 상태 변경

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

플런저 예


1
고마워, 완벽 해 또한 $ state와 $ stateParams를 모두 원한다면 $ state 만 주입하면됩니다. stateParams 객체는 $ state : $ state.params의 속성입니다.
Michael K

1
나머지는 작동시키기 위해서는 1 단계 (기본값 제공)가 필요합니다. ;-)
Xtreme Biker

2
간결한 예를 주셔서 감사합니다. 나를 위해 작동합니다! (
UI-
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.