17 thư viện Angular tốt nhất dành cho lập trình viên
Angular là một framework phát triển web để xây dựng các ứng dụng và hệ thống single page mạnh mẽ. Được phát triển và duy trì bởi Google và các nhà duy trì cộng đồng, Angular là một thư viện tuyệt vời để xây dựng các ứng dụng web quy mô lớn.
Angular có một cộng đồng rộng lớn và tích cực, do đó, rất nhiều thư
viện đã được cộng đồng giới thiệu để mở rộng các công cụ được cung cấp
bởi Angular. Hôm nay, chúng ta sẽ xem xét một số thư viện có thể được
đưa vào các ứng dụng hiện có - các thư viện khác nhau, từ thư viện tiện
ích đến thư viện thành phần UI.
1. ng-bootstrap
Có vẻ công bằng khi bắt đầu với việc triển khai Angular của thư viện UI phổ biến nhất. Thư viện ng-bootstrap được xây dựng từ trên xuống bằng TypeScript. Không giống như phiên bản trước, nó đã bỏ jQuery như một phần phụ thuộc, chỉ định Bootstrap CSS là phần phụ thuộc duy nhất của nó. Với hầu hết các thành phần JavaScript được triển khai, thư viện có vẻ như là một giải pháp hoàn chỉnh khi sử dụng Bootstrap với Angular - vì sự phát triển tích cực đang diễn ra, sẽ bao gồm nhiều thành phần hơn. Với gần 7k sao trên Github, ng-bootstrap có vẻ như là một lựa chọn rất phổ biến đối với rất nhiều nhà phát triển Angular.
2. Google Maps Angular
Sử dụng thư viện Google Maps trong Angular luôn là một rắc rối nghiêm
trọng vì thư viện được tải bằng thẻ script, do đó, định nghĩa kiểu aren
có sẵn. Điều này gây ra một số lỗi biên dịch cần rất nhiều hack để loại
bỏ.
Thư viện Angular Google Maps cung cấp các dịch vụ và chỉ thị để triển
khai các dịch vụ Google Maps. Có các chỉ thị có sẵn để tạo bản đồ, sử
dụng các điểm đánh dấu, v.v. Thư viện cũng cung cấp chức năng không đồng
bộ rất hữu ích để kiểm tra xem thư viện Google Maps có được tải trên
trang web hay không.
Dự án đã tích lũy được gần 2 nghìn sao trên GitHub. Truy cập tài liệu
của họ để bắt đầu.
3. Ngx-translate
Xây dựng một ứng dụng hỗ trợ nhiều ngôn ngữ có thể là một cuộc đấu tranh nghiêm trọng, đặc biệt là đối với các ứng dụng một trang. Ngx-translate là một thư viện tuyệt vời để quản lý nhiều ngôn ngữ trong ứng dụng Angular của bạn. Nó cung cấp dịch vụ để tải các bản dịch có thể được sử dụng trong suốt ứng dụng. Các bản dịch có thể được xác định và tải bằng Dịch vụ Dịch và người nghe onChange cũng có sẵn để xử lý các thay đổi ngôn ngữ trong ứng dụng. Việc thiết lập khá đơn giản và thư viện cũng được ghi lại bằng các ví dụ chi tiết. Truy cập trang Github của họ để bắt đầu.4. Angular2-jwt
Quản lý các ứng dụng một trang sử dụng mã thông báo web để xác thực thường yêu cầu sử dụng các phần mềm chặn để nối các tiêu đề vào các yêu cầu mạng. Mặc dù điều này rất dễ thực hiện, nhưng rất khó để lọc ra các yêu cầu mà don không yêu cầu mã thông báo truy cập. Đây là nơi thư viện ấn tượng này xuất hiện. Sử dụng gói angular-jwt của Auth0, bạn có thể tải mã thông báo truy cập từ bộ nhớ cục bộ hoặc bộ lưu trữ phiên. Nó cung cấp một HTTPInterceptor nối các tiêu đề xác thực vào các yêu cầu. Khả năng danh sách đen hoặc danh sách trắng một tên miền cũng có sẵn. Với gần 2k sao trên Github, đây là một thư viện có tài liệu tốt với các ví dụ đầy đủ và chỉ cần một vài bước để bắt đầu.5. AngularFire2
Tìm cách để thực hiện chức năng thời gian thực trong ứng dụng Angular của bạn? Không cần tìm đâu xa, thư viện này sử dụng sức mạnh của RxJS, Firebase và Angular để cung cấp đồng bộ hóa dữ liệu trong thời gian thực. Nó cũng cung cấp các dịch vụ và nhà cung cấp để truy vấn các tài liệu và bộ sưu tập trên Cloud Firebase và cơ sở dữ liệu thời gian thực, xử lý xác thực bằng Firebase, xử lý tải tệp lên Cloud Storage và gửi Thông báo đẩy. Gói này cũng hỗ trợ kết xuất phía máy chủ và chức năng ngoại tuyến. Bạn có thể dễ dàng nhập từng mô-đun riêng lẻ để xử lý bất kỳ chức năng nào được yêu cầu trong ứng dụng của bạn. Tất cả tài liệu có thể được tìm thấy trong thư viện trang Github của thư viện.
6. ng2-file-upload
Xử lý tải lên tập tin trong bất kỳ ứng dụng một trang nào không phải là một nhiệm vụ mà Vui phải giải quyết. Sẽ thật tuyệt nếu một thư viện bên ngoài có thể xử lý tải lên tệp trong ứng dụng web của bạn. Valon-software, nhà sản xuất ngx-bootstrap, giúp bạn tải lên ng2-file-upload, một thư viện giúp tải tệp lên một cách dễ dàng. Thư viện hỗ trợ chức năng kéo và thả cùng với việc thực hiện chọn tệp cũ. Nó cung cấp một lớp tiện ích (FileUploader) xử lý các phương thức tải lên tệp khác nhau. Nó cũng cung cấp các sự kiện để theo dõi tiến trình tải lên tệp, cũng như các lỗi và thành công trong quá trình tải lên. Thư viện được tích cực duy trì và có gần 2k sao trên Github.
7. Angular
Material 2
Danh sách sẽ hoàn thành mà không cần đề cập đến một thư viện thực
hiện các thông số kỹ thuật của Google Thiết kế Vật liệu. Angular
Material 2 là một thư viện thành phần được tạo bởi nhóm Angular. Nó có
một bộ các thành phần thực hiện các thông số kỹ thuật Thiết kế Vật
liệu, từ các nút đến hộp thoại, bảng dưới cùng, v.v. Nó có các chủ đề
hoàn toàn tùy biến và một bộ các thành phần phong phú có thể được sử
dụng để nhanh chóng xây dựng một ứng dụng. Angular Material 2 đi kèm
với gần 40 thành phần, với nhiều thành phần đang được phát triển và
bốn chủ đề được xây dựng trước.
Bắt đầu với Angular Material 2 bằng cách truy cập tài liệu
của họ hoặc trang
Github.
8. ngrx/store
Việc quản lý trạng thái trong các ứng dụng nhỏ là rất phức tạp và có thể dễ dàng quản lý trạng thái trong các thành phần riêng lẻ, nhưng khi có một nhu cầu chia sẻ dữ liệu giữa một số thành phần, cần phải có một hệ thống quản lý trạng thái phù hợp. NgRx cung cấp các thư viện phản ứng được tối ưu hóa cho Angular. Nó cung cấp tuyên bố phản ứng cho Angular trong một gói được gọi là ngrx / store. Gói này sử dụng các công nghệ RxJS để cung cấp quản lý nhà nước tương tự như Redux. Cửa hàng cho phép các nhà phát triển viết các ứng dụng nhất quán và hiệu quả trong môi trường do nhà nước kiểm soát. Rất giống với Redux, thư viện ngrx / store sử dụng Action, Reducers, Chọn và Store để quản lý luồng dữ liệu trong các ứng dụng Angular. Bắt đầu với ngrx / store bằng cách làm theo các bước được liệt kê trong tài liệu thư viện.
9. Cloudinary Angular SDK
Cloudinary là nền tảng web SaaS để quản lý tài sản truyền thông trên các ứng dụng di động và web. Nó cung cấp các dịch vụ để tải lên, lưu trữ, thao tác và phân phối tài sản truyền thông. Cloudinary cung cấp SDK cho Angular có thể được sử dụng trong các ứng dụng Angular để thay đổi kích thước và chuyển đổi hình ảnh. SDK cũng có thể được sử dụng để phân phối các kích cỡ hình ảnh khác nhau trên các màn hình khác nhau. Nó cho phép phân phối dễ dàng các tài sản video và hình ảnh từ bộ lưu trữ Cloudinary. Truy cập trang web Cloudinary để đọc thêm về quản lý tài sản truyền thông từ đầu đến cuối. SDK có thể được tìm thấy ở đây trên Github.
10. ng2-pdf-viewer
Trình xem ng2-pdf là một thư viện để xem và tương tác với các tệp PDF trên một ứng dụng web. Thư viện cung cấp một thành phần để hiển thị các tài liệu PDF. Thành phần này cũng có thể được sử dụng để thực hiện các thao tác trên PDF đã chọn như: thay đổi kích thước, xoay, tìm kiếm thông qua tài liệu, v.v. Bạn có thể kết xuất tệp cục bộ hoặc cung cấp liên kết đến tài liệu bên ngoài. Thư viện này rất tốt cho việc quản lý các tệp PDF trên ứng dụng web của bạn và có rất nhiều ứng dụng có thể xử lý bằng cách sử dụng các lệnh. Truy cập trang tài liệu chính thức hoặc trang của họ trên Github.11. ngx-charts
Khi làm việc với dữ liệu trong một ứng dụng web, nhu cầu trực quan hóa dữ liệu nảy sinh, do đó cần có thư viện trực quan hóa dữ liệu có thể xử lý các dạng tùy chỉnh khác nhau trong khi kết xuất. Biểu đồ ngx khá thú vị vì biểu đồ của họ chủ yếu dựa vào việc sử dụng Angular để tạo hiệu ứng SVG, cung cấp tốc độ và tính linh hoạt cao hơn vì thư viện đã được tối ưu hóa để sử dụng trong Angular. Nó cũng sử dụng d3 cho các hàm toán học, tỷ lệ và trục, v.v. Nó đi kèm với mười lược đồ màu trở lên trong khi làm cho các biểu đồ có thể tùy chỉnh hoàn toàn bằng CSS. Truy cập trang demo của họ để xem các chủ đề và bảng màu khác nhau có sẵn và trang GitHub của họ để bắt đầu với thư viện. Thư viện đã thu được gần 3 nghìn sao trên GitHub và được duy trì tích cực.
12. ng-seed/universal
Thư viện tuyệt vời này có rất nhiều tính năng được đóng gói bên trong
nó, nó nên là con dao quân đội Thụy Sĩ cho mọi nhà phát triển Angular.
Nó bao gồm các gói sau:
ngx-meta: để xử lý các thẻ meta, thẻ tiêu đề và tăng cường SEO.
ngx-cache: để quản lý dữ liệu rộng của ứng dụng.
ngx-auth: để quản lý xác thực dựa trên jwt.
Nó đi kèm với một vài gói khác để xử lý kết xuất phía máy chủ, tải
lười biếng, quản lý trạng thái và cấu hình webpack.
Sao chép kho lưu trữ trên Github
và làm theo hướng dẫn để bắt đầu.
13. Augury
Khi xây dựng các ứng dụng web, trình duyệt DevTools đóng một phần quan trọng trong quá trình phát triển. Nó cung cấp các tính năng để gỡ lỗi, chẩn đoán và chỉnh sửa các ứng dụng web. Khi xử lý các ứng dụng Angular, DevTools chỉ cho phép bạn tương tác với sản phẩm cuối cùng của mã, có nghĩa là các thành phần Angular, chỉ thị, v.v. của bạn đã được chuyển đổi thành JavaScript, HTML và CSS. Augury như một phần mở rộng trình duyệt cho phép bạn gỡ lỗi và trực quan hóa ứng dụng Angular của bạn ở trạng thái được biên dịch sẵn. Với Augury, bạn có thể kiểm tra các thành phần của mình và đảm bảo chúng hoạt động như bình thường. Augury hoạt động tốt hơn với bản đồ nguồn, vì vậy hãy đảm bảo rằng bạn tạo bản đồ nguồn để có trải nghiệm tốt hơn khi sử dụng Augury. Bạn có thể tải xuống tiện ích mở rộng cho Chrome hoặc Firefox. Truy cập trang Github của họ nếu bạn muốn đóng góp hoặc nêu vấn đề.14. ngx-moment
Moment.js là một thư viện tiện ích để thao túng thời gian (không phải những gì bạn nghĩ). Nó cung cấp một tập hợp các hàm để phân tích cú pháp, định dạng, xác nhận, v.v. ngày và thời gian sử dụng JavaScript. ngx-khoảnh khắc xây dựng trên thư viện Moment.js, cung cấp các ống Angular để sử dụng trong các thành phần. Nó được đóng gói với các đường ống cho các chức năng được cung cấp bởi Moment.js, do đó loại bỏ hiệu quả chi phí nhập khẩu các chức năng vào mọi thành phần để sử dụng. Thư viện được tích cực duy trì và tương đối dễ dàng để bắt đầu. Truy cập trang Github và xem qua tài liệu để bắt đầu.15. ngx pipes
Thời gian thú vị khi Angular.js được đóng gói với một bộ ống để chuyển
đổi dữ liệu trước khi kết xuất. Bộ lọc là những gì chúng được gọi trong
Angular.js. Chà, vì một số lý do hiệu suất, các phiên bản Angular gần
đây không bao gồm các đường ống để lọc hoặc sắp xếp danh sách. Angular
pipe là một thư viện chứa một tập hợp các ống hữu ích để sử dụng trong
dự án Angular của bạn. Nó chứa các đường ống để thực hiện các hành động
như: cắt tỉa, đảo ngược, khớp và quét chuỗi, nhổ lông, xáo trộn và sắp
xếp Mảng.
Nó là tài liệu tốt và dễ dàng để tích hợp. Bắt đầu nên dễ dàng và chẳng
mấy chốc, bạn sẽ bắt đầu hoàn thành nhiều hơn với các đường ống. Truy
cập tài liệu
hoặc trang Github
của họ để bắt đầu.
16. Angular Epic Spinners
Khi xử lý tính tương tác trên một trang web, bạn phải suy nghĩ về việc
thông báo cho người dùng khi các quy trình không hiển thị với họ đang
diễn ra. Khi đến lúc, bạn được yêu cầu hiển thị một chỉ báo tải. Một số
trang web có các chỉ số tải tùy chỉnh cho ứng dụng của họ, nhưng nếu bạn
muốn có một bộ spinners dễ dàng có sẵn, thì thư viện spinners này sẽ là
lựa chọn của bạn.
Angular Epic Spinners được xây dựng trên thư viện epic-spinners, với
các thành phần Angular cho mỗi thành phần có sẵn trong thư viện. Mỗi
thành phần có thể được nhập dưới dạng một mô-đun riêng lẻ và được hiển
thị ở bất kỳ đâu trong ứng dụng của bạn. Bạn có thể chọn từ bất kỳ trong
số 20 chỉ số có sẵn trong thư viện. Bạn có thể xem trang demo
hoặc đi thẳng đến trang Github
của họ.
17. Apollo Angular
GraphQL là ngôn ngữ truy vấn cho API và thời gian chạy để thực hiện các
truy vấn được thực hiện với dữ liệu. Nó cho phép các nhà phát triển yêu
cầu dữ liệu họ cần trong các lĩnh vực cụ thể của ứng dụng. Máy khách
Apollo là một thư viện được sử dụng để tiêu thụ dữ liệu từ các điểm cuối
của GraphQL. Apollo có các thư viện khách khác nhau để tiêu thụ dữ liệu
trên frontend - các thư viện tồn tại cho React, Angular, Vue, v.v.
Apollo Angular là một thư viện máy khách được xây dựng cho các ứng dụng
Angular để sử dụng các điểm cuối GraphQL. Apollo Angular là bất khả tri
của bất kỳ bộ định tuyến được sử dụng trong ứng dụng. Nó cũng hỗ trợ kết
xuất phía máy chủ. Trang tài liệu
được viết tốt với các ví dụ đầy đủ để giúp bạn bắt đầu.
Nhận xét
Đăng nhận xét