태그: ProAngularJS

P

ProAngularJS Ch.19 전역 객체 서비스

#실행결과 http://study.jeju.onl/ch19/domApi.html 이 장에서는 전역 객체 접근, 예외 처리, 위험한 데이터 표현, 표현식 처리를 위해 AngularJS에서 제공하는 내장 서비스들을 살펴본다. 내용은 다음과 같다. DOM API 전역 객체 접근 – window 객체 접근: $window – document 객체 접근: $document – $interval 및 $timeout 활용: 함수 실행을 지연 또는 주기적 반복 – URL 접근: $location – 스크롤 ...

P

ProAngularJS Ch17. 고급 디렉티브 기능

* 실행결과 http://study.jeju.onl/transclude.html * 실행결과 http://study.jeju.onl/compileFunction.html * 실행결과 http://study.jeju.onl/directiveControllers.html * 실행결과 http://study.jeju.onl/customForms.html 16장에 이어서 고급 디렉티브 구현을 위한 부분을 설명한다. 주 내용은 다음과 같다. 트랜스클루전 이용: { transclude: true }, ng-transclude – 참조를 통해 문서 영역의 일부를 다른 문서에 삽입하는 것 – 임의의 콘텐츠를 감싼 래퍼 역활을 하는 디렉티브를 구현 – 관례적으로 엘리먼트 형식으로 사용토록 restrict 속성 사용 – 트랜스클루전 되는 ...

P

ProAngularJS Ch16. 고급 디렉티브 구현

* 실행결과1 http://study.jeju.onl/delux-directives.html * 실행결과2 http://study.jeju.onl/directiveScopes.html 고급 디렉티브 구현 방식에 대해 설명한다. 복잡한 디렉티브 정의 – 디렉티브 적용방식 정의: restrict –> {EACM} 디렉티브 템플릿 활용 – 직접 기술: template – 함수를 활용: script type=”text/template” – 외부 템플릿 파일: templateUrl – 함수를 통한 외부 템플릿 파일 동적 로드: templateUrl+function() – 엘리먼트 대체: replace 디렉티브 스코프 관리 – 설명: 범용으로 ...

P

ProAngularJS Ch15. 커스텀 디렉티브

* 실행 결과1: http://study.jeju.onl/cust-directives.html * 실행 결과2: http://study.jeju.onl/jqlite-directives.html 커스텀 디렉티브는 내장 디렉티브에서 필요한 기능을 제공하지 못할 때, 복잡한 기능을 HTML이 아니라 코드로 표현하려고 할 때, 여러 애플리케이션에서 활용할 만한 기능 모듈을 구현하려고 할 때 활용한다. 커스텀 디렉티브 구현 – 디렉티브 정의: module.directive() – 링크함수 구현: function( scope, element, attrs) – 스코프로부터 데이터 가져오기: scope[ attrs[“속성명”] ] – ...

P

ProAngularJS Ch14. 필터 활용

* 실행 결과 http://study.jeju.onl/filters.html 14장에서는 필터에 대해 설명한다. 굳이 필터를 사용하는 이유는 원본 데이터를 건드리지 않고 애플리케이션의 독립성과 테스트성을 좋게 하기 위해서이다. * 필터의 사용 이유 필터는 뷰에서 보여주려는 애플리케이션의 데이터에 공통으로 적용할 수 있는 변형 로직을 담는다. * 필터의 시점 필터는 디렉티브에서 데이터를 처리하고 뷰에서 데이터를 보여주기 전에 데이터를 포매팅한다. * 지역화 파일 angular ...

P

ProAngularJS Ch13. 컨트롤러 및 스코프

※ 실행결과: http://study.jeju.onl/controllers.html 이장에서는 컨트롤러와 스코프에 대해 설명한다. 주요 내용은 다음과 같다. 명시적 스코프 업데이트 : 다른 프레임워크(jQuery)와의 연동을 위해 변동사항을 직접 주입 : $apply, $watch, $watchCollection 스코프리스 컨트롤러 활용 : 스코프를 전혀 사용하지 않고 데이터 및 동작을 제공 : ng-controller=”simpleCtrl as ctrl” 컨트롤러 상속 활용 : 코드 중복을 줄인다 : 상속받은 데이터 및 동작의 오버라이드 ...

P

ProAngularJS Ch.12 폼 활용

※ 실행결과: http://study.jeju.onl/directives3.html 이번 장에서는 폼 컨트롤과 다양한 입력 양식을 설명한다. 다음은 주요 내용이다. select 엘리먼트 : ng-model, ng-options textarea 엘리먼트 : ng-model, ng-required, ng-minlength, ng-maxlength, ng-pattern checkbox 엘리먼트 : ng-model, ng-change, ng-true-value, ng-false-value input 엘리먼트 : ng-model, ng-required, ng-minlength, ng-maxlength, ng-pattern 폼 유효성 검증 피드백 전달 : CSS를 활용한 피드백 전달, 특수변수를 활용한 피드백 전달 ...

P

ProAngularJS Ch.11 엘리먼트와 이벤트

※ 실행결과: http://study.jeju.onl/directives2.html 이번장에서는 엘리먼트와 이벤트를 처리하는 디렉티브들을 설명한다. 주요내용은 다음과 같다. 기타 어트리뷰트 관리 : ng-href, ng-src, ng-srcset 블리언 어트리뷰트 관리 : ng-checked, ng-disabled, ng-open, ng-readonly, ng-selected 커스텀 이벤트 디렉티브 생성 : tap 이라는 사용자 정의 디렉티브 예제 이벤트 처리 : ng-blur, ng-change, ng-click, ng-dblclick, ng-copy, ng-cut, ng-paste, ng-focus, ng-keydown, ng-keyup, ng-keypress, ng-submit, ng-mousedown, ng-mouseenter, ...

P

ProAngularJS Ch.10 바인딩과 템플릿

※ 실행결과: http://study.jeju.onl/directives.html AngularJS의 데이터 바인딩 및 템플릿 관리에 사용되는 디렉티브들에 대해 설명하고 있다. 디렉티브들은 자연스러운 표현 방식을 통해 복잡한 웹애플리케이션을 구현할 수 있는 기초를 만들어준다. 다루어진 내용은 다음과 같다. 처리되지 않은 템플릿 바인딩 표현식 숨기기 : ng-cloack 조건에 따른 엘리먼트 대체 : ng-switch와 on, 그리고 ng-switch-when과 ng-switch-default : 처음에는 ng-include보다 ng-switch를 쓰는 방식이 좋다 부분뷰 사용 ...

P

ProAngularJS Ch.09 AngularJS 해부

※ 실행결과: http://study.jeju.onl/example.html AngularJS의 중요 구조와 함수들에 대해 설명하고 있다. 다루어진 내용은 다음과 같다. 모듈 생명주기 활용 : constant, config, run 모듈을 활용한 코드 조직화 : 모든 종류를 module로 개별 선언하여 DI로 참조 사용 AngularJS 컴포넌트 정의 : directive, filter, value, service 다중 컨트롤러 생성 다중 뷰 생성 뷰에 컨트롤러 적용 컨트롤러 정의 모듈 활용 다음과 같이 ...