앵귤러js(AgularJS)에서 기본 제공되는 필터는 사용해 봤으니 직접 만들어서 사용해 봅시다. (참고 : 참고 : AngularJS Develop - 11 - Custom Filters ) 연관글 영역 1. 커스텀 필터(Custom Filter) 작성 앵귤러에서 필터를 추가하려면 '.filter'를 사용하면 됩니다. 아래 코드는 입력받은 값을 리턴해주는 필터입니다. app.filter('MyFilter', ['$filter', function ($filter) { return function (input1, scope, input2) { return "input1 : " + input1 + " input1" + input2; }; }]); 내용은 원하는 대로 작성하시면 됩니다. 2. 사용하기 이렇게 ..

이 필터도 앵귤러js(AgularJS)에서 기본 제공되는 필터입니다. 양이 많으니(= 기능이 많다. ) 차근차근 예제를 따라 해보도록 하겠습니다. (참고 : 참고 : AngularJS API Reference - orderBy ) 연관글 영역 1. 기본 사용법 'OrberBy'는 배열로 결과가 리턴됩니다. 그래서 'ng-repeat' 같은 것으로 사용 가능합니다. See the Pen AngularJS filter - orderBy 1 by DangGun (@danggun) on CodePen. 2. 정렬 변경하기 정렬옵션을 실시간으로 바꿔 봅시다. 이렇게 가지고 있는 데이터셋에서 필터의 옵션만 조정해 주면 앵귤러가 알아서 다시 정렬 해줍니다. See the Pen AngularJS filter - or..

앵귤러JS에서는 데이터를 출력할 때 필터를 적용해서 출력할 수 있습니다. AngularJS API Reference - filter 이 포스팅에서는 배열을 필터링하는 'filter' 통화 표시 필터인 'currency' 숫자 처리 필터인 'number' 날짜 처리 필터인 date 제이썬(Json)으로 표시해주는 'json' 소문자로 바꿔주는 'lowercase' 대문자로 바꿔주는 'uppercase' 글자 갯수를 잘라주는 'limitTo' 를 다룹니다. 연관글 영역 1. filter 참고 : AngularJS API Reference - filter 배열을 필터링해주는 필터입니다. 리턴이 배열로 오기 때문에 반복문(ng-repeat)으로 활용하거나 바인딩하는 것이 가능합니다. See the Pen QGK..

타입스크립트(TypeScript)는 마이크로 소프트에서 만든 자바스크립트 확장입니다. (참고 : Microsoft - TypeScript ) 앵귤러js2(AngulraJS) 때문에 해야 할 것이 많군요 ㅜㅡ 어찌 되었건 설치해봅시다! 1. 다운로드를 받자! 도구 > 확장 및 업데이트 로 누겟(Nuget)을 열고 타입스크립트(TypeScript)를 검색하면.... 아래와 같이 나옵니다. 하지만 다 훼이크고 클릭하면 다운로드 페이지로 넘어갑니다 ㅎㅎㅎ 가장 최신 버전을 클릭해봅시다.(2.0.3) 아래와 같이 다운로드 페이지가 나오는데 다운로드 받습니다. 다운받아서 설치하시면 됩니다. 참 쉽죠? npm이 설치되어 있다면? npm이 설치되어 있다면 아래 명령어로 타입스크립트의 최신 버전을 설치할 수 있습니다. ..

여러 가지 이유로 지정한 요소를 특정 태그로 감싸주어야 할 때가 필요합니다. 1. 제이쿼리(Jquery)를 이용한 방법 제이쿼리는 '.wrap()'함수가 있으므로 쉽습니다. //$([검색식]).wrap([추가할태그]); $('.interword').wrap(''); 2. 자바스크립트(javascript)를 이용하는 방법 자바스크립트는 살짝 힘듭니다. 요소를 찾아서 넣고 하는 작업이 필요하기 때문이죠 ㅎㅎㅎ //태그를 추가할 태그를 찾고 var div = document.getElementById('wrapMe'); //태그를 생성하고(여기선 'a') var link = document.createElement('a'); //기존 태그 내용을 추가해주고 link.innerHTML = div.outerHTM..

지정한 날짜에 날짜를 더하거나 빼는 계산을 하는 유틸리티입니다. 1. 설명 전역함수로 만들었습니다. 순수 자바스크립트만 사용하기 때문에 그냥 갔다가 쓰시면 됩니다. 자바스크립트의 날짜를 계산할때는 'setDate'와 'getDate'를 조합하지 않으면 원하는 결과값이 나오질 않습니다. 그런데 'setDate'를 하면 원본이 수정되기 때문에 여러작업을 할때는 값이 이상하게 나옵니다. 그래서 날짜를 계산하기 전에 원복을 복제(clone)하고 복제된 값을가지고 계산하는 방식으로 만들었습니다. 2. 코드 깃허브 링크 : DGUtil-JS(클릭) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3..

[url]에서 리디렉션한 횟수가 너무 많습니다. 연관글 영역 1. 원인 어떤 식으로든 계속 페이지가 호출되고 있다는 뜻입니다. 일반적으로 페이지 간 무한루프에 빠지면 발생합니다. 여기서 말하는 무한루프는 상황 1 1) A 페이지에서 자동으로 B 페이지로 이동 2) B 페이지에서 자동으로 A 페이지로 이동 상황 2 1) A 페이지에서 A 페이지를 자동으로 호출 이런 식으로 구성된 상황을 말합니다. 이것 말고도 다양한 이유로 예상하지 못한 페이지 간 무한루프로 빠지면 이 메시지를 보게 됩니다. 그러니까 A를 처리하고 사용자에게 B 페이지를 보여준 후 다시 A로 가는 기능이 있었는데 A에서 B로가는 과정이 생략되고 A로가면 다시 B로 넘기는 행위를 반복하는 현상.,..... 즉, 만든 사람이 기능을 잘못 생각..

Error: $injector:modulerrModule Error Error: $injector:unprUnknown Provider 이런 에러는 앵귤러 내부에서 모듈 매칭이 실패 했을 때 주로 발생합니다. 특히 asp.net의 번들(Bundle) 기능 같은 미니마이즈(Minimized)를 하게 되면 반드시 펑션의 매개변수가 단순화되고 이 문제 때문에 앵귤러 내부모듈을 찾을 수 없어 에러가 나게 됩니다. 미니마이즈를 사용하지 않으면 앵귤러 내부모듈과 이름으로 매칭이 되기 때문에 에러가 나지 않습니다. 1. 테스트 코드 아래 코드를 실행해 봅니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Minimized Test var app..

클로우리 컴파일러 소개 goolge developers - Closure Compiler 구글에서 제공하는 자바스크립트 미니마이저 툴임 클로우저 컴파일러(Closure Compiler) 입니다. 바로가기 - Closure Compiler 웹에서 사용 가능합니다. 사용법은 간단합니다. 왼쪽 창에 코드를 넣고 컴파일(Compile) 버튼을 누르면 왼쪽에 결과가 나옵니다. 코드 넣는 곳에 위쪽에 있는 주석은 컴파일 옵션입니다. (참고 : Closure Compiler - Closure Compiler Compilation Levels ) 다 좋은데 웹 기반이라 로컬파일을 읽을 수 없다는거 ㅎㅎㅎ 파일을 여러 개로 만들었다면 수작업을 해야 합니다-_-;

html을 작성하다보면 자주 사용 하는 것 중에 하나가 'float'속성입니다. 그런데 'float'속성의 특징은 다른 레이아웃에 영향을 주지 않는 것이죠. 0. 테스트용 코드 작성 테스트용 html을 다음과 같이 작성합니다. aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc 이 코드를 실행하면 다음과 같이 나옵니다. 1. 문제 이제 '.Child1'과 '.Child2'에 'float'을 추가해 봅시다. .Child1 { background-color:yellow; width:300px; height:300px; float:left; } .Child2 { background-color:red; width:200px; height:200px; float:left; } 이..