[AngularJS] 4. Router을 이용한 SPA 구현 예제
Router?
라우터의 네트워크 관점에선 데이터를 송수신하는 역할을 담당한다.
AngularJS의 Router은 SPA을 구현할 수 있도록 지원하는 기능을 담당한다.
사이트를 이용할 때 페이지를 이동하면 로딩이 되면서 요청한 페이지를 불러오는 방식이 있다면,
SPA는 원하는 페이지를 로딩 없이 특정 영역에 바꿔치기하여 페이지를 불러 올 수 있는 것이다.
SPA의 장점은 페이지를 구성하는데 필요한 리소스를 최초로 한번만 불러올 수 있다는 것이다.
(페이지를 바꿔치기 하기 때문에)
AngularJS에는 기본적으로 제공하는 라우터와 좀 더 안정화된 버전으로 오픈소스로 제공되는 라우터가 있는데
후자를 사용하여 SPA를 구현할 것이다.
ui.router을 사용하기 위해 angular-ui-router 라이브러리를 불러오고,
모듈을 생성할때도 ui.router를 사용하겠다고 선언을 해야함.
module의 config를 생성하여 AngularJS 로딩이 될때 state에 따라 어떤 url을 반환하고
특정 view에 html을 불러올 것인지 정의한다.
정의된 state는 계층적 구조를 가지고 있는데,
이는 상태를 유지한 상태에서 더 불러올 수 있게 하기 위한 구조이다.
42LINE 처럼 같은 레벨의 state를 선언하여 해당 state일 경우 뷰를 교체함으로써
더욱 더 동적으로 페이지 이동을 구현 할 수 있다.
특정 뷰의 templateUrl을 지정할때 view의 이름 뒤에 '@'를 붙여줘야한다.
a태그의 ui-sref 디렉티브를 이용하여 어떤 state로 이동할지 정한 후 해당 a태그를 누르면 위 stateProvider에 정의된 state를 찾아 그에 맞는 액션을 하게 됨.
RESULT
