Trước khi bắt đầu với định tuyến, chúng ta hãy xem tổng quan nhanh về Ứng dụng một trang.
Ứng dụng Trang đơn là gì?
Ứng dụng trang đơn hoặc (SPA) là các ứng dụng web tải một trang HTML duy nhất 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ì?
Trong AngularJS, định tuyến là thứ cho phép bạn tạo các Ứng dụng Trang Đơn.
- Các tuyến AngularJS 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 của mình.
- Các tuyến AngularJS cho phép một người hiển thị nhiều nội dung tùy thuộc vào tuyến đường được chọn.
- Một tuyến đường được chỉ định trong URL sau dấu #.
Hãy lấy 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 của mình. Giả sử nếu ứng dụng đang tổ chức một Sự kiện và một người muốn xem các sự kiện khác nhau được hiển thị là gì hoặc muốn xem chi tiết của một sự kiện cụ thể hoặc xóa một sự kiện. Trong một ứng dụng Trang đơn, khi định tuyến được bật, tất cả chức năng này sẽ khả dụ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
Ký hiệu # sẽ được sử dụng cùng với các tuyến đường 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 ), nếu không
- Nếu họ muốn chỉ xem một sự kiện cụ thể, họ sẽ được chuyển hướng lại 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 dẫn đến liên kết http://example.com/index.html#DeleteEvent .
Lưu ý rằng URL chính được giữ nguyên.
Trong hướng dẫn này, bạn sẽ học-
- Thêm tuyến đường góc ($ routeProvider)
- Tạo một tuyến đường mặc định
- Truy cập các thông số từ tuyến đường
- Sử dụng dịch vụ định tuyến $ Angular
- Bật định tuyến HTML5
Thêm tuyến đường góc ($ routeProvider)
Vì vậy, như chúng ta đã thảo luận trước đó, các tuyến 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ó trải nghiệm mà anh ta chưa rời khỏi trang.
Để thực hiện định tuyến, các bước chính sau đây phải được thực hiện trong ứng dụng của bạn theo bất kỳ thứ tự cụ thể nào.
- Tham chiếu tới angle-route.js. Đây là một tệp JavaScript do Google phát triển có tất cả các chức năng định tuyến. Điều này cần được đặt trong ứng dụng của bạn để nó có thể tham chiếu đến tất cả các mô-đun chính được yêu cầu 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à bắt buộc để chức năng định tuyến có thể được sử dụng trong ứng dụng. Nếu 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 angle.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 bình 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ỉ nói rằng khi đường dẫn có liên quan được chọn, hãy sử dụng đường dẫn để 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 của mình, 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.
Tuyến đường 1
- Cuối cùng sẽ là bao gồm chỉ thị ng-view, thường sẽ nằm trong thẻ div. Điều này sẽ được sử dụng để đưa nội dung của chế độ xem khi tuyến có liên quan được chọn.
Bây giờ, chúng ta hãy xem xét một ví dụ về định tuyến bằng các bước đã đề cập ở trên.
Trong ví dụ của chúng tôi,
Chúng tôi sẽ giới thiệu 2 liên kết cho người dùng,
- Một là hiển thị các chủ đề cho khóa học Angular JS và một là hiển thị các chủ đề cho khóa học Node.js.
- Khi người dùng nhấp vào một trong hai liên kết, các chủ đề cho khóa học đó sẽ được hiển thị.
Bước 1) Bao gồm tệp góc đường làm tham chiếu 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 việc có nhiều tuyến đường và khung nhìn. Tệp này có thể được tải xuống từ trang web angle.JS.
Bước 2) Thêm các thẻ href sẽ đại diện cho các liên kết đến "Chủ đề JS Angular" và "Chủ đề Node JS".
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 Angular" hoặc "Chủ đề JS Node".
Bước 4) Trong thẻ tập lệnh 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 khả năng đị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ụ mà góc sử dụng để lắng nghe trong nền 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, trình cung cấp dịch vụ sẽ phát hiện điều này và sau đó quyết định chọn tuyến đường nào.
- Tạo một tuyến đường cho liên kết Angular - Khối này có nghĩa là khi liên kết Angular được nhấp vào, hãy đưa vào tệp Angular.html và cũng sử dụng Controller 'AngularController' để xử lý bất kỳ logic nghiệp vụ nào.
- Tạo một tuyến đường cho liên kết Node - Khối này có nghĩa là khi liên kết Node được nhấp, hãy đưa vào 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 Chủ đề và mô tả 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.
Event Registration Guru99 Global Event
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 được hiển thị trên mỗi trang.
- Sử dụng lệnh ng-repeat để đi 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ị.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Nếu bạn nhấp vào liên kết AngularJS Topics, kết quả bên dưới sẽ được hiển thị.
Kết quả cho thấy rõ ràng rằng,
- Khi liên kết "Angular JS Topics" được nhấp vào, routeProvider mà chúng tôi đã khai báo trong mã của mình quyết định rằng mã Angular.html sẽ được đưa vào.
- Mã này sẽ được đưa vào thẻ "div", thẻ này chứa chỉ thị ng-view. Ngoài ra, nội dung cho mô tả khóa học đến từ "biến hướng dẫn", là một phần của đối tượng phạm vi được định nghĩa trong AngularController.
- Khi một người nhấp vào Chủ đề Node.js, 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 của trang vẫn giữ nguyên, nó chỉ là tuyến đường sau thẻ # thay đổi. Và đây là khái niệm về các ứng dụng trang đơn. Thẻ #hash trong URL là một dấu phân cách phân tách tuyến đường (trong trường hợp của chúng tôi là 'Angular' như được hiển thị trong hình trên) và trang HTML chính (Sample.html)
Tạo một tuyến đường mặc định
Định tuyến trong AngularJS cũng cung cấp cơ sở để có một tuyến đường mặc định. Đây là tuyến được chọn nếu không có tuyến nào phù hợp với tuyến hiện có.
Tuyến 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 có nghĩa là chuyển hướng đến một trang khác nếu bất kỳ tuyến nào hiện có không khớp.
otherwise ({redirectTo: 'page'});
Hãy sử dụng cùng một ví dụ ở trên và thêm một tuyến 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 tôi đang sử dụng mã tương tự như trên với sự khác biệt duy nhất là chúng tôi đang 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 tôi, chúng tôi muốn chế độ xem '/ Angular' được hiển thị.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong 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.
- Điều này là do khi tải trang, nó sẽ chuyển đến tùy chọn 'nếu không' trong hàm $ routeProvider và tải chế độ xem '/ Angular'.
Truy cập các thông số từ tuyến đường
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 trong URL, ví dụ : http: //guru99/index.html#/Angular/1 . Trong ví dụ 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 của các tham số trông như thế nào trong URL được hiển thị bên dưới:
HTMLPage # / route / 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ụ của chúng tôi, ở trên đối với các chủ đề Angular JS, chúng tôi có thể chuyển một tham số như được hiển thị bên dưới
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Ở đây các tham số của 1, 2 và 3 có thể thực sự đại diện cho topicid.
Hãy xem xét chi tiết cách chúng tôi có thể thực hiện điều này.
Bước 1) Thêm mã sau vào chế độ xem của bạn
-
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
-
Thêm một hàng trong bảng để hiển thị chủ đề "Bộ điều khiển". Đối với hàng này, hãy thay đổi thẻ href thành "Angular / 1" có nghĩa là khi người dùng nhấp vào chủ đề này, tham số 1 sẽ được chuyển vào URL cùng với tuyến đường.
-
Thêm một hàng trong bảng để hiển thị chủ đề "Mô hình". Đối với hàng này, hãy thay đổi thẻ href thành "Angular / 2" có nghĩa là khi người dùng nhấp vào chủ đề này, tham số 2 sẽ được chuyển vào URL cùng với tuyến đường.
-
Thêm một hàng trong bảng để hiển thị chủ đề "Chỉ thị". Đối với hàng này, hãy thay đổi thẻ href thành "Angular / 3" có nghĩa là khi người dùng nhấp vào chủ đề này, tham số 3 sẽ được chuyển vào URL cùng với tuyến đường.
Bước 2) Trong hàm dịch vụ routeprovider, hãy thêm: topicId để biểu thị rằng bất kỳ tham số nào được truyền trong URL sau tuyến 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
- Đảm bảo trước tiên thêm "$ routeParams" làm tham số khi xác định chức năng 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, được truyền dưới dạng tham số định tuyến. Ở đây chúng tôi đang đính kèm biến '$ routeParams.topicId' vào đối tượng phạm vi của chúng tôi 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 hướng dẫn.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Bước 4) Thêm biểu thức để hiển thị biến hướng dẫn trong trang Angular.html.
Anguler
{{tutorialid}}
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Trong 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ụ routeprovider của Angular.JS lấy làm đối số "routeparam" và sau đó có thể được bộ điều khiển của chúng tôi truy cập.
Sử dụng dịch vụ định tuyến $ Angular
Dịch vụ $ route cho phép bạn truy cập các thuộc tính của route. Dịch vụ $ route có sẵn dưới dạng một 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 angle.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
- Cũng giống như biến $ scope được tạo sẵn cho ứng dụng của bạn, được sử dụng để chuyển thông tin từ bộ điều khiển đến chế độ xem. Tham số $ route được sử dụng để truy cập các thuộc tính của route.
Hãy xem cách chúng ta có thể sử dụng dịch vụ $ route.
Trong ví dụ này,
- Chúng tôi sẽ tạo một biến tùy chỉnh đơn giản được gọi là "mytext", biến này sẽ chứa chuỗi "Đây là một góc."
- Chúng tôi sẽ đính kèm biến này vào tuyến đường của chúng tôi. Và sau đó, chúng tôi sẽ truy cập chuỗi này từ bộ điều khiển của chúng tôi bằng cách sử dụng dịch vụ $ route và sau đó sử dụng đối tượng phạm vi để hiển thị điều đó trong chế độ xem của chúng tôi.
Vì vậy, chúng ta hãy xem các bước mà 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ó một giá trị là "Đây là góc".
Bước 2) Thêm mã liên quan vào bộ điều khiển
- Thêm tham số $ route vào hàm bộ điều khiển. Tham số $ route là một tham số chính được định nghĩa dưới dạng góc, cho phép một tham số truy cập các thuộc tính của đườ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ừ dạng xem tương ứng.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Bước 3) Thêm một tham chiếu đến biến văn bản từ đối tượng phạm vi dưới dạng một biểu thức. Điều này sẽ được thêm vào trang Angular.html của chúng tôi như được hiển thị bên dưới.
Điều này sẽ làm cho văn bản "Đây là góc" đượ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'.
Anguler
{{text}}
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Chúng ta có thể thấy rằng văn bản "Đây là góc" 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.
Bậ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à xóa thẻ bắt đầu bằng # khỏi URL. Vì vậy, các URL định tuyến, khi định tuyến HTML5 được sử dụng, sẽ xuất hiện như hình dưới đây
Sample.html / Angular / 1
Sample.html / Angular / 2
Sample.html / Angular / 3
Khái niệm này thường được gọi là hiển thị 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ụ của chúng tôi ở trên
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 mã html5Mode.
- Đặt html5Mode của dịch vụ $ locationProvider thành true.
Bước 2) Xóa tất cả các thẻ # cho các liên kết ('Angular / 1', 'Angular / 2', 'Angular / 3') để tạo URL dễ đọc.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Bạn có thể thấy rằng thẻ # không có ở đó khi truy cập ứng dụng.
Tóm lược
- Định tuyến được sử dụng để trình bày 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 đường mặc định có thể được thiết lập cho định tuyến angle.JS. Nó được sử dụng để xác định đâu sẽ là chế độ xem mặc định được hiển thị cho người dùng
- 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ừ bên trong chế độ xem
- Định tuyến HTML5 được sử dụng để xóa #tag khỏi URL định tuyến ở dạng góc cạnh để tạo thành URL đẹp