[MUSIC]
Trong bài tập này, chúng ta sẽ xem xét làm thế nào chúng ta có thể tận dụng
mô-đun định tuyến của Angular để có thể hỗ trợ nhiều thành phần, và
có thể điều hướng đến bất kỳ một trong những thành phần trong ứng dụng Angular của chúng tôi.
Hãy xem nhanh trạng thái của ứng dụng của chúng tôi.
Vào cuối bài tập cuối cùng,
chúng tôi đã nhận thấy rằng trong ứng dụng này, trong tiêu đề,
chúng tôi có liên kết đến bốn báo giá khác nhau, unquote trang ở đây.
Bây giờ trong thuật ngữ Angular, điều này sẽ được hỗ trợ bằng cách sử dụng
các thành phần khác nhau, như chúng ta sẽ thấy trong bài tập này.
Vì vậy, ở đây chúng ta thấy rằng khi chúng ta nhấp vào Trang chủ,
chúng tôi muốn có thể xem các chi tiết về những gì nên có mặt trong Trang chủ.
Và tương tự, Giới thiệu và Menu tất nhiên bạn đã thấy nó ngay tại đó,
và sau đó Liên hệ, có thể hiển thị một số thông tin về nội dung cho
nhà hàng cụ thể này.
Vậy làm thế nào để họ hỗ trợ những thứ như thế này?
Đầu tiên, bằng cách nhìn nhanh vào nó, chúng ta thấy rằng Menu
đã được hỗ trợ bằng cách hiển thị thông tin về menu ở đây, và điều
này đã được tạo điều kiện với việc sử dụng thành phần Menu.
Vì vậy, chúng ta thấy rằng các thành phần Menu là juxtaposed giữa tiêu đề và
chân trang và có thể hiển thị các thông tin ngay tại đó.
Bây giờ, làm thế nào chúng ta có thể tận dụng việc sử dụng mô-đun bộ định tuyến Angular
để cho phép chúng tôi hỗ trợ nhiều thành phần này và có thể điều hướng trong số đó.
Bây giờ, để bắt đầu, trước tiên, tất nhiên, chúng ta cần nhiều thành phần,
mỗi thành phần hiển thị quan điểm tương ứng của họ để chúng ta có thể điều hướng giữa các quan điểm.
Vì vậy, chúng ta hãy thêm vào ba thành phần nữa vào ứng dụng Angular của chúng tôi
, Home, About và Contact.
Bạn đã biết làm thế nào để làm điều đó, vì vậy chúng ta hãy đi đến bước đó tiếp theo.
Tại dấu nhắc, gõ ng g thành phần
home để tạo thành phần home.
Tương tự như vậy tạo ra
các thành phần về và
cũng trong khi chúng tôi đang ở đó
các thành phần tiếp xúc.
Vì vậy, bây giờ chúng tôi có ba thành phần được thêm vào cùng với các thành phần mới mà chúng tôi
đã có.
Thành phần chi tiết đĩa đã được sử dụng trong các thành phần trình đơn vì vậy
chúng tôi không xem xét nó cho thời điểm này.
Nhưng bây giờ chúng ta có nhà, về, liên hệ và các thành phần menu, và
chúng ta cần một cách để đi giữa chúng.
Vậy làm thế nào để làm điều đó?
Vì vậy, đó là nơi tôi sử dụng mô-đun bộ định tuyến Angular.
Để bắt đầu sử dụng mô-đun bộ định tuyến để cho phép chúng tôi điều hướng
giữa các thành phần này, hãy thêm vào một mô-đun Angular mới.
Bây giờ mô hình sử dụng mô-đun router này là một cái gì đó được đề xuất cho các
ứng dụng Angular phức tạp hơn một chút, nhưng
nếu chúng ta thực hiện điều đó như một thực hành tiêu chuẩn, nó sẽ đi một chặng đường dài để giúp chúng ta trong tương lai.
Vì vậy, tôi bắt đầu ngay cả các ứng dụng đơn giản với
việc đưa mô-đun router vào mô-đun riêng biệt của nó.
Vì vậy, nó bao gồm tất cả các nhu cầu định tuyến của chúng tôi vào một mô-đun riêng biệt.
Để bắt đầu, chúng tôi lại sử dụng Angular CLI để
tạo một mô-đun khác, và chúng tôi sẽ gọi mô-đun đó là định tuyến ứng dụng.
Vì vậy, mô-đun định tuyến ứng dụng này mà chúng ta sẽ tạo ra là sẽ tận dụng
mô-đun khía góc để cung cấp các tính năng định tuyến cho ứng dụng của chúng tôi.
Và sau đó chúng tôi sẽ sử dụng nó trong mô-đun ứng dụng của chúng tôi để kích hoạt định tuyến.
Để tạo ra một mô-đun mới được gọi là định tuyến ứng dụng,
tại dấu nhắc gõ ng g mô-đun ứng dụng định tuyến,
và điều đó nên tạo ra một mô-đun định tuyến ứng dụng và
đặt một tập tin app-routing.module.t vào thư mục cụ thể đó.
Bây giờ mô-đun định tuyến ứng dụng này chỉ còn lại ở đó.
Chúng ta cần phải bao gồm một cách rõ ràng đó vào mô-đun ứng dụng của chúng tôi,
vì vậy nó phải có khả năng sử dụng nó.
Đi đến trình soạn thảo bây giờ chúng ta thấy rằng bây giờ chúng ta có một thư mục khác ở đây
gọi là ứng dụng định tuyến và bên trong mà chúng tôi có một AppRoutingModule ở đây,
chúng tôi chọn một mô-đun góc chung mà CLI góc đã tạo ra cho chúng tôi.
Điều này không có gì cụ thể về định tuyến như vậy tại thời điểm này,
nhưng chúng tôi sẽ thêm các tính năng trong đó.
Nhưng, trước khi chúng tôi làm điều đó, chúng ta hãy sử dụng AppRoutingModule này trong app.module của chúng tôi,
mô-đun gốc cho ứng dụng Angular của chúng tôi.
Để làm điều đó, hãy mở app.module, và
trong khi chúng ta đang ở đây, hãy để tôi làm một chút dọn dẹp ở đây.
Tôi có xu hướng không thích mã vô tổ chức, vì vậy
tôi sẽ chỉ di chuyển tất cả các mã này cho
các thành phần với nhau ở một nơi có và
sau đó tôi có dịch vụ của tôi được yêu cầu xuống dưới đây.
Bây giờ chúng tôi có một mô-đun mới mà chúng tôi đang nhận được
từ AppRoutingModule,
mà chúng tôi chỉ cần tạo ra và
sau đó tôi sẽ yêu cầu
AppRoutingModule đó vào của tôi,
Route module hoặc AppModule ở đây.
Vì vậy, tôi bao gồm AppRoutingModule bằng cách nhập nó đầu tiên ở đó.
Và sau đó, vào nhập khẩu, tôi đi vào và
sau đó thêm vào AppRoutingModule.
Ngay đó, AppRoutingModule.
Vì vậy, với điều này, mô-đun ứng dụng
của tôi, mô-đun gốc, bây giờ được cố định để sử dụng AppRoutingModule.
Bây giờ điều này cho tôi sự tự do để phát triển phần định tuyến của
tôi trong AppRoutingModule của tôi với sự tự tin đầy đủ rằng nó sẽ được sử dụng bởi mô-đun ứng dụng của tôi.
Vì vậy, chúng ta hãy lưu các thay đổi vào mô-đun ứng dụng, và
sau đó chúng tôi sẽ quay trở lại và mở AppRoutingModule ở đây.
Và ở đây chúng ta sẽ sử dụng
mô-đun router mà Angular cung cấp cho chúng ta.
Vì vậy, ở đây cho phép tôi nhập khẩu,
RouterModule đây, và cũng là đồng hành
Routes module mà có sẵn từ Angular.
Và sau đó vì vậy tôi sẽ nhập khẩu từ Angular,
và sau đó, RouterModule đây.
Vì vậy, từ thư viện bộ định tuyến góc, tôi nhập cả RouterModule và
mô-đun Routes.
Vì vậy, một khi tôi làm điều đó, rõ ràng, tôi cần để có thể bao gồm RouterModule trong đây.
Vì vậy, ngoài CommonModule mà tôi đã nhập khẩu ở đó,
tôi cũng cần phải sử dụng RouterModule ở đây.
Bây giờ, tôi sẽ để nó ở thời điểm này.
Chúng tôi sẽ phát triển các tuyến đường cho ứng dụng Angular của chúng tôi
và sau đó quay lại và sửa chữa này một chút sau đó.
Vì vậy, với điều này, hãy để tôi lưu các thay đổi cho mô-đun định tuyến ứng dụng.
Và những gì tôi sẽ làm là, chỉ vì lợi ích của việc giữ mã của tôi sạch sẽ và
tổ chức, tôi sẽ xác định tất cả các tuyến đường cho ứng dụng của tôi trong một tập tin khác.
Nhưng tôi sẽ tạo trong thư mục app-routing và
sau đó tôi sẽ đặt tên nó như routes.ts5.
Bây giờ, bên trong tập tin này, tôi sẽ tạo ra tất cả các tuyến đường mà tôi cần.
Vì vậy, trong đây, tôi sẽ nhập khẩu,
Các tuyến đường từ, @angular /router,
và sau đó sử dụng để xây dựng các tuyến đường cho ứng dụng của tôi.
Bây giờ ngoài ra, tôi cần để có thể nhập tất cả
các thành phần mà tôi có trong ứng dụng của tôi.
Bởi vì tôi muốn có thể điều hướng đến tất cả các thành phần.
Vậy tôi có danh sách tất cả các thành phần ở đâu?
Tôi có chúng trong app_module.
Vì vậy, hãy để tôi đi đến app_module.
Tôi cố gắng không gõ mọi thứ càng nhiều càng tốt để kiểm soát mọi thứ.
Vì vậy, tôi sẽ đi đến app_module, và sau đó tôi sao chép trong tất cả các thành phần mà tôi có.
Tôi không cần AppComponent bởi vì tôi sẽ không trực tiếp điều hướng đến điều đó trong
ứng dụng của tôi, nhưng những người còn lại tôi sẽ cần.
Vì vậy, tôi sẽ chỉ đơn giản là sao chép tất cả những người và
sau đó bao gồm chúng vào tập tin tuyến đường của tôi, ở đây.
Vì vậy, bây giờ tôi có MenuComponent, Dishdetail, Header, Foot.
Trên thực tế, tôi cũng không cần Header và FooterComponent.
Tôi sẽ không cần Header và
FooterComponent bởi vì tôi sẽ không điều hướng đến họ bằng cách sử dụng các tuyến đường.
Vì vậy, hãy để tôi xóa tiêu đề và các thành phần chân trang.
Tôi chỉ cần Menu, Home, About, Contacts.
Tôi bao gồm Dishdetail, chúng tôi sẽ đến với điều đó trong một trong những bài tập sau này.
Vì vậy, bây giờ mà chúng tôi đã bao gồm tất cả những điều này, bước tiếp theo là cho
tôi để xác định các tuyến đường khác nhau có sẵn ở đây.
Tôi sẽ xác định một hằng số ở đây có
tên các tuyến đường của loại Routes.
Vì vậy, bây giờ bạn thấy lý do tại sao tôi có các tuyến đường quan trọng từ bộ định tuyến Angular ở đó.
Vì vậy, điều này sẽ cho phép tôi xác định một mảng chỉ định
các tuyến đường khác nhau là một phần của ứng dụng của tôi.
Ở đây, để tôi xác định tất cả các tuyến đường ở đây.
Bây giờ khi bạn chỉ định các tuyến đường trong
ứng dụng Angular của bạn, bạn sẽ chỉ định đường dẫn.
Mà tôi sẽ bắt đầu với HomeComponent,
và sau đó khi tôi điều hướng đến đường dẫn nhà,
thành phần tương ứng là HomeComponent.
Vì vậy, khi URL của tôi bao gồm nhà,
sau đó tôi sẽ được điều hướng đến HomeComponent.
Trong bài giảng trước đó, chúng ta đã thấy cách chúng ta sử dụng HTML
PushState () để nhận ra
điều hướng nội bộ, sử dụng hỗ trợ HTML cho PushState ().
Vì vậy, đó là những gì tôi đang tận dụng ở đây để xác định các tuyến đường khác nhau ở đây.
Vì vậy, khi tôi nói localhost:4200/home,
sau đó đó đó là trỏ đến HomeComponent, ở đây.
Vì vậy, đó là cách tôi sẽ điều hướng đến HomeComponent.
Tương tự như vậy, chúng ta có thể xác định cho các thành phần khác trong ứng dụng của chúng tôi.
Con đường tiếp theo mà tôi sẽ xác định là MenuComponent.
Đối với bài tập này, tôi sẽ chỉ xác định hai điều này.
Những bài còn lại sẽ được điền vào như một phần
của một số bài tập và bài tập sau đó.
Vì vậy, chúng tôi có hai trong số họ thiết lập, Home và Menu.
Bây giờ, tôi cũng nên cung cấp các tuyến đường mặc định ở đây.
Vì vậy, khi người dùng điều hướng đến localhost:4200,
sau đó bạn sẽ kết thúc ở vị trí mặc định.
Vì vậy, trong trường hợp đó, tôi sẽ chỉ đơn giản chuyển hướng người dùng đến HomeComponent,
đó là những gì sẽ được hiển thị vào ứng dụng Angular.
Vì vậy, để làm điều đó, tôi sẽ gõ vào tài sản ReDirectto.
Và sau đó xác định nó là /home. Có
nghĩa là khi bạn điều hướng mà không cung cấp đường dẫn URL ở đó,
sau đó bạn sẽ tự động điều hướng đến HomeComponent,
và điều này sẽ phù hợp với đầy đủ ở đây.
Vì vậy, ba người này, tôi sẽ cung cấp cho các tuyến đường ở đây, cho thời điểm này.
Những người còn lại,
như tôi đã nói, sẽ được thêm vào như là một phần của phần còn lại của bài tập.
Bây giờ, rõ ràng là bạn thấy những
đường màu đỏ này ở đó bởi vì tất cả đều ở trong
..
Vì vậy, bây giờ, từ các tập tin routes.t,
chúng tôi đang chuẩn bị Routes này hằng số ở đây và
sau đó làm cho nó có sẵn.
Vì vậy, bây giờ điều này đã sẵn sàng cho chúng tôi, chúng tôi sẽ quay trở lại ứng dụng-routing.module.
Và trong app-routing.module,
tôi sẽ nhập các tuyến đường không đổi, Rou
tes hằng số.
Nếu bạn muốn nói rằng như các tuyến đường, định tuyến hằng số, và sử dụng nó ở đây.
Bây giờ, làm thế nào để tôi sử dụng nó ở đây?
Bây giờ, RouterModule mất như
một tham số cho ForRoot,
Tham số là cấu hình tuyến đường.
Vì vậy, tôi sẽ cung cấp các tuyến đường như là tham số cho rằng, RouterModule.
Được rồi, để sửa cấu hình định tuyến của chúng tôi cho ứng dụng của chúng tôi.
Một thay đổi cuối cùng mà chúng ta cần sửa chữa là từ app-routing.module,
chúng tôi muốn có thể xuất RouterModule sang ứng dụng mô-đun của chúng tôi để
nó cũng có thể sử dụng nó.
Vì vậy, đây là nơi chúng tôi sử dụng các
tài sản xuất khẩu trong trang trí NGModule của chúng tôi.
Và làm cho RouterModule của chúng tôi có sẵn cho AppModule.
Vì vậy, chúng ta hãy lưu những thay đổi cũng cho đến nay.
Bây giờ, khi bạn định tuyến đến một trong những phần này,
bất cứ điều gì bạn hiển thị chế độ xem cho các thành phần cụ thể.
Chúng tôi không có bất cứ điều gì tại thời điểm này trong ứng dụng của chúng tôi.
Khi bạn nhìn vào các tập tin AppComponent.html.
Ở đây, theo mặc định chúng ta chỉ có ứng dụng tiêu đề, ứng dụng menu,
và ứng dụng chân trang ở đây.
Bây giờ may mắn thay,
Angular RouterModule cung
cấp cho chúng tôi một chỉ thị được gọi là router-outlet.
Vì vậy, bất cứ khi nào bạn chỉ định chỉ thị này như,
Thẻ trong tập tin mẫu của bạn.
Sau đó, ứng dụng Angular của bạn sẽ tự động sử dụng
nó như là nơi mà chế độ xem tương ứng cần được chèn vào.
Vì vậy, bằng cách chỉ định bộ định tuyến ổ cắm trong tập tin mẫu của AppComponent của tôi.
Bây giờ tôi sẽ có thể hiển thị bất kỳ thông tin nào trong số đó ở vị trí cụ thể đó.
Vì vậy, chúng tôi đã thực hiện thay đổi đối với mô-đun định tuyến ứng dụng,
tệp AppComponent.html, nơi chúng tôi đã thêm bộ định tuyến ổ cắm.
Chúng tôi xác định các tuyến đường trong các tập tin Routes.Ts và
sau đó chúng tôi có AppModule nơi chúng tôi thêm vào AppRoutingModule
là một trong những nhập khẩu có, sau khi nhập khẩu nó lên đây.
Vì vậy, sau khi tất cả những thay đổi này, chúng ta hãy
đi và xem những gì các ứng dụng Angular của chúng tôi đang hiển thị trong trình duyệt.
Đi đến trình duyệt của chúng tôi, bây giờ chúng ta có thể thấy rằng trong trình duyệt
của chúng tôi điều mặc định đã được hiển thị ở đây là công trình nhà.
Từ kiến thức của bạn về cách các thành phần được tạo ra bởi Angular CLI hoạt động.
Bạn đã nhận ra rằng điều này phải nằm trong mẫu cho thành phần nhà.
Ngoài ra, hãy xem URL trong phần địa chỉ của trình duyệt.
Bạn thấy rằng nó nói localhost:4200/nhà.
Nếu tôi chỉ cần gõ localhost:4200,
điều này sẽ tự động chuyển hướng chính nó đến localhost:4200/home.
Bởi vì chúng tôi thiết lập tuyến đường cụ thể đó trong cấu hình tuyến đường của chúng tôi ở đây.
Bây giờ chúng tôi không có cách nào để đi đến các mô-đun còn lại, vì vậy
làm thế nào để chúng tôi cung cấp các liên kết để chúng tôi có thể điều hướng đến các mô-đun còn lại.
Vì vậy, để điền vào đó, chúng ta cần phải đi và có thể thêm
thông tin bổ sung trong các tập tin mẫu thành phần tiêu đề để
nó có thể điều hướng giữa các thành phần khác nhau.
Quay trở lại trình soạn thảo của chúng tôi, hãy để tôi mở tệp HeaderComponent.html.
Bên trong tập tin HeaderComponent này, chúng ta thấy rằng chúng ta có các nút này
ở đây sẽ cho phép chúng ta điều hướng đến những thành phần cụ thể đó.
Vì vậy, ở đây, chúng tôi lấy sự giúp đỡ của một chỉ thị thuộc tính mà
mô-đun định tuyến cung cấp cho chúng tôi gọi là RouterLink.
Vì vậy, để những chúng tôi sẽ cung cấp
RouterLink như /home.
Điều đó có nghĩa là đối với nút cụ thể này,
liên kết nhà trong thanh công cụ của chúng tôi.
Khi chúng ta nhấp vào đó, điều đó sẽ tự động hướng dẫn tôi đến nhà.
Vì vậy, theo cách này, ứng dụng Angular của tôi biết nơi để gửi cho tôi vào thời điểm này.
Vì vậy, đó là cho nhà ở đó.
Bây giờ tương tự, hãy để tôi thêm một cho menu ở đây.
Đối với menu, khi tôi nhấp vào liên kết menu ở đó,
điều đó sẽ đưa tôi đến thành phần menu.
Vì vậy, chỉ thị thuộc tính RouterLink cho phép tôi xác định, như bạn thấy
ở đây một chuỗi nơi tôi có thể chỉ định đường dẫn cần phải được thêm vào.
Hãy lưu những thay đổi này cũng, và sau đó bây giờ hãy xem xét cuối cùng tại ứng dụng của chúng tôi.
Đi đến ứng dụng của chúng tôi, bây giờ chúng ta thấy rằng một thành phần Home được hiển thị ở đây.
Khi chúng ta nhấp vào thành phần Menu, chúng ta đang ở menu.
Vì vậy, hãy lưu ý cách ứng dụng của tôi tự động điều hướng
đến thành phần menu để hiển thị chế độ xem với menu ở đây.
Và cũng có một cái nhìn vào thanh địa chỉ,
chú ý cách thanh địa chỉ hiện nay hiển thị localhost:4200/menu.
Một lần nữa, chúng ta có thể điều hướng trở lại thành phần nhà và thành phần menu,
qua lại.
Vì vậy, điều này cho thấy làm thế nào bằng cách thêm định tuyến này vào ứng dụng của chúng
tôi, chúng tôi có thể điều hướng và hiển thị các quan điểm khác nhau trong ứng dụng của chúng tôi.
Bây giờ, về và liên lạc, chúng ta sẽ làm điều đó như một phần của
bài tập khác và bài tập tiếp theo sau này.
Điều này hoàn thành bài tập này, nơi chúng tôi đã sử dụng mô-đun bộ định tuyến góc và
sau đó cấu hình ứng dụng Angular của chúng tôi để sử dụng các tuyến đường khác nhau
để hiển thị các quan điểm khác nhau.
Đây là thời điểm tốt
để bạn thực hiện một cam kết Git với thông điệp cơ bản bộ định tuyến góc.
[ NHẠC]