Enjoy Programming

Controller에 아래 추가 @RequestMapping(value = "/**/{[path:[^\\.]*}") public String redirect() { // Forward to home page so that route is preserved. return "forward:/"; }

지난번까지해서 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..

1일 1포스팅이 목표였는데 어제는 회식으로 인해 포스팅하지 못했네요. 못한 포스팅은 주말동안 따라 잡아야겠어요. 오늘은 Angular에서 Service 만들기를 해보겠습니다. Service는 여러 Component에서 공통적으로 사용하는 것을 말합니다. Service는 어떻게 만들어지는지, 어떻게 사용되는지 알아보겠습니다. 오늘도 역시 npm start와 함께 시작합니다. 기본적으로 Service는 아래와 같은 형태를 가집니다.import { Injectable } from '@angular/core'; @Injectable() export class HeroService { } . 간단하게 mock-heroes에 있는 HEROES 변수를 리턴해줍니다. 이렇게 만든 서비스를 실제 사용해보겠습니다. 기본적..

지난 Angular 2 포스팅에서는 Directive에 대해 간단히 알아봤습니다. 지난번까지 작성한 소스는 app.component에 모든것을 다 넣은 형태였습니다. Hero 인터페이스 선언과 Hero 리스트 배열, 그리고 AppComponent가 한곳에 있으니 자연히 가독성이 떨어집니다. 이것을 이제부터 하나하나 나눠보겠습니다. 이번에도 역시나 npm start와 함께 시작합니다. 가장 먼저 제일 쉬운 Hero 인터페이스를 밖으로 빼내어 보겠습니다. 새로 hero.ts를 생성하고, app.component.ts에 있던 Hero 인터페이스 정의 부분을 빼냅니다.export class Hero { id: number; name: string; } 위와 같이 별도 파일로 빼내면 import를 시켜줘야 app..

오늘은 어떤걸 포스팅할까 하다가 오랜만에 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..

요새 많은 프론트엔드 프레임워크들이 있습니다. 아무래도 요새 대세로 떠오르는건 react가 아닐까 합니다. facebook에서 후원하는 react는 component 베이스의 프레임워크로 최근 급격히 떠오르는것 같습니다. 그래서 Angular 2가 얼마나 뜰지는 아직 모르겠습니다. 구글에서 후원하고 TypeScript를 주 언어로 사용함으로써 보다 Java 개발자에게 친숙히 다가갈 수 있는것 같아서 저는 공부해보려고 합니다. Angular 1이 인기가 많았으니 2도 기대를 조금은 해봅니다. 얼마전까지는 beta 버전이었는데, 이번에 rc 버전이 나옴으로 인해 포스팅을 해보려 합니다. 설명을 장황하게 하는것은 저랑은 맞지 않아서 바로 시작해보겠습니다. 아래는 angular.io의 getting starte..