Angular là gì? Cấu trúc của Angular, cách thiết lập Angular

Bạn đang cần một môi trường dùng để viết giao diện web bằng các ngôn ngữ lập trình HTML, CSS hay JavaScript và các dòng lệnh terminal? Bạn đang cần một công cụ hỗ trợ cho phép các nhà phát triển mở rộng dự án và tạo phần mềm mới. Vậy thì Angular là một trong những cái tên bạn không thể bỏ qua? Vậy Angular là gì? BKHOST sẽ cùng bạn tìm hiểu về Angular trong bài viết này.

Angular là gì?

Angular là một framework JavaScript được viết bằng TypeScript bao gồm các ứng dụng và thư viện web được trang bị nhiều chức năng như quản lý, giao tiếp, kiểm tra hay cập nhật code.

Angular là một công cụ mã nguồn mở dành cho các nhà phát triển, lập trình viên khởi tạo và hoạt động các dự án của mình. Công cụ cho phép bạn tạo ra các ứng dụng có thể mở rộng từ những dự án của nhà phát triển hoặc doanh nghiệp và giúp quản lý các tác vụ một cách dễ dàng và hiệu quả.

Ví dụ một số tác vụ với Angular CLI:

• ng build: Biên dịch ứng dụng Angular vào thư mục output.
• ng serves: Tạo và xử lý các thay đổi của ứng dụng.
• ng generate: Tạo hoặc sửa đổi tệp dựa trên lược đồ.
• ng test: Chạy kiểm tra đơn vị trong dự án.
• ng e2e: Tạo, xử lý và chạy kiểm tra ứng dụng Angular.

Những gì bạn sẽ tạo ra với Angular

Sau đây chúng tôi sẽ hướng dẫn bạn tạo một ứng dụng Angular để quản lý, chỉnh sửa và xử lý tác vụ với Angular.

Điều kiện bắt buộc

Trước khi cài đặt Angular, bạn nên kiểm tra những yếu tố sau đây:

• Node.js: các phiên bản LTS của Node.js bắt buộc đang hoạt động hoặc được bảo trì tạm thời. Để kiểm tra LTS, hãy mở tệp package.json và xem engines. Để xem thông tin cài đặt Node.js, mở tệp nodejs.org. Để kiểm tra phiên bản Node.js có đang hoạt động trên hệ thống hay không, hãy chạy lệnh “node -v”
• Trình quản lý gói npm Angular: Trước khi tải xuống các gói npm cung cấp cho Angular nhiều tính năng quản lý các ứng dụng, bạn cần phải có trình quản lý gói npm Angular. Hướng dẫn này sử dụng giao diện dòng lệnh npm client. Để kiểm tra npm client đã được cài trên máy chủ hay chưa, hãy vào cửa sổ dòng lệnh chạy lệnh Node.js npm -v

Thiết lập ứng dụng

Cài đặt Angular CLI cho phép chạy các lệnh terminal để tạo và hoạt động các ứng dụng bằng lệnh:

{{EJS0}}

Tạo một ứng dụng Angular CLI mới trong thư mục desktop với tên: ng new todo, chạy lệnh:

{{EJS1}}

Khởi động ứng dụng Angular và các tính năng như thẻ bổ sung, xử lý điều hướng hay các phiên bản, chạy lệnh:

{{EJS2}}

Lưu ý: Thông báo yêu cầu thực hiện kiểm tra, chọn “yes”.

Điều hướng vào dự án mới với lệnh “cd”

{{EJS3}}

Để chạy ứng dụng, sử dụng lệnh “ng serve”

{{EJS4}}

Khi CLI yêu cầu phân tích, chọn “no”

Nếu các tệp nguồn có sự thay đổi, ứng dụng sẽ tự khởi động lại. Để xem những đổi mới đó, điều hướng trong trình duyệt web đến http://localhost: 4200/. Để tắt ứng dụng khi ng serve đang hoạt động, sử dụng tổ hợp Ctrl + c.

Làm quen với ứng dụng Angular

Trong mỗi ứng dụng Angular, CLI sẽ tạo bốn tệp thành phần bao gồm mẫu, kiểu và lớp thông qua lệnh: src/app

1. app.module.ts: Chỉ định các tệp của ứng dụng làm hoạt động chính.
2. app.component.ts: Các bộ phận lớp chứa logic trên trang chính của ứng dụng.
3. app.component.html: Các bộ phận mẫu chứa HTML cho phép theo dõi nội dung của tệp trong trình duyệt “AppComponent”.
4. app.component.css: Các bộ phận kiểu chứa phiên bản tệp cho phép xác định các kiểu áp dụng cho các thành phần cụ thể của ứng dụng “AppComponent”

Angular CLI cũng sẽ tạo tệp cho phép kiểm tra các thành phần, nếu không cần thiết có thể bỏ qua bằng lệnh app.component.spec.ts

Cấu trúc của ứng dụng Angular

Angular là một ứng dụng viết bằng TypeScript (một tập hợp JavaScript) cung cấp cách gõ và các cú pháp đơn giản, hạn chế lỗi.

Angular được tạo bởi 4 thành phần chính đó là một lớp TypeScript, một mẫu HTML, các kiểu và 1 trình @Component().

Class (lớp)

Thành phần lớp nằm trong một tệp có tên cụ thể chứa các logic quan trọng trên trang chính của ứng dụng cho phép xử lý thuộc tính, sự kiện và tham chiếu các dịch vụ. Lớp sẽ ở trong các file có tên dạng như feature.component.ts.

Bạn có thể tạo ra những file với tên như header.component.ts, signup.component.ts, feed.component.ts. Bạn có thể tạo ra 1 thành phần @Component() đảm nhận phần giao diện chứa dữ liệu để thông báo cho Angular nơi tìm kiếm thư viện HTML và CSS. Ví dụ như đoạn code cho một thành phần dưới đây:

{{EJS5}}

Trong đoạn code trên có “selector” được gọi và nó giống như một thẻ HTML hoạt động trong tệp mẫu của thành phần bất kỳ. Lệnh này cho phép bạn tạo hai thành phần và sử dụng một thành phần bên trong thành phần kia. Thành phần trong đoạn code này là Item Component và thẻ selector là app-item. Các thành phần của ứng dụng Angular cung cấp các cấu trúc cho phép bạn kiểm tra và đọc code tốt hơn.

Mẫu HTML

Ứng dụng Angular đều có mẫu HTML riêng cho các thành phần với tính năng hiển thị cách các thành phần hoạt động. Bạn có thể xác định mẫu này nội tuyến hoặc theo đường dẫn tệp. Để tham chiếu đến tệp HTML bên ngoài, sử dụng thuộc tính: templateUrl

{{EJS6}}

Để viết HTML cùng một dòng, sử dụng thuộc tính template trong cách dấu “`”:

{{EJS7}}

Mẫu HTML có thể được mở rộng bổ sung cho phép chèn giá trị và văn bản động. Angular sẽ tự động cập nhật DOM nếu các thành phần có dấu hiệu thay đổi.

Ví dụ:

{{EJS8}}

Ký hiệu “{}” chỉ cho Angular nhận biết nội dung, giá trị của thành phần bên trong. Ví dụ ở trên là giá trị title

{{EJS9}}

Hoàn thành tải xuống thành phần và mẫu trong ứng dụng, kết quả hiển thị sẽ như sau:

{{EJS10}}

Styles

Kiểu trong thành phần của Angular cho phép tùy chọn bổ sung hoặc ghi đè trực tiếp bằng các kiểu riêng của nó. Bạn cũng có thể tự viết các kiểu riêng cho thành phần cụ thể trong @Component() hoặc chỉ định đường dẫn đến tệp CSS: styles.css

Để chứa các kiểu trong @Component(), sử dụng thuộc tính styles

{{EJS11}}

Sử dụng các kiểu trong 1 tệp riêng cho thành phần, sử dụng thuộc tính styleUrls

{{EJS12}}

Đối với kiểu thành phần cụ thể, bạn nên sử dụng CSS để bảo trì và hoạt động hiệu quả hơn.

Tổng kết về Angular

Bài viết trên đây BKHOST đã tổng hợp thông tin chi tiết về khái niệm, cách thiết lập và cấu trúc của Angular. Hy vọng qua thông tin trên đây, bạn sẽ có thể cài đặt và tạo cho mình một ứng dụng Angular để quản lý các dự án một cách hiệu quả.

Nếu còn thắc mắc về Angular hoặc muốn tìm hiểu thêm về các frameword javascript khác, hãy để lại bình luận ở bên dưới, BKHOST sẽ trả lời bạn trong thời gian sớm nhất.

P/s: Bạn cũng có thể truy cập vào Blog của BKHOST để đọc thêm các bài viết chia sẻ kiến thức về lập trình, quản trị mạng, website, domain, hosting, vps, server, email,… Chúc bạn thành công.