본문 바로가기

AngularJS

19. 의존관계 주입과 서비스 - 2 (서비스 생성하기) [1] Module.factory를 이용한 Hello 서비스 만들기-서비스를 정의하려면 모듈 인스턴스가 필요하다.angular.module()함수를 이용해 모듈 인스턴스를 생성할 수 있다.이 모듈인스턴스는 서비스를 만들 수 있는 다양한 메서드를 제공한다.{{hello}} - 위 코드에서 모듈 인스턴스의 factory() 메서드를 호출해 hello 서비스를 만들었다.factory 함수의 첫 번째 인자로 서비스 명을 주고 다음 인자로 서비스를 주입받을 때 반환할 객체의 팩토리 함수를 준다.이렇게 만든 hello 서비스는 컨트롤러에서 인자로 주입해 사용할 수 있다.위 코드에서는 hello 서비스가 mainCtrl 컨트롤러에 AngularJS에 의해 주입된 것이다.- 어떻게 hello 인스턴스가 메인 컨트롤러에.. 더보기
19. 의존관계 주입과 서비스 - 1 (서비스란?) [1]. 서비스의 개요 1. 스캇 앨런(K. Scott Allen)이 작성한 AngularJS 추상화 : 서비스란? 1) 어플리케이션 공통 로직으로서의 서비스 -컨트롤러, 지시자, 다른 서비스는 모두 특정 서비스의 하나 이상의 의존관계를 가질 수있거나 갖지 않을 수 있다. 즉, 서비스는 어플리케이션의 각 다른 부분에서 공통으로 사용하는 코드를 담기에 좋은 곳이라는 말이다. 가령 여러 컨트롤러에서 특정 계산 알고리즘을 필요로 한다면 해당 알고리즘을 구현한 코드가 있는 서비스를 만들어 해당 알고리즘을 필요로하는 컨트롤러가 이 서비스를 사용하면 되는 것이다. 2) 싱글톤(Singleton)으로서의 서비스 - AngularJS는 서비스를 싱글톤으로 관리한다. 즉, 어플리케이션에서 서비스의 인스턴스를 오직 하나만.. 더보기
18. 지시자 - 2 (사용자 정의 지시자) 1. 사용자 정의 지시자 개요 - AngularJS는 지시자를 이용해 웹 UI 컴포넌트를 만들 수 있는 메커니즘을 제공한다.우리가 만드는 UI 컴포넌트는 양방향 데이터 바인딩을 제공할 수도 있고 도메인에 특화된 HTML태그를 구성할 수도 있다.가령 다음과 같은 태그를 만들 수도 있다.패널 1hello 패널 1 패널 2hello 패널 22. 간단한 지시자 정의 으로 작성하면 화면에 name 속성의 값을 대상으로 인사말을 보여주는 간단한 지시자를 만들 수 있다. - 위 예제 코드를 보듯이 directive 메서드는 첫번째 인자로 지시자의 이름을 요구한다.지시자 이름은 나타표기법으로 작성해야 한다.그 다음으로 지시자 설정함수를 줄 수 있는데 이 함수에서 다른 서비스의 주입을 받고 싶을 때는 서비스 이름으로 인.. 더보기
17. 지시자 웹 표준 준수 대비 및 오래된 인터넷 익스플로러 지원하기 1. 지시자 웹 표준 준수 대비 - AngularJS의 지시자를 사용하면 웹 표준을 준수하지 않았다는 결과를 얻게 되는데 AngularJS에서는 이를 위한 별도의 방법을 제공한다. - 바로 x- 또는 date-를 사용할 지시자 앞에 붙이는 것이다. 예를 들면 ng-click 을 사용할 때 x-ng-click 또는 data-ng-clic으로 사용한다. 이렇게 사용하면 웹 표준 준수에서 좋은 결과를 얻을 수 있다. 2. 오래된 인터넷 익스 플로러 지원하기 - IE7이나 IE8과 같은 오래된 브라우저에서는 요소명으로 호출하려면 다음 코드와 같이 AngularJS가 템플릿을 컴파일하기 이전에 해당 요소명(DOM)이 생성돼야한다. 더보기
16. 지시자(directive) - 1 1. 개요 - AngularJS에서는 기존 HTML에서 제공하지 않는 기능을 확장하는 방식을 지시자(Directive)로 제공한다. - 지시자 함수 : AngularJS에서는 해당 DOM과 연결된 하나의 함수를 만들고 이 함수가 DOM을 조작하여 새로운 기능을 추가하는 등의 행위를 한다. 지시자 함수는 연결된 특정 DOM에 $scope를 연결하거나 연결된 DOM을 조작(manipulate)하여 특정 행위를 정의 할 수 있다. 이런 지시자 함수를 이용해 HTML을 확장하는 것이다. 2. HTML에서 지시자를 사용하는 방법 - 지시자의 이름은 낙타표기법(camel case)으로 작성한다. 이런 지시자의 이름을 HTML(템플릿)에서는 영문자 중간에 대문자로 시작되는 부분에 : , -, 또는 _문자를 넣고 대문.. 더보기
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을 사용한다.... - 표현.. 더보기

티스토리툴바