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

Angular에서 라우팅이 어떻게 작동하는지 배우기 전에 단일 페이지 애플리케이션에 대한 간략한 개요를 살펴보겠습니다.

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

단일 페이지 애플리케이션(SPA)은 단일 HTML 페이지를 로드하고 웹 애플리케이션과의 사용자 상호 작용을 기반으로 페이지를 동적으로 업데이트하는 웹 애플리케이션입니다.

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

AngularJS의 라우팅 단일 페이지 응용 프로그램을 만들 수 있는 방법입니다. 이를 통해 웹 애플리케이션의 다양한 콘텐츠에 대해 다양한 URL을 생성할 수 있습니다. AngularJS 라우팅은 선택한 경로에 따라 여러 콘텐츠를 표시하는 데도 도움이 됩니다. # 기호 뒤의 URL에 지정됩니다.

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

이 페이지에서는 애플리케이션의 메인 페이지를 호스팅합니다. 애플리케이션이 이벤트를 조직하고 있고, 다양한 이벤트가 표시되는지 보고 싶거나 특정 이벤트의 세부 정보를 보고 싶거나 이벤트를 삭제하고 싶은 경우를 가정해 보겠습니다. 단일 페이지 애플리케이션에서 라우팅이 활성화되면 다음 링크를 통해 이 모든 기능을 사용할 수 있습니다.

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

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

따라서 사용자가 모든 이벤트를 보고 싶다면 링크(http://example.com/index.html#ShowEvent), 또 다른
특정 이벤트만 보고 싶다면 링크( http://example.com/index.html#DisplayEvent) 또는
이벤트를 삭제하려는 경우 해당 링크로 이동됩니다. http://example.com/index.html#DeleteEvent.

기본 URL은 동일하게 유지됩니다.

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

앞서 논의한 것처럼 AngularJS와 사용자를 애플리케이션의 다른 보기로 라우팅하는 데 사용됩니다. 그리고 이 라우팅은 동일한 HTML 페이지에서 수행되므로 사용자는 페이지를 떠나지 않은 듯한 경험을 할 수 있습니다.

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

Angle-route.js에 대한 참조입니다. 이것은 JavaScript 라우팅의 모든 기능을 갖춘 Google에서 개발한 파일입니다. 라우팅에 필요한 모든 기본 모듈을 참조할 수 있도록 애플리케이션에 배치해야 합니다.
다음으로 중요한 단계는 애플리케이션 내에서 ngRoute 모듈에 종속성을 추가하는 것입니다. 애플리케이션 내에서 라우팅 기능을 사용할 수 있으려면 이 종속성이 필요합니다. 이 종속성을 추가하지 않으면 angle.JS 애플리케이션 내에서 라우팅을 사용할 수 없습니다.

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

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

다음 단계는 $routeProvider를 구성하는 것입니다. 이는 애플리케이션에서 다양한 경로를 제공하는 데 필요합니다. 다음은 설명이 매우 필요한 이 문의 일반 구문입니다. 관련 경로가 선택되면 해당 경로를 사용하여 사용자에게 지정된 보기를 표시한다고 명시되어 있습니다.

when(path, route)

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

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

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

AngularJS 라우팅 예

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

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

우리는 사용자에게 2개의 링크를 제시할 것입니다.

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

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

이 경로 파일은 여러 경로와 보기 기능을 활용하는 데 필요합니다. 이 파일은angular.JS 웹사이트에서 다운로드할 수 있습니다.

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

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

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

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

코드 설명 :

첫 번째 단계는 "ngRoute 모듈"을 포함하는 것입니다. 이를 통해 Angular는 애플리케이션의 라우팅을 자동으로 처리합니다. Google에서 개발한 ngRoute 모듈은 라우팅이 가능한 모든 기능을 갖추고 있습니다. 이 모듈을 추가하면 애플리케이션은 모든 라우팅 명령을 자동으로 이해합니다.
$routeprovider는 호출되는 경로를 백그라운드에서 수신하기 위해 Angle이 사용하는 서비스입니다. 따라서 사용자가 링크를 클릭하면 AngularJS의 경로 제공자가 이를 감지하고 어떤 경로를 선택할지 결정합니다.
Angular 링크에 대한 하나의 경로 생성 – 이 블록은 Angular 링크를 클릭할 때 Angular.html 파일을 삽입하고 컨트롤러 'AngularController'를 사용하여 모든 비즈니스 로직을 처리한다는 것을 의미합니다.
노드 링크에 대한 하나의 경로 생성 – 이 블록은 노드 링크를 클릭할 때 Node.html 파일을 삽입하고 컨트롤러 'NodeController'를 사용하여 비즈니스 로직을 처리한다는 것을 의미합니다.

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

각 컨트롤러에서는 각 코스의 주제 이름과 설명을 저장하기 위해 키-값 쌍 배열을 생성합니다. 배열 변수 'tutorial'이 각 컨트롤러의 범위 개체에 추가됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">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"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

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

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

ng-repeat 지시어를 사용하여 튜토리얼 변수에 정의된 각 키-값 쌍을 살펴보세요.
각 키-값 쌍의 이름과 설명을 표시합니다.

Angular.html

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

Node.html

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

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

출력:

AngularJS Topics 링크를 클릭하면 아래 출력이 표시됩니다.

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

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

AngularJS에서 기본 경로 만들기

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

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

아래 구문은 단순히 기존 경로가 일치하지 않는 경우 다른 페이지로 리디렉션하는 것을 의미합니다.

otherwise ({
    redirectTo: 'page'
});

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

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

when("/Node", {
templateUrl: 'Node.html',
controller: 'NodeController'
}).
otherwise({
    redirectTo:'/Angular'
});
}]);

코드 설명 :

여기서는 위와 동일한 코드를 사용하는데 유일한 차이점은 우리가 다른 문장과 “redirectTo” 옵션을 사용하여 경로가 지정되지 않은 경우 로드해야 할 뷰를 지정한다는 것입니다. 우리의 경우 '/Angular' 뷰가 표시되기를 원합니다.

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

출력:

출력에서,

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

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

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

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

URL에서 매개변수가 표시되는 방식에 대한 구문은 다음과 같습니다.

HTML페이지#/경로/매개변수

여기에서는 URL의 경로 뒤에 매개변수가 전달되는 것을 알 수 있습니다.

따라서 위의 Angular JS 주제에 대한 AngularJS 경로 예제에서는 아래와 같이 매개변수를 전달할 수 있습니다.

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

여기서 1, 2, 3의 매개변수는 실제로 topicid를 나타낼 수 있습니다.

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

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

Angular JS 과정의 모든 주제를 사용자에게 표시하는 테이블을 추가합니다.
"Controllers" 토픽을 표시하기 위한 테이블 행을 추가합니다. 이 행의 경우 href 태그를 "Angular/1"로 변경합니다. 즉, 사용자가 이 토픽을 클릭하면 매개변수 1이 경로와 함께 URL에 전달됩니다.
"모델" 토픽을 보여주는 테이블 행을 추가합니다. 이 행의 경우 href 태그를 "Angular/2"로 변경합니다. 즉, 사용자가 이 토픽을 클릭하면 매개변수 2가 경로와 함께 URL에 전달됩니다.
"지시사항" 주제를 보여주는 테이블 행을 추가합니다. 이 행의 경우 href 태그를 "Angular/3"으로 변경합니다. 즉, 사용자가 이 주제를 클릭하면 매개변수 3이 경로와 함께 URL에 전달됩니다.

2단계) Routeprovider 서비스 기능에 주제 ID 추가
Routeprovider 서비스 함수에서:topicId를 추가하여 경로 이후에 URL에 전달된 모든 매개변수가 topicId 변수에 할당되어야 함을 나타냅니다.

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

컨트롤러 기능을 정의할 때 먼저 "$routeParams"를 매개변수로 추가해야 합니다. 이 매개변수는 URL에 전달된 모든 경로 매개변수에 액세스할 수 있습니다.
"routeParams" 매개변수에는 경로 매개변수로 전달되는 topicId 개체에 대한 참조가 있습니다. 여기서는 '$routeParams.topicId' 변수를 범위 개체에 '$scope.tutotialid' 변수로 연결합니다. 이는 tutorialid 변수를 통해 뷰에서 참조될 수 있도록 수행됩니다.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

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

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

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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

출력:

출력화면에서는

첫 번째 주제의 주제 세부 정보 링크를 클릭하면 URL에 숫자 1이 추가됩니다.
그러면 이 숫자는 Angular.JS Routeprovider 서비스에서 "routeparam" 인수로 사용되며 컨트롤러에서 액세스할 수 있습니다.

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

$route 서비스를 사용하면 경로의 속성에 액세스할 수 있습니다. $route 서비스는 컨트롤러에서 함수를 정의할 때 매개변수로 사용할 수 있습니다. 컨트롤러에서 $route 매개변수를 사용하는 방법에 대한 일반적인 구문은 다음과 같습니다.

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

myApp은 애플리케이션에 대해 정의된 angle.JS 모듈입니다.
MyController는 애플리케이션에 정의된 컨트롤러의 이름입니다.
컨트롤러에서 뷰로 정보를 전달하는 데 사용되는 $scope 변수를 애플리케이션에 사용할 수 있는 것과 같습니다. $route 매개변수는 경로의 속성에 액세스하는 데 사용됩니다.

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

이 예에서,

"This is angle"이라는 문자열을 포함하는 "mytext"라는 간단한 사용자 정의 변수를 생성하겠습니다.
우리는 이 변수를 우리의 경로에 첨부할 것입니다. 그리고 나중에 우리는 $route 서비스를 사용하여 우리의 컨트롤러에서 이 문자열에 액세스하고, 그 후에 범위 객체를 사용하여 그것을 우리의 뷰에 표시할 것입니다.

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

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

단계 2) 컨트롤러에 관련 코드를 추가합니다.

컨트롤러 기능에 $route 매개변수를 추가합니다. $route 매개변수는 각도에 정의된 핵심 매개변수로, 경로의 속성에 액세스할 수 있도록 해줍니다.
경로에 정의된 "mytext" 변수는 $route.current 참조를 통해 액세스할 수 있습니다. 그런 다음 범위 개체의 'text' 변수에 할당됩니다. 그러면 그에 따라 뷰에서 텍스트 변수에 액세스할 수 있습니다.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

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

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

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

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

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

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

출력:

출력에서,

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

HTML5 라우팅 활성화

HTML5 라우팅은 기본적으로 깨끗한 URL을 생성하는 데 사용됩니다. 이는 URL에서 해시태그를 제거하는 것을 의미합니다. 따라서 HTML5 라우팅을 사용하면 라우팅 URL이 아래와 같이 나타납니다.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

이 개념은 일반적으로 사용자에게 예쁜 URL을 제공하는 것으로 알려져 있습니다.

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

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

위의 예에서 위에서 언급한 단계를 수행하는 방법을 자세히 살펴보겠습니다.

단계 1) 각도 모듈에 관련 코드를 추가합니다.

애플리케이션에 baseURL 상수를 추가합니다. 이는 애플리케이션이 애플리케이션의 기본 위치를 알 수 있도록 HTML5 라우팅에 필요합니다.
$locationProvider 서비스를 추가합니다. 이 서비스를 사용하면 html5Mode를 정의할 수 있습니다.
$locationProvider 서비스의 html5Mode를 true로 설정합니다.

단계 2) 읽기 쉬운 URL을 만들려면 링크('Angular/1', 'Angular/2', 'Angular/3')에 대한 모든 #태그를 제거하세요.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

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

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

출력:

출력에서,

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

요약

라우팅은 동일한 웹 페이지의 사용자에게 다양한 보기를 제공하는 데 사용됩니다. 이는 기본적으로 거의 모든 최신 웹 애플리케이션에 구현되는 단일 페이지 애플리케이션에 사용되는 개념입니다.
Angle.JS 라우팅을 위해 기본 경로를 설정할 수 있습니다. 사용자에게 표시될 기본 보기가 무엇인지 결정하는 데 사용됩니다.
매개변수는 URL을 통해 경로 매개변수로 경로에 전달될 수 있습니다. 그런 다음 컨트롤러에서 $routeParams 매개변수를 사용하여 이러한 매개변수에 액세스합니다.
$route 서비스는 경로에서 사용자 정의 키-값 쌍을 정의하는 데 사용할 수 있으며 이후에 보기 내에서 액세스할 수 있습니다.
HTML5 라우팅은 각도로 라우팅 URL에서 #태그를 제거하여 예쁜 URL을 형성하는 데 사용됩니다.