toggle menu

[AngularJS] 루트 프로바이더 - Multiple Views, Routing and Layout Template

2012. 10. 30. 16:31 AngularJS

앵귤러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

AngularJS 관련 포스팅 더보기