태그: Angular

S

SPA와 Spring MVC 조합시 default page 설정

SPA, 예를 들어 Angular 빌드 결과를 Spring Boot(MVC) static 폴더에 올리고, http://host:port/ 만으로 index.html 페이지로 이동하게 하려면 redirect 설정을 해야 함 Angular 에서는 Client-side Routing을 제공하기 때문에 Spring의 Server-side Routing의 제어가 통하지 않는다. 다만 index.html로만 잘 연결해도 클라이언트가 라우팅 상태를 잃지 않고 subdirectory에 대한 path 연결을 이어갈 수 있다. ex) http://host:port/#/subpage 에서 refresh(F5) 시도 할 ...

P

ProAngularJS Ch.20 Ajax 서비스 및 프로미스

#실행결과 http://study.jeju.onl/ch20/ajax.html 이장에서는 Ajax 기능을 활용하기 위한 $http와 프로미스 제어를 위한 $q에 대해서 설명하고 있다. 두 서비스는 Ajax의 비동기적 실행을 제어하기 위해 필수적인 기능이다. 이를 이용하여 REST 서비스를 구현할 수 있다. 주 내용은 다음과 같다. Ajax 요청 수행 – $http 의존성 선언, $http.get().success() 기능 정의 – $http 메서드: get(), post(), delete(), put(), head(), jsonp() – Ajax ...

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를 쓰는 방식이 좋다 부분뷰 사용 ...