Front-End
-
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..
-
Angular 생소한 문법 ArrawFront-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..
-
AngularJS RouterFront-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..
-
Angular HelloWorldFront-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'..
-
IntelliJ Eclipse Keymap 설정 후 단축키 추가 정보Front-End/AngularJS 1.x 2017. 12. 5. 17:39
Setting 에서 Keymap 에서 Eclipse 스타일 설정 후!!! 단축키 동작 EclipseIntelliJ IDEA Ctrl + 1 Alt + Enter import 되지 않은 Class import 도움 Alt + Shift + O Ctrl + Alt + O import 정리 Ctrl + D Ctrl + Y 라인 삭제 Alt + Shift + S Alt + Insert 코드 삽입(Constructor, get/setter, toString 등) Ctrl + N Alt + Shift + N Ctrl + Alt + Insert 신규 파일 생성(java, JSP 등) sysout, syserr sout, serr System.out.println, System.err.println(Code Templ..
-
Angular ScopeFront-End/AngularJS 1.x 2017. 9. 20. 14:14
Angular Scope Your name: greet {{greeting}}
-
Angaulr 강좌 준비Front-End/AngularJS 1.x 2017. 9. 19. 17:45
Angular 를 접한지 벌써 2년정도 지나간다. 다른 신규 언어 프로젝트를 진행할때는 바로바로 정리해서 포스팅 하곤 했는데. 신입때의 열정은 조금식 사그러 들고, 일도 중요하지만 이제 더 중요한것들도 많이 생기고 해서 언어에 관한 포스팅이 점점 줄어 들고 있다. 본래의 블로그 목적이 강좌 블로그였는데.. ㅠ 처음 Angualr를 도입해서 진행했던 프로젝트는 안드로이드 / 아이폰에서 IOT 가전들을 제어 하는 하이브리드 앱이다. (현재 BtoC 앱으로 글로벌 사용중) Angaular / Cordova / Ionic / Grunt / Gulp / node.js 등등 당신 최신 트렌드를 반영한 앱이었다. (덕분에 피똥쌋지... ) 이후 웹사이트 제작에 사용해서 초기 셋팅부터 개발완료까지 처음으로 Angula..
-
익스플로러 한글 바인딩 오류Front-End/AngularJS 1.x 2016. 10. 27. 23:48
크롬 브라우저에서는 잘 동작하는 내용이 익스에 가면... 최신버전 11.x V를 사용하지만 input ng-model 값이 제대로 바인딩 되지 않는 현상이 발생하여 (txtNm 값이 "" 로 전달되는 현상) ** 현상은 커서가 잡힌 상태에서 바로 등록 작업 수행시 값이 반영이 되지 않음. 해결책 input Directive 을 Custom 을 엎어 사용 .directive('input', [ '$parse', function($parse) { return { priority : 2, restrict : 'E', compile : function(element) { element.on('compositionstart', function(e) { e.stopImmediatePropagation(); }); ..
-
youtube 동영상 Thumbnail 가져오기Front-End/jQuery 2015. 2. 11. 15:53
기존 jyoutube.js 좀 변경; (function($){ $.extend({ jYoutube: function( url, size ){ // if(url === null){ return ""; } // // size = (size === null) ? "big" : size; // var vid; // var results; // // results = url.match("[\\?&]embed/([^&#]*)"); // // vid = ( results === null ) ? url : results[1]; // // if(size == "small"){ // return "http://img.youtube.com/vi/"+vid+"/default.jpg"; // }else { // return "..