[angularJS] 선언적 DOM 메소드, 표현식

선언적 DOM 메서드

디렉티브이며, 스크립트로 작성해서 DOM에 기능을 제공한다.

ng-show와 ng-click을 사용한 토글 네비게이션 예제로 확인해본다.

<div> <a href="" ng-click="toggle = !toggle">Toggle nav</a> <ul ng-show="toggle"> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul> </div>

- 이 코드를 실행시키면 아래와 같이 실행되는데, "Toggle nav"를 클릭하면 밑의 Link 1~3이 사라지거나 보인다. 

말 그래도 토글이다.

 

표현식

어떤 식으로 작성하는지 먼저 확인해보자.

<p>{{ data.length > 0 && 'My data' || 'No data'}}</p>

이런 식으로 작성하면, data.length가 0보다 크다면, My data. 작다면, No data라고 출력하는 문이다.

if문을 쓰지 않아도 아주 짧게 표현할 수 있다.

내 생각 - javacript에서

data.length > 0 ? 'My data' : 'No data'

이것과 같은 것 아닌가 ? 아직은 정확한 차이를 잘 모르겠다.

html파일에서 표현할 수 있다는 것 때문인가 ?

*출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/