EpoNg's Life

Front-End/Angular

• @Input 데코레이터

  Front-End/Angular 2018. 2. 8. 11:33

  @Output EventEmitter 로 데이터 통신하는 방법과 이번에는 @Input 에 대해 사용법을 알아 보면 바인딩할 프로퍼티명을 지정. @Component({ selector : 'order-processor', template : ` Buying {{ quantity }} shares of {{ stockSymbol }} `, styles : [`:host { background : cyan; }`] }) export default class OrderComponent { @Input() stockSymbol : string; @Input() quantity : number; } @Input으로 stockSymbol, quantity 값 지정 @Component({ selector : 'inpu..

  Read More
• Componentt 간 통신 Emmit

  Front-End/Angular 2018. 2. 7. 10:53

  컴포넌트간 데이터 전달 캡슐화가 확실히 잘되어있다라고 느낌. 예를 들어 위와 같이 Child에서 발생한 Event 를 Parent 컴포넌트에 전달시켜 주려면 @Output() 이란 어노테이션을 사용해야 한다. EX). user-info 라는 컴퍼너는를 포함한 Component Parent 가 있다고 하면 user-info 가 Child 포함한 Component Parent 가 Parent 가 된다 말이 이상하네.. a user-info 에 EventEmitter 를 등록 클릭시 emit 해준다고 가정 user-info Component@Output() gnbOpenEvent = new EventEmitter(); gnbOpen(){ console.log(">>> gnbOpen called Child > ..

  Read More
• attribute property 차이

  Front-End/Angular 2018. 2. 1. 16:26

  @Component({ selector : 'app', template : ` Property vs attribute binding: ` }) class AppComponent { greeting : string = 'A value'; onInputEvent (event : Event) : void { let inputElement : HTMLInputElement = event.target; console.log(`The input property value = ${inputElement.value}`); console.log(`The input attribute value = ${inputElement.getAttribute('value')}`); console.log(`The greeting pro..

  Read More
• Angular 생소한 문법 Arraw

  Front-End/Angular 2018. 1. 26. 15:59

  일반적인 자바스크립트에서 갖는 Function 구조는 var obj = { myMethod: function () { setTimeout(function () { ... }, 0); } } 이런식이나 Angular 공부를 하던중 처음보는 기호? => 이런식의 문법이 들어간걸 보고 찾아본 결과 @Component({ selector : 'product2', providers : [{ provide : ProductService, useFactory : (isDev) => { if (isDev) { return new MockProductService(); } else { return new ProductService(); } }, deps : ['IS_DEV_ENVIRONMENT'] }], template..

  Read More
• AngularJS Router

  Front-End/Angular 2018. 1. 24. 17:40

  AngularJS 1.x 버전 대에서 쓰던 RouterProvider 를 이용하던 angular-ui-router 기능이 있다하면 Angular 에선 ui-view 대신 을 이용한다. 해당 태그로 감싸진 부분이 화면이 전환되는 영역이라고 생각하면 된다. API Document https://angular.io/tutorial/toh-pt5 해당 부분 한글로 잘 번역해둔 블로그http://projectl33t.xyz/archives/255 영어가 안되니까.. 이런 번역글이 참으로 고맙다 ㅠㅠ 이해가 되려던 참에 해석으로 막히면 진짜.. 딥빡 !#$&!@#%#!@^&*$ RouterModule.forRoot([ { path : '', component : HomeComponent }, { path : 'pr..

  Read More
• Angular HelloWorld

  Front-End/Angular 2018. 1. 24. 11:37

  Angular with TypeScript 공부중 예제 하나씩 따라 가보면서 기본적인 개념만 정리해볼까 한다. 이래야 진도빼는 재미가 좀 있지 않을까? 예전 생각도 좀 나면서. AngaulrJS 1.x 를 2개의 프로젝트에서 다뤄봤으나 Angular 자체는 문법이 정말 생소하다. C++ 같은 OOP 느낌 해당 필수 script 의 필요 이유 설명은 http://blog.jeonghwan.net/2016/08/23/about-angular2-quickstart-libraries.html 이 블로그에 잘 정리해 두신듯. 1. System.import app 으로 시작 2. systemjs.config.js 설정을 읽어 드림'app' : { main : 'main', defaultExtension : 'ts'..

  Read More