AngularJS Routing_AngularJS의 정의와 사용법을 간략하게 설명하세요.

단일 페이지 애플리케이션에서는 뷰 간 이동이 특히 중요합니다. 애플리케이션이 점점 더 복잡해짐에 따라 사용자에게 언제 어떤 페이지를 표시해야 하는지 정확하게 제어할 수 있는 방법이 필요합니다.

메인 페이지에 다양한 템플릿을 도입하여 다양한 페이지 간 전환을 지원할 수 있지만, 그렇게 하면 내장된 코드가 점점 많아져 결국 관리가 어려워진다는 단점이 있습니다.

ng-include 지시문을 통해 많은 템플릿을 뷰에 통합할 수 있지만 이 상황을 처리하는 더 나은 방법이 있습니다. 뷰를 레이아웃 및 템플릿 뷰로 분리한 다음 특정 사용자 액세스 URL에 따라 분리할 수 있습니다. 원하는 뷰를 표시하려면

이러한 "조각"을 레이아웃 템플릿에 함께 넣을 수 있습니다

AngularJS는 $routeProvider($route 서비스 제공자)에서 경로를 선언하여 위 아이디어를 구현합니다.

$routeProvider를 사용하면 검색 기록 API를 더 효과적으로 활용할 수 있으며 사용자가 나중에 사용할 수 있도록 현재 경로를 북마크로 저장할 수 있습니다.

애플리케이션에서 라우팅을 설정하려면 두 가지 작업을 수행해야 합니다. 먼저 새 페이지 콘텐츠가 저장될 레이아웃 템플릿을 저장할 위치를 지정해야 합니다. 예를 들어 모든 페이지에 머리글과 바닥글을 추가하려는 경우 다음과 같이 레이아웃 템플릿을 디자인할 수 있습니다.

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

ng-view 지시문은 템플릿을 렌더링할 위치에 고속 $routeProvider를 사용합니다

둘째, 라우팅 정보를 구성해야 하며 애플리케이션에서 $routeProvider를 구성합니다

$routeProvider는 라우팅을 처리하는 두 가지 방법, 즉 언제와 그렇지 않은지를 제공합니다. 두 개의 매개변수를 받을 때의 메소드는 첫 번째 매개변수가 $location.path()로 설정됩니다. ("//"를 직접 사용해도 문제가 없습니다)

정의
경로를 정의하는 것은 매우 쉽습니다. ngRoute 종속성을 애플리케이션 메인 모듈에 삽입하기만 하면 됩니다

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

이제 애플리케이션의 경로를 정의할 수 있습니다. $routeProvider는 라우팅 모듈의 .config() 메소드에 삽입됩니다. 위 코드는 경로를 정의하는 두 가지 메소드를 보여줍니다.

언제()

when() 메소드에는 일치시키려는 브라우저 URL과 라우팅 작업 객체라는 두 개의 매개변수가 있습니다. 일반적으로 기본 경로는 "/"로 표시되는 경우가 많으며, 컨트롤러에서는 $routeParams를 사용하여 URL 매개변수를 얻을 수도 있습니다.

templateUrl: 경로 점프를 나타내는 보기 템플릿

컨트롤러: 컨트롤러

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
    })
    .when('/day/:id', {
     templateUrl: 'views/day.html',
     controller: 'DayCtrl'
    })

그렇지 않으면()

otherwise()는 애플리케이션이 지정된 경로를 찾을 수 없을 때 이동할 경로를 정의합니다

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'views/main.html',
   controller: 'MainCtrl'
  })
  .when('/day/:id', {
   templateUrl: 'views/day.html',
   controller: 'DayCtrl'
  })
  .otherwise({
   redirectTo: '/'
  });
})

사용 정의된 경로를 사용하는 방법은 무엇입니까? 변환하려는 페이지 부분을 각도에 알려야 하며, 이를 위해서는 ng-view 지시문을 사용해야 합니다

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

이렇게 하면

만 업데이트되고 머리글/바닥글은 항상 변경되지 않습니다.