AngularJS[5] - Route

• Angular JS 에서 Single Page Web Application 구성을 위해 라이브러리를 추가

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>

<script>
// 외부라이브러리에서 제공하는 모듈을 사용할때 [] 안에 명시
	var app = angular.module("test_app", ["ngRoute"])
	
	app.config(function($routeProvider){
		$routeProvider.when("/",{
			// ng-view 세팅되어있는 div 태그에  넣어줌
			template : "<h1>Main Page</h1>"
		})
		
		$routeProvider.when("/page1",{
			
			template : "<h1>page 1</h1><h3>data1 : {{data1}}</h3>",
			controller : "controller1"
		})
		
		$routeProvider.when("/page2",{
			templateUrl : "page2.html",
			controller : "controller2"
		})
		
	})
	
	app.controller("controller1",function($scope){
		$scope.data1 = "controller1에서 세팅한 문자열"
	})
	
	app.controller("controller2",function($scope, $http){
		$scope.data2 = "controller2에서 세팅한 문자열"
		
		var http = $http.get("data.json")
		http.then(function(response){
			$scope.data_list = response.data
		})
	})
</script>

<div ng-app="test_app">
	
	<a href="#/!">main page</a>
	<a href="#!page1">page1</a>
	<a href="#!page2">page2</a>

	<div ng-view></div>
</div>

data.json

[
	{
		"name" : "홍길동",
		"age" : 30,
		"kor" : 100,
		"eng" : 80,
		"math" : 70
	},
	{
		"name" : "김길동",
		"age" : 30,
		"kor" : 50,
		"eng" : 30,
		"math" : 20
	},
	{
		"name" : "최길동",
		"age" : 30,
		"kor" : 10,
		"eng" : 90,
		"math" : 50
	}

]

page2.html

<h1>page2.html</h1>
<h3>data2 : {{data2}}</h3>

<table border="1">
	<thead>
		<tr>
			<th>이름</th>
			<th>나이</th>
			<th>국어</th>
			<th>영어</th>
			<th>수학</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="obj in data_list">
			<td>{{obj.name}}</td>
			<td>{{obj.age}}</td>
			<td>{{obj.kor}}</td>
			<td>{{obj.eng}}</td>
			<td>{{obj.math}}</td>
		</tr>
	</tbody>
</table>

🎈결과