Enjoy Programming

지난번까지해서 Routing 설정하는것을 해봤습니다. [routerLink]와 @RouteConfig를 이용해서 간단하게 Routing 설정을 할 수 있었습니다. 그럼 지난 포스팅에 이어 이번에는 Routing 할 Component를 하나 추가하고, 그 외 Routing 기능이 뭐가 있는지 알아보겠습니다. npm start. 먼저 지난번과 동일하게 RouteConfig 에 먼저 추가해주겠습니다.import { Component } from '@angular/core'; import { HeroService } from './hero.service'; import { HeroesComponent } from './heroes.component'; import {ROUTER_PROVIDERS, ROUTER_..

이번 포스팅에서는 Angular 2의 Routing에 대해서 알아보겠습니다. 이번에 rc 버전으로 들어오면서 기존 routing이 deprecated 될거라고 해서 포스팅하기 애매하긴 한데요. 변경되면 그 때 또 다시 포스팅을 하도록 하죠. 그럼 npm start와 함께 시작해보겠습니다. 기존에 만들어놨던 기능은 routing의 한 기능으로 뺍니다. 그렇게 하기 위해 app.component.ts를 heroes.component.ts로 rename 합니다. Coponent 명칭이 바뀌었으므로 파일 내부에 AppComponent도 HeroesComponent로 변경하고, selector도 기존의 my-app에서 my-heroes로 변경합니다. 그리고 html과 css 파일명과 경로도 수정해줍시다.impor..

오늘은 어떤걸 포스팅할까 하다가 오랜만에 Angular 2를 진행해봅니다. 이번에도 역시나 npm start로 서버 띄어놓고 시작합니다. 우선 파일 제일 아래에 배열을 추가합니다. TypeScript에서도 기본적인 JavaScript 문법은 동작을 합니다.var HEROES: Hero[] = [ { "id": 11, "name": "Mr. Nice" }, { "id": 12, "name": "Narco" }, { "id": 13, "name": "Bombasto" }, { "id": 14, "name": "Celeritas" }, { "id": 15, "name": "Magneta" }, { "id": 16, "name": "RubberMan" }, { "id": 17, "name": "Dynama" }..

시작하기 전에 npm start를 띄어놓고 시작합니다. Anguar 2 시작하기에서 봤듯이 저렇게 해놓으면 TypeScript 코드가 변경되면 자동으로 re-compile해서 화면에 뿌려줍니다. 그러면 코딩을 시작해봅시다. 1. 우선 app.component.ts 를 아래와 같이 수정합니다.import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '{{title}}{{hero}} details!' }) export class AppComponent { title = 'Tour of Heroes'; hero = 'windstorm'; } . 클래스에 title과 hero 변수를 선언하고 값을 할당합니다. . t..