Angular.js 에 대해 알아보기 2

지난편에서는 Angular.js를 사용하기 전에 알아두기 좋은 글들에 대한 포스팅을 하였고

이번편에서는 Angular.js학습편으로 그냥 끄적거림정도 입니다.

막상 시작할려니 어떻게 적용해야 될지 잘 모르겠고 해서 http://www.w3schools.com/angular/default.asp 투토리얼 페이지에서 

기억할만한것들을 담아두려 합니다.

$http 사용 예 :

/* 파라메터로 보낼 임의의 데이터 객체 */
var dataObject =
{
	dataNo : $scope.dataNo + "",
	dataName : $scope.dataName,
	dataContent : $scope.dataContent
};


/* AJAX 통신 처리 */
$http({
	method: 'POST', //방식
	url: 'http://localhost/jsonURL', /* 통신할 URL */
	data: dataObject, /* 파라메터로 보낼 데이터 */
	headers: {'Content-Type': 'application/json; charset=utf-8'} //헤더
})
.success(function(data, status, headers, config) {
	if( data ) {
		/* 성공적으로 결과 데이터가 넘어 왔을 때 처리 */
	}
	else {
		/* 통신한 URL에서 데이터가 넘어오지 않았을 때 처리 */
	}
})
.error(function(data, status, headers, config) {
	/* 서버와의 연결이 정상적이지 않을 때 처리 */
	console.log(status);
});

지시자 만들기

Angular.js에서는 제공하는 지시자를 사용할 수도 있지만, 개발자가 직접 지시자를 만들 수도 있다.

지시자는 directive()메소드를 이용해서 만들수 있다.

var app =  angular.module('myApp',[]);

app.directive('myInfo',function(){

return {

template: '이름:{{info.name}},주소: {{info.address}}'

};

})

.controller("myController",function($scope) {

$scope.info = {

name:'홍길도',

address: '경기도 성남시 분당구 불정로 6 그린 팩토리'

};

});

라우팅

라우팅 기능은 URL 기준으로 다른 컨트롤러를 수행하거나 템플릿을 사용할수 있도록 해준다.

필터

필터는 데이터를 특정 형태로 변형시키고자 할 때 사용한다.  필터의 사용은 템플릿 내에서 파이프

기호 연산자를 통해 간단히 적용할 수 있다.

아래의 예제는 <input>영역에 입력하는 값을 대문자로 치환하는 예이다.

<div>

<input type="text" ng-model="val">

<span>{{ val | uppercase }}</span>

</div>