Angular-Breeze $ location 디자인 패턴

Question

사용자가 여러 기준 (thinkId : employeeId, eventId, fromDate, toDate 등)을 기반으로 보고서를 실행할 수있는 각도 사이트 내에 페이지가 있습니다. 사용자가보고 할 매개 변수를 선택하면 제출 단추를 클릭하고 선택한 조건과 일치하는 검색 결과 목록이 같은 페이지에 표시됩니다. 그런 다음 검색 결과 중 하나를 클릭하여 해당 항목의 세부 정보 페이지로 이동할 수 있습니다.

내 문제는 사용자가 뒤로 버튼을 클릭하면 '/ reports'URL로 돌아가고 검색 매개 변수 나 결과가 유지되지 않는다는 것입니다. 세부 행 (예 : '/ reports? employeeId = 2 & eventId = 7')을 클릭했을 때 존재했던 상태의 페이지로 돌아가고 싶습니다.이 작업에 대한 "모범 사례"패턴을 찾고 있습니다. 유스 케이스.

Answer 1

HTML5 웹 저장소 API를 사용하여이 정보를 저장할 수 있습니다. 몇 가지 예를 여기에서 찾으십시오 http://diveintohtml5.info/storage.html.

따라서 컬렉션과 같은 사전을 각 View (또는 원하는 경우 페이지)를 처리하는 값으로 매핑하는 localstorage에 저장할 수 있습니다.

는 예를 들어, 다음과 같이 객체를 저장할 수 있습니다 : 당신은 예를 들어, 방법을 활성화에

data = { 
    reportPage: { 
     employeeId: 2, 
     eventId: 7, 
     ... 
    } 
} 

을 그런 다음 백 버튼을 클릭 할 때, 당신은이 데이터를로드에게 사전 수 있습니다.

Answer 2

라우팅 라이브러리를 사용 중이라고 가정 할 때 ngRoute (Angular에서 제공) 또는 ui-router과 같은 써드 파티 중 하나를 사용한다고 가정합니다.

ngRoute 모듈을 사용하는 경우 $routeParams이라는 정의 된 서비스를 포함시켜 현재 경로의 매개 변수를 객체로 제공 할 수 있어야합니다. ui-router을 사용하는 경우 $stateParams을 사용할 수 있습니다.

페이지간에 이동하고 뒤로 버튼을 클릭 할 때 실제 경로 매개 변수 지속성은 history.pushState 브라우저 API를 사용하는 $location 서비스에 의해 처리됩니다.

라우팅이 앵귤러에서 작동하는 방식을 더 잘 이해하려면 각도 사이트에서 tutorial을 확인하십시오.