Tạo và chạy dự án Angular

Angular là gì?

Angular là một framework frontend mã nguồn mở do Google bảo trì, dùng để xây dựng ứng dụng đơn trang động (SPA). Nó được xây dựng dựa trên TypeScript và cung cấp nhiều công cụ và tính năng phong phú, giúp các nhà phát triển có thể xây dựng các ứng dụng phức tạp một cách hiệu quả. Cốt lõi của Angular là các thành phần và tính module hóa, giúp cho mã nguồn dễ được tổ chức và bảo trì hơn.

Các đặc điểm chính và lợi thế của Angular

Thành phần hóa: Xây dựng giao diện người dùng thông qua các thành phần, giúp mã nguồn trở nên module hóa và có thể tái sử dụng được.
Liên kết dữ liệu hai chiều: Đồng bộ tự động giữa mô hình dữ liệu và giao diện, giúp quản lý dữ liệu trở nên tiện lợi hơn.
Tiêm phụ thuộc: Tăng cường khả năng kiểm thử và bảo trì mã nguồn thông qua cơ chế tiêm phụ thuộc.
Công cụ CLI mạnh mẽ: Angular cung cấp công cụ dòng lệnh mạnh mẽ (Angular CLI) giúp đơn giản hóa việc tạo, phát triển và xây dựng dự án.
Định tuyến và xử lý biểu mẫu tích hợp: Angular cung cấp chức năng định tuyến và xử lý biểu mẫu mạnh mẽ, làm cho việc xây dựng ứng dụng đơn trang thuận tiện hơn.

Sử dụng Angular có thể giúp các nhà phát triển xây dựng các ứng dụng web hiện đại và nhanh chóng hơn một cách hiệu quả.

Tạo và chạy dự án Angular với ServBay

Trong bài viết này, chúng ta sẽ sử dụng môi trường Node.js do ServBay cung cấp để tạo và chạy một dự án Angular. Chúng ta sẽ sử dụng tính năng 'Host' của ServBay để thiết lập máy chủ web và thực hiện truy cập dự án thông qua proxy ngược và dịch vụ tệp tĩnh.

Tạo dự án Angular

Khởi tạo dự án
Đầu tiên, đảm bảo rằng bạn đã cài đặt môi trường Node.js do ServBay cung cấp. Sau đó, sử dụng lệnh sau để cài đặt Angular CLI toàn cục:
bash
```
npm install -g @angular/cli
```
1
Trong thư mục gốc của trang web mà ServBay đề xuất /Applications/ServBay/www, tạo một dự án Angular mới:
bash
```
cd /Applications/ServBay/www  
ng new servbay-angular-app
```
1
2
Nhập tên dự án theo yêu cầu (đề xuất là servbay-angular-app) và lựa chọn các tùy chọn khác theo nhu cầu:
bash
```
? Would you like to add Angular routing? Yes  
? Which stylesheet format would you like to use? CSS
```
1
2
Cài đặt phụ thuộc
Đi vào thư mục dự án và cài đặt các phụ thuộc:
bash
```
cd servbay-angular-app  
npm install
```
1
2

Thay đổi nội dung đầu ra của dự án Angular

Thay đổi file src/app/app.component.html
Mở file src/app/app.component.html, thay đổi nội dung để trang web hiển thị "Hello ServBay!":
html
```
<div style="text-align:center">  
  <h1>Hello ServBay!</h1>  
</div>
```
1
2
3

Chuyển vào chế độ phát triển

Chạy máy chủ phát triển
Khởi động máy chủ phát triển và chỉ định cổng (ví dụ: 8585):
bash
```
ng serve --port 8585
```
1
Điều này sẽ khởi động một máy chủ phát triển cục bộ và cung cấp cổng 8585.
Cấu hình proxy ngược cho Host của ServBay
Sử dụng tính năng 'Host' của ServBay để truy cập máy chủ phát triển thông qua proxy ngược. Trong cài đặt 'Host' của ServBay, thêm một proxy ngược mới:
- Tên: My first Angular dev site
- Domain: servbay-angular-test.dev
- Loại host: Proxy ngược
- IP: 127.0.0.1
- Cổng: 8585
Các bước cấu hình chi tiết tham khảo tại thêm trang web phát triển Nodejs.
Truy cập chế độ phát triển
Mở trình duyệt và truy cập https://servbay-angular-test.dev để xem dự án theo thời gian thực. Do ServBay hỗ trợ tên miền tùy chỉnh và chứng chỉ SSL miễn phí, bạn sẽ có độ bảo mật cao hơn.

Xây dựng phiên bản sản xuất

Xây dựng phiên bản sản xuất
Khi hoàn thành việc phát triển, sử dụng lệnh sau để xây dựng phiên bản sản xuất:
bash
```
ng build --prod
```
1
Sau khi hoàn thành xây dựng, các tệp tĩnh sẽ nằm trong thư mục dist/servbay-angular-app.
Thiết lập dịch vụ tệp tĩnh
Sử dụng tính năng 'Host' của ServBay để truy cập phiên bản sản xuất thông qua dịch vụ tệp tĩnh. Trong cài đặt 'Host' của ServBay, thêm một trang web tĩnh mới:
- Tên: My first Angular production site
- Domain: servbay-angular-test.prod
- Loại host: Tĩnh
- Thư mục gốc của trang web: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
Truy cập chế độ sản xuất
Mở trình duyệt và truy cập https://servbay-angular-test.prod để xem phiên bản sản xuất đã được xây dựng. Thông qua tên miền tùy chỉnh và chứng chỉ SSL miễn phí của ServBay, trang web của bạn sẽ có độ bảo mật và độ tin cậy cao hơn.

Thông qua các bước trên, bạn đã tạo và chạy thành công một dự án Angular và sử dụng các tính năng do ServBay cung cấp để quản lý và truy cập dự án của mình.