angularjs stateProvider에서 $state.go 사용하는 방법

AngularJS를 사용하여 SPA(Single Page Application)으로 구현하는 경우 페이지 이동 즉, 현재 페이지에서 다른 페이지로 이동하는 방법으로 routeProvider 또는 stateProvider를 사용합니다. 만약 stateProvider를 사용하는 경우 $state를 사용하여 페이지 이동이 가능합니다. 아래는 다른 페이지로 이동하기 위해서 $state를 사용하는 방법을 자세히 알아보겠습니다.

# $state.go()를 사용하여 페이지 이동, stateProvider 방식

만약 stateProvider를 사용하여 페이지를 이동하는 경우 $state를 사용합니다. 내부 메소드로 go()가 있으며 이를 사용하면 다른 state, 페이지로 이동이 가능합니다. 먼저 간단한 $state의 go() 사용방법은 아래와 같습니다.

$state.go('stateName', {parameter})


여기서 stateName은 route 설정에 선언된 이름, 즉 이동할 위치이며 뒤의 parameter는 함께 전달할 파라미터 값입니다. 만약 아래의 주소는 다음과 같이 나타내어 이동할 수 있습니다.

! state주소이동하기 예제보기

다음의 주소가 state설정이 wf로 되어있는 경우라면 아래와 같이 $state.go를 사용하여 이동합니다.
URL주소 - http://webisfree.com?category=angular

이제 위 코드를 angularjs에 사용하면 해당 위치로 이동하게 됩니다. 참고로 링크를 직접 클릭하는 경우 아래처럼 a 태그에 사용하면 되며 위 방법은 스크립트를 사용한 구현입니다. 이처럼 태그에 sref 속성을 사용할 수도 있으며 아니면 스크립트에서 $state.go() 둘 다 사용이 가능합니다.


여기까지 state를 이동하는 방법을 알아보았습니다. 프론트엔드에서 페이지 이동을 라우팅을 설정하여 사용하는 경우 매우 중요한 방법으로 꼭 알아두세요.