AngularJS를 활용하여 화면에서 입력받은 문자열을 출력하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 AngularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
웹 페이지에 div 태그를 만들고 ng-app 지시문을 작성한다.
ng-app 지시문은 AngularJS 애플리케이션을 정의하는 지시문이다.
<div ng-app="">
input 태그에 ng-model 속성을 작성하고 ng-model 속성의 값은 "name"으로 한다. span 태그에 ng-bind 속성을 만들고 그 이름을 속성의 값으로 입력한다. 그렇게 되면 ng-model 속성이 ng-bind 속성에 바인딩되어 입력하는 값이 바로 <span> 태그에 출력된다.
<input type="text" ng-model="name">
|
동적 바인딩
|
<span ng-bind="name"></span>
예제코드
<!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>Good Morning. <span ng-bind="name"></span></h1>
</div>
<hr>
</body>
</html>
브라우저에서 화면을 열면 아래의 그림과 같이 input 태그 placeholder에 입력한 문자열이 회색으로 표시된다.
placeholder의 문자열은 값을 입력하면 바로 사라진다.
ng-model을 정의한 항목과 ng-bind로 정의한 항목이 동적으로 연계되어 입력된 값을 바로 표시한다.
'■ 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] 안녕, 앵귤러 제이에스 (Hello, AngularJS) (0) | 2023.02.22 |
댓글