웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
angularjs의 ngRoute를 사용하면 싱글페이지 앱(SPA) 어플리케이션의 페이지 이동을 구현하기 쉽도록 도와줍니다. 해당하는 앱에서 ngRouter 모듈을 추가한 뒤 config 객체에 $routeProvider를 설정합니다. 그럼 아래를 봐주세요.
참고로 싱글페이지앱의 페이지 이동을 위하여 $routeProvider외에도 $stateProvider 역시 많이 사용됩니다.
# $RouteProvider 예제보기
이 예제는 간단한 링크를 생성하고 해당하는 링크를 클릭할 경우 정해진 template을 호출하는 간단한 예제입니다.<div>
<h1>예제를 클릭하세요.</h1>
<a href="#/example01">Example 01</a>
<a href="#/example02">Example 02</a>
</div>
<div ng-view></div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/test', {
template: '<span>{{ text }}</span>',
controller: 'ExamCtrl01'
})
.when('/test2', {
template: '<span>{{ text }}</span>',
controller: 'ExamCtrl02'
})
});
app.controller('ExamCtrl01', function($scope){
$scope.text = '예제 1번입니다.'
});
app.controller('ExamCtrl02', function($scope){
$scope.text = '예제 2번입니다.'
})
</script>
여기서는 링크 두개에 각각의 예제를 보여줄 수 있는 간단한 $routeProvider 소스코드입니다. template 프로퍼티에 코드를 직접 작성하였으나 직접 만든 다른 파일(test01.html)로 연결하는 방법이 자주 사용됩니다. 만약 test01.html로 연결한다면 다음과 같습니다.<h1>예제를 클릭하세요.</h1>
<a href="#/example01">Example 01</a>
<a href="#/example02">Example 02</a>
</div>
<div ng-view></div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/test', {
template: '<span>{{ text }}</span>',
controller: 'ExamCtrl01'
})
.when('/test2', {
template: '<span>{{ text }}</span>',
controller: 'ExamCtrl02'
})
});
app.controller('ExamCtrl01', function($scope){
$scope.text = '예제 1번입니다.'
});
app.controller('ExamCtrl02', function($scope){
$scope.text = '예제 2번입니다.'
})
</script>
app.config(function($routeProvider){
$routeProvider
.when("/test01", {
templateUrl: "test01.html",
controller: "ExamCtrl01"
})
})
위와 같이 config의 $routeProvider를 통하여 when메소드에 설정된 각각의 url은 아래의 태그에 해당하는 template 코드가 나타나게됩니다.$routeProvider
.when("/test01", {
templateUrl: "test01.html",
controller: "ExamCtrl01"
})
})
<div ng-view>
</div>
</div>
참고로 싱글페이지앱의 페이지 이동을 위하여 $routeProvider외에도 $stateProvider 역시 많이 사용됩니다.
아래의 글도 찾고 계시지 않나요?