앵귤러JS에는 다양한 뷰를 지원하고, 입력되는 주소에 따라 이 주소를 인지해서 다른 페이지를 보여주는(!!!) 것이 가능하다.
스프링에서 Dispatcher Servlet이 존재하고 이 디스패쳐 서블릿이 모든 입력을 다 받아 주소에 따라 적절한 컨트롤러 선택해주는 것처럼 앵귤러JS에서도 선택되는 주소에 따라 적절한 뷰를 선택해서 뿌려주는 것이 가능하다.
앞서 활용했던 예제들에 약간의 수정을 가해보자.
index.html 파일
<html ng-app="basePoint">
<!--
원래는 ng-app에 특별한 이름을 설정을 하지 않았지만,
이제 반드시 ng-app에 이름을 설정해야 한다.
-->
<head>
<meta charset="utf-8">
<title>Multiple Views Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
</script>
<!--
이 태그는 당연하게도 앵귤러js를 로드하고, 더불어 HTML페이지가 모두 로드된 후에
브라우저에 의해 실행되는 콜백을 등록한다.
-->
<script type="text/javascript" charset="utf-8">
/*
* [경로 설정]
*
*/
//경로(주소)에 따라 다른 뷰를 보여주도록 설정한다.
//모듈의 첫번째 파라메터에는 ng-app의 이름을 설정하고,
//$routeProvider를 가져와서 설정을 한다.
angular.module('basePoint', []).config(['$routeProvider',
function($routeProvider)
{
$routeProvider.
when('/phones', //경로명
{
templateUrl: 'partials/phone-list.html', //해당 경로일 때 페이지
controller: PhoneListController //해당 경로일 때 사용할 컨트롤러
}).
when('/phones/:phoneId', //경로명
{
templateUrl: 'partials/phone-detail.html', //해당 경로일 때 페이지
controller: PhoneDetailController //해당 경로일 때 사용할 컨트롤러
}).
otherwise(
{
redirectTo: '/phones' //그 외에의 모든 경로는 여기로 이동
});
}]);
/*
* [컨트롤러]
*
*/
//폰 세부 정보를 보여주는 컨트롤러
function PhoneDetailController($scope, $routeParams)
{
$scope.phoneId = $routeParams.phoneId;
}
//폰 리스트를 보여주는 컨트롤러
function PhoneListController($scope, $http)
{
//jQuery의 ajax 통신과 거의 유사하다.
$http.get('sample.json').success(
function(data)
{
$scope.phones = data;
});
//기본값을 미리 번호로 정해주었다.
//기본값을 정하지 않아도 되지만, 그럴경우 선언된 순서대로 표시된다.
$scope.orderProperty = "no";
//이렇게 선언된 배열 형태의 데이터 모델은 후에 NG-REPEAT에 의해 사용된다.
}
</script>
</head>
<body>
<!-- 앵귤러 뷰 -->
<div ng-view>
</div>
</body>
</html>
어플리케이션의 경로들을 설정하기 위해, 우리는 어플리케이션의 모듈 하나를 생성해야 한다.
우리는 이 모듈을 phonecatApp 혹은 다른 이름으로 부르고 config API를 사용해서 $routeProvider를 호출한다.
이 루트 프로바이더는 우리 config 함수에 주입되게 되고, $routeProvider.when API를 사용해서 경로를 정의하게 된다.
폰 목록 뷰는 URL이 /phones 일때 보여지게 될 것이다. 이 뷰를 구성하기 위해 앵귤러는 phone-list.html 템플릿과 PhoneListController를 사용할 것이다.
폰 세부 뷰는 /phone/:phoneId 와 같을 때 보여지게 될 것이다. :phoneId는 일종의 URL의 변수 부분이라고 볼 수 있다. 폰 세부 뷰를 구성하기 위해 앵귤러는 phone-detail.html 템플릿과 phonedetailcontroller를 사용하게 될 것이다.
우리는 phoneListController를 재사용할 것이고 디테일을 위해서는 새로 만들어야 한다.
알아두어야 할 사실은 두번째 경로 선언에서 사용된 :phoneId parameter 인데, :phoneId 부분에 앞서 경로로 설정해둔 이름과 매칭이 되면 해당 이름이 phoneId 변수에 들어가게 될 것이다.
phone-list.html 파일
검색 :
<input type="text" ng-model="searchKeyword"/>
<!--
searchKeyword 라는 이름의 앵귤러 모델을 선언해주었다.
여기에 입력된 내용은 searchKeyword 라는 모델에 자동으로 들어간다.
-->
정렬 :
<select ng-model="orderProperty">
<option value="name" selected>이름</option>
<option value="snippet">설명</option>
<option value="no">번호</option>
</select>
<!--
orderProperty 라는 임의의 이름으로 정렬 순서를 정해줄 앵귤러 모델을 선언해 주었다.
-->
<ul>
<li ng-repeat="phone in phones | filter:searchKeyword | orderBy:orderProperty">
<img ng-src="{{phone.url}}">
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
<p>
현재 검색 키워드 : {{searchKeyword || '없음'}}<br />
현재 정렬 기준 : {{orderProperty}}
</p>
phone-detail.html 파일
선택한 아이템의 아이디는 {{phoneId}} 입니다 ㅋㅋ
위의 예제를 Plunker 에서 직접 수정해가며 테스트해보는 것을 권장한다.
http://plnkr.co/edit/3GNzllVwEy2AcPqIfH6g?p=preview
