laptrinhvien.io xin gửi lời chúc mừng năm mới đến tất cả bạn đọc đã luôn giành tình cảm và sự quan tâm đến chúng tôi.

Mở đầu năm 2018, laptrinhvien.io tiếp tục mang đến các bạn bài học về Component trong Angular. Nội dung nằm trong chuỗi series bài học Angular.

Trước hết, cùng nhắc lại phần kiến thức ở phần trước laptrinhvien.io đã giới thiệu đến các bạn nhé. Chúng ta đã chuẩn bị sẵn sàng môi trường và công cụ cần thiết để bắt đầu xây dựng ứng dụng Angular. Chúng ta cùng bắt tay vào xây dựng Component đầu tiên nhé!

Bài học này sẽ đi sâu vào việc xây dựng một Component rất cơ bản. Và tập trung vào xác định rõ các bộ phận của Component đó, ý nghĩa và mục đích của chúng.

Để biết rõ hơn về Component trong Angular. Hãy tập trung và cùng xem video bên dưới các bạn nhé! Có các ví dụ cụ thể và hướng dẫn chi tiết:

Các bạn hãy hiểu rằng một ứng dụng Angular là tập hợp các Component, chúng ta tạo ra từng Component và sắp xếp chúng lại để tạo ra ứng dụng.

Các nội dung chính sẽ được làm rõ trong phần này:

• Component là gì ?
• Tạo một Component Class
• Định nghĩa Metadata với Decorator
• Importing
• Bootstrapping

Trong bài học đầu tiên, chúng ta đã xác định được cấu trúc ứng dụng Angular. Angular CLI đã giúp chúng ta tạo ra file index.html và các AppComponent. Nhiệm vụ hôm nay sẽ là xây dựng AppComponent.

Component là gì?

Một Angular Component bao gồm:

• Một mẫu (template) cái mà sẽ tạo ra giao diện (layout view) cho người dùng, template này được tạo ra từ HTML. Trên trang HTML này, chúng ta sẽ sử dụng Angular Binding và Directives để tăng sức mạnh cho View.
• Component sẽ có một Class để chúng ta liên kết với View. Các Class này được tạo ra bằng TypeScript. Class có chứa các thuộc tính và phương thức, cũng tương tự như định nghĩa Class của lập trình hướng đối tượng.
• Một phần không thể thiếu khác của Component là Metadata, nó cung cấp thông tin bổ xung cho Angular Component và giúp định nghĩa Class này như một Angular Component. Metadata được định nghĩa bởi một Decorator. Một decorator có thể hiểu đơn giản là phương thức thêm Metadata vào Class.

Tạo một Component Class

Một class là một cấu trúc cho phép tạo những thuộc tính(properties) được xác định bởi những kiểu dữ liệu (data type) và những phương thức (method) cung cấp những chức năng.

Định nghĩa một class sử dụng một từ khoá “class” và theo đó là tên của class. Thông thường Angular quy ước đặt tên mỗi component với một tên đặc trưng. Sau đó nối các thành phần như hậu tố “Component”.

Từ khoá “export” trước class làm cho component đó có thể được sử dụng bởi các component khác của ứng dụng. Và như chúng ta đã được học từ chương trước, file chứa mã bây giờ đã là một ES module. Nó sẽ được tải bởi module loader khác mà không cần thêm một script tag nữa.

Bên trong phần thân của class có những thuộc tính và phương thức.

Định nghĩa Metadata với một Decorator

• Một hàm thêm metadata vào một class, các thành phần thêm vào là những đối số nhất định.
• Tiền tố bắt đầu với @
• Là một trong những decorator được xây dựng sẵn bởi Angular: @Component

Importing

• Câu lệnh import cho phép chúng ta sử dụng những thành phần exported (xuất khẩu) từ module bên ngoài.
• Những module khác trong ứng dụng có thể import exported class nếu cần. Được phép sử dụng câu lệnh import xuyên suốt quá trình code để import bất kỳ thư viện bên thứ ba nào, hoặc những module của chúng ta đã viết, hay import từ chính Angular.
• Có thể import từ Angular, vì Angular cũng chính là một tập hợp những thư viện module. Mỗi thư viện là một module gồm nhiều tính năng liên quan. Khi chúng ta cần thứ gì đó từ Angular thì import một Angular module library (thư viện module). Giống như import bất kỳ module bên ngoài khác.

Bootstrapping

Hầu hết các ứng dụng Angular có một file index.html có chứa trang chính của ứng dụng. File index.html thường chỉ là một trang. Do đó một ứng dụng Angular thường được gọi là một Single Page Application (SPA).

Những điều tối thiểu phải có để tạo ra một AppModule

• @NgModule để xác định Class AppModule là một Angular Module.
• @NgModule cũng sẽ có những metadata object, cái mà sẽ nói cho Angular biết cách biên dịch và khởi chạy ứng dụng của chúng ta.
• Imports: import module BrowserModule, module này cần cho mọi ứng dụng chạy trên trình duyệt.
• Declarations: Khai báo những component sẽ được sử dụng trong module này.
• Boostrap: Component gốc được Angular tạo ra và chèn vào trong index.html

Cảm ơn các bạn đọc đã luôn theo dõi laptrinhvien.io. Hẹn gặp các bạn ở những bài học tiếp theo.

Phần trước: [#ANG02] ANGULAR – CHUẨN BỊ NHỮNG HÀNH TRANG CẦN THIẾT

Chúng tôi luôn mong muốn mang lại những kiến thức bổ ích cho các bạn yêu thích lập trình. Các bạn hãy đón xem và ủng hộ bằng cách LIKE/SHARE hay SUBCRIBE để có thể cập nhật thông tin mới nhất từ chúng tôi. Và đừng quên chia sẻ bài học này tới bạn bè của mình để cùng nhau chinh phục Angular bạn nhé!

Đặc biệt, hiện tại Trung Tâm đang tuyển sinh Khóa học Angular 5 khai giảng ngày 03/01/2018. Các bạn hãy xem chi tiết lịch khai giảng và đăng ký học tại đây: ►►► LỊCH KHAI GIẢNG 

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO

 0933067997 – 0933267337
 facebook.com/laptrinhvienio
 YouTube/laptrinhvienio
 tuyensinh@laptrinhvien.io
 Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, Tp. Hồ Chí Minh.