Bạn đã thành thạo các kiến thức cơ bản, đã đến lúc bắt đầu xây dựng ứng dụng web của riêng bạn với Angular. Angular giúp việc xây dựng một ứng dụng web hiệu quả hơn bằng cách sử dụng cái gọi là directives, hoạt động song song với code HTML của bạn.
Nếu việc xây dựng một ứng dụng web từ đầu dường như quá sức đối với bạn, đừng lo lắng. Một số developer rất hào phóng đã điều chỉnh một số frontend frameworks để hỗ trợ Angular. Giống như một framework điển hình, chúng đi kèm với các thành phần web được xây dựng sẵn. Những điều này làm cho việc sử dụng framework trở thành công cụ hoàn hảo cho bất kỳ ai cần thiết lập và chạy ứng dụng web nhanh chóng.
Dưới đây là 5 framework bạn có thể sử dụng để bắt đầu xây dựng một ứng dụng nền web với Angular.
Angular Bootstrap
Angular Bootstrap được xây dựng trên một trong những framework front-end phổ biến nhất, Bootstrap. Framework này chứa một tập hợp các thành phần Bootstrap như Carousel, Alert và Collapse cùng với một số bổ sung, như Rating và TimePicker.
Tất cả các thành phần này đã được chuyển sang sử dụng các Angular dirtectives và các HTML elements tùy chỉnh. Ví dụ: thay vì sử dụng một <div> để bao lại một Carousel, bạn có thể sử dụng một phần tử tùy chỉnh “có ý nghĩa” hơn <ngb-carousel> và <slide>:
<ngb-carousel *ngIf="images">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="images[0]" alt="Random first slide">
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</ng-template>
</ngb-carousel>
Nếu bạn là một fan hâm mộ lớn của Bootstrap đồng thời muốn tận hưởng sức mạnh và hiệu suất mà Angular cung cấp, đây có thể là một sự lựa chọn hoàn hảo của framework.
Angular Foundation
Một framework phổ biến khác cũng đã được chuyển sang sử dụng Angular là Foundation, và nó được đặt tên đơn giản là “Angular Foundation”.
Tương tự như vậy, framework này đã biến đổi Foundation components thành Angular directive và HTML elements tùy chỉnh. Vì vậy bây giờ bạn có thể xây dựng ứng dụng web bằng cách sử dụng các phần tử HTML dễ hiểu hơn như <tabset>và <tab>, <accordion> và <pagination>, chứ không phải là mơ hồ như thẻ <div>. Dưới đây là một ví dụ về cách thêm thành phần Alear với thẻ <alert>:
<alert type="primary">
<strong>This is a primary callout.</strong> This alert needs your attention, but it's not super important.
</alert>
Nếu bạn thích Foundation hơn Bootstrap, thì đây là framework để đồng hành cùng bạn. Bạn có thể bắt đầu với Angular Foundation từ trang này hoặc cập nhật sự phát triển của dự án thông qua repo Github.
Ionic Framework
Ionic giúp phát triển các ứng dụng di động dễ dàng và nhanh chóng. Mỗi thành phần trong Ionic framework đều được tối ưu hóa cho trải nghiệm di động, về cơ bản phụ thuộc vào thao tác chạm và cử chỉ.
Các thành phần giao diện người dùng này cũng được tạo thành từ các HTML elements tùy chỉnh. Ví dụ: khi triển khai điều hướng theo thẻ, bạn sẽ sử dụng<ion-tabs>:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Để tạo ứng dụng dễ dàng hơn và nhanh hơn, bạn có thể sử dụng Ionic Creator cho phép bạn tạo ứng dụng bằng cách kéo-n-thả. Vì vậy, nếu hiệu suất và tốc độ là quan trọng đối với bạn, Ionic là framework tốt nhất để sử dụng.
NativeScript + Angular
NativeScript là một framework để tạo ứng dụng web và di động bằng JavaScript, và mặc dù nó không yêu cầu Angular, nhưng bạn có thể tích hợp nó với Angular để có thể sử dụng lại đầy đủ những gì Angular hỗ trợ để xây dựng ứng dụng đẹp.
Nó đi kèm với một tập hợp đầy đủ các thành phần tùy chỉnh để tạo một ứng dụng có thể sử dụng được như Buttons, Date Pickers, và Slider.
<Slider value="10" minValue="0" maxValue="100" backgroundColor="green" color="red"></Slider>
Bạn có thể bắt đầu với framework NativeScript + Anguular tại đây.
Nebular
Nebular là một tập hợp các thành phần giao diện người dùng dựa trên hệ thống thiết kế Ava. Nó bao gồm hơn 35 thành phần frontend có thể tái sử dụng như Card, Accordion và Tab. Nó cũng bao gồm 400 biểu tượng, chủ đề bao gồm cả “dark mode” có thể dễ dàng tùy chỉnh để đáp ứng nhu cầu thiết kế của bạn.
Mỗi thành phần được bắt đầu bằng nb-. Ví dụ, bạn có thể thêm <nb-card> để tạo thành phần Card.
<nb-card> <nb-card-body>Card</nb-card-body> </nb-card>
Ngoài các thành phần này, Nebular cũng đi kèm với một số module xác thực và bảo mật mà bạn có thể dễ dàng cài đặt với NPM. Điều này cho phép bạn tạo, không chỉ giao diện người dùng mà còn cả ứng dụng web đang hoạt động với giao diện người dùng nhất quán đẹp mắt một cách nhanh chóng, tất cả trong một khuôn khổ duy nhất này.