AngularJS를 활용하여 화면에서 입력한 문자열을 페이지에 바로 출력해 보자. AngularJS를 페이지에서 사용하려면 Aangular 파일을 내려받아 파일로 포함을 하던지 다음과 같이 AngularJS CDN(Contents Delivery Network)을 script 태그로 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
CDN을 추가하고 나서 div 태그에 ng-app 속성을 만든다. AngularJS는 ng-app 속성으로 단일 모듈을 생성할 수 있다.
<div ng-app="">
그리고 input 태그에 ng-model 속성을 만든다. ng-model 속성의 값은 "name"으로 하고 그 이름으로 익스프레션을 {{ }} 추가한다. 화면에서 ng-model을 지정한 항목에서 값을 입력하면 익스프레션에 바인딩 되어 동적을 값이 표시된다.
<input type="text" ng-model="name">
|
동적바인딩
|
{{ name }}
예제코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>
Name : <input type="text" ng-model="name" placeholder="Input name">
</p>
<h1>Hello {{name}}</h1>
</div>
<hr>
</body>
</html>화면을 처음 열면 아래와 같이 표시된다. input 태그 placeholder에 입력한 문자열이 희미하게 보인다. 마우스로 클릭하고 값을 입력하면 placeholder 문자열은 바로 사라진다.
ng-model를 정의하고 익스프레션으로 기술을 한다. 입력항목에 값을 입력하면 입력한 값이 바인딩되어 바로 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 (0) | 2023.02.22 |
|---|---|
| [AngularJS] 앱(ng-app)과 컨트롤러(ng-controller) 생성 (0) | 2023.02.22 |
| [AngularJS] ng-init 초기값 및 산술연산 (0) | 2023.02.22 |
| [AngularJS] ng-init 초기값 설정 (0) | 2023.02.22 |
| [AngularJS] ng-model과 nb-bind로 동적으로 연동 (0) | 2023.02.22 |
댓글