- 템플릿 시스템 : 화면과 데이터의 분리를 용이하게 함
1) 템플릿의 이해
- 브라우저에서 사용자가 보는 화면을 그리려면 HTML 문서를 작성해야 한다. 작성한 HTML 문서를 웹서버에 배포해 두면 사용자의 웹 브라우저가 URL을 받아
서버로 요청을 보내고 웹 서버는 응답으로서 요청한 HTML문서를 보내준다. 웹 어플리케이션도 마찬가지로 HTMLL 문서를 작성해야 한다. 하지만 한번 작성하면 오랫동안 바뀌지 않는 웹 페이지와는 다르게 브라우저의 요청이 있을 때마다 주어진 데이터에 따라 내용이 바뀌어야 한다.
2)템플릿 작성 시 사용되는 AngularJS의 기능
- 지시자 : 기본 HTML을 확장하거나 새로 추가한 요소나 속성이다.
ng-repeat, ng-app 등이 지시자에 해당한다. 또한 사용자가 만든 재사용할 수 있는 위젯과 같은 지시자도 여기에 해당한다.
- 마크업 : 기본 HTML 마크업과 이중 중괄호 -{{표현식}}
- 필터 : 사용자에게 보여주는 데이터의 형식을 필터 처리한다.
- 폼 컨트롤 : 입력 상자의 유효성 검사를 위해 AngularJS가 폼 태그를 확장했다. 폼 태그를 사용하게 되면 자동으로 폼 컨트롤을 사용한다.
3) 이중 중괄호와 AngularJS 표현식
<h1>hello {{person.name}}</h1>
- AngularJS는 템플릿에서 이중 중괄호('{{}}')를 사용해 특정 위치에 표현할 데이터를 지정한다.
◈ AngularJS 표현식과 자바스크립트 표현식과의 차이점
① 객체의 접근 : 기본적으로 자바스크립트는 모든 객체를 최상위 객체인 window 객체안에서 찾는다.
이와 반대로 AngularJS는 표현식에 사용된 객체를 scope안에서 찾는다.
가령 {{user}}라고 작성했다면, user 객체에 접근하는데 window.user가 아닌 scope.user로 scope 객체에 접근하다.
② undefined와 null 무시 : 자바스크립트 표현식으로 ovjectA.propertyA라고 작성했다면 만약 objectA가 선언되어 있지 않으면
ObjectA는 undefined일 것이다. Undefined에서 propertyA에 접근하려 했으니 자바스크립트에서는 오류가 발생한다.
이와 다르게 AngularJS는 오류를 발생시키지 않고 무시해 버린다.
즉, 템플릿에 {{objectA.propertyA}}라고 작성되어 있고 scope.objectA가 선언되어 있지 않더라도 아무런 오류가 발생하지 않고
단지 화면에 아무런 값도 출력하지 않는다.
③ 제어문 작성이 안됨 : if문과 같은 조건절이나 for문과 같은 반복문 그리고 throw문은 작성할 수 없다.
④ 필터 : AngularJS의 필터를 표현식에서 사용할 수 있다. 필터는 파이프(|)를 이용해서 표현식에서 사용할 수 있다.
가령 money가 있고 2000이라는 값이 할당돼 있다면 이때 2000을 2,000원 혹은 $2,000포 표현하고 싶을때
currency 필터를 사용할 수 있다. 템플리사에서 {{money|currency}}와 같은 방식으로 작성하면 된다.
물폰 필터를 직접 만드는 방법도 제공하고 있다.
◈ AngularJS 표현식 예제 코드
<body ng-init="person={name: '구라', favorite : ['사과','딸기','포도']}">
<h1>Hello {{person.name}}</h1>
<p>좋아하는 과일의 개수 : {{numberOfFavorite=person.favorite.length}}</p>
<p>과일 갯수 * $100 = {{numberOfFavorite * 100 | currency}}</p>
<p>김구라가 맞나요? {{person.name=='구라'}}</p>
<p>좋아하는 과일 수가 4개보다 많나요? {{numberOfFavorite>4}}</p>
<p>scope에 없는 객체 접근 하면? {{car.type.name}}</p>
</body>
◈ AngularJS 표현식 결과
'AngularJS' 카테고리의 다른 글
| 08. 폼과 유효성 검사를 위한 템플릿(폼/입력 지시자) (0) | 2015.03.07 |
|---|---|
| 07. 비즈니스 로직 처리를 위한 템플릿(컨트롤러 지시자) (0) | 2015.03.07 |
| 06. 조건적인 데이터 표현을 위한 템플릿(조건 지시자) (0) | 2015.03.06 |
| 05. 반복적인 데이터 표현을 위한 템플릿(반복 지시자) (0) | 2015.03.06 |
| 03. AngularJS 부트스트랩 (0) | 2015.03.06 |
