Category Archives: Angular2

  • [Angular2 – 8] Tour of Heroes – HTTP (final! – download final project)

    지금 까지는 HEROES 라는 mock data로 부터 heroes 를 받아 오는 구조였다. 이번 시간에는 HttpModule을 이용하여 직접 Web Service 를 호출 하는 방법에 대하여 알아 보겠다. 먼저 실제 어떻게 되는 지를 여기에서 확인해 볼 수 있다.

    아래와 같이 AppModule 에 HttpModule 을 사용 하기 위한 설정을 하자.

  • [Angular2 – 7] Tour of Heroes – Routing

    이번 포스팅은 Angular2의 Routing 이라는 것에 대해 알아 볼 예정이다. 아래는 Angular2에서 나온 Routing 에 대한 정의 이다.

    The Angular router is an external, optional Angular NgModule called RouterModule. The router is a combination of multiple provided services (RouterModule), multiple directives (RouterOutlet, RouterLink, RouterLinkActive), and a configuration (Routes).

    먼가 말이 좀 어렵긴 하지만 일단 그대로 해석해 보면

  • [Angular2 – 6] Tour of Heroes – Services

    지난 포스팅까지 여러 component 들을 사용 하는 것을 알아 보았다. Heroes 데이타를 직접 component 들에서 import 하여 사용 하였는데 실제 이런 방법은 효율성이 너무 적다. 물론 실제 PRODUCTION 개발에서도 일런 방법을 사용 하는 경우는 없다. 앞으로 Tour of Heroes 는 dashboard 를 만들고 메뉴도 만들고 하여 여러개의 다른 component 들이 존제를 하는데 이럴 때마다 data를 import 해서 쓰는것이 아닌 Service 를 통해 data 를 받아 사용할 것이다. 앞서에서 data를 import 해서 사용 한것은 어디 까지나 component 들의 사용을 설명하기 위한 것이 었다. 대부분의 실제 web application 의 경우에는 restful web service 를 이용하여 데이타를 주고 받는다.

  • [Angular2 – 5.5] Tour of Heroes – Additional components that can be shared

    Web Application을 만들게 되면 header 나 footer 와 같이 모든 페이지에서 공통으로 사용되어 지는 code block 들이 존재를 한다. 이번 시간에는 아주 간단히 이와 같은 share component 들을 어떻게 넣는 가를 알아 보겠다. 지난 번 포스팅에서 multiple component 에 대해 배웠기 때문에 이에 대한 응용이라고 생각 하면 된다.

    우선 shared 폴더를 app 폴더 아래 만들고 두개의 파일, app-header.component.ts 그리고 app-footer.component.ts 을 아래와 같이 만들자.

  • [Angular2 – 5] Tour of Heroes – Multiple components

    점점 app.component.ts 의 코드가 길어 진다. 이때 쯤 소스를 분리 하여 재사용 하는 것에 대해 생각을 한다. 자 그럼 이제 부터 어떻게 여러 component 들을 만들어 재사용하는 지 알아보자.

    지난 소스에서 우리가 분리 할 수 있는 부분은 리스트 아래 띄웠던 hero details 를 보여 주는 부분이다. 이 부분을 분리하여 따로 component 를 만들어 사용해 보겠다. 먼저 app/heroes/ 에 hero-detail.component.ts 라는 파일을 만든다.

  • [Angular2 – 4] Tour of Heroes – Heroes list master and details

    이번에 진행 할 것은 heroes 리스트를 보여 주고 그것을 클릭 하면 해당 hero 의 details 를 하단에 보여 주는 예제이다. 이번 예제를 통해서는 ngFor/ngIf 라고 하는 structural directives 와 TypeScript의 이벤트를 연결 하는 방법을 소개 할 것이다. 먼저 여러 hero 들의 리스트를 만들기 위한 mock data array를 만들어 보자. 아래와 같이 app 아래 mock 폴더를 만들고 mock-heroes.ts 파일을 만든다.

  • [Angular2 – 3] Tour of Heroes – Interpolation and Two way binding

    이번 시간에는 구체적으로 TypeScript 를 통해 어떻게 Front-end 와 data를 binding 하는 지를 알아 보자.

    우선 먼저 interpolation (인터폴레이션) 에 대해 알아 보자. TypeScript에서 template HTML 에 데이타를 넣을 때 Double Curly Braces (더블 컬리 브레이스) 를 사용 한다. 아래와 같이 지난 시간 app.component.ts 파일을 수정해 보자.

  • [Angular2 – 2] Tour of Heroes – Project Settings

    이번 포스팅 부터는 본격적으로 Tour of Heroes 라고 하는 Web Application을 만들어 보겠다. Angular 사이트에서 공식적으로 제공하는 Tutorial 인데 내가 앞선 포스팅에서 설명한 Project structure를 적용하여 처음 부터 진행을 하려 한다. 따라서 Angular 사이트에서 제공하는 소스 코드와는 조금 다른 부분이 있다는 것을 참고 하시기 바란다.

  • [Angular2 – 1.5] Project directory structure

    이번에는 Hero 라는 Angular2의 공식 Tutorial 을 시작하기 전에 잠시 쉬어 가는 포스트를 하기로 했다. 글세 잠시 쉬어 가는 것 보다는 Project 를 진행하면서 항상 고민하고 생각 하는 분야가 아닐까 한다.

    우선 개발을 진행 할 때 어떻게 Project 를 만들고 파일들을 어떻게 구성하고 관리를 하는 것이 좋은 가에 대해 이야기 해보곘다. Back-end 개발자들의 경우 package를 구성하여 project source를 관리를 하는데 이때 파일들의 성격에 따라 구분을 많이 한다. 예로….

  • [Angular2 – 1] Hello World

    얼마 전 Angular2 가 공식적으로 final 버전이 나왔다. 그동은 RC 버전으로 계속 test 해 보았는데 자꾸만 변화가 있었는데 이제서야 최종 버전으로 Angular2 를 시작해 볼 수 있게 되었다.