AngularJS[1] - 표현식, 모듈, 지시자, 모델, Controller

Dana's Log·2022년 6월 11일
0

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>

🎈결과


모듈

  • 모듈은 Angular JS 애플리케이션에 대한 다양한 설정을 하는 요소.
  • 지정된 태그를 Angular JS에서의 객체로 만들어 이를 제어할 수 있도록 함.
<div ng-app="myApp"> ... </div>

<script>
 // myApp 태그를 객체로 만들어서 사용
  var app = angular.module("myApp",[]);
</script>
  • controller 설정 : Angular JS 애플리케이션에서 사용할 다양한 데이터들을 정의
  • 지시자 설정 : 제공되는 지시자 외에 새로운 지시자를 만들 때 사용한다.
  • 함수 정의
  • 기타 등등
<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>

지시자

  • Angular JS 애플리케이션에서 HTML 문서 구성을 위해 필요한 다양한 설정과 기능들을 지정하는 것을 의미
  • ng-app : Angular JS 애플리케이션에 대한 초기 설정. module 객체를 만들 수 있음
  • ng-init : Angular JS 애플리케이션에서 사용할 데이터 설정
  • ng-model : HTML에서의 입력 요소들을 컨트롤하기 위한 지시자
  • ng-repeat : 지정된 태그를 배열에 들어 있는 요소만큼 반복하여 출력

지시자 만들기

  • directive 함수를 통해 지시자를 만들 수 있으며 새롭게 만든 지시자를 이용해 원하는 곳에 HTMl 코드를 삽입할 수 있다.
  • restrict 속성을 이용해 적용할 요소를 선택할 수 있음
    E : 태그
    A : 속성
    C : class 속성
    M : 주석
    생략시 EA로 설정됨.
<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>&lt;directive1&gt;&lt;/directive1&gt; : <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>

🎈결과



모델

  • Angular JS 애플리케이션에서 input 태그를 지칭하고 이를 제어하기 위해 제공되는 개념
  • ng-model 지시자를 이용해서 input 태그에 입력된 값을 제어할 수 있음.
<!-- 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 -->

🎈결과



상태에 따른 CSS 처리

<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;
	}

Controller

  • Angular JS 에서 데이터를 통제하기 위해 제공되는 개념
<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>

🎈결과


버튼 클릭후

profile
다나로그

0개의 댓글