Angular nghĩa là gì

Angular và AngularJS  là gì? Angular là tên gọi một framework nổi tiếng được sử dụng để xây dựng các ứng dụng web và AngularJS là trong các một phiên bản của nó. Vậy Angular và AngularJS khác nhau như thế nào? Hãy cùng Got It theo dõi bài viết sau đây để có câu trả lời bạn nhé!

Từ khóa @Component sẽ giúp định nghĩa bộ khung html cho nó. Và bên dưới là một class CategoryListComponent dùng để viết code logic. Trong định nghĩa bộ khung html, chúng ta có một số thuộc tính cần chú ý sau đây:

• selector : Là tên được đặt để gọi một component trong code html. Ở ví dụ vừa rồi, từ khóa hello-ng-world được đặt tên cho component này. Khi cần gọi component này ra ở màn hình html cha, ta sẽ gọi bằng html tag . Gọi như vậy thì component con sẽ được render ra component cha.**
• template : Là tự định nghĩa khung html cho component .
• templateUrl : Là đường dẫn url tới file html bên ngoài để load file đó vào làm khung html cho component này.
• styles : Là viết style css luôn vào file component này. Cách này chỉ dùng cho component đơn giản.
• styleUrls : Là đường dẫn url đến file style css độc lập cho component này.

2.2:Binding

Angular có cách code Binding [kết nối giữa html và data] dữ liệu theo kiểu 2 chiều, nghĩa là html input thay đổi thì biến javascript sẽ ngay lập tức nhận được giá trị trả về và ngược lại, giá trị trong js thay đổi thì ngay lập tức màn hình html thay đổi theo.Để bind một chuỗi ra ngoài màn hình html thì rất đơn giản sử dụng 2 dấu ngoặc nhọn {{TenBien}} Ví dụ chúng ta có một Component đơn giản như sau:

2.2:To-way binding

Từ khóa ngModel lúc này không phải là thuộc tính html mà nó là từ khóa của Angular. Khi chúng ta viết [[ngModel]] chúng ta sẽ gắn chặt giá trị của input html với biến title.Dẫn đến người dùng gõ vào ô input thì thẻ h1 sẽ nhận giá trị tương ứng của title.

3.Xử lý sự kiện

Để gắn 1 sự kiện của control html với một hàm javascript, ta viết như sau:

Khi chúng ta muốn [click] tức là muốn bind sự kiện click chuột của người dùng ở control này gọi là goBack[].

4.ngModule

Module là một khái niệm rộng nhất của Angular. Một module có thể bao gồm chứa các components, directives, pipes, v.v.

Module có thể được biên dịch [compile] dưới dạng ahead-of-time [AoT]. Nghĩa là biên dịch ra mã thực thi để hiện ra luôn trên trình duyệt không cần vẽ vời gì từ đầu. Hãy tưởng tượng component có html và js viết riêng, khi load trang thì 2 thứ này mới nhào nặn chung để hiển thị html+data lên màn hình. AoT là thứ html+data đã nhào sẵn.

Module cũng có thể gọi module con và bắt tay được với các module khác.

Ví dụ về module chúng ta có thể bắt gặp ngay ở trong category.module.ts

Các thuộc tính của module được định nghĩa như sau:

• imports: Định nghĩa sự phụ thuộc [Dependency] của module này, module phụ thuộc sẽ được load trước rồi module này mới load.
• declarations: Định nghĩa tất cả các component sẽ được dùng trong module này. Nếu chưa định nghĩa thì các component trong module sẽ không thể gọi nhau vì không tìm thấy nhao.
• bootstrap: Mỗi ứng dụng Angular đều cần một module gốc, module này sẽ có một component gốc chứa layout gốc sẽ được render ra ở file index.html.

6.Service

Để tạo ra một service thì chúng ta cần import và mô tả một class với từ khóa @injectable lấy từ @angular/core module.

Nếu muốn dùng chung service mà không muốn khao báo nhiều lần,component nào cũng phải tiêm nó vào.Thì lúc này có thể khai báo service ở phần providers của component hoặc module

7.Router

7.1. Router Outlet

Mỗi một Router sẽ có một URL để load component. Và để biết được là component sẽ render ra chỗ nào thì chúng ta viết đoạn code sau vào khung html cần chèn:

7.2. Cài đặt Route cho ứng dụng Angular

Để cài đặt toàn bộ Router cho một ứng dụng Angular thì chúng ta cần tạo ra một đối tượng JSON chứa các thuộc tính như sau:

• path: Đường dẫn URL của component hiện tại.

• component: Ứng với đường dẫn bên trên thì load component nào.

• redirectTo: Chuyển hướng đến URL này nếu URL ở path không trùng. Ví dụ, khi người dùng gõ URL linh tinh, chúng ta muốn chuyển hướng và load trang Home hoặc trang báo lỗi 404 thì cần ghi rõ URL trang Home hoặc 404 vào redirectTo.

• pathMatch: Cài đặt xem chế độ kiểm tra url là như thế nào. khi giá trị là full thì nghĩa là toàn bộ url từ đầu đến cuối sẽ phải chính xác như trong bộ JSON Router. Còn khi giá trị là prefix thì chuỗi đầu tiên của url [dấu sược đầu tiên] sẽ được kiểm tra. Mặc định nếu không nói gì thì prefix sẽ được chọn. Hãy xem đoạn code ví dụ về Router bên dưới:

Lời kết:Trong bài này, mình đã giới thiệu tổng quan đến các bạn vì sao chọn Angular và các version của Angular . Đây là một bài giới thiệu tổng quan, mong bài viết sẽ giúp bạn hiểu hơn về Angular.