[MUSIC]
Bây giờ chúng ta hãy bắt đầu nói về Angular Routing.
Nó định tuyến hay là nó bắt nguồn?
Tôi sẽ bắt rễ để định tuyến.
Vì vậy, từ nay trở đi, tôi sẽ phát âm tất cả những điều này như định
tuyến, tuyến đường, router và vân vân.
Nếu bạn tình cờ đến từ một khu vực mà trong tiếng Anh bạn phát âm nó như là tuyến đường hoặc
router, xin vui lòng chịu đựng với tôi.
Vì vậy, Angular Routing chính xác là gì và nó giúp chúng tôi như thế nào?
Về ứng dụng Angular mà chúng ta đã thấy cho
đến nay, chúng ta chưa bao giờ thấy việc sử dụng cho định tuyến.
Chúng ta đã thấy rằng chúng ta có thể phát triển một ứng dụng góc cạnh với
nhiều thành phần và sau đó sử dụng chúng một bên trong khác, và
phát triển một ứng dụng Angular toàn bộ mà không cần nói về định tuyến.
Bây giờ giả sử bạn có nhiều thành phần và
bạn muốn có thể điều hướng giữa các thành phần theo
cách mà bạn có thể gây ra điều hướng này thông qua,
ví dụ, nhấp vào liên kết hoặc nút trong giao diện người dùng của bạn và
có thể hiển thị các chế độ xem khác nhau trong màn hình ứng dụng của bạn,
sau đó Định tuyến góc đến để giải cứu của bạn.
Chúng ta sẽ thấy cách chúng ta có thể sử dụng định tuyến để phát triển một cái gì đó gọi là
ứng dụng trang đơn.
Chúng ta sẽ nói về các ứng dụng trang đơn trong bài học tiếp theo.
Nhưng cho thời điểm này, chúng ta hãy tập trung vào định tuyến góc và
đặc biệt là Route một mô-đun có sẵn trong Angular. Mô-đun
bộ định tuyến riêng biệt với mô-đun lõi Angular, vì vậy
nó có sẵn dưới dạng một mô-đun riêng biệt và bạn sẽ cần phải nhập nó một cách rõ ràng
vào ứng dụng Angular của bạn để sử dụng
mô hình Angular Router được hỗ trợ cung cấp cho bạn để điều hướng giữa các chế độ
xem bán kính ra khỏi các thành phần bán kính tạo thành một phần của sự săn mồi góc cạnh của bạn.
Vì vậy, như một phần của bài tập, chúng ta sẽ thêm vào nhiều thành phần và
chúng ta sẽ thấy làm thế nào chúng ta có thể điều hướng trong số đó bằng cách sử dụng router góc.
Vì vậy, như tôi đã đề cập đã có bộ định tuyến góc
cho phép điều hướng trong số các quan điểm khác nhau.
Trong một cách mà bạn có thể bao gồm điều hướng này vào
các liên kết hoặc các nút dựa
trên thanh công cụ và như vậy mà bạn có thể bao gồm trong giao diện người dùng của ứng dụng Angular của
bạn và sau đó bạn có thể kích hoạt điều hướng từ một chế độ xem khác
bằng cách nhấp vào liên kết hoặc nút trong UI.
Đây là nơi mà Bộ định tuyến góc tận dụng URL trình duyệt và
nó sử dụng URL trình duyệt như một hướng dẫn
để nó điều hướng giữa các chế độ xem được tạo ra từ máy khách bán kính.
Các quan điểm được tất cả thường được hỗ trợ bởi nhiều thành phần
hình thành cứng của ứng dụng góc của bạn.
Bây giờ khi bạn điều hướng từ dạng xem này sang dạng xem khác,
bạn cũng có thể chuyển tham số tùy chọn cho các dạng xem đó.
Như chúng ta đã học được trong slide trước đó,
Angular Router tận dụng lợi thế của URL để cho
phép nó nhận ra sự cần thiết phải điều hướng giữa.
Vì vậy, đây là nơi Angular Router tận dụng lợi thế của những gì
đã được hỗ trợ trong HTML5 thông qua API lịch sử?
Vì vậy, API lịch sử cho phép chúng ta làm gì?
Nó cung cấp cho các nhà phát triển khả năng sửa đổi
URL của một trang web mà không gây ra một làm mới trang.
Bây giờ nếu bạn đã sử dụng để truy cập các trang web khác nhau trong trình duyệt của
bạn, bạn sẽ thường hoặc nhấp vào thanh dấu trang hoặc
trên một liên kết trong một trang hoặc bạn sẽ rõ ràng
vào URL vào thanh địa chỉ của trình duyệt của bạn.
Bây giờ khi bạn làm điều đó, bạn đang xác định rõ ràng URL đó.
Bây giờ khi bạn chỉ định một URL,
bạn đang kích hoạt trình duyệt của bạn để tự động đi đến một máy chủ và
lấy trang mới đó và hiển thị trang trong cửa sổ của trình duyệt.
Bây giờ nếu nó có thể ngăn chặn nhu cầu này để đi đến một máy chủ và lấy thông tin, nhưng
thay vào đó thay đổi URL mà không gây ra làm mới trang này,
sau đó chúng tôi có thể tận dụng lợi thế của điều đó để cho phép chúng tôi để có thể điều hướng
giữa các quan điểm tạo thành một phần của một ứng dụng duy nhất và
đây là nơi chúng tôi mất lợi thế của HTML5.
Lịch sử API hỗ trợ các phương pháp như PushState và ReplacEstate.
Vì vậy, PushState cho phép bạn thêm một mục nhập lịch sử vào
lịch sử trình duyệt của bạn mà không thực sự gây ra một làm mới trang.
Tương tự, một ReplacEstate sẽ sửa đổi
mục nhập lịch sử hiện có trong lịch sử trình duyệt của bạn.
Vì vậy, theo đó, bạn thậm chí có thể sử dụng
nút quay lại và chuyển tiếp của trình duyệt của bạn để có thể di chuyển
qua lại giữa các URL mà không gây ra một làm mới trang.
Bây giờ, đây là nơi bạn cần phải chỉ định một cái gì đó trong
trang HTML chỉ mục của bạn được gọi là cơ sở.
Vì vậy, khi API lịch sử HTML sử dụng các phương pháp này,
sau đó để sửa đổi, bạn cần phải xác định một
vị trí cơ sở từ nơi bạn đang chỉ định các phần bổ sung
của đường dẫn URL của bạn mà sẽ không dẫn đến một làm mới trang.
Vì vậy, trong trường hợp này, đối với ứng dụng Angular của chúng tôi,
điều này luôn bắt đầu ở gốc.
Vì vậy, đó là lý do tại sao chúng tôi chỉ định cơ sở là href=”/”.
Mọi thứ khác mà đến sau đó trong URL sẽ được
xử lý trong ứng dụng Angular của bạn như
một cái gì đó kích hoạt điều hướng được xử lý bộ định tuyến Angular chính nó mà không gây ra trình duyệt của bạn cần làm mới từ một máy chủ.
Vì vậy, đó là cách router góc tận dụng lợi thế của API lịch sử HTML5.
Bây giờ nếu bạn không có API lịch sử,
cách khác để làm điều hướng là bằng cách sử dụng thẻ bắt đầu bằng #.
Bạn đã biết rằng trong HTML, nếu bạn chỉ định bất kỳ liên kết nào bắt đầu
bằng hashtag, mà đề cập đến một liên kết trong cùng một trang.
Vì vậy, khi bạn nhấp vào các liên kết như vậy, nó sẽ không gây ra một trang làm mới.
Thay vào đó, nó sẽ chuyển hướng bạn đến một vị trí khác trong cùng một trang.
Vì vậy, đó là một cách khác để làm việc.
Nhưng để kết xuất sạch, API HTML5 hỗ trợ
API lịch sử này cho phép bạn thao tác lịch sử
trình duyệt của bạn mà không gây ra một làm mới trang.
Sau lời giải thích dài hạn đó, chúng
ta hãy lấy một ví dụ để giúp chúng ta hiểu được điều này hơn nữa.
Giả sử bạn xác định URL của bạn như thế này nói, ví dụ, example.abc.com/home.
Bây giờ với API lịch sử HTML5,
bạn chỉ có thể lấy phần cuối cùng của URL và
sửa đổi nó để URL khác như tôi đã hiển thị ở đây với example.abc.com/menu.
Vì vậy, bạn thấy rằng URL bây giờ đã được thay đổi từ slash home để gạch chéo menu,
thay đổi này có thể được kích hoạt bằng cách sử dụng một phương pháp đẩy trạng thái của
API lịch sử HTML5 mà không cần như tôi đã đề cập, mà không cần tải lại trang.
Thay vào đó, điều này sẽ là một kích hoạt nội bộ cho
điều hướng mà các bộ định tuyến góc rõ ràng tận dụng lợi thế để
hỗ trợ điều hướng trong số các chế độ xem khác nhau của ứng dụng Angular của bạn.
Bây giờ rõ ràng bạn phải quan tâm đến cách Router góc tận
dụng điều này.
Vì vậy, đây là nơi Bộ định tuyến góc tận dụng thao tác lịch sử
để sửa đổi URL của trình duyệt mà không kích hoạt làm mới trang.
Hãy lấy một ví dụ.
Giả sử bạn có ứng dụng Angular của bạn cư trú tại URL cụ thể này.
Bây giờ, nó xảy ra rằng các ứng dụng Angular mà bạn đang làm việc trên
đang được hiển thị cho trình duyệt bằng cách truy cập nó tại URL cụ thể này.
Vì vậy, nó sẽ giúp chúng tôi nhanh chóng hiểu những gì Góc Router cho phép chúng tôi làm.
Vì vậy, trong trường hợp này, khi bạn gõ vào URL trình duyệt của bạn,
bạn Angular Router có thể dễ dàng được cấu hình để chuyển hướng bạn
đến một vị trí mặc định trong ứng dụng góc cạnh của bạn.
Thông thường, nhắc nhở tôi rằng một cái gì đó giống như nhà.
Vì vậy, điều đó sẽ đưa bạn đến điểm nhập mặc định cho
ứng dụng góc cạnh của bạn mà
vì lợi ích của dễ hiểu, tôi sẽ dán nhãn nó là /home.
Vì vậy, nếu URL của bạn chứa localhost:4200/home,
điều đó có nghĩa là bạn đang ở vị trí nhà mặc định của bạn.
Bây giờ khi điều hướng này được kích hoạt,
sau đó bạn có thể cho phép bộ định tuyến góc của bạn tự động đưa bạn đến chế độ xem
, ví dụ, được hỗ trợ bởi thành phần nhà đó.
Vì vậy, khi URL trở thành localhost:4200/home,
bạn sẽ tự động hiển thị chế độ xem của thành phần nhà trong màn hình trình duyệt.
Rất chính xác khi bạn đặt chế độ xem mà chúng ta sẽ xem xét trong slide tiếp theo và
trong bài tập sau.
Tương tự như vậy, bạn có thể có các chế độ xem khác trong
ứng dụng Angular của bạn cũng có thể được hỗ trợ thông qua
các URL khác là phần mở rộng cho localhost:4200.
Vì vậy, ví dụ, nếu URL là localhost:4200/aboutus, sau đó
có thể dẫn bạn để được hiển thị quan điểm được hiển thị bởi AboutComponent.
Và tương tự, trình đơn sẽ hiển thị cho bạn MenuComponent và vân vân.
Vì vậy, những gì điều này cho phép chúng tôi làm là,
tùy thuộc vào những gì URL được sử dụng trong trình duyệt của bạn,
bạn sẽ sử dụng nó để tự động điều hướng giữa các
quan điểm khác nhau của các thành phần khác nhau của ứng dụng Angular của bạn.
Bây giờ, bạn không cần phải lo lắng rõ ràng về nó.
Nếu bạn cấu hình Bộ định tuyến góc để chăm sóc tất cả điều này, thì bộ định tuyến
sẽ tự động chăm sóc cung cấp cho bạn điều hướng trong số các
thành phần này như chúng ta sẽ thấy trong bài tập sau bài giảng cụ thể này.
Bây giờ trước khi chúng ta tiến hành bài tập, nơi chúng ta sẽ tìm hiểu thêm về
bộ định tuyến góc, hãy để tôi nhanh chóng thu hút sự chú ý của bạn
vào một vài điều khoản trong bộ định tuyến góc mà bạn sẽ gặp phải trong quá trình tập thể dục và
tôi muốn bạn đặc biệt chú ý đến các điều khoản này,
bởi vì họ là rất quan trọng để hiểu cách các Router góc thực sự hoạt động.
Vì vậy, trước tiên bạn sẽ thấy rằng khi chúng tôi thiết kế Angular Router,
chúng tôi sẽ lấy sự trợ giúp của mô-đun router
tạo thành một phần của thư viện định tuyến đường chéo góc cạnh.
Vì vậy, chúng tôi sẽ nhập khẩu mô-đun router vào hoặc ứng dụng góc
vào mô-đun ứng dụng và sau đó chúng tôi cũng sẽ nhập khẩu các tuyến đường.
Vì vậy, các tuyến đường cho phép chúng tôi xác định các tuyến đường khác nhau
mà ứng dụng Angular của chúng tôi sử dụng hoặc các bộ định tuyến góc sử dụng.
Vì vậy, trong trường hợp đó, chúng tôi sẽ xác định các tuyến đường dưới dạng một đường dẫn và
thành phần tương ứng.
Vì vậy, như bạn đã thấy trong slide trước đó, bạn thấy rằng mỗi một trong những phần
mở rộng URL đã được ánh xạ đến chế độ xem của thành phần cụ thể.
Vì vậy, loại thông tin đó được cung cấp cho rằng Angular Router
thông qua các tuyến đường và các tuyến đường này đều được chỉ định bằng cách sử dụng
một đối tượng JavaScript như đường dẫn này với hai thuộc tính.
Đường dẫn và thành phần và một số thuộc tính bổ sung mà chúng ta sẽ không
gặp phải ngay bây giờ, nhưng chúng ta sẽ thấy trong một số bài tập sau này.
Ngoài ra, câu hỏi thứ hai mà bạn sẽ tự hỏi là xem này sẽ được
hiển thị ở đâu trong ứng dụng Angular của bạn?
Đây là nơi trong mẫu của chúng tôi về thành phần ứng dụng của
chúng tôi, chúng tôi sẽ bao gồm một chỉ thị được gọi là RouterOutlet được chỉ định như bạn
thấy như là và .
Điều này sẽ được bao gồm trong tệp mẫu thành phần ứng dụng,
bây giờ sau đó bộ định tuyến góc của bạn điều hướng đến
các chế độ xem khác nhau của các thành phần khác nhau. Chế
độ xem tương ứng của thành phần sẽ được bao gồm trong
chế độ xem ứng dụng của bạn bất cứ nơi nào bạn chỉ định ổ cắm bộ định tuyến cụ thể này.
Vì vậy, xem ra cho rằng trong bài tập sau.
Ngoài ra, để kích hoạt điều hướng, bạn sẽ thấy rằng
với nhiều thẻ được sử dụng trong ứng dụng.
Vì vậy, ví dụ, tôi sẽ bao gồm một thiết lập một thẻ với
nút MD thành phần vật liệu góc trong thanh công cụ,
trong thành phần tiêu đề của ứng dụng Angular của chúng tôi.
Tôi sẽ liên kết một thẻ với một chỉ thị khác,
một chỉ thị thuộc tính được gọi là RouterLink.
RouterLink là một chỉ thị thực tế mà mô-đun bộ định tuyến cung cấp cho chúng tôi.
Liên kết bộ định tuyến này cho phép chúng tôi xác định đường dẫn như, ví dụ,
mã viết, tôi có thể thấy một “/menu”.
Bạn có thể có nhiều chi tiết hơn thế này cho RouterLink.
Nhưng đối với bài tập, chúng tôi sẽ bắt đầu với một ví dụ đơn giản, nơi chúng tôi sẽ có,
ví dụ, /menu slash home slash liên hệ với chúng tôi và như vậy
trên quy định bằng cách sử dụng thuộc tính RouterLink trực tiếp.
Vì vậy, khi bạn nhấp vào một liên kết như thế này trong thanh công cụ của bạn,
sau đó sẽ kích hoạt các bộ định tuyến góc để gây ra một sự thay đổi hoặc
một điều hướng đến một chế độ xem cụ thể được hỗ trợ bởi các mô-đun bộ định tuyến góc.
Vì vậy, ánh xạ giữa liên kết này và các thành phần tương ứng
đã được chỉ định trong tuyến đường mà chúng tôi cung cấp cho ứng dụng Angular của chúng tôi.
Vì vậy, hãy cẩn thận cho tất cả những điều này khi bạn tập thể dục.
Tôi sẽ giải thích một số trong những điều này và lý do để
làm chúng trong khi chúng tôi đang thực hiện các bước của bài tập sau bài học này.
[ NHẠC]