AngularJS[3] - http 서비스, table태그, select태그

http 서비스

• ajax 통신으로 서버가 제공하는 응답 결과를 받아와 화면을 구성할 수 있는 서비스
• Single Page web Application 구현 가능
  (SPA : 서버로부터 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트)

<script>
	var app = angular.module("test_app",[])
	
	app.controller("controller1",function($scope,$http){
		$scope.ajaxGet = function(){
			var http = $http.get("data1.html") //get 방식으로 요청
			http.then(function(response){
				$scope.result = response.data
			});
		}
		$scope.ajaxPost = function(){
			var http = $http.post("data1.html") //post 방식으로 요청
		
			http.then(function(response){
			 $scope.result = response.data	
			})
		}
		$scope.ajaxBasic = function(){
			var http = $http({
				method : "post",
				url : "data1.html"
			})
			http.then(function(response){
				$scope.result = response.data
			})
		}
		$scope.ajaxJson = function(){
			var http = $http.get("data2.html")
			
			http.then(function(response){
				$scope.json_data = response.data
			})
		}
	});
</script>


<div ng-app="test_app" ng-controller="controller1">
	<button type="button" ng-click="ajaxGet()">Ajax Get</button>
	<button type="button" ng-click="ajaxPost()">Ajax Post</button>
	<button type="button" ng-click="ajaxBasic()">Ajax Basic</button>
	<button type="button" ng-click="ajaxJson()">Ajax Json</button>
	<p>{{result}}</p>
	<div>
		<p ng-repeat="m in json_data">a1 : {{m.a1}}, a2 : {{m.a2}}</p>
	</div>
</div>

data1.html

data2.html

🎈결과

Table

<script>
	var app = angular.module("test_app",[])
	
	app.controller("controller1",function($scope, $http){
		$scope.data1 = [
			{ name : "홍길동", age : 20 },			
			{ name : "강길동", age : 21 },			
			{ name : "최길동", age : 22 }			
		]
		
		var http = $http.get("data1.html")
		
		http.then(function(response){
			$scope.data2 = response.data
		});
	});
</script>

<div ng-app="test_app" ng-controller="controller1">
	<table border="1">
      	<tr>
			<td>번호</td>
			<td>인덱스</td>
			<td>이름</td>
			<td>나이</td>
		</tr>
		<tr ng-repeat="obj in data1">
			<td>{{$index +1}}</td>
			<td style="color:#ccc">({{$index}})</td>
			<!-- 홀수 인덱스 일 때 -->
			<td ng-if="$odd" style="color:red">{{obj.name}}</td> 
			<!-- 짝수 인덱스 일 때 -->
			<td ng-if="$even" style="color:blue">{{obj.name}}</td> 
			<td>{{obj.age}}</td>
		</tr>
	</table>
  <hr />
	<table border="1">
		<tr ng-repeat="obj in data2">
			<td>{{$index +1}}</td>
			<td style="color:#ccc">({{$index}})</td>
			<!-- 홀수 인덱스 일 때 -->
			<td ng-if="$odd" style="color:red">{{obj.name}}</td> 
			<!-- 짝수 인덱스 일 때 -->
			<td ng-if="$even" style="color:blue">{{obj.name}}</td> 
			<td>{{obj.age}}</td>
		</tr>
	</table>
</div>

🎈결과

Select

• ng-repeat, ng-options 지시자 사용
• 배열을 이용한 구성법과 객체배열를 이용한 구성법
• 항목 문자열과 value 속성 값이 같을 경우 배열로 구성
• 항목 문자열과 value 속성 값이 다를 경우 객체로 구성

<script>
	var app = angular.module("test_app",[])
	
	app.controller("controller1", function($scope){
		$scope.data1 = ["value1", "value2", "value3"]
		$scope.select1 = $scope.data1[0] // 처음 칸 비어져있는데 없애기
		$scope.select2 = $scope.data1[1] // value 속성 값을 넣어주면 됨
		$scope.select3 = $scope.data1[2]
  });
</script>


<div ng-app="test_app" ng-controller="controller1">
<!-- 배열을 이용 -->
	<select>
		<option value="value1">value1</option>
		<option value="value2">value2</option>
		<option value="value3">value3</option>
	</select>
	<hr />
	<select ng-model="select1">
		<option ng-repeat="arr in data1" value="{{arr}}">{{arr}}</option>
	</select>
	<!-- 선택한 option에 따라 값이 변함 -->
	<p>select1 : {{select1}}</p>
	
	<!-- value 속성 생략시 data1에서 가져와서 value 속성 채워줌 -->
	<select ng-model="select2">
		<option ng-repeat="str in data1">{{str}}</option>
	</select>
	<p>select2 : {{select2}}</p>
	<hr />
	 									<!-- option 태그에 들어갈 항목문자열 값    for   value 값 -->
	<select ng-model="select3" ng-options="str for str in data1"></select>
	<p>select3 : {{select3}}</p>
	<hr />
</div>

🎈결과

<script>
  	var app = angular.module("test_app",[])
	
	app.controller("controller1", function($scope){
		$scope.data2 = [
			{label : "item1", val : "value1"},
			{label : "item2", val : "value2"},
			{label : "item3", val : "value3"},
		]
		$scope.select4 = $scope.data2[0].val // 객체가 통째로 들어가기 때문에
		$scope.select5 = $scope.data2[1] 
		
		
		$scope.data3 = {
				item1 : "value1",
				item2 : "value2",
				item3 : "value3"
		}
		$scope.select6 = $scope.data3.item1
		
		$scope.data4 = {
				item1 : {a1 : "a100", a2 : "a200", a3 : "a300"},
				item2 : {a1 : "a101", a2 : "a201", a3 : "a301"},
				item3 : {a1 : "a102", a2 : "a202", a3 : "a302"},
		}
		$scope.select7 = $scope.data4.item1
  });
</script>


<div>
<!-- 객체를 이용 -->
	<select ng-model="select4">
		<option ng-repeat="obj in data2" value="{{obj.val}}">{{obj.label}}</option>
	</select>
	<p>select4 : {{select4}}</p>
	<hr />
									<!-- option 태그에 들어갈 항목문자열 값    for   value 값 -->
	<select ng-model="select5" ng-options="obj.label for obj in data2"></select>
	<p>select5 : {{select5.val}}</p>
	<hr />
										<!-- a1 : 멤버의 키, a2 : 멤버 값 -->
	<select ng-model="select6" ng-options="a1 for (a1, a2) in data3"></select>
	<p>select6 : {{select6}}</p>
	<hr />
	
	<select ng-model="select7" ng-options="a1 for (a1,b2) in data4"></select>
	<p>select7 : {{select7.a1}}</p>
	<p>select7 : {{select7.a2}}</p>
	<p>select7 : {{select7.a3}}</p>
</div>

🎈결과