본문 바로가기

분류 전체보기

15. 모듈(Module) 1. 개요 - 모듈은 대체로 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고 재사용성을 높이기 위해 사용한다. - 모듈을 선언하는 코드 angular.module("모듈이름", ["사용할 모듈", ...]) - angular.module 함수를 사용해 모듈을 만들면 모듈 인스턴스가 반환되는데 해당 모듈 인스턴스는 컨트롤러, 서비스, 지사자, 필터들을 담는다. * 참고 모듈 인스턴스 메서드모듈 메서드 설명 Module.config(configFunction) 모듈이 로딩될 때 호출되며 config 함수에 해당 익명 함수로 서비스를 설정할 수 있다. Module.constant(name, object) 모듈에서 사용되는 상수를 등록한다. Module.controller(name, constructor.. 더보기
14. $scope -2 ($scope에서 사용자 정의 이벤트 처리) 1. $scope에서 사용자 정의 이벤트 처리 - AngularJS에서는 웹어플리케이션에 어플리케이션 이벤트를 정의하고 이런 이벤트 처리에 대한 메커니즘을 제공 이러한 사용자 정의 이벤트는 모두 $scope 객체를 통하여 처리되는데 $scope 객체에서 특정 이벤트를 발생시키면 이벤트를 발생한 $scope 객체의 자식이나 부모 $scope에서 해당이벤트를 듣고 있다 처리할 수 있다. 1) 이벤트를 발생시키는 API ① $broadcast(이벤트명, 인자들...) : 자식 $scope에게 특정 이벤트의 이름으로 주어진 데이터와 함께 이벤트를 발생시킨다. ② $emit(이벤트명, 인자들...) : 부모 $scope에게 특정 이벤트의 이름으로 주어진 데이터와 함께 이벤트를 발생시킨다. - $emit과 $bro.. 더보기
13. $scope -1 ($scope의 계층구조 및 $scope 타입) 1. $scope - $scope 는 양방향 데이터 바인딩의 핵심이자 뷰와 컨트롤러를 이어주는 징검다리이다. 사실 $scope는 그저 단순한 자바스크립트 객체에 불과하다 하지만 이 자바스크립트 객체는 연결된 DOM 요소에서 표현식이 계산되는 실행환경이며 뷰와 컨트롤러에서 사용되는 데이터(data)와 기능(function)이 살아 숨쉬는 공간이다.또한 $scope는 위에서 보듯이 계층적 구조를 가진다. 1) $scope 특징 ① 뷰와 컨트롤러를 이어주는 다리 ② 연결된 DOM에서의 실행환경 ③ 양방향 데이터 바인딩 처리 ④ 이벤트 전파 처리 ⑤ 계층적 구조 2) $scope와 컨트롤러의 관계 ① AngularJS의 컨트롤러는 하나의 컨트롤러에 하나의 $scope만을 가지게 된다. ② 컨트롤러 함수 두 개가.. 더보기
12. MVC - 모델, 뷰, 컨트롤러 1. 개요 - 지금까지 웹 어플리케이션을 개발할 때 제이쿼리와 같은 AJAX라이브러리와 jQuery-UI 같은 UI 컴포넌트만 있으면 된다고 생각했다 하지만 문제는 수많은 콜백(callback) 함수와 UI 컴포넌트 조작 코드가 뒤섞여 실제 어플리케이션의 구조화된 코드는 어디서든 찾아 볼 수 없는 스파게티 코드가 되었다. 근래에 들어 이러한 스파게티처럼 제 역할을 찾지 못하고 꼬인 코드를 풀기 위해 많은 자바스크립트 코드가 쏟아져 나왔다. 특히 아키텍처 패턴인 MVC 패턴을 구현한 수많으 자바스크립트 MVC 프레임워크가 그러하다. AngularJS도 자바스크립트 MVC 프레임워크 중 하나다. 하지만 버전이 올라가며 다양한 기능이 추가됨에 따라 MVVM에 가까게 되었고 사용자들간에 MVVM프레임워크라는 주.. 더보기
11. CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿 ◈ CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿 (클래스 지시자/스탈일 지시자) 1) 클래스 지시자 - 특정 상황에서 CSS 클래스를 동적으로 처리할 때 ng-class 지시자를 이용해 템플릿에서 CSS 클래스를 동적으로 처리한다. ... 또는 ... ① 표현식은 CSS클래스 이름을 스페이스로 구분한 문자열이거나, ② CSS 클래스 이름들로 구성된 배열이거나, ③ CSS 클래스 이름이 속성 이름이고 true/false를 값으로 하는 객체여야한다.(객체일 경우 특정 CSS 클래스 이름의 값이 true일 때에 해당 CSS클래스가 요소에 적용된다.) 2) 스타일 지시자 - CSS 클래스가 적용되어 있지 않고 HTML 요소의 스타일을 동적으로 변경하고 싶을 때 ng-style을 사용한다.... - 표현.. 더보기
10. <select> 요소 사용법 ◈ 요소 사용법 - ng-model : 바인딩 대상이 되는 모델명 - name : 폼에서 사용할 이름 - ng-required : 필수 입력 여부 - ng-options : 옵션을 나타내기 위한 별도의 표현식 - 배열 데이터일 때 label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array - 객체 데이터일 때 label for (key, value) in object select as label for (key, value) in object label group by group for (key, .. 더보기
09. 체크박스 타입 사용법 ◈ 체크박스 타입 사용법 - ng-model ; 바인딩 대상이 되는 모델명 - name : 폼에서 사용하는 이름 - ng-true-value : 체크박스를 체크했을 때 바인딩된 모델에 대입할 값(기본값은 true) - ng-false-value : 체크박스의 체크를 해제했을 때 바인딩된 모델에 대입할 값(기본값은 false) - ng-required : 필수 입력 여부 - ng-chang : 사용자의 입력이 발생할 때 실행될 표현식 예제)http://jsfiddle.net/kshmc/oz0g68ge/1/ 더보기
08. 폼과 유효성 검사를 위한 템플릿(폼/입력 지시자) - 폼 양식을 서버로 제출하기 전에 사용자가 입력한 값을 검증할 때가 종종 있다. "꼭 입력해야 할 값을 빼먹지 않았는지", "우편번호 형식에 맞는지, " 날짜 형식이 yyyy/mm/dd가 맞는지" 와 같은 경우다. 이렇게 사용자가 입력한 값이 유효한 값으로 채워졌는지 검사하는 것을 폼 양식 유효성 검증(Form Validation)이라 한다. -AngularJS는 유효성 검증을 손쉽게 할 수 있게 폼 양식 유효성 검증과 관련된 지시자를 제공한다. 1. 텍스트 타입 사용법 1) ng-model : 바인딩 대상이 되는 모델명 2) name : 폼에서 사용하는 이름 3) ng-required : 필수 입력 여부 4) ng-minlength : 입력박스에 입력되는 값의 최소 글자 수 5) ng-maxlengt.. 더보기
07. 비즈니스 로직 처리를 위한 템플릿(컨트롤러 지시자) 1. 컨트롤러 지시자 - AngularJS는 템플릿의 특정 부분을 처리하는 자바스크립트 함수를 선언할 수 있다. - 데이터를 반복해서 출력하거나 조건에 따라 출력하는 코드는 모두 템플릿에 작성하면 된다. 하지만 데이터를 가공하거나 서버에 데이터를 저장하고 서버로부터 데이터를 불러오는 등의 어플리케이션 로직에 해당하는 코드는 자바스크립트로 작성해야 한다. 그래서 템플릿의 특정 부분을 처리하는 자바스크립트 함수 이름을 템플릿에 명시해야 한다. 이러한 함수를 컨트롤러 함수라고 하고 ng-controller 지시자를 이용해 템플릿이 컨트롤러 함수를 참조할 수 있게 해준다. ◈ ng-controller 사용... - 여기서 표현식은 전역적으로 접근할 수 있는 자바스크립트 함수의 이름 또는 모듈로 등록된 컨트롤러 .. 더보기
06. 조건적인 데이터 표현을 위한 템플릿(조건 지시자) 1. ng-switch ◈ ng-switch의 사용법 ... - ng-show와 ng-hide 지시자는 ng-if지시자와 마찬가지로 표현식 결과값(참/거짓)에 따라 해당 요소를 화면에 보여주거나 숨긴다.ng-show 지시자는 참일 때 요소를 보이게 하고 거짓일 때 숨기며, ng-hide 지시자는 반대로 참일 때 숨기고 거짓일 때 보이게 한다.실제로 요소자체는 그대로이지만 CSS의 display 속성의 값이 참일 때 block 이 되고, 거짓일 때 none이 된다. 더보기

티스토리툴바