nalaolla

필터(Filter) 사용 AJS 필터는 크게 두 가지 용도로 사용됩니다. 첫번째로 데이터를 보이는 폼을 바꾸는 데 사용됩니다. 두번째로 여러 데이터 중 조건에 맞는 데이터만 보여줄 때 사용됩니다. 즉, 포맷팅(Formatting)과 필터링(Filtering)하는데 사용된다고 볼 수 있습니다. 1. AngularJS에서 제공하는 필터 아래는 AJS에서 제공하는 필터와 그에 대한 설명입니다. [출처: AngularJS] 그럼 예제를 통해서 포맷팅 필터를 살펴보도록 합시다. * ajsFilter.html 12345678910111213141516171819202122232425262728293031323334353637 angular.module('filterExam', []). controller('main..

의존관계 주입과 서비스 위 개념은 AngularJS의 중요한 개념 중 하나입니다. 의존관계 주입은 AJS 기반의 애플리케이션을 개발하는 데 있어서 항상 있기 마련이고 서비스가 없는 AJS 웹 앱이란 상상하기 어렵습니다. 1. AJS에서의 의존관계 주입 하나의 객체가 다른 객체를 사용하는 순간 의존관계가 성립됩니다. AJS 개발자 문서에는 자바스크립트 상에서 객체들 사이의 의존관계가 크게 3 가지 경우에 생성된다고 합니다. - new 키워드 - 전역변수 참조 - 인자를 통하여 참조를 전달 처음 1번과 2번은 의존관계가 강하게 연결되었고 3번은 느슨하게 연결되었다고 말할 수 있습니다. 아래 예시를 통해 확인해봅시다. 1234function demoCtrl() { var bookmark = new Bookma..

지시자(Directive) - 2 3-4. scope 설정 완전 정복 scope를 잘못 설정하면 의도치 않은 결과가 발생하므로 분명한 의도에 맞는 scope를 설정해야 합니다. 가령 지시자를 재사용할 수 있는 컴포넌트를 생각하고 만들려면 지시자가 사용하는 scope는 다른 지시자와 독립적인 공간이어야 하고, 같은 지시자가 하나의 페이지에서 여러 번 사용되어도 서로 영향을 주지 않아야합니다. 그럼 상황별로 scope를 설정하는 방법을 알아봅시다. 부모 scope를 상속받는 scope 설정 지시자 설정 객체에 scope 속성에 true 값을 주면 부모 scope를 상속받는 새로운 scope가 생성됩니다. hello 지시자에 scope 설정을 true로 한 예제 코드입니다. * ajsdirect6.html 1..

지시자(Directive) HTML 문서는 여러 태그로 이루어지며, 이 태그들은 DOM으로서 계층구조입니다. 지금까지는 jQuery나 자바스크립트를 이용해서 DOM을 제어했습니다. AJS에서는 이러한 기존 HTML에서 제공하지 않는 기능을 확장하는 방식을 지시자로서 제공합니다. 기존 방식은 특정 DOM에 id 속성을 부여하거나 어느 DOM 아래에 있는 특정 class를 찾거나 하는 방식으로 자바스크립트에서 DOM을 선택한 후 제이쿼리 플러그인을 적용하거나 새로운 DOM을 직접 만들어 삽입하는 방식을 취했습니다. AJS에서는 해당 DOM과 연결된 하나의 함수를 만들고 이 함수가 DOM을 조작하여 새로운 기능을 추가하는 등의 행위를 할 수 있습니다. 이 함수가 특정 DOM과 연결되는 지시자 함수입니다. 지시..

모듈(Module) 모듈은 대체로 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고 재사용성을 높이기 위해 사용합니다. 최근에 자바스크립트에서는 코드의 복잡도를 낮추기 위해 많은 자바스크립트 라이브러리를 모듈화할 필요성이 생겼고, 모듈을 이용한 개발이 거의 필수가 되었습니다. jQuery 와 같은 많은 라이브러리는 모듈 패턴을 이용해 모듈로 구현되었고 많은 웹 앱 또한 모듈 패턴을 이용해 개발되었습니다. AJS에서도 이러한 모듈을 만들 수 있는 기능을 제공하고 별도의 모듈 패턴을 구현할 필요가 없는 API를 제공합니다. 다음은 모듈 선언 코드입니다. 12angular.module("모듈이름", ["사용할 모듈", ...]) Colored by Color Scriptercs angular.module..

MVC - Model, View, Controller AngularJS는 자바스크립트 MVC 프레임워크 중 하나입니다.  아래는 기본적인 MVC 패턴에 대한 설명입니다. - Model  도메인에 해당하는 정보를 나타내는 오브젝트. 대체로 애플리케이션의 데이터와 행위를 포함하고 있음.  - View  모델의 정보를 UI에서 보여주는 역할. 하나의 모델을 다양한 뷰에서 사용할 수도 있고, 여러 모델을 하나의 뷰에서 사용할 수 있음 - Controller  애플리케이션에서 사용자의 입력을 받아 모델에 변경된 상태를 반영. 이는 모델을 변하게 하여 결국 뷰를 갱신. 컨트롤러는 직접 뷰를 변경하는 것이 아니라 로직을 통해 모델을 변경하고 그 결과가 뷰로 뿌려지는 것. MVC 패턴을 이용하면 애플리케이션 개발과 유..

템플릿 시스템과 바인딩 5. 조건적인 데이터 표현을 위한 템플릿 템플릿을 작성하다보면 조건에 따라 다른 코드를 작성하고 싶을때가 있습니다. 자바스크립트에서는 이렇게 특정 조건일 때 특정 코드 블록을 지정하는 데 조건문을 이용합니다. AngularJS의 템플릿에서도 자바스크립트의 switch와 if문과 비슷한 기능의 지시자를 제공합니다. ng-switch와 ng-if가 이에 해당합니다. 비슷한 지시자로 ng-show와 ng-hide 지시자가 있습니다. 이 두 지시자는 조건적으로 적용된 DOM의 CSS 속성 중 display 속성을 제어하는 지시자입니다. 다음은 ng-switch 사용법입니다. ............ ng-switch 문은 어떠한 HTML 태그에서도 사용할 수 있으며 부모 요소와 자식 요소가..

템플릿 시스템과 데이터 바인딩 구조적이고 재사용하기 좋은 웹 어플리케이션을 개발하려면 화면과 데이터의 분리가 필수적입니다. 나아가 데이터와 화면 사이의 싱크도 필요합니다. 기존 JS 기반의 웹 어플리케이션 대부분이 데이터와 화면 사이가 끈끈하게 이어져 있고 데이터와 화면 사이의 싱크를 위해서 반복적인 코드를 사용했습니다. 그렇게 하다보니 스파게티 코드(Spaghetti Code)라 하여 화면 처리 코드와 데이터 처리 코드가 서로 엉켜있어 유지보수하기 어렵고 재사용 불가능한 어플리케이션을 만들게 됩니다. 하지만 AngularJS는 화면과 데이터의 분리를 용이하게 하는 템플릿 시스템과 데이터와 화면 사이를 싱크할 수 있게 하는 데이터 바인딩을 제공함으로써 앞선 문제점을 말끔하게 해결해 줍니다. 1. 템플릿의..

AngularJS 부트스트랩(Bootstrap) 1. ng-app 지시자를 이용한 부트스트랩 AngularJS 웹 app이 되는 조건은 단순히 Script 태그로 angular.js 파일을 로드하는 것으로 충족되는 것이 아닙니다. 특정 태그에 ng-app 속성을 추가해서 AngularJS 부트스트랩을 적용해야 합니다. 아래 예제는 간단한 AngularJS 웹 app 예제입니다. * simpleajs.html 123456789101112 Simple Angular JS App Hello {{name}} world ! Colored by Color Scriptercs ng-app은 AngularJS 웹 app의 범위를 제한하는 지시자이자 제한자입니다. ng-app 지시자를 추가한 노드가 루트 노드가 되어 하..

AngularJS 살펴보기 1. To-Do 웹 어플리케이션 AngularJS를 간단히 살펴보기 위해서는 To-Do 어플리케이션을 구현해보는 것입니다. 이번 장에서 간단하게 할 일을 추가, 수정할 수 있는 웹을 AngularJS를 통해서 작성해 보겠습니다. todo 폴더를 생성하여, index.html을 아래와 같이 작성합니다. * index.html 12345678910 My To-Do App AngularJS To-Do App cs 여기까지 작성 후, 트위터 Bootstrap을 적용하겠습니다. http://getbootstrap.com/ 에 접속해서 내려받아서 라이브러리에 추가할 수 있지만, CDN을 통해서 적용할 수도 있습니다. 위에서 작성한 index.html의 head 태그안에 추가해줍니다. 그리..