Ví dụ định tuyến AngularJS với các tham số

Trước khi tìm hiểu cách định tuyến hoạt động trong Angular, chúng ta hãy xem tổng quan nhanh về Ứng dụng một trang.

Ứng dụng một trang là gì?

Ứng dụng trang đơn hoặc (SPA) là các ứng dụng web tải một trang HTML và cập nhật động trang đó dựa trên tương tác của người dùng với ứng dụng web.

Định tuyến trong AngularJS là gì?

Định tuyến trong AngularJS là một phương pháp cho phép bạn tạo Ứng dụng một trang. Nó cho phép bạn tạo các URL khác nhau cho các nội dung khác nhau trong ứng dụng web của mình. Định tuyến AngularJS cũng giúp hiển thị nhiều nội dung tùy thuộc vào tuyến đường được chọn. Nó được chỉ định trong URL sau dấu #.

Hãy lấy một ví dụ về một trang web được lưu trữ qua URL http://example.com/index.html.

Trên trang này, bạn sẽ lưu trữ trang chính của ứng dụng. Giả sử nếu ứng dụng đang tổ chức một Sự kiện và người dùng muốn xem các sự kiện khác nhau đang hiển thị là gì hoặc muốn xem chi tiết về một sự kiện cụ thể hoặc xóa một sự kiện. Trong ứng dụng Trang đơn, khi định tuyến được bật, tất cả các chức năng này sẽ khả dụng thông qua các liên kết sau

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

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

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

Biểu tượng # sẽ được sử dụng cùng với các tuyến khác nhau (ShowEvent, DisplayEvent và DeleteEvent).

Vì vậy, nếu người dùng muốn xem tất cả Sự kiện, họ sẽ được chuyển hướng đến liên kết (http://example.com/index.html#ShowEvent), khác
Nếu họ chỉ muốn xem một sự kiện cụ thể, họ sẽ được chuyển hướng đến liên kết ( http://example.com/index.html#DisplayEvent) hoặc
Nếu họ muốn xóa một sự kiện, họ sẽ được chuyển đến liên kết http://example.com/index.html#DeleteEvent.

Lưu ý rằng URL chính vẫn giữ nguyên.

Thêm tuyến đường AngularJS bằng cách sử dụng $routeProvider

Như chúng ta đã thảo luận trước đó, các tuyến đường trong AngularJS được sử dụng để định tuyến người dùng đến một chế độ xem khác của ứng dụng của bạn. Và việc định tuyến này được thực hiện trên cùng một trang HTML để người dùng có cảm giác rằng mình chưa rời khỏi trang.

Để triển khai định tuyến, các bước chính sau đây phải được triển khai trong ứng dụng của bạn theo thứ tự cụ thể.

Tham khảo góc-route.js. Đây là một JavaScript tệp do Google phát triển có tất cả chức năng định tuyến. Điều này cần phải được đặt trong ứng dụng của bạn để nó có thể tham chiếu tất cả các mô-đun chính cần thiết cho việc định tuyến.
Bước quan trọng tiếp theo là thêm phần phụ thuộc vào mô-đun ngRoute từ bên trong ứng dụng của bạn. Sự phụ thuộc này là cần thiết để có thể sử dụng chức năng định tuyến trong ứng dụng. Nếu phần phụ thuộc này không được thêm vào thì người ta sẽ không thể sử dụng định tuyến trong ứng dụng Angular.JS.

Dưới đây là cú pháp chung của câu lệnh này. Đây chỉ là một khai báo thông thường của một mô-đun có bao gồm từ khóa ngRoute.

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

Bước tiếp theo sẽ là định cấu hình $routeProvider của bạn. Điều này là cần thiết để cung cấp các tuyến đường khác nhau trong ứng dụng của bạn. Dưới đây là cú pháp chung của câu lệnh này rất dễ hiểu. Nó chỉ cho biết rằng khi đường dẫn liên quan được chọn, hãy sử dụng tuyến đường đó để hiển thị chế độ xem đã cho cho người dùng.

when(path, route)

Liên kết đến tuyến đường của bạn từ trong trang HTML của bạn. Trong trang HTML, bạn sẽ thêm các liên kết tham chiếu đến các tuyến có sẵn khác nhau trong ứng dụng của mình.

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

Cuối cùng sẽ là sự bao gồm của chỉ thị ng-view, thường nằm trong thẻ div. Điều này sẽ được sử dụng để chèn nội dung của chế độ xem khi tuyến đường liên quan được chọn.

Ví dụ định tuyến AngularJS

Bây giờ, hãy xem một ví dụ về định tuyến bằng các bước nêu trên.

Trong ví dụ định tuyến AngularJS của chúng tôi với các tham số,

Chúng tôi sẽ trình bày 2 liên kết cho người dùng,

Một là hiển thị các chủ đề cho một Góc cạnh tất nhiên, và cái còn lại là dành cho Node.js khóa học.
Khi người dùng nhấp vào một trong hai liên kết, các chủ đề của khóa học đó sẽ được hiển thị.

Bước 1) Bao gồm tệp tuyến đường góc làm tài liệu tham khảo tập lệnh.

Tệp tuyến đường này là cần thiết để sử dụng các chức năng có nhiều tuyến đường và chế độ xem. Tập tin này có thể được tải xuống từ trang web Angular.JS.

Bước 2) Thêm các thẻ href sẽ đại diện cho các liên kết đến “Chủ đề JS góc” và “Chủ đề JS nút”.

Bước 3) Thêm thẻ div với lệnh ng-view sẽ đại diện cho chế độ xem.

Điều này sẽ cho phép chế độ xem tương ứng được đưa vào bất cứ khi nào người dùng nhấp vào “Chủ đề JS góc” hoặc “Chủ đề JS nút”.

Bước 4) Trong thẻ script của bạn cho AngularJS, hãy thêm “mô-đun ngRoute” và dịch vụ “$routeProvider”.

Giải thích mã:

Bước đầu tiên là đảm bảo bao gồm “mô-đun ngRoute”. Với điều này, Angular sẽ tự động xử lý việc định tuyến trong ứng dụng của bạn. Mô-đun ngRoute do Google phát triển có tất cả các chức năng cho phép thực hiện định tuyến. Bằng cách thêm mô-đun này, ứng dụng sẽ tự động hiểu tất cả các lệnh định tuyến.
$routeprovider là một dịch vụ được sử dụng ở chế độ nền để lắng nghe các tuyến đường được gọi. Vì vậy, khi người dùng nhấp vào một liên kết, nhà cung cấp tuyến đường trong AngularJS sẽ phát hiện điều này và sau đó quyết định nên đi tuyến đường nào.
Tạo một tuyến cho liên kết Angular - Khối này có nghĩa là khi nhấp vào liên kết Angular, hãy đưa tệp Angular.html và cũng sử dụng Bộ điều khiển 'AngularController' để xử lý bất kỳ logic nghiệp vụ nào.
Tạo một tuyến cho liên kết Nút – Khối này có nghĩa là khi nhấp vào liên kết Nút, hãy đưa tệp Node.html và cũng sử dụng Bộ điều khiển 'NodeController' để xử lý bất kỳ logic nghiệp vụ nào.

Bước 5) Tiếp theo là thêm bộ điều khiển để xử lý logic nghiệp vụ cho cả AngularController và NodeController.

Trong mỗi bộ điều khiển, chúng tôi đang tạo một mảng các cặp khóa-giá trị để lưu trữ tên và mô tả Chủ đề cho mỗi khóa học. Biến mảng 'hướng dẫn' được thêm vào đối tượng phạm vi cho mỗi bộ điều khiển.

<!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>

Bước 6) Tạo các trang có tên Angular.html và Node.html. Đối với mỗi trang chúng tôi đang thực hiện các bước dưới đây.

Các bước này sẽ đảm bảo rằng tất cả các cặp khóa-giá trị của mảng đều được hiển thị trên mỗi trang.

Sử dụng lệnh ng-repeat để duyệt qua từng cặp khóa-giá trị được xác định trong biến hướng dẫn.
Hiển thị tên và mô tả của từng cặp khóa-giá trị.

Góc.html

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

Nút.html

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

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Nếu bạn nhấp vào liên kết Chủ đề AngularJS, đầu ra bên dưới sẽ được hiển thị.

Kết quả đầu ra cho thấy rõ ràng rằng,

Khi nhấp vào liên kết “Chủ đề JS góc”, RouteProvider mà chúng tôi đã khai báo trong mã của mình sẽ quyết định rằng mã Angular.html sẽ được đưa vào.
Mã này sẽ được đưa vào thẻ “div”, chứa lệnh ng-view. Ngoài ra, nội dung mô tả khóa học đến từ “biến hướng dẫn”, một phần của đối tượng phạm vi được xác định trong AngularController.
Khi một người nhấp chuột vào Node.js Các chủ đề, kết quả tương tự sẽ diễn ra và chế độ xem các chủ đề Node.js sẽ được hiển thị.
Ngoài ra, hãy lưu ý rằng URL trang vẫn giữ nguyên, chỉ có tuyến đường sau thẻ # thay đổi. Và đây là khái niệm về ứng dụng một trang. Thẻ #hash trong URL là dấu phân cách ngăn cách tuyến đường (trong trường hợp của chúng tôi là 'Angular' như trong hình trên) và trang HTML chính (Sample.html)

Tạo tuyến đường mặc định trong AngularJS

Định tuyến trong AngularJS cũng cung cấp cơ sở để có tuyến đường mặc định. Đây là tuyến đường được chọn nếu không có tuyến đường nào phù hợp với tuyến đường hiện có.

Tuyến đường mặc định được tạo bằng cách thêm điều kiện sau khi xác định dịch vụ $routeProvider.

Cú pháp dưới đây chỉ đơn giản là chuyển hướng đến một trang khác nếu bất kỳ tuyến đường hiện có nào không khớp.

otherwise ({
    redirectTo: 'page'
});

Hãy sử dụng ví dụ tương tự ở trên và thêm tuyến đường mặc định vào dịch vụ $routeProvider của chúng tôi.

function($routeProvider){
$routeProvider.

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

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

Giải thích mã:

Ở đây chúng ta sử dụng cùng một mã như trên với điểm khác biệt duy nhất là chúng ta sử dụng câu lệnh else và tùy chọn “redirectTo” để chỉ định chế độ xem nào sẽ được tải nếu không có tuyến đường nào được chỉ định. Trong trường hợp của chúng ta, chúng ta muốn chế độ xem '/Angular' được hiển thị.

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

Bạn có thể thấy rõ rằng chế độ xem mặc định được hiển thị là chế độ xem JS góc cạnh.
Điều này là do khi trang tải, nó sẽ chuyển đến tùy chọn 'otherwise' trong hàm $routeProvider và tải chế độ xem '/Angular'.

Cách truy cập các tham số từ Tuyến đường AngularJS

Angular cũng cung cấp chức năng cung cấp các tham số trong quá trình định tuyến. Các tham số được thêm vào cuối tuyến đường trong URL, ví dụ: http://guru99/index.html#/Angular/1. Trong ví dụ định tuyến góc này,

, http://guru99/index.html là URL ứng dụng chính của chúng tôi
Ký hiệu # là dấu phân cách giữa URL ứng dụng chính và tuyến đường.
Angular là tuyến đường của chúng tôi
Và cuối cùng '1' là tham số được thêm vào tuyến đường của chúng tôi

Cú pháp về cách hiển thị các tham số trong URL được hiển thị bên dưới:

HTMLTrang#/tuyến đường/tham số

Ở đây bạn sẽ nhận thấy rằng tham số được truyền sau tuyến đường trong URL.

Vì vậy, trong ví dụ về các tuyến đường AngularJS ở trên đối với các chủ đề Angular JS, chúng ta có thể truyền một tham số như hiển thị bên dưới

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Ở đây các tham số 1, 2 và 3 thực sự có thể đại diện cho topicid.

Hãy xem chi tiết cách chúng ta có thể triển khai Angular Route với tham số:

Bước 1) Thêm đoạn mã sau vào chế độ xem của bạn

Thêm bảng hiển thị tất cả các chủ đề của khóa học Angular JS cho người dùng
Thêm một hàng bảng để hiển thị chủ đề “Bộ điều khiển”. Đối với hàng này, hãy đổi thẻ href thành “Angular/1”, nghĩa là khi người dùng nhấp vào chủ đề này, tham số 1 sẽ được truyền vào URL cùng với tuyến đường.
Thêm một hàng bảng để hiển thị chủ đề “Mô hình”. Đối với hàng này, hãy đổi thẻ href thành “Angular/2”, nghĩa là khi người dùng nhấp vào chủ đề này, tham số 2 sẽ được truyền vào URL cùng với tuyến đường.
Thêm một hàng bảng để hiển thị chủ đề “Directives”. Đối với hàng này, hãy đổi thẻ href thành “Angular/3”, nghĩa là khi người dùng nhấp vào chủ đề này, tham số 3 sẽ được truyền vào URL cùng với tuyến đường.

Bước 2) Thêm id chủ đề vào chức năng dịch vụ Routeprovider
Trong hàm dịch vụ của nhà cung cấp tuyến đường, hãy thêm:topicId để biểu thị rằng mọi tham số được truyền trong URL sau tuyến đường phải được gán cho biến topicId.

Bước 3) Thêm mã cần thiết vào bộ điều khiển

Trước tiên, hãy đảm bảo thêm “$routeParams” làm tham số khi xác định chức năng của bộ điều khiển. Tham số này sẽ có quyền truy cập vào tất cả các tham số tuyến đường được truyền trong URL.
Tham số “routeParams” có tham chiếu đến đối tượng topicId, đối tượng này được truyền dưới dạng tham số tuyến đường. Ở đây chúng tôi đang đính kèm biến '$routeParams.topicId' vào đối tượng phạm vi của mình dưới dạng biến '$scope.tutotialid'. Điều này đang được thực hiện để nó có thể được tham chiếu trong chế độ xem của chúng tôi thông qua biến 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>

Bước 4) Thêm biểu thức để hiển thị biến
Thêm biểu thức để hiển thị biến tutorialid trong trang Angular.html.

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Ở màn hình đầu ra,

Nếu bạn nhấp vào liên kết Chi tiết chủ đề cho chủ đề đầu tiên, số 1 sẽ được thêm vào URL.
Sau đó, số này sẽ được dịch vụ cung cấp định tuyến Angular.JS lấy làm đối số "routeparam" và sau đó bộ điều khiển của chúng tôi có thể truy cập được.

Cách sử dụng dịch vụ định tuyến $ góc

Dịch vụ $route cho phép bạn truy cập các thuộc tính của tuyến đường. Dịch vụ $route có sẵn dưới dạng tham số khi hàm được xác định trong bộ điều khiển. Cú pháp chung về cách tham số $route có sẵn từ bộ điều khiển được hiển thị bên dưới;

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

myApp là mô-đun góc cạnh.JS được xác định cho các ứng dụng của bạn
MyController là tên của bộ điều khiển được xác định cho ứng dụng của bạn
Giống như biến $scope được cung cấp cho ứng dụng của bạn, biến này được sử dụng để truyền thông tin từ bộ điều khiển đến dạng xem. Tham số $route được sử dụng để truy cập các thuộc tính của tuyến đường.

Chúng ta hãy xem cách chúng ta có thể sử dụng dịch vụ $route.

Trong ví dụ này,

Chúng ta sẽ tạo một biến tùy chỉnh đơn giản có tên là “mytext”, biến này sẽ chứa chuỗi “Đây là góc cạnh”.
Chúng ta sẽ đính kèm biến này vào route của chúng ta. Và sau đó chúng ta sẽ truy cập chuỗi này từ bộ điều khiển của chúng ta bằng dịch vụ $route và sau đó sử dụng đối tượng phạm vi để hiển thị trong chế độ xem của chúng ta.

Vì vậy, hãy xem các bước chúng ta cần thực hiện để đạt được điều này.

Bước 1) Thêm cặp khóa-giá trị tùy chỉnh vào tuyến đường. Ở đây, chúng tôi đang thêm một khóa có tên là 'mytext' và gán cho nó giá trị “Đây là góc cạnh”.

Bước 2) Thêm mã có liên quan vào bộ điều khiển

Thêm tham số $route vào hàm điều khiển. Tham số $route là tham số chính được xác định theo góc, cho phép một người truy cập các thuộc tính của tuyến đường.
Biến “mytext” được xác định trong tuyến có thể được truy cập thông qua tham chiếu $route.current. Sau đó, điều này được gán cho biến 'văn bản' của đối tượng phạm vi. Biến văn bản sau đó có thể được truy cập từ chế độ xem tương ứng.

<!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>

Bước 3) Thêm tham chiếu đến biến văn bản từ đối tượng phạm vi dưới dạng biểu thức. Điều này sẽ được thêm vào trang Angular.html của chúng tôi như hiển thị bên dưới.

Điều này sẽ khiến văn bản “Đây là góc cạnh” được đưa vào chế độ xem. Biểu thức {{tutorialid}} giống như biểu thức đã thấy trong chủ đề trước và biểu thức này sẽ hiển thị số '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

Chúng ta có thể thấy rằng dòng chữ “Đây là góc cạnh” cũng được hiển thị khi chúng ta nhấp vào bất kỳ liên kết nào trong bảng. Id chủ đề cũng được hiển thị cùng lúc với văn bản.

Kích hoạt định tuyến HTML5

Định tuyến HTML5 về cơ bản được sử dụng để tạo URL sạch. Nó có nghĩa là loại bỏ hashtag khỏi URL. Vì vậy, các URL định tuyến khi sử dụng định tuyến HTML5 sẽ xuất hiện như bên dưới

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Khái niệm này thường được gọi là trình bày URL đẹp cho người dùng.

Có 2 bước chính cần được thực hiện để định tuyến HTML5.

Định cấu hình $locationProvider
Đặt cơ sở của chúng tôi cho các liên kết tương đối

Hãy xem xét chi tiết cách thực hiện các bước nêu trên trong ví dụ trên của chúng tôi

Bước 1) Thêm mã có liên quan vào mô-đun góc

Thêm hằng số baseURL vào ứng dụng – Điều này là bắt buộc đối với định tuyến HTML5 để ứng dụng biết vị trí cơ sở của ứng dụng là gì.
Thêm dịch vụ $locationProvider. Dịch vụ này cho phép bạn xác định html5Mode.
Đặt html5Mode của dịch vụ $locationProvider thành true.

Bước 2) Xóa tất cả các #tags cho các liên kết ('Angular/1', 'Angular/2', 'Angular/3') để tạo URL dễ đọc.

<!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>

Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

Bạn có thể thấy thẻ # không có khi truy cập ứng dụng.

Tổng kết

Định tuyến được sử dụng để hiển thị các chế độ xem khác nhau cho người dùng trên cùng một trang web. Về cơ bản, đây là khái niệm được sử dụng trong các ứng dụng Trang đơn được triển khai cho hầu hết các ứng dụng web hiện đại.
Một tuyến mặc định có thể được thiết lập để định tuyến Angular.JS. Nó được sử dụng để xác định chế độ xem mặc định sẽ được hiển thị cho người dùng là gì
Các tham số có thể được chuyển tới tuyến đường thông qua URL dưới dạng tham số tuyến đường. Các tham số này sau đó được truy cập bằng cách sử dụng tham số $routeParams trong bộ điều khiển
Dịch vụ $route có thể được sử dụng để xác định các cặp khóa-giá trị tùy chỉnh trong tuyến mà sau đó có thể được truy cập từ trong chế độ xem
Định tuyến HTML5 được sử dụng để xóa #tag khỏi URL định tuyến theo góc để tạo thành URL đẹp

Bạn có thể thích:

Ứng dụng một trang là gì?

Định tuyến trong AngularJS là gì?

Thêm tuyến đường AngularJS bằng cách sử dụng $routeProvider

NHỮNG BÀI VIẾT LIÊN QUAN

Ví dụ định tuyến AngularJS

Tạo tuyến đường mặc định trong AngularJS

Cách truy cập các tham số từ Tuyến đường AngularJS

Cách sử dụng dịch vụ định tuyến $ góc

Kích hoạt định tuyến HTML5

Tổng kết