angularjs 정리3 ngApp/ngBind

hello-world 2015. 12. 3. 14:27

728x90

ng-app 지시어

ngApp - 형: angular.Module

읽어들인 모듈명을 임의로 지정한다.

angular어플리케이션으로써 초기동작시에 이 directive를 사용한다.

이 directive는 어플리케이션의 루트 즉 전역이 되는 요소를 지정한다.

통상, 페이지 자체의 전역요소가 지정된다.

지시어에 모듈명 지정.

document의 내부에 최초로 찾게된 ngApp이 자동동작, 즉 angularjs의 관리 대상이 된다.

HTML 도큐멘트내에 여러 어플리케이션을 사용하는 경우에는

angular.bootstrap을 사용하고 수동으로 시작하지 않으면 안된다.

어플리케이션은 중첩할 수 없기에....

따라서 아래처럼 angularjs만 관리하게 될 부분에 ng-app 지시자를 선언하면 된다.

<html>

<body>

......여러 어플리케이션들이 요소 지정된다고 가정....................

<div ng-app>

...여기에 선언되는 태그 전부 angularjs에 관리 된다.....

</div>

</body>

</html>

만약 ngApp directive가 html 요소에 없다면

document는 컴파일되지 않고 {{1+2}} 이 3 이 되는 것처럼 처리되지 않는다.

ng-bind 지시어

인터폴레이션 문법(이중괄호표기 문법){{}} 과 결과는 같게 나온다.

index.html에서의 인터폴레이션 문법 {{}} 주의

대부분의 템플릿엔 {{ }} 문법을 사용할 수 있다. 그러나 index.html 페이지

에서 데이터 바인딩을 할 경우엔, 이중 중괄호 문법 대신 ng-bind 지시어를 사용해야

사용자가 데이터 로딩 중에 이상한 화면을 보지 않게 된다.

ng-model 지시어

ng-model속성을 사용하면 요소를 모델 속성에 바인딩할 수 있다.

텍스트 인풋 / 라디오버튼 / 체크박스 같은 일반 폼요소 모두 적용된다.

728x90