AngularJS Router

AngularJS 1.x 버전 대에서 쓰던 RouterProvider 

<div ui-view></div>를 이용하던 angular-ui-router 기능이 있다하면 

Angular 에선 

ui-view 대신 

<router-outlet></router-outlet>

을 이용한다. 

해당 태그로 감싸진 부분이 화면이 전환되는 영역이라고 생각하면 된다. 

API Document 

https://angular.io/tutorial/toh-pt5

해당 부분 한글로 잘 번역해둔 블로그

http://projectl33t.xyz/archives/255

영어가 안되니까.. 이런 번역글이 참으로 고맙다 ㅠㅠ 

이해가 되려던 참에 해석으로 막히면 진짜.. 딥빡 !#$&!@#%#!@^&*$

RouterModule.forRoot([
        { path : '', component : HomeComponent },
        { path : 'products/:productId', component : ProductDetailComponent }
])],

RouterModule 필수 

path 와 component 로 구성  ":" 세미콜론뒤에 파라미터 명시적 지정

 

<div class="thumbnail">
   <img src="app/static/images/320x150.png">
   <div class="caption">
      <h4 class="pull-right">{{ product.price | currency }}</h4>
      <h4><a [routerLink]="['/products', product.id]">{{ product.title }}</a></h4>
      <p>{{ product.description }}</p>
   </div>
   <div class="ratings">
   </div>
</div>

routerLink 를 이용해서 path에 지정된 component 로 이동시킨다. 

간단 예제

https://plnkr.co/edit/UjUlWKpO0wxQfB3P6YUG?p=preview