Định tuyến AngularJs với tham số

Trước khi tìm hiểu cách thức hoạt động của định tuyến trong AngularJS, điều quan trọng là phải hiểu loại ứng dụng mà định tuyến được xây dựng cho. Phần dưới đây sẽ thiết lập bối cảnh đó, và mọi kỹ thuật tiếp theo đều dựa trên nền tảng đó.

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

Ứng dụng một trang (Single Page Application - SPA) là các ứng dụng web tải một trang HTML duy nhất và sau đó cập nhật trang đó một cách động khi người dùng tương tác với nó. Thay vì yêu cầu một tài liệu mới từ máy chủ cho mỗi lần nhấp chuột, SPA chỉ thay thế phần trang đã thay đổi.

Thiết kế đó tạo ra một vấn đề. Nếu trình duyệt không bao giờ chuyển đến một tài liệu mới, thanh địa chỉ sẽ không bao giờ thay đổi, vì vậy người dùng không thể đánh dấu trang, chia sẻ hoặc sử dụng nút quay lại. Định tuyến giải quyết chính xác vấn đề này.

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

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

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

Trang này chứa màn hình chính của ứng dụng. Giả sử ứng dụng tổ chức một Sự kiện và người dùng muốn xem danh sách các sự kiện, xem chi tiết một sự kiện hoặc xóa một sự kiện. Trong một ứng dụng trang đơn (Single Page Application) có bật định tuyến, tất cả những điều này đều có thể thực hiện được thông qua các liên kết sau.

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

• Để xem tất cả các sự kiện, người dùng được chuyển hướng đến trang này. http://example.com/index.html#ShowEvent
• Để xem một sự kiện cụ thể, họ được hướng dẫn đến... http://example.com/index.html#DisplayEvent
• Để xóa một sự kiện, họ được hướng dẫn đến... http://example.com/index.html#DeleteEvent

Lưu ý rằng phần chính URL Nó vẫn giữ nguyên. Chỉ có đoạn mã sau dấu # thay đổi, và đoạn mã đó là thứ mà AngularJS theo dõi. Sau khi đã hiểu rõ khái niệm này, phần tiếp theo sẽ đề cập đến các thành phần bạn cần kết nối trước khi mọi thứ hoạt động.

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

Như đã thảo luận trước đó, các tuyến đường trong AngularJS Chúng được sử dụng để chuyển hướng người dùng đến một giao diện khác của ứng dụng. Việc chuyển hướng này được thực hiện trên cùng một trang HTML, do đó người dùng có cảm giác như họ không rời khỏi trang.

Để triển khai định tuyến, các bước chính sau đây cần được thực hiện trong ứng dụng của bạn theo bất kỳ thứ tự cụ thể nào.

1. Tham khảo angular-route.js. Điều này JavaScript tệp, được phát triển bởi GoogleNó chứa tất cả các chức năng định tuyến và phải được bao gồm để ứng dụng có thể tham chiếu đến nhu cầu định tuyến của các mô-đun.
2. Thêm phần phụ thuộc vào module ngRoute trong ứng dụng của bạn. Nếu không có phần phụ thuộc này, chức năng định tuyến sẽ không thể được sử dụng trong ứng dụng AngularJS.

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']);

3. Hãy cấu hình `$routeProvider`. Biến này cung cấp các tuyến đường khác nhau trong ứng dụng của bạn, và cú pháp đơn giản chỉ ra rằng khi đường dẫn phù hợp được chọn, hãy sử dụng tuyến đường đó để hiển thị giao diện đã cho.

when(path, route)

4. 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/>

5. 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.

💡 Mẹo: Cả năm bước đều bắt buộc. Việc thiếu tham chiếu đến angular-route.js là lý do phổ biến nhất khiến một tuyến đường không hoạt động, bởi vì $routeProvider không tồn tại nếu thiếu tệp đó. Phần tiếp theo sẽ kết hợp cả năm bước trong một ví dụ hoạt động.

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ố,

• Một liên kết là để hiển thị các chủ đề cho một AngularJS 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 định tuyến này là cần thiết để sử dụng các chức năng của nhiều tuyến đường và giao diện. Bạn có thể tải tệp này xuống từ trang web của AngularJS.

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”.

Code Giải thích:

1. Thêm module “ngRoute”. Khi có module này, Angular sẽ tự động xử lý định tuyến và hiểu tất cả các lệnh định tuyến.
2. `$routeProvider` là một dịch vụ lắng nghe các tuyến đường được gọi trong nền. Khi người dùng nhấp vào một liên kết, nó sẽ phát hiện điều này và quyết định tuyến đường nào sẽ được chọn.
3. Tạo một route cho liên kết Angular: khi liên kết được nhấp, hãy chèn Angular.html và sử dụng 'AngularController' cho logic nghiệp vụ.
4. Hãy tạo một route cho liên kết Node, route này sẽ chèn Node.html và sử dụng 'NodeController' theo cùng một cách.

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 controller, chúng ta 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 'tutorial' được thêm vào đối tượng phạm vi cho mỗi controller.

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

⚠️ Đã áp dụng các chỉnh sửa. <title> thẻ nằm bên trong <body>, chrset="UTF 8" bị viết sai chính tả, liên kết thứ hai trỏ đến #Node.html thay vì tuyến đường đã đăng ký /Nodevà các đường dẫn mẫu có dấu gạch chéo phía trước, cho biết đường dẫn đó bắt nguồn từ thư mục gốc của tên miền.

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.

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

• Góc.html

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

• Nút.html — giống hệt với danh sách ở trên, chỉ khác ở tiêu đề là “Node”. Cả hai mẫu đều có nội dung giống nhau. tutorial biến số mà mỗi bộ điều khiển cung cấp từ phạm vi riêng của nó.

⚠️ Điều chỉnh: Tiêu đề trong file Angular.html gốc là “Anguler”. Lỗi chính tả đã được sửa ở trên.

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

Đầu ra:

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

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 trang URL Nó vẫn giữ nguyên. Chỉ có đường dẫn sau thẻ # là thay đổi, và đây chính là khái niệm của ứng dụng một trang (single page application). Thẻ #hash trong URL Đây là dấu phân cách giữa tuyến đường (trong trường hợp này là 'Angular') và trang HTML chính (Sample.html).

Ví dụ này chỉ hoạt động khi người dùng nhấp vào liên kết khớp với tuyến đường đã đăng ký. Phần tiếp theo sẽ xử lý những gì xảy ra khi không có gì khớp.

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 bên dưới đơn giản có nghĩa là chuyển hướng đến một trang khác nếu bất kỳ tuyến đường nào hiện có 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.

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

Code Giải thích:

1. Ở đây chúng ta sử dụng cùng một đoạn mã như trên, điểm khác biệt duy nhất là chúng ta sử dụng câu lệnh `otherwise` 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 này, chúng ta muốn hiển thị chế độ xem '/Angular'.

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

Đầu ra:

Từ đầu ra,

• Bạn có thể thấy rõ ràng rằng giao diện mặc định hiển thị là giao diện AngularJS.
• Đ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'.

Tuyến đường mặc định quyết định chế độ xem nào sẽ được tải. Phần tiếp theo sẽ trình bày cách một tuyến đường duy nhất có thể phục vụ nhiều bản ghi bằng cách mang một giá trị trong đó. URL.

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

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

1. http://guru99/index.html đây là ứng dụng chính của chúng tôi URL
2. Ký hiệu # là dấu phân cách giữa ứng dụng chính và ứng dụng phụ. URL và tuyến đường
3. Angular là tuyến đường của chúng tôi
4. 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 chung là HTMLTrang#/tuyến đường/tham sốVì vậy, các chủ đề trước đó sẽ trở thành Sample.html#/Angular/1, #/Angular/2 và #/Angular/3, trong đó chữ số là ID chủ đề.

Hãy cùng xem chi tiết cách chúng ta có thể triển khai một route Angular với tham số.

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

1. Thêm một bảng để hiển thị tất cả các chủ đề của khóa học Angular JS cho người dùng.
2. Thêm một hàng vào bảng để hiển thị chủ đề “Controllers”. Đối với hàng này, hãy đặt href thành “#!/Angular/1”, để khi nhấp vào chủ đề sẽ truyền tham số 1 trong URL dọc theo tuyến đường.
3. Thêm một hàng cho chủ đề “Models,” với thuộc tính href được đặt thành “#!/Angular/2” để tham số 2 được truyền trong đó. URL.
4. Thêm một hàng cho chủ đề “Chỉ thị”, với thuộc tính href được đặt thành “#!/Angular/3” để tham số 3 được truyền trong đó. URL.

Bước 2) Thêm ID chủ đề vào hàm dịch vụ routeProvider
Trong hàm dịch vụ routeProvider, hãy thêm :topicId ký tự đại diện để chỉ ra rằng bất kỳ tham số nào được truyền vào URL Sau đó, tuyến đường sẽ được gán cho biến topicId.

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

1. Hãy đảm bảo thêm tham số “$routeParams” khi định nghĩa hàm điều khiển trước. Tham số này sẽ có quyền truy cập vào tất cả các tham số định tuyến được truyền vào. URL.
2. Biến “$routeParams” chứa topicId được truyền vào trong tuyến đường. Đính kèm $routeParams.topicId đến phạm vi như $scope.tutorialid Giúp nó hiển thị dưới dạng 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>

⚠️ Đã áp dụng các chỉnh sửa. Bản gốc sử dụng chữ cái l thay vì chữ số 1 in href="#Angular/l", bỏ qua ng-view nên container không có nơi nào để hiển thị và đã được tải. angular-route.js trước angular.min.js, điều này gây ra lỗi mô-đun.

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>Angular</h2>

<br><br>{{tutorialid}}

Nếu đoạn mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trong 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 cuối. URL.
• Con số đó được dùng làm tham số "routeParams" và có thể truy cập được trong bộ điều khiển.

Việc đọc tham số khá đơn giản. Việc truy xuất bản ghi mà tham số đó xác định, trước khi giao diện hiển thị, là nhiệm vụ của thuộc tính được đề cập tiếp theo.

Cách tải trước dữ liệu bằng thuộc tính resolve

Bộ điều khiển trong phần trước đọc ID chủ đề và hiển thị ngay lập tức. Các ứng dụng thực tế phải lấy bản ghi từ máy chủ trước, và nếu giao diện được hiển thị trước khi yêu cầu đó trả về kết quả, người dùng sẽ thấy một mẫu trống mà sau đó mới được điền đầy đủ thông tin. resolve Thuộc tính này loại bỏ hiện tượng nội dung trống thoáng qua.

Mỗi chìa khóa bên trong một resolve `object` là một dependency mà AngularJS chuẩn bị trước khi route được kích hoạt. Nếu giá trị là một promise, router sẽ đợi cho đến khi promise đó được giải quyết. Chỉ khi tất cả các promise đã được giải quyết xong thì AngularJS mới khởi tạo controller và render template, và các giá trị đã được giải quyết sẽ được inject vào controller theo tên, giống hệt như bất kỳ service nào khác.

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;
}]);

Có hai hành vi quan trọng ở đây. Một promise bị từ chối sẽ hủy bỏ việc thay đổi tuyến đường và giữ trình duyệt ở chế độ xem hiện tại, do đó yêu cầu thất bại sẽ không bao giờ tạo ra trang bị lỗi. Tuy nhiên, vì bộ định tuyến bị chặn trong khi promise đang chờ xử lý, một điểm cuối chậm sẽ khiến ứng dụng có vẻ như bị đóng băng. Cặp resolve với chỉ số tiến độ được thúc đẩy bởi $routeChangeStart và $routeChangeSuccess sự kiện.

⚠️ Cảnh báo: Không bao giờ đặt các bước kiểm tra xác thực chỉ ở bên trong resolveViệc từ chối một tuyến đường sẽ ẩn đi giao diện nhưng không bảo vệ dữ liệu đằng sau nó, và điểm cuối API vẫn phải thực thi quyền truy cập trên máy chủ.

Ngoài việc tải trước dữ liệu, một tuyến đường cũng có thể mang theo các giá trị cấu hình tĩnh. Dịch vụ được mô tả tiếp theo sẽ hướng dẫn cách bộ điều khiển đọc các giá trị này.

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 định nghĩa trong bộ điều khiển. Cú pháp chung về cách tham số `$route` được cung cấp từ bộ điều khiển được hiển thị bên dưới.

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

1. myApp là mô-đun AngularJS được định nghĩa cho ứng dụng của bạn.
2. MyController là tên của bộ điều khiển được định nghĩa cho ứng dụng của bạn.
3. Tương tự như biến `$scope` truyền thông tin từ bộ điều khiển đến giao diện người dùng, biến `$route` hiển thị các thuộc tính của tuyến đường hiện tại.

Hãy cùng 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ẽ gắn biến này vào tuyến đường của mình. Later Chúng ta sẽ truy cập chuỗi này từ bộ điều khiển của mình bằng cách sử dụng dịch vụ `$route` và sau đó sử dụng đối tượng `scope` để hiển thị nó trong giao diện người dùng.

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 đoạn mã thích hợp vào bộ điều khiển.

1. Thêm tham số `$route` vào hàm điều khiển. Tham số `$route` là một tham số quan trọng được định nghĩa trong Angular, cho phép truy cập vào các thuộc tính của tuyến đường.
2. 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.

// 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;
}]);

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>Angular</h2>

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

Nếu đoạn mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trong 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.

Mỗi URL Những gì đã hiển thị cho đến nay vẫn còn ký hiệu #. Bước cấu hình cuối cùng sẽ loại bỏ nó.

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

Định tuyến HTML5 được sử dụng để tạo ra giao diện sạch sẽ. URLs. Điều đó có nghĩa là việc xóa hashtag khỏi URLVì vậy, việc định tuyến URLKhi sử dụng định tuyến HTML5, kết quả sẽ hiển thị như hì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 biết đến như là trình bày một cách khá đẹp mắt. URL cho người dùng.

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

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

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

Bước 1) Thêm đoạn mã cần thiết vào mô-đun Angular.

1. Thêm một <base> Thêm thẻ vào phần <head> của tài liệu. Điều này là cần thiết cho định tuyến HTML5 để ứng dụng biết vị trí cơ sở của ứng dụng là ở đâu.
2. Thêm dịch vụ `$locationProvider`. Dịch vụ này cho phép bạn định nghĩa `html5Mode`.
3. Đặt html5Mode của dịch vụ $locationProvider thành true.

Bước 2) Hãy xóa tất cả các thẻ # khỏi các liên kết ('Angular/1', 'Angular/2', 'Angular/3') để tạo ra các liên kết dễ đọc hơn. 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>

⚠️ Điều chỉnh: Bản gốc đã tuyên bố baseUrl Con trỏ cố định trỏ đến đường dẫn IDE cục bộ, điều này không ảnh hưởng đến html5Mode. AngularJS đọc vị trí cơ sở từ… <base href> thẻ. Bản gốc cũng đã chèn $locationProvider mà không hề gọi điện html5Mode(true)Vì vậy, mã băm không bao giờ bị xóa.

Nếu đoạn mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trong 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ất cả những điều trên đều sử dụng ngRoute, bộ định tuyến được nhóm AngularJS cung cấp. Tuy nhiên, đây không phải là lựa chọn duy nhất, và bảng so sánh bên dưới sẽ giải thích khi nào thì lựa chọn thay thế phù hợp hơn.

ngRoute so với ui-router: Nên chọn router nào?

ngRoute được duy trì bởi nhóm AngularJS và tương ứng với một URL trực tiếp đến một mẫu và bộ điều khiển duy nhất. ui-router là một dự án cộng đồng được xây dựng để loại bỏ hạn chế chính của ngRoute: nó khớp với ứng dụng. nhà nước hơn là trên URL một mình, điều này cho phép một màn hình chứa nhiều vùng được định tuyến độc lập.

Hãy chọn ngRoute khi cần URL Nó ánh xạ tới một khung nhìn toàn trang duy nhất, vì nó không cần thêm bất kỳ phụ thuộc nào và toàn bộ API nằm gọn trên một trang. Hãy chọn ui-router khi màn hình có các khung điều hướng độc lập hoặc khi các khung nhìn con phải sử dụng lại dữ liệu được tải bởi khung nhìn cha. Việc chuyển đổi sau này là có thể nhưng không đơn giản, vì tên trạng thái sẽ được thay thế. URL Các họa tiết xuất hiện xuyên suốt các mẫu.

Các lỗi định tuyến thường gặp trong AngularJS và cách khắc phục chúng.

Hầu hết các lỗi định tuyến đều tạo ra một ng-view trống thay vì lỗi trong console, điều này khiến việc chẩn đoán trở nên khó khăn hơn so với lẽ ra phải vậy. Mỗi triệu chứng dưới đây đều nêu rõ nguyên nhân và cách khắc phục.

• Nhà cung cấp không xác định: $routeProvider: Tệp angular-route.js chưa bao giờ được tải, hoặc được tải trước angular-min.js. Vui lòng tham chiếu đến thư viện lõi trước.
• Màn hình vẫn trống và không hiển thị lỗi nào: Không có phần tử nào mang chỉ thị ng-view, vì vậy mẫu không có nơi nào để hiển thị.
• Không có gì được tải trong lần truy cập đầu tiên: Không có tuyến đường nào khớp với đường dẫn trống. Thêm khối `otherwise` với giá trị `redirectTo`.
• Biến `$routeParams` trống: Mẫu này thiếu ký tự đại diện dấu hai chấm. Nó phải là '/Angular/:topicId'.
• Các mẫu báo lỗi 404 sau khi sử dụng html5Mode: Cấu hình máy chủ để viết lại các đường dẫn không khớp về trang gốc và xác nhận thẻ href của trang gốc có tồn tại.
• Bộ điều khiển không bao giờ chạy lại: Chỉ có tham số thay đổi, vì vậy AngularJS đã tái sử dụng thể hiện của bộ điều khiển thay vì xây dựng lại nó. Hãy lắng nghe sự kiện `$routeUpdate` thay vì dựa vào việc hàm của bộ điều khiển được thực thi lại.

Câu Hỏi Thường Gặp