티스토리 뷰

Programming language/Angularjs(1.x)

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
반응형
저작자표시 비영리 변경금지

'Programming language > Angularjs(1.x)' 카테고리의 다른 글

angularjs 에서 Service/Factory  (0) 2016.10.18
gulp 설정  (0) 2016.04.20
angularjs 요약2/ngController/ngRepeat  (0) 2015.11.26
angularjs 1.2x ngAnimate 에 대한 요약  (0) 2015.11.25
angular js 요약1  (0) 2015.08.12
댓글