Hình ảnh của Aphinya Dechalert. Tiêu đề: Red Monster học Angular

19 điều bạn cần học để trở thành một nhà phát triển góc cạnh hiệu quả

Hướng dẫn toàn diện về cách trở thành một chuyên gia tại Angular

Ứng dụng todo tương đương với ứng dụng ‘Xin chào thế giới để phát triển front-end. Mặc dù nó bao gồm khía cạnh CRUD của việc tạo một ứng dụng, nhưng nó thường chỉ làm trầy xước bề mặt của những gì một khung hoặc thư viện có thể làm.

Angular dường như luôn luôn thay đổi và cập nhật - nhưng trong thực tế, có một số điều vẫn giữ nguyên. Ở đây, một danh sách các khái niệm cốt lõi mà bạn cần tìm hiểu khi nói đến Angular để tận dụng đúng khung công tác JavaScript.

Có rất nhiều thứ để học khi nói đến Angular và rất nhiều người trong chúng ta bị mắc kẹt trong vòng tròn mới bắt đầu chỉ vì chúng ta không biết nên đi đâu hoặc tìm gì. Đây là một hướng dẫn toàn diện (và tóm tắt nhanh về chính Angular) Tôi ước mình có được khi mới bắt đầu với Angular 2+.

1. Kiến trúc mô đun góc

Về lý thuyết, bạn có thể đặt tất cả mã Angular của mình trên một trang và vào một hàm lớn, nhưng nó không được khuyến nghị, cũng không phải là cách hiệu quả để cấu trúc mã của bạn và đánh bại mục đích tồn tại của Angular.

Angular sử dụng khái niệm mô-đun rất nhiều như là một phần của kiến ​​trúc khung. Điều này có liên quan đến bộ sưu tập mã có một lý do duy nhất hiện có. Ứng dụng Angular của bạn về cơ bản được tạo thành từ các mô-đun - một số độc lập và một số được chia sẻ.

Có nhiều cách để cấu trúc các mô-đun của bạn trong ứng dụng của bạn và đào sâu vào các cấu trúc kiến ​​trúc khác nhau cũng có thể giúp xác định cách bạn quy mô ứng dụng của bạn khi nó phát triển. Nó cũng có thể giúp cô lập mã của bạn và ngăn chặn việc ghép mã xảy ra.

Điều gì với Google:

  • Các mẫu kiến ​​trúc góc cạnh
  • Kiến trúc ứng dụng góc có thể mở rộng

Tôi đưa vào chủ đề:

  • Modular Architecture trong Angular thậm chí có nghĩa là gì?

2. Dataflow một chiều và bất biến

Quay trở lại trong Angular 1, ràng buộc hai chiều chiếm được cảm tình của nhiều nhà phát triển front-end. Nó thực chất là một trong những điểm bán ban đầu của Angular. Tuy nhiên, theo thời gian, nó bắt đầu đặt ra vấn đề về hiệu năng khi ứng dụng bắt đầu trở nên phức tạp hơn.

Hóa ra bạn không thực sự cần ràng buộc hai chiều ở mọi nơi.

Liên kết hai chiều vẫn có thể có trong Angular 2+, nhưng chỉ khi được nhà phát triển yêu cầu rõ ràng - do đó buộc người đứng sau mã phải suy nghĩ về hướng và luồng dữ liệu của họ. Nó cũng cho phép ứng dụng trở nên linh hoạt hơn với dữ liệu bằng cách xác định cách dữ liệu nên lưu chuyển.

Điều gì với Google:

  • Luồng dữ liệu góc thực hành tốt nhất,
  • Dòng chảy không định hướng trong Angular,
  • Ưu điểm của ràng buộc một chiều

Tôi đưa vào chủ đề:

  • Câu chuyện về Dataflow đơn hướng trong góc

3. Chỉ thị thuộc tính và cấu trúc

Một lệnh là một phần mở rộng của HTML thông qua các yếu tố tùy chỉnh. Chỉ thị thuộc tính cho phép bạn thay đổi các thuộc tính của một yếu tố. Chỉ thị cấu trúc thay đổi bố cục bằng cách thêm hoặc xóa các thành phần khỏi DOM.

Ví dụ, ngSwitch và ng If là các chỉ thị cấu trúc vì nó đánh giá các tham số và xác định xem các phần của DOM có tồn tại hay không.

Chỉ thị thuộc tính là các hành vi tùy chỉnh gắn liền với thành phần, thành phần hoặc các chỉ thị khác.

Học cách sử dụng hai chỉ thị này có thể mở rộng khả năng ứng dụng của bạn và giảm số lượng mã trùng lặp trong dự án của bạn. Chỉ thị thuộc tính cũng có thể giúp tập trung vào một số hành vi nhất định được sử dụng trên các phần khác nhau của ứng dụng.

Điều gì với Google:

  • Chỉ thị thuộc tính góc,
  • Chỉ thị cấu trúc góc
  • Các mẫu chỉ thị cấu trúc góc

4. Móc vòng đời thành phần

Mỗi phần mềm có vòng đời riêng xác định cách tạo ra một cái gì đó, kết xuất và sau đó loại bỏ. Angular có vòng đời thành phần giống như thế này:

tạo → kết xuất → kết xuất con → kiểm tra khi thay đổi thuộc tính dữ liệu → hủy → xóa khỏi DOM

Chúng tôi có khả năng móc vào những thời điểm quan trọng trong chu kỳ này và nhắm mục tiêu vào những thời điểm cụ thể theo thời gian hoặc sự kiện. Điều này cho phép chúng tôi tạo ra các phản hồi phù hợp và định cấu hình các hành vi theo các giai đoạn khác nhau của sự tồn tại thành phần.

Ví dụ: bạn có thể cần tải một số dữ liệu trước khi trang được hiển thị. Bạn có thể làm điều này thông qua ngOnInit (). Hoặc có lẽ bạn cần ngắt kết nối khỏi cơ sở dữ liệu. Điều này có thể được thực hiện thông qua ngOnDestroy ().

Điều gì với Google:

  • Móc vòng đời góc
  • Vòng đời thành phần

5. Dịch vụ http và quan sát được

Đây thực sự là một tính năng cụ thể của Angular mà là một thứ gì đó từ ES7. Angular chỉ tình cờ triển khai nó như là một phần của các khả năng hỗ trợ của khung và hiểu điều này cũng dịch tốt cho React, Vue và bất kỳ thư viện hoặc khung liên quan đến JavaScript nào.

Các dịch vụ quan sát được là các mẫu cho phép bạn xử lý dữ liệu một cách hiệu quả - cho phép bạn phân tích, sửa đổi và duy trì dữ liệu trong một hệ thống dựa trên sự kiện. Bạn có thể thực sự thoát khỏi HTTP và Observables vì ​​mọi thứ đều là dữ liệu.

Điều gì với Google:

  • Các mẫu có thể quan sát được của JavaScript
  • HTTP góc và quan sát
  • Tính năng quan sát ES7

6. Kiến trúc thành phần thông minh / ngu ngốc

Khi viết các ứng dụng Angular của chúng tôi, chúng tôi có xu hướng đưa mọi thứ vào thành phần. Tuy nhiên, đó không chính xác là thực hành tốt nhất. Ý tưởng về các thành phần thông minh / ngu ngốc trong Angular là điều cần được nói đến nhiều hơn, đặc biệt là trong giới mới bắt đầu.

Liệu một thành phần có thông minh / ngu ngốc quyết định vai trò của nó trong sơ đồ lớn của ứng dụng hay không. Các thành phần câm thường không trạng thái với các hành vi dễ dự đoán và hiểu. Làm cho thành phần của bạn câm bất cứ khi nào có thể.

Các thành phần thông minh khó nắm bắt hơn vì đầu vào và đầu ra có liên quan. Để tận dụng đúng các khả năng của Angular, hãy nhìn vào kiến ​​trúc thành phần thông minh / ngu ngốc. Nó sẽ cung cấp cho bạn các mẫu và tư duy về cách tiếp cận mã của bạn và các mối quan hệ của nó với nhau.

Điều gì với Google:

  • Thành phần góc thông minh / câm
  • Thành phần câm không quốc tịch
  • Thành phần trình bày
  • Các thành phần thông minh trong Angular

7. Cấu trúc ứng dụng và thực tiễn tốt nhất

CLI chỉ có thể đưa bạn đến nay khi có cấu trúc và thực tiễn tốt nhất. Xây dựng một ứng dụng Angular (hoặc bất kỳ ứng dụng nào nói chung) cũng giống như xây dựng một ngôi nhà. Có những quy trình được thiết lập được cộng đồng tối ưu hóa qua nhiều năm sẽ dẫn đến ứng dụng hiệu quả và hiệu quả nhất.

Angular cũng không ngoại lệ.

Hầu hết các khiếu nại đối với Angular bởi những người cố gắng học nó thường là do thiếu kiến ​​thức về cấu trúc; cú pháp rất dễ nhận và nó rõ ràng và rõ ràng. Kiến thức cấu trúc ứng dụng, tuy nhiên, đòi hỏi sự hiểu biết về bối cảnh, yêu cầu và làm thế nào tất cả phù hợp với nhau ở mức độ khái niệm và thực tế. Tìm hiểu các cấu trúc ứng dụng tiềm năng khác nhau cho Angular và các thực tiễn tốt nhất của chúng sẽ cho bạn quan điểm về cách xây dựng ứng dụng của bạn.

Điều gì với Google:

  • Ứng dụng Repo đơn góc
  • Thư viện góc, gói góc
  • Gói góc
  • Ứng dụng vi góc
  • Monorepo

8. Cú pháp ràng buộc mẫu

Binding là đóng băng trên khung JavaScript. Đó cũng là một trong những lý do tồn tại ở nơi đầu tiên. Liên kết mẫu kết nối không gian giữa HTML tĩnh và JavaScript. Cú pháp ràng buộc mẫu Angular sườn đóng vai trò là người hỗ trợ giữa hai công nghệ này.

Khi bạn đã học cách sử dụng chúng và khi nào, việc biến một trang tĩnh một lần thành một thứ tương tác trở nên dễ dàng hơn và ít phiền toái hơn. Xem xét các kịch bản khác nhau để ràng buộc như ràng buộc thuộc tính, sự kiện, nội suy và ràng buộc hai chiều.

Điều gì với Google:

  • Ràng buộc tài sản góc
  • Sự kiện ràng buộc
  • Liên kết hai chiều góc, Nội suy góc
  • Hằng số đi qua góc

9. Mô-đun tính năng và định tuyến

Các mô-đun tính năng được đánh giá thấp khi nói đến Angular. Nó thực sự là một cách thực sự tuyệt vời để tổ chức và tập hợp các yêu cầu kinh doanh. Nó hạn chế trách nhiệm và giúp ngăn ngừa ô nhiễm mã trong thời gian dài.

Có năm loại mô-đun tính năng (tên miền, định tuyến, định tuyến, dịch vụ và tiện ích con) và mỗi loại giao dịch với một loại chức năng nhất định. Học cách sử dụng các mô-đun tính năng kết hợp với định tuyến có thể giúp tạo ra các bộ chức năng riêng biệt và áp dụng các mối quan tâm tốt và rõ ràng cho ứng dụng của bạn.

Điều gì với Google:

  • Mô-đun tính năng góc
  • Cấu trúc tính năng được chia sẻ trong Angular
  • Nhà cung cấp mô-đun tính năng
  • Tải chậm với các mô-đun định tuyến và tính năng

10. Biểu mẫu và xác nhận (Biểu mẫu phản ứng và Trình xác nhận)

Các hình thức là một phần không thể thiếu của bất kỳ sự phát triển front-end nào.

Và với các hình thức đi kèm xác nhận.

Có nhiều cách khác nhau để xây dựng các biểu mẫu dựa trên dữ liệu thông minh khi nói đến Angular. Lặp lại phổ biến nhất của các hình thức là các hình thức phản ứng. Tuy nhiên, có các tùy chọn khác ngoài đó, cụ thể là các trình xác nhận dựa trên mẫu và tùy chỉnh.

Tìm hiểu cách trình xác nhận hoạt động kết hợp với CSS sẽ giúp tăng tốc quy trình làm việc của bạn và biến ứng dụng của bạn thành không gian sẵn sàng xử lý lỗi.

Điều gì với Google:

  • Xác nhận dạng góc
  • Xác thực định hướng mẫu
  • Xác nhận mẫu phản ứng
  • Trình xác thực đồng bộ hóa và không đồng bộ trong Angular
  • Trình xác nhận tích hợp
  • Trình xác nhận tùy chỉnh góc
  • Xác nhận chéo trường

11. Chiếu nội dung

Angular có một thứ gọi là chiếu nội dung, đó là khả năng truyền dữ liệu từ cha mẹ sang các thành phần con một cách hiệu quả. Mặc dù điều này nghe có vẻ phức tạp, nhưng thực tế, hành động của nó là đưa các khung nhìn vào các khung nhìn để tạo ra một khung nhìn chính.

Chúng ta thường hiểu chiếu nội dung ở cấp độ bề mặt - khi chúng ta lồng các khung nhìn con bên trong một khung nhìn cha mẹ. Tuy nhiên, để mở rộng hiểu biết của chúng tôi, chúng tôi cũng cần hiểu cách dữ liệu được truyền qua giữa các chế độ xem khác nhau. Đây là nơi hiểu nội dung chiếu có ích.

Hiểu được phép chiếu nội dung có thể giúp bạn xác định luồng dữ liệu ứng dụng của bạn và nơi xảy ra khả năng biến đổi của nó.

Điều gì với Google:

  • Nội dung góc chiếu
  • Mối quan hệ cha-con góc cạnh
  • Quan hệ dữ liệu xem góc

12. Phát hiện thay đổi onPush

Theo mặc định, Angular sử dụng chiến lược phát hiện thay đổi mặc định. Điều này có nghĩa là các thành phần sẽ luôn được kiểm tra. Mặc dù không có gì sai khi sử dụng mặc định, nhưng đó có thể là một cách không hiệu quả để phát hiện sự thay đổi.

Đối với các ứng dụng nhỏ, tốc độ và hiệu suất là ổn. Tuy nhiên, một khi ứng dụng của bạn đạt đến một kích thước nhất định, mọi thứ có thể trở nên khá cồng kềnh khi chạy, đặc biệt là trong các trình duyệt cũ hơn.

Chiến lược phát hiện thay đổi onPush sẽ tăng tốc đáng kể cho ứng dụng vì nó phụ thuộc vào các kích hoạt cụ thể xảy ra thay vì kiểm tra liên tục để xem có bất cứ điều gì đã xảy ra không.

Điều gì với Google:

  • Phát hiện thay đổi góc cạnh

13. Bảo vệ tuyến đường, Tải trước, Tải nhanh

Nếu bạn có thông tin đăng nhập nào đó, bạn sẽ cần người bảo vệ tuyến đường. Ý tưởng rằng bạn có thể bảo vệ các chế độ xem nhất định khỏi các chế độ xem trái phép là yêu cầu bắt buộc phải có trong nhiều ứng dụng. Bảo vệ tuyến hoạt động như một giao diện giữa bộ định tuyến của bạn và tuyến đường được yêu cầu. Chính người ra quyết định sẽ xác định xem một tuyến đường nhất định có được phép truy cập hay không. Có rất nhiều người trong thế giới của những người bảo vệ tuyến đường được khám phá - cụ thể là các quyết định định tuyến dựa trên những thứ như hết hạn mã thông báo, xác thực vai trò của người dùng và chứng khoán tuyến.

Tải trước và tải nhanh cũng có thể nâng cao trải nghiệm người dùng của bạn bằng cách tăng tốc thời gian tải ứng dụng của bạn. Cũng tốt để lưu ý rằng tải trước và tải lười biếng không chỉ quyết định xem bạn có muốn tải một bộ hình ảnh cụ thể hay không. Nó cũng có thể nâng cao kiến ​​trúc đi kèm của bạn và tải các phần khác nhau của ứng dụng có thể tồn tại trên các phạm vi và miền khác nhau.

Điều gì với Google:

  • Bảo vệ tuyến đường góc,
  • Các mẫu xác thực góc
  • Các mô-đun tải trước và tải lười biếng
  • Các mẫu tuyến an toàn góc

14. Ống tùy chỉnh

Định dạng dữ liệu chưa bao giờ dễ dàng hơn với các ống Angular. Mặc dù rất nhiều ống được cấu hình sẵn và ngoài hộp bao gồm rất nhiều thứ như ngày tháng, tiền tệ, tỷ lệ phần trăm và vỏ ký tự, nhưng nó không bao gồm tất cả mọi thứ mà bạn sẽ cần.

Đó là nơi mà các ống tùy chỉnh có ích. Bạn có thể tạo các bộ lọc của riêng mình một cách dễ dàng và chuyển đổi các định dạng dữ liệu theo ý thích của bạn. Nó thực sự dễ dàng để làm như vậy đi và kiểm tra xem nó ra.

Điều gì với Google:

  • Ống tùy chỉnh góc

15. Trang trí @viewChild và @ContentChild

viewChild và contentChild là những cách mà thành phần của bạn có thể nói chuyện với nhau. Điểm quan trọng của Angular là bạn có nhiều thành phần được biên dịch lại với nhau như trò chơi ghép hình, nhưng câu đố đó có thể thực sự làm được nhiều việc nếu các mảnh được cách ly với nhau.

Đó là nơi mà viewChild và contentChild xuất hiện. Học cách sử dụng hai trình trang trí này cho bạn khả năng truy cập các thành phần liên quan. Điều này làm cho nhiệm vụ chia sẻ dữ liệu dễ dàng hơn và chuyển dữ liệu và sự kiện được kích hoạt bởi các thành phần liên quan có thể.

Điều gì với Google:

  • Trang trí góc
  • viewchild và contentchild trong Angular
  • Chia sẻ dữ liệu thành phần góc

16. Thành phần động và mẫu ng

Các thành phần là các khối xây dựng của Angular. Tuy nhiên, không phải tất cả các thành phần đều được cố định và cần được tạo ra một cách nhanh chóng hơn là được biên dịch trước.

Các thành phần động cho phép ứng dụng tạo các thành phần nhất định một cách nhanh chóng. Các thành phần tĩnh cho rằng mọi thứ sẽ không thay đổi. Nó có thể dự đoán được với đầu vào và đầu ra dự kiến.

Thành phần động, tuy nhiên, được hiển thị trên cơ sở theo yêu cầu. Chúng trở nên khá tiện dụng khi xây dựng một ứng dụng có thể đang lắng nghe các nguồn bên ngoài và các cập nhật của chúng hoặc là phản ứng đối với các hành động xảy ra trên trang.

Điều gì với Google:

  • Các thành phần động trong Angular
  • Các thành phần động một ng-templating

17. @host @hostbinding và exportAs

@Host, @hostbinding và exportAs là các trang trí chỉ thị Angular mở rộng các tham số mà nó được đính kèm. Nó cũng cung cấp cho bạn khả năng tạo các mẫu súc tích để xuất để tiêu thụ trong ứng dụng.

Nếu những điều trên nghe có vẻ khó hiểu, bạn nên bắt đầu bằng cách tra cứu các chỉ thị Angular và mục đích của chúng hiện có. @Host, @hostbinding và exportAs là các tính năng của các chỉ thị giúp làm cho nó đúng như vậy.

Điều gì với Google:

  • Các mẫu chỉ thị góc,
  • @Host, @hostbinding và exportAs trong Angular

18. Quản lý nhà nước với RxJs

Trạng thái của ứng dụng của bạn cuối cùng sẽ xác định dữ liệu được hiển thị cho người dùng của bạn. Nếu trạng thái của bạn là một mớ hỗn độn của spaghetti, rất có thể toàn bộ cấu trúc dữ liệu của bạn sẽ biến dạng và vỡ vụn trước mọi thay đổi.

Khi bạn bắt đầu hiểu cách các trạng thái hoạt động trong Angular, bạn sẽ hiểu cách thức và lý do tại sao dữ liệu của bạn hoạt động như vậy.

Trong khi Angular có hệ thống quản lý nhà nước riêng, RxJs là một phương pháp tuyệt vời để tập trung hóa các trạng thái và dữ liệu liên quan của nó. Dữ liệu có thể bị mất trong chuỗi các mối quan hệ cha-con. RxJs tách riêng điều này bằng cách tạo ra một cửa hàng tập trung.

Điều gì với Google:

  • RxJ góc
  • Nguyên tắc thông lượng / Redux
  • Nguyên tắc quản lý nhà nước góc

19. Khu vực tiêm chích và khu vực phụ thuộc

Nói chung, tiêm phụ thuộc là một khái niệm lớn, vì vậy nếu bạn không thành thạo về ý tưởng này, đây là một trong những điều bạn thực sự cần phải tìm kiếm. Có nhiều cách để tạo sạch các mũi tiêm phụ thuộc trong Angular, chủ yếu đạt được thông qua các hàm tạo. Đó là một cách để chỉ nhập những thứ bạn cần và do đó làm tăng hiệu quả của ứng dụng thay vì tải mọi thứ dưới ánh mặt trời.

Giống như tiêm phụ thuộc, các khu vực cũng là một ý tưởng mà Lọ cũng không dành riêng cho Angular. Đó là một cách để ứng dụng phát hiện các tác vụ không đồng bộ từ đầu đến cuối. Điều này rất quan trọng vì các tác vụ không đồng bộ này có khả năng thay đổi trạng thái bên trong của ứng dụng và do đó chế độ xem. Các khu vực tạo điều kiện cho quá trình phát hiện thay đổi.

Điều gì với Google:

  • Vùng góc
  • Phụ thuộc tiêm
  • DI góc

Từ cuối cùng

Angular là một chủ đề lớn. Trong khi xây dựng các ứng dụng Angular có thể giúp ích cho quá trình học tập, đôi khi bạn chỉ cần don biết những gì bạn không biết. Thật khó để biết những điều chưa biết khi bạn bắt đầu và hy vọng, hướng dẫn ngắn này đã mang đến cho bạn một số giác ngộ ngoài các hướng dẫn Angular thông thường của bạn, cùng với cái nhìn toàn diện hơn và toàn diện hơn về Angular nói chung.

Hãy để kết nối và tham gia danh sách bản tin tiêu hóa web tuyệt vời của tôi. Cảm ơn bạn đã đọc.❤

Aphinya