<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name">
<h1>Hello {{name}}</h1>
<p ng-bind='name'></p>
</div>
</body>
</html>
1. 앵귤러JS사용 하려면 스크립트경로를 추가해줘야된다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
2,NG-APP은 <DIV> 요소는 AngularJS 응용 프로그램의 "소유자"입니다 AngularJS을 알려줍니다.
NG-MODEL은 애플리케이션 변수 이름 입력 필드의 값을 결합한다.
NG-BIND 지시문은 응용 프로그램 변수 이름에 <P> 요소의 innerHTML을 결합한다.
출력결과
input에 123을 작성하게 되면
{{name}}에 123이 입력되고
동시에 바인드된 <p>태그에서도 123이 작성된다.
'JAVA > AngularJS' 카테고리의 다른 글
| AngularJS ng-init를 이용한 여러가지 초기화방법 (0) | 2016.01.28 |
|---|---|
| AngularJS (0) | 2016.01.28 |
| AngularJS 흔히 알고있는 Print와 같은 {{}} (0) | 2016.01.28 |
| AngularJS 변수초기화해주는 NG-INIT (0) | 2016.01.28 |
왕왕왕왕
왕