angularjs의 ngRoute를 사용하면 싱글페이지 앱(SPA) 어플리케이션의 페이지 이동을 구현하기 쉽도록 도와줍니다. 해당하는 앱에서 ngRouter 모듈을 추가한 뒤 config 객체에 $routeProvider를 설정합니다. 그럼 아래를 봐주세요.
# $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로 연결한다면 다음과 같습니다.

app.config(function($routeProvider){
  $routeProvider
    .when("/test01", {
      templateUrl: "test01.html",
      controller: "ExamCtrl01"
    })
})
위와 같이 config의 $routeProvider를 통하여 when메소드에 설정된 각각의 url은 아래의 태그에 해당하는 template 코드가 나타나게됩니다.

<div ng-view>
</div>

참고로 싱글페이지앱의 페이지 이동을 위하여 $routeProvider외에도 $stateProvider 역시 많이 사용됩니다.