AngularJS에서 매개변수를 사용한 라우팅

⚡ 스마트 요약

AngularJS의 라우팅은 단일 HTML 페이지를 지도 기반의 멀티뷰 애플리케이션으로 변환합니다.ping URL 템플릿과 컨트롤러에 대한 프래그먼트입니다. ngRoute 모듈과 $routeProvider 서비스는 이러한 맵을 정의합니다.ping반면, ng-view 디렉티브는 일치하는 템플릿을 삽입합니다.

🧩 핵심 메커니즘: $routeProvider는 # 기호 뒤의 프래그먼트와 일치하며, 해당 프래그먼트의 templateUrl과 컨트롤러를 ng-view에 로드합니다.
📦 필수 종속성: 라우팅은 핵심 라이브러리 외부에 있으므로 angular-route.js를 참조하고 모듈 내에서 ngRoute를 선언해야 합니다.
🎯 기본 경로: 그렇지 않으면 블록이 일치하지 않는 경로를 리디렉션하여 애플리케이션이 처음 로드될 때 빈 화면이 표시되는 것을 방지합니다.
🔢 경로 매개변수: :topicId와 같은 콜론 자리 표시자는 다음을 캡처합니다. URL 컨트롤러가 $routeParams를 통해 읽는 세그먼트입니다.
⏳ 데이터 사전 로딩: resolve 속성은 컨트롤러가 실행되기 전에 데이터 가져오기를 완료하므로 뷰는 절대 빈 상태로 렌더링되지 않습니다.
🔗 깨끗한 URLs: $locationProvider에 html5Mode를 설정하면 해시가 제거되지만, 서버는 알 수 없는 경로를 기본 페이지로 다시 작성해야 합니다.

AngularJS에서 라우팅이 어떻게 작동하는지 살펴보기 전에, 라우팅이 어떤 종류의 애플리케이션을 위해 만들어졌는지 이해하는 것이 도움이 됩니다. 아래 섹션에서는 이러한 맥락을 설명하고, 이후의 모든 기술은 이를 기반으로 합니다.

단일 페이지 애플리케이션이란 무엇입니까?

단일 페이지 애플리케이션(SPA)은 하나의 HTML 페이지를 로드한 후 사용자의 상호 작용에 따라 해당 페이지를 동적으로 업데이트하는 웹 애플리케이션입니다. SPA는 클릭할 때마다 서버에서 새로운 문서를 요청하는 대신, 변경된 페이지 부분만 교체합니다.

그러한 설계에는 한 가지 문제가 있습니다. 브라우저가 새 문서로 이동하지 않으면 주소 표시줄이 변경되지 않으므로 사용자는 화면을 북마크하거나 공유하거나 뒤로 가기 버튼을 사용할 수 없습니다. 라우팅은 바로 이 문제를 해결합니다.

AngularJS의 라우팅이란 무엇입니까?

AngularJS의 라우팅 이는 단일 페이지 애플리케이션(SPA)을 만들 수 있게 해주는 방법입니다. 이를 통해 다양한 페이지를 만들 수 있습니다. URL웹 애플리케이션에서 다양한 콘텐츠를 표시할 수 있도록 라우팅을 설정할 수 있습니다. AngularJS 라우팅은 선택된 경로에 따라 여러 콘텐츠를 표시하는 데에도 도움이 됩니다. 이는 `<router-name>` 태그에 지정됩니다. URL # 기호 뒤에.

호스팅 서비스를 통해 운영되는 웹사이트의 예를 들어보겠습니다. URL http://example.com/index.html.

이 페이지는 애플리케이션의 메인 화면을 보여줍니다. 예를 들어, 애플리케이션에서 이벤트를 주최하고 사용자가 이벤트 목록을 보거나, 특정 이벤트에 대한 자세한 정보를 보거나, 이벤트를 삭제하려는 경우를 생각해 보겠습니다. 라우팅이 활성화된 단일 페이지 애플리케이션에서는 다음 링크를 통해 이러한 모든 기능에 접근할 수 있습니다.

# 기호는 다양한 경로(ShowEvent, DisplayEvent 및 DeleteEvent)와 함께 사용됩니다.

모든 이벤트를 보려면 사용자는 다음 페이지로 이동합니다. http://example.com/index.html#ShowEvent
특정 행사를 보기 위해 그들은 다음과 같은 곳으로 안내됩니다. http://example.com/index.html#DisplayEvent
이벤트를 삭제하려면 다음 단계로 진행하면 됩니다. http://example.com/index.html#DeleteEvent

주요 사항은 다음과 같습니다. URL 나머지는 그대로 유지됩니다. # 뒤에 오는 부분만 변경되며, AngularJS는 바로 이 부분을 감시합니다. 이 개념을 이해했으니, 다음 섹션에서는 모든 것이 제대로 작동하기 전에 연결해야 할 부분들을 다룹니다.

$routeProvider를 사용하여 AngularJS 경로 추가

앞서 논의한 바와 같이, 경로는 다음과 같습니다. AngularJS와 이 기능은 사용자를 애플리케이션의 다른 화면으로 이동시키는 데 사용됩니다. 이러한 이동은 동일한 HTML 페이지 내에서 이루어지므로 사용자는 페이지를 벗어나지 않은 것처럼 느끼게 됩니다.

라우팅을 구현하려면 다음의 주요 단계를 순서에 상관없이 애플리케이션에 구현해야 합니다.

angular-route.js를 참조하세요. JavaScript 파일, 개발자: Google이 모듈에는 모든 라우팅 기능이 포함되어 있으며, 애플리케이션이 라우팅에 필요한 모듈을 참조할 수 있도록 반드시 포함되어야 합니다.
애플리케이션 내에서 ngRoute 모듈에 대한 의존성을 추가하세요. 이 의존성이 없으면 AngularJS 애플리케이션에서 라우팅을 전혀 사용할 수 없습니다.

다음은 이 명령문의 일반적인 구문입니다. 이는 ngRoute 키워드가 포함된 모듈의 일반적인 선언입니다.

var module = angular.module("sampleApp", ['ngRoute']);

`$routeProvider`를 구성하세요. 이 변수는 애플리케이션의 다양한 경로를 제공하며, 구문은 해당 경로가 선택되었을 때 지정된 뷰를 표시하는 데 이 경로를 사용하도록 지정합니다.

when(path, route)

HTML 페이지 내에서 경로에 대한 링크입니다. HTML 페이지에서는 애플리케이션에서 사용 가능한 다양한 경로에 대한 참조 링크를 추가합니다.

<a href="#!/route1">Route 1</a><br/>

마지막으로 ng-view 지시어, 일반적으로 div 태그에 있습니다. 이는 관련 경로가 선택될 때 뷰의 콘텐츠를 삽입하는 데 사용됩니다.

💡 Tip 다섯 단계 모두 필수입니다. angular-route.js 참조가 누락되면 $routeProvider가 존재하지 않기 때문에 라우트가 아무런 동작도 하지 않는 가장 흔한 원인이 됩니다. 다음 섹션에서는 이 다섯 단계를 모두 적용한 작동 예제를 제공합니다.

AngularJS 라우팅 예

이제 위에서 언급한 단계를 사용하여 라우팅하는 예를 살펴보겠습니다.

매개변수가 포함된 AngularJS 라우팅 예제에서는

한 링크는 주제를 표시하는 것입니다. AngularJS와 물론이고 다른 하나는 Node.js를 코스입니다.
사용자가 두 링크 중 하나를 클릭하면 해당 과정의 주제가 표시됩니다.

단계 1) 각도 경로 파일을 스크립트 참조로 포함합니다.

이 라우트 파일은 여러 라우트와 뷰를 사용하는 기능을 구현하는 데 필수적입니다. 이 파일은 AngularJS 웹사이트에서 다운로드할 수 있습니다.

단계 2) "Angular JS Topics" 및 "Node JS Topics"에 대한 링크를 나타내는 href 태그를 추가합니다.

단계 3) 뷰를 나타내는 ng-view 지시문을 사용하여 div 태그를 추가합니다.

이렇게 하면 사용자가 "Angular JS Topics" 또는 "Node JS Topics"를 클릭할 때마다 해당 뷰가 삽입될 수 있습니다.

단계 4) AngularJS의 스크립트 태그에 "ngRoute 모듈"과 "$routeProvider" 서비스를 추가합니다.

Code 설명 :

"ngRoute 모듈"을 포함시키세요. 이렇게 하면 Angular가 라우팅을 자동으로 처리하고 모든 라우팅 명령을 이해합니다.
`$routeProvider`는 백그라운드에서 호출되는 경로를 수신하는 서비스입니다. 사용자가 링크를 클릭하면 이를 감지하고 어떤 경로를 선택할지 결정합니다.
Angular 링크에 대한 라우트를 하나 생성하세요. 링크를 클릭하면 Angular.html 파일을 주입하고 'AngularController'를 사용하여 비즈니스 로직을 처리하세요.
Node 링크에 대한 경로를 하나 생성하고, 해당 경로에서 Node.html을 삽입하고 'NodeController'를 동일한 방식으로 사용하도록 합니다.

단계 5) 다음은 AngularController와 NodeController 모두에 대한 비즈니스 로직을 처리하기 위해 컨트롤러를 추가하는 것입니다.

각 컨트롤러에서, 각 강좌의 주제 이름과 설명을 저장할 키-값 쌍 배열을 생성합니다. 'tutorial'이라는 배열 변수는 각 컨트롤러의 스코프 객체에 추가됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">Node JS Topics</a></li>
</ul>
<div ng-view></div>
</div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  });
}]);

sampleApp.controller('AngularController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ 수정 사항이 적용되었습니다. The <title> 태그가 안에 있었습니다 <body>, chrset="UTF 8" 철자가 틀렸고, 두 번째 링크는 다음을 가리켰습니다. #Node.html 등록된 경로 대신에 /Node템플릿 경로는 도메인 루트에서 해석되는 선행 슬래시(/)를 포함했습니다.

단계 6) Angular.html 및 Node.html이라는 페이지를 만듭니다. 각 페이지마다 아래 단계를 수행하고 있습니다.

이러한 단계를 거치면 배열의 모든 키-값 쌍이 각 페이지에 표시됩니다.

사용법 - ng-repeat 지시어 튜토리얼 변수에 정의된 각 키-값 쌍을 차례로 살펴봅니다.
각 키-값 쌍의 이름과 설명을 표시합니다.

Angular.html

<h2>Angular</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Node.html — 위 목록과 동일하며, 제목만 "노드"로 변경되었습니다. 두 템플릿의 내용은 같습니다. tutorial 각 컨트롤러가 자체 범위에서 제공하는 변수입니다.

⚠️ 보정: 원래 Angular.html 파일의 제목은 "Anguler"였습니다. 위에서 철자를 수정했습니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

AngularJS 주제 링크를 클릭하면 아래와 같은 내용이 표시됩니다.

출력은 다음을 명확하게 보여줍니다.

"Angular JS Topics" 링크를 클릭하면 코드에서 선언한 RouteProvider가 Angular.html 코드를 삽입할지 결정합니다.
이 코드는 ng-view 지시문이 포함된 "div" 태그에 삽입됩니다. 또한 과정 설명의 내용은 AngularController에 정의된 범위 개체의 일부인 "튜토리얼 변수"에서 가져옵니다.
다음을 클릭하면 Node.js를 주제에 대해서도 동일한 결과가 발생하고 Node.js 주제에 대한 보기가 표시됩니다.
또한, 페이지가 어떻게 되어 있는지 확인해 보세요. URL 내용은 그대로 유지됩니다. # 태그 뒤의 경로만 변경되는데, 이것이 단일 페이지 애플리케이션의 개념입니다. # 해시태그는 URL `<code><p>`는 경로(이 경우 'Angular')와 메인 HTML 페이지(Sample.html) 사이의 구분자입니다.

이 예제는 사용자가 등록된 경로와 일치하는 링크를 클릭했을 때만 작동합니다. 다음 섹션에서는 일치하는 경로가 없을 때 어떤 일이 발생해야 하는지를 다룹니다.

AngularJS에서 기본 경로 만들기

AngularJS의 라우팅은 기본 경로를 갖는 기능도 제공합니다. 기존 경로와 일치하는 항목이 없을 경우 선택되는 경로입니다.

$routeProvider 서비스를 정의할 때 다음 조건을 추가하여 기본 경로가 생성됩니다.

아래 구문은 기존 경로 중 일치하는 경로가 없을 경우 다른 페이지로 리디렉션한다는 의미입니다.

otherwise({
  redirectTo: 'page'
});

위와 동일한 예를 사용하여 $routeProvider 서비스에 기본 경로를 추가해 보겠습니다.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  }).
  otherwise({
    redirectTo: '/Angular'
  });
}]);

Code 설명 :

여기서는 위와 동일한 코드를 사용하지만, 유일한 차이점은 `orthody` 문과 `redirectTo` 옵션을 사용하여 경로가 지정되지 않은 경우 로드할 뷰를 지정한다는 것입니다. 이 경우 '/Angular' 뷰가 표시되도록 하려고 합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력에서,

기본적으로 표시되는 화면이 AngularJS 화면임을 분명히 알 수 있습니다.
이는 페이지가 로드될 때 $routeProvider 함수의 'otherwise' 옵션으로 이동하여 '/Angular' 뷰를 로드하기 때문입니다.

기본 경로는 어떤 뷰가 로드될지 결정합니다. 다음 섹션에서는 단일 경로가 값을 전달하여 여러 레코드를 처리하는 방법을 설명합니다. URL.

AngularJS 경로에서 매개변수에 액세스하는 방법

Angular는 라우팅 중에 매개변수를 전달하는 기능도 제공합니다. 매개변수는 라우트의 끝에 추가됩니다. URL예를 들면, http://guru99/index.html#/Angular/1. 이 Angular 라우팅 예에서는

http://guru99/index.html 이것이 저희의 주요 애플리케이션입니다. URL
# 기호는 메인 애플리케이션과 메인 애플리케이션 사이의 구분자입니다. URL 그리고 경로
Angular가 우리의 경로입니다
마지막으로 '1'은 경로에 추가되는 매개변수입니다.

일반적인 구문은 HTML페이지#/경로/매개변수따라서 이전 주제는 Sample.html#/Angular/1, #/Angular/2 및 #/Angular/3이 되며, 여기서 숫자는 주제 ID입니다.

매개변수를 사용하는 Angular 라우트를 구현하는 방법을 자세히 살펴보겠습니다.

1단계) 다음 코드를 뷰에 추가합니다.

Angular JS 강좌의 모든 주제를 사용자에게 보여주는 표를 추가하세요.
"컨트롤러" 항목을 표시하는 테이블 행을 추가합니다. 이 행의 href 속성을 "#!/Angular/1"로 설정하여 해당 항목을 클릭하면 첫 번째 매개변수가 전달되도록 합니다. URL 경로를 따라.
"모델" 항목에 대한 행을 추가하고 href를 "#!/Angular/2"로 설정하여 두 번째 매개변수가 전달되도록 합니다. URL.
"Directives" 항목에 대한 행을 추가하고 href를 "#!/Angular/3"으로 설정하여 세 번째 매개변수가 전달되도록 합니다. URL.

2단계) routeProvider 서비스 함수에 토픽 ID를 추가합니다.
routeProvider 서비스 함수에 다음을 추가하세요. :topicId 전달된 모든 매개변수를 나타내는 자리 표시자입니다. URL 경로가 지정된 후에는 해당 경로가 topicId 변수에 할당되어야 합니다.

3단계) 컨트롤러에 필요한 코드를 추가합니다.

컨트롤러 함수를 정의할 때 "$routeParams"를 매개변수로 먼저 추가해야 합니다. 이 매개변수는 전달된 모든 경로 매개변수에 접근할 수 있습니다. URL.
"$routeParams"에는 경로에 전달된 topicId가 저장됩니다. 첨부 $routeParams.topicId 범위 내에서 $scope.tutorialid 해당 ID를 tutorialid로 뷰에서 사용할 수 있도록 합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ 수정 사항이 적용되었습니다. 원본에는 문자가 사용되었습니다. l 숫자 대신에 1 in href="#Angular/l"생략됨 ng-view 컨테이너가 로드되었기 때문에 템플릿이 렌더링될 곳이 없었고, angular-route.js 전에 angular.min.js이는 모듈 오류를 발생시킵니다.

4단계) 변수를 표시하는 표현식을 추가합니다.
Angular.html 페이지에 tutorialid 변수를 표시하는 표현식을 추가하세요.

<h2>Angular</h2>

<br><br>{{tutorialid}}

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력화면에서는

첫 번째 주제의 '주제 세부 정보' 링크를 클릭하면 숫자 1이 추가됩니다. URL.
해당 숫자는 "routeParams" 인수로 사용되어 컨트롤러에서 접근할 수 있게 됩니다.

매개변수를 읽는 것은 간단합니다. 뷰가 표시되기 전에 해당 매개변수가 지정하는 레코드를 가져오는 것은 다음에 설명할 속성의 역할입니다.

resolve 속성을 사용하여 데이터를 미리 로드하는 방법

이전 섹션의 컨트롤러는 토픽 ID를 읽어 즉시 표시합니다. 실제 애플리케이션은 먼저 서버에서 레코드를 가져와야 하며, 요청이 반환되기 전에 뷰가 렌더링되면 사용자는 잠시 후 채워지는 빈 템플릿을 보게 됩니다. resolve 해당 속성은 빈 콘텐츠가 잠깐 나타나는 현상을 제거합니다.

각각의 키는 내부에 있습니다 resolve `object`는 AngularJS가 라우트가 활성화되기 전에 준비하는 종속성입니다. 값이 프로미스인 경우 라우터는 프로미스가 완료될 때까지 기다립니다. 모든 프로미스가 해결된 후에야 AngularJS는 컨트롤러를 인스턴스화하고 템플릿을 렌더링하며, 해결된 값은 다른 서비스와 마찬가지로 이름으로 컨트롤러에 주입됩니다.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

여기서는 두 가지 동작이 중요합니다. 프로미스가 거부되면 경로 변경이 취소되고 브라우저는 현재 뷰에 머무르게 되므로 요청 실패로 인해 페이지가 깨지는 일은 없습니다. 하지만 라우터는 프로미스가 대기 중인 동안 차단되기 때문에 엔드포인트 응답 속도가 느리면 애플리케이션이 멈춘 것처럼 보일 수 있습니다. resolve 진행률 표시기는 다음을 통해 구동됩니다. $routeChangeStart $routeChangeSuccess 이벤트.

⚠️ 경고: 인증 확인을 절대로 내부에만 두지 마십시오. resolve경로를 거부하면 뷰는 숨겨지지만 그 뒤에 있는 데이터는 보호되지 않으며, API 엔드포인트는 서버에서 액세스 권한을 계속해서 적용해야 합니다.

라우트는 데이터 사전 로딩 외에도 정적 구성 값을 저장할 수 있습니다. 다음에 설명하는 서비스는 컨트롤러가 이러한 값을 읽는 방법입니다.

Angular $route 서비스를 사용하는 방법

`$route` 서비스를 사용하면 경로의 속성에 접근할 수 있습니다. `$route` 서비스는 컨트롤러에서 함수를 정의할 때 매개변수로 사용할 수 있습니다. 컨트롤러에서 `$route` 매개변수를 사용하는 일반적인 구문은 아래와 같습니다.

myApp.controller('MyController', function($scope, $route) { ... });

myApp은 애플리케이션을 위해 정의된 AngularJS 모듈입니다.
MyController는 애플리케이션에 대해 정의된 컨트롤러의 이름입니다.
$scope가 컨트롤러에서 뷰로 정보를 전달하는 것처럼, $route는 현재 경로의 속성을 노출합니다.

$route 서비스를 어떻게 사용할 수 있는지 살펴보겠습니다.

이 예에서,

"This is angle"이라는 문자열을 포함하는 "mytext"라는 간단한 사용자 정의 변수를 생성하겠습니다.
이 변수를 경로에 연결할 것입니다. Later 우리는 컨트롤러에서 `$route` 서비스를 사용하여 이 문자열에 접근한 다음, 스코프 객체를 사용하여 뷰에 표시할 것입니다.

이제 이를 달성하기 위해 수행해야 할 단계를 살펴보겠습니다.

단계 1) 경로에 사용자 지정 키-값 쌍을 추가합니다. 여기서는 'mytext'라는 키를 추가하고 "This is angle"이라는 값을 할당합니다.

단계 2) 컨트롤러에 관련 코드를 추가하세요.

컨트롤러 함수에 `$route` 매개변수를 추가하세요. `$route` 매개변수는 Angular에서 정의된 핵심 매개변수로, 이를 통해 경로의 속성에 접근할 수 있습니다.
경로에 정의된 "mytext" 변수는 $route.current 참조를 통해 액세스할 수 있습니다. 그런 다음 범위 개체의 'text' 변수에 할당됩니다. 그러면 그에 따라 뷰에서 텍스트 변수에 액세스할 수 있습니다.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

단계 3) 범위 개체의 텍스트 변수에 대한 참조를 표현식으로 추가합니다. 이는 아래와 같이 Angular.html 페이지에 추가됩니다.

이렇게 하면 "This is angle"이라는 텍스트가 뷰에 삽입됩니다. {{tutorialid}} 표현식은 이전 주제에서 본 것과 동일하며 숫자 '1'이 표시됩니다.

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력에서,

테이블의 링크를 클릭하면 "This is angular"라는 텍스트도 표시되는 것을 볼 수 있습니다. 토픽 ID도 텍스트와 동시에 표시됩니다.

모든 URL 지금까지 표시된 부분에는 여전히 # 기호가 포함되어 있습니다. 최종 설정 단계에서 이 기호가 제거됩니다.

HTML5 라우팅 활성화

HTML5 라우팅은 깔끔한 인터페이스를 만드는 데 사용됩니다. URL즉, 해시태그를 삭제하는 것을 의미합니다. URL그래서 라우팅은... URLHTML5 라우팅을 사용하는 경우 아래와 같이 표시됩니다.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

이 개념은 일반적으로 보기 좋게 표현하는 것으로 알려져 있습니다. URL 사용자에게

HTML2 라우팅을 위해 수행해야 할 두 가지 주요 단계가 있습니다.

$locationProvider 구성
상대 링크에 대한 기반 설정

이제 예시를 통해 위에서 언급한 단계를 어떻게 수행하는지 자세히 살펴보겠습니다.

단계 1) Angular 모듈에 관련 코드를 추가하세요.

추가 할 <base> `<head>` 태그를 문서 헤더에 추가합니다. 이는 HTML5 라우팅에 필수적이며, 애플리케이션이 기본 위치를 알 수 있도록 합니다.
`$locationProvider` 서비스를 추가하세요. 이 서비스를 사용하면 `html5Mode`를 정의할 수 있습니다.
$locationProvider 서비스의 html5Mode를 true로 설정합니다.

단계 2) 읽기 쉽도록 링크에 있는 모든 # 태그('Angular/1', 'Angular/2', 'Angular/3')를 제거하세요. URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ 보정: 원본은 다음과 같이 선언했습니다. baseUrl 로컬 IDE 경로를 가리키는 상수이며, 이는 html5Mode에 영향을 미치지 않습니다. AngularJS는 기본 위치를 다음에서 읽습니다. <base href> 태그. 원본에도 삽입됨. $locationProvider 전화도 하지 않고 html5Mode(true)그래서 해시는 제거되지 않았습니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력에서,

애플리케이션에 접속하면 # 태그가 없는 것을 확인할 수 있습니다.

위의 모든 코드는 AngularJS 팀에서 제공하는 라우터인 ngRoute를 사용합니다. 하지만 ngRoute가 유일한 선택지는 아니며, 아래 비교를 통해 다른 라우터가 더 적합한 경우를 설명합니다.

ngRoute와 ui-router 중 어떤 라우터를 선택해야 할까요?

ngRoute는 AngularJS 팀에서 관리하며 다음과 같은 항목을 일치시킵니다. URL ui-router는 ngRoute의 주요 제한 사항인 애플리케이션에 따라 매칭이 이루어진다는 문제를 해결하기 위해 만들어진 커뮤니티 프로젝트로, 단일 템플릿과 컨트롤러에 직접 연결됩니다. 상태 ~에 있는 것보다 URL 단독으로 사용 가능하며, 이를 통해 하나의 화면에 여러 개의 독립적으로 라우팅되는 영역을 포함할 수 있습니다.

아래	ngRoute	ui-라우터
구성 서비스	$routeProvider	$stateProvider
매치업	URL 만	이름이 지정된 주, URL optional
중첩된 보기	지원되지 않음	지원
화면당 여러 보기	원 ng-뷰	많은 ui-view 아울렛 이름이 있습니다.
중첩 해결	지원되지 않음	자식 상태는 부모 상태를 상속합니다.
가장 적합	평면형 소형 애플리케이션	대시보드 및 계층형 레이아웃

각 경우에 ngRoute를 선택하세요 URL ui-router는 추가적인 종속성이 필요 없고 전체 API가 단일 페이지에 담기므로 하나의 전체 페이지 뷰에 매핑됩니다. 화면의 패널들이 독립적으로 탐색하거나 자식 뷰가 부모 뷰에서 로드된 데이터를 재사용해야 하는 경우에는 ui-router를 선택하세요. 나중에 마이그레이션하는 것도 가능하지만, 상태 이름이 바뀌기 때문에 간단하지는 않습니다. URL 템플릿 전체에 걸쳐 패턴이 있습니다.

AngularJS 라우팅에서 흔히 발생하는 오류 및 해결 방법

대부분의 라우팅 오류는 콘솔 오류 대신 빈 ng-view를 생성하므로 진단이 예상보다 어렵습니다. 아래 각 증상에는 원인과 해결 방법이 명시되어 있습니다.

알 수 없는 공급자: $routeProvider: angular-route.js가 전혀 로드되지 않았거나 angular.min.js보다 먼저 로드되었습니다. 코어 라이브러리를 먼저 참조하세요.
오류 메시지 없이 화면이 비어 있는 상태로 유지됩니다. 어떤 요소에도 ng-view 지시문이 없으므로 템플릿이 렌더링될 곳이 없습니다.
첫 방문 시 아무것도 로드되지 않습니다. 빈 경로와 일치하는 경로가 없습니다. redirectTo 값을 가진 otherwise 블록을 추가하세요.
$routeParams가 비어 있습니다: 해당 패턴에 콜론 자리 표시자가 누락되었습니다. '/Angular/:topicId'로 수정해야 합니다.
html5Mode 이후 템플릿에서 404 오류가 발생합니다. 서버가 일치하지 않는 경로를 기본 페이지로 다시 작성하도록 구성하고 기본 href 태그가 있는지 확인합니다.
컨트롤러는 다시 실행되지 않습니다. 매개변수만 변경되었으므로 AngularJS는 컨트롤러 인스턴스를 다시 생성하는 대신 재사용합니다. 컨트롤러 함수가 다시 실행될 때까지 기다리는 대신 `$routeUpdate` 이벤트를 수신하세요.

자주 묻는 질문

`$routeParams`는 경로 자리 표시자와 쿼리 문자열 값을 하나의 객체로 병합하여 반환합니다. `$location.search()`는 쿼리 문자열만 반환합니다. 컨트롤러 내에서는 `$routeParams`를 사용하고, 쿼리 값을 직접 읽거나 쓸 때는 `$location.search()`를 사용하십시오.

네. 해시값이 없으면 브라우저는 새로 고침이나 공유 링크 시 전체 경로를 서버로 전송합니다. 서버는 일치하지 않는 모든 경로를 기본 HTML 페이지로 다시 작성해야 하며, 그렇지 않으면 딥 링크는 404 오류를 반환합니다.

AngularJS는 2021년 12월에 지원이 종료되었으며 더 이상 업데이트되지 않습니다. ngRoute는 기존 AngularJS 애플리케이션을 유지 관리하는 데에는 여전히 적합하지만, 새로운 프로젝트에서는 현재 지원되는 프레임워크를 사용하는 것이 좋습니다.

예. AI 어시스턴트는 각 when 블록을 Routes 배열 항목에 매핑하고 resolve 키를 경로 리졸버로 변환합니다. Rev두 라우터가 일치하지 않는 경로를 다르게 처리하므로, 뷰 가드와 와일드카드 처리를 수동으로 수행해야 합니다.

AI 도구는 일반적으로 세 가지 원인을 순서대로 확인합니다. ngRoute 종속성 누락, ng-view 요소 부재, 그리고 경로 패턴이 일치하지 않는 경우입니다. URL증상을 설명하고 설정 블록을 붙여넣으면 일반적으로 오류를 파악할 수 있습니다.

AngularJS에서 매개변수를 사용한 라우팅

단일 페이지 애플리케이션이란 무엇입니까?

AngularJS의 라우팅이란 무엇입니까?

$routeProvider를 사용하여 AngularJS 경로 추가

AngularJS 라우팅 예

AngularJS에서 기본 경로 만들기

AngularJS 경로에서 매개변수에 액세스하는 방법

resolve 속성을 사용하여 데이터를 미리 로드하는 방법

Angular $route 서비스를 사용하는 방법

HTML5 라우팅 활성화

ngRoute와 ui-router 중 어떤 라우터를 선택해야 할까요?

AngularJS 라우팅에서 흔히 발생하는 오류 및 해결 방법

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기

단일 페이지 애플리케이션이란 무엇입니까?

AngularJS의 라우팅이란 무엇입니까?

$routeProvider를 사용하여 AngularJS 경로 추가

AngularJS 라우팅 예

관련 기사

AngularJS에서 기본 경로 만들기

AngularJS 경로에서 매개변수에 액세스하는 방법

resolve 속성을 사용하여 데이터를 미리 로드하는 방법

Angular $route 서비스를 사용하는 방법

HTML5 라우팅 활성화

ngRoute와 ui-router 중 어떤 라우터를 선택해야 할까요?

AngularJS 라우팅에서 흔히 발생하는 오류 및 해결 방법

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기