Soulless

Angluar2 를 처음 사용해보면서 정리하던 글인데이 글들을 공개하는 지금(2018/08/07) 이미 Angular 는 버전 6.1.1 이다이미 회사에서 4.0.3으로 시작한 프로젝트가 서비스중이고일부 프로토타입은 6.x 로 진행되고 있다.대부분 많은게 좋아졌고 처음 프로젝트를 진행할 때 서비스로 Angular 가 괜찮을까? 하는 불안감도 있었고,컴포넌트 기반 프론트엔드 라이브러리, 프레임워크가 초기 반응 속도가 느린 문제는 이제 큰 문제가 아닌 게 되어버린 것 같다.Angular 에 포함되어 있는 RxJS(ReactiveX) 는 이미 많은 언어의 라이브러리에서 사용중이고 많은 개발자들의 개발 방식에 변화를 가져온 것 같다.이 시점에 다시 6.x 혹은 다음 버전으로 정리를 해야겠지만 묵은(이미 쓸모없어..

새로운 Component 생성콤포넌트를 추가한다.ng g component list추가한 콤포넌트는 기본적으로 app-{component-name} 으로 만들어진다.여기서는 "app-list"로 만들어진다.콤포넌트를 app 에서 사용해본다src/app/app.component.html {{title}}

라우터를 사용하기 위한 설정라우터 모듈 추가src/app/app.module.ts...import { RouterModule } from '@angular/router';...@NgModule({...imports: [...RouterModule.forRoot([]),...],...})라우터 패턴을 app.module.ts에 정의하는 것도 가능하지만,여기서는 루트 라우터로 app.routing.ts 를 작성한다라우팅 파일 추가@angular/cli 에서 아직 route 추가를 지원하지 않기 때문에 직접 파일을 만들어준다.src/app/app.routing.tsexport const appRoutes = [{ path: '', redirectTo: '/list', pathMatch: 'full' }]여기에..

Angular2 의 UI 콤포넌트로 Material 사용설치npm install --save @angular/material사용 설정src/app/app.module.ts...import { MaterialModule } from '@angular/material';... @NgModule({...imports: [...MaterialModule,...],...})export class AppModule { } Gesture 를 위한 추가 설정HammerJS 설치npm install --save hammerjsHammerJS 모듈 추가src/app/app.module.tsimport 'hammerjs';

angular-cli 사용하기설치sudo install -g @angular/cli프로젝트 생성ng new project-name프로젝트 디렉토리 이동cd project-name실행npm start 4200번 포트가 다른 프로젝트에서 사용중이므로 package.json 내용을 바꿔 웹팩의 실행 포트를 바꿔보자!package.json{..."scripts": {..."start": "ng serve --port 8000",...}...} 이제 8000번 포트에서 동작한다.