Angular JS CDN 적용
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Angular JS를 이용해 동적 웹페이지를 구성할 때 원하는 곳에 원하는 데이터를 출력
{{출력값}}
<div ng-app="" ng-init="data1=100;data2=200;data3='문자열1';data4='문자열2';obj={a1:100, a2:200};array=[10,20,30]">
<p>5+5 : {{5+5}}</p>
<p>data1 : {{data1}}</p>
<p>data1+data2 : {{data1+data2}}</p>
<p>문자열 : {{'문자열'}}</p>
<p>data3 : {{data3}}</p>
<p>data3+data4 : {{data3+data4}}</p>
<p>obj.a1 : {{obj.a1}}</p>
<p>obj.a2 : {{obj.a2}}</p>
<p>array[0] : {{array[0]}}</p>
<p>array[1] : {{array[1]}}</p>
<p>array[2] : {{array[2]}}</p>
</div>
<div ng-app="myApp"> ... </div>
<script>
// myApp 태그를 객체로 만들어서 사용
var app = angular.module("myApp",[]);
</script>
<script>
var app = angular.module("test_app",[]) // module() test_app 이라는 객체를 app이라는 변수에 넣음
app.controller("test_controller",function($scope){ // controller에서 사용할 멤버 정의
$scope.data1 = 100
$scope.data2 = 200
});
</script>
</head>
<body>
<div ng-app="test_app" ng-controller="test_controller">
<p>data1 : {{data1}}</p>
<p>data2 : {{data2}}</p>
</div>
<script>
var app = angular.module("test_app",[])
app.directive("directive1",function(){
return {
restrict : "E", //태그에만 적용
template : '사용자 정의 지시자1'
}
});
app.directive("directive2",function(){
return {
restrict : "A", // 속성에만 적용
template : '사용자 정의 지시자2'
}
});
app.directive("directive3",function(){
return {
restrict : "C", // 클래스에만 적용
template : '사용자 정의 지시자3'
}
});
app.directive("directive4",function(){
return {
restrict : "M", // 주석에만 적용
replace : true, // 주석 대체 여부
template : '<p>사용자 정의 지시자4 : 사용자 정의 지시자4(반드시 directive: 써줘야함)</p>' //html 요소가 있어야함
}
});
app.directive("directive5",function(){
return {
restrict : "EC",
template : "사용자 정의 지시자5"
}
});
</script>
</head>
<body>
<div ng-app="test_app" ng-init="data1=100;data2='문자열';data3='red';data4=[100,200,300]">
<p>data1 : {{data1}}</p>
<p>data2 : {{data2}}</p>
<p>data3 : {{data3}}</p>
<p style="color:{{data3}}">{{data2}}</p>
<p ng-repeat="a1 in data4">{{a1}}</p> <!-- p태그 반복 -->
<p><directive1></directive1> : <directive1></directive1></p>
<p>사용자 정의 지시자1 : <span directive1>(태그에만 적용되어 보이지 않음)</span></p>
<p>사용자 정의 지시자2 : <span directive2></span></p>
<p>사용자 정의 지시자3 : <span class="directive3"></span></p>
<!-- directive: directive4 -->
<p>사용자 정의 지시자5("E") : <directive5></directive5></p>
<p>사용자 정의 지시자5("C") : <span class="directive5"></span></p>
</div>
<!-- ng-app 을 쓰면 Angular JS 모듈객체가 됨, 가져다 쓰지 않기 때문에 이름 부여하지 않음 -->
<div ng-app="">
data1 : <input type="text" ng-model="data1" /><br />
data2 : <input type="text" ng-model="data2" /><br />
<hr />
data1 : {{data1}}<br>
data2 : {{data2}}<br>
<hr />
<!-- input 입력시 {{data1}}에 바로 출력됨 -->
</div>
<form ng-app="" name="myForm"> <!-- ng-model 지시자 써줘야함; model 지시자가 세팅되어있는 태그를 감시해서 유효성 검사에 위배됐을 경우 해당 메세지를 보여줌 -->
<input type="number" name="number1" ng-model="number0" /><br />
<span ng-show="myForm.number1.$error.number">숫자 입력 오류</span><br> <!-- 실시간으로 오류 체크, input name과 일치시켜줘야함 -->
<input type="email" name="email1" ng-model="email1"/><br />
<span ng-show="myForm.email1.$error.email">이메일 입력 오류</span> <br />
<button type="submit">확인</button>
</form>
<form ng-app="" name="myForm2">
<input type="email" name="email2" ng-model="email2"/>
</form>
<p>valid(유효한 값일 경우 true 반환) : {{myForm2.email2.$valid}}</p>
<p>dirty(초기값에서 변경되었을 때 true) : {{myForm2.email2.$dirty}}</p>
<p>touched(포커스를 잃었을 경우, 클릭한 적이있을 경우 true) : {{myForm2.email2.$touched}}</p>
<!-- 한번 클릭 후 빠져나오면 false -->
<input type="email" name="email3" class="test_css" ng-model="email3" />
/* 비어있을 경우 */
.test_css.ng-empty {
background-color: aqua;
}
/* 입력이 되어 있을 경우 */
.test_css.ng-not-empty {
background-color: fuchsia;
}
/* 클릭한 적이 있을 경우 */
.test_css.ng-touched {
width : 200px;
}
/* 클릭하기 전 */
.test_css.ng-untouched {
width : 300px;
}
/* 유효한 값이 들어 있을 때 */
.test_css.ng-valid {
height: 200px;
}
/* 유효한 값이 들어 있지 않을 때 */
.test_css.ng-invalid {
height: 100px;
}
/* 최초에 입력된 값과 다른 값이 입력된 경우 */
.test_css.ng-dirty {
color: white;
}
<script>
var app = angular.module("test_app",[])
app.controller("controller1",function($scope){
$scope.data1 = 100;
$scope.data2 = 200;
$scope.changeValue = function(){
$scope.data1 = 1000;
$scope.data2 = 2000;
}
});
</script>
<div ng-app="test_app" ng-controller="controller1">
<p>data1: {{data1}}</p>
<p>data2: {{data2}}</p>
<input type="text" ng-model="data1" /><br /> <!-- input 초기값을 controller에 세팅된 값(data1 값으로)으로 할 수 있음 -->
<input type="text" ng-model="data2" /><br />
<button type="button" ng-click="changeValue()">값 변경</button>
</div>
버튼 클릭후