Angular ng 속성

Angular.js 라이브러리는 문자열 "ng"로 시작하는 속성으로 기능을 적용합니다.

ng 바인드 속성

ng-model - Model 객체를 생성합니다. 

ng-model 속성은 input 태그에 입력합니다. 입력한 모델은 자동으로 컨트롤러와 동기화 됩니다.

예)

<input type="text" ng-model="name"/>

<h1>{{ name }}</h1>

ng-bind - 모델을 바인딩합니다.

특정 태그의 내부 영역을 특정 모델과 동기화하겠다는 의미입니다.

예)

<input type="text" ng-model="name"/>

<h1 ng-bind="name"></h1>

ng-show - 참이면 태그를 보이게 하고 거짓이면 보이지 않게 합니다.

ng-hide - 참이면 태그를 보이지 않게 하고 거짓이면 보이게 합니다.

ng-disabled - 참이면 disabled 속성을 부여하고 거짓이면 부여하지 않습니다.

ng-readonly - 참이면 readonly 속성을 부여하고 거짓이면 부여하지 않습니다.

ng-checked - 참이면 checked 속성을 부여하고 거짓이면 부여하지 않습니다.

ng-multiple - 참이면 multiple 속성을 부여하고 거짓이면 부여하지 않습니다.

예)

<input type="checkbox" ng-model="check"/>

<h1 ng-show="check">Lorem ipsum dolor amet_1</h1>

<h1 ng-hide="check">Lorem ipsum dolor amet_2</h1>

<input ng-disabled="check" value="disabled confirm" />

ng 이벤트 속성

ng-check  

ng-click  

ng-dbclick  

ng-mousedown  

ng-mouseenter  

ng-mouseleave 

ng-mousemove  

ng-mouseover  

ng-mouseup 

ng-submit  

ng-keydown  

ng-keyup  

예)

function basicController($scope){

$scope.messageBox = function(event){

alert($scope.message);

}

}

<div ng-controller="basicController">

<input type="text" ng-model="message"/>

<button ng-click="messageBox( $event )">Show</button>    // 이벤트 객체 ($event)를 전달

</div>

ng 외부 템플릿 속성

Angular.js 라이브러리는 별도로 분리된 템플릿 파일을 현재 페이지에 추가하는 기능을 지원합니다.

ng-include - 외부 템플릿 적용을 선언합니다.

src - 외부 템플릿 파일을 지정합니다.

예)

Template.html 파일

<h1>{{ title }} </h1>

<hr />

HTMLPage.html

function basicController($scope){

$scope.template = 'template.html';

$scope.title = 'Template Basic';

}

<div ng-controller="basicController">

<div ng-include src="template"></div>    // 템플릿 적용

</div>

[error]

XMLHttpRequest cannot load file:///D:/modernWEB/Template/Template.html. 

Received an invalid response. Origin 'null' is therefore not allowed access.

// 템플릿 내용을 ajax로 loading 하여 화면에 표시한다.