Sử dụng Sơ đồ góc CLI
Nếu bạn giống tôi, khi bạn bắt đầu làm việc với Angular (đặc biệt là khi nó mới đến), bạn nhanh chóng trở nên kiệt sức bởi số lượng file và cấu hình bạn phải đặt. Tạo một thành phần mới đòi hỏi phải tạo thủ công ba file riêng biệt và đảm bảo chúng được đặt đúng cách bên trong module . Khi dự án của bạn bắt đầu phát triển, nhiệm vụ này bắt đầu trở thành một việc vặt.
Nói đến là Sơ đồ góc .
Sơ đồ góc cạnh đã được group Angular giới thiệu vào năm 2018 và nó cung cấp một API để tạo và quản lý các file trong dự án Angular của bạn, cũng như cung cấp mọi phụ thuộc . Hãy coi nó giống như một công cụ tạo khuôn mẫu.
Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể tận dụng các sơ đồ có sẵn để hợp lý hóa việc phát triển Angular của bạn.
Cài đặt
Điều đầu tiên ta cần làm là cài đặt Angular CLI .
$ npm install -g @angular/cli@latest
Sau khi hoàn tất, ta có thể tạo một dự án mới bằng cách chạy
$ ng new my-app
Đến đây bạn có một dự án và muốn bắt đầu điền nó với những thứ: thành phần, dịch vụ, chỉ thị, bảo vệ, v.v. Mỗi thực thể này có thể được tạo bằng cách sử dụng một giản đồ. Chuyển tên của giản đồ này làm đối số cho:
$ ng generate
Sơ đồ thành phần
Để tạo một thành phần có tên DashboardComponent , ta sử dụng giản đồ component :
$ ng generate component dashboard
CREATE src/app/dashboard/dashboard.component.scss (0 bytes)
CREATE src/app/dashboard/dashboard.component.html (24 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
CREATE src/app/dashboard/dashboard.component.ts (282 bytes)
UPDATE src/app/app.module.ts (487 bytes)
Bạn sẽ nhận thấy rằng CLI đã tạo bốn file riêng biệt (biểu định kiểu, mẫu HTML, thông số thử nghiệm và tài liệu TypeScript) và cũng cập nhật module . Ta có thể xác minh nó đã được thêm vào bằng cách kiểm tra bên trong app.module.ts :
import { DashboardComponent } from './dashboard/dashboard.component';
...
@NgModule({
declarations: [
DashboardComponent
],
...
CLI cũng sẽ xây dựng thành phần sao cho các mô hình sẽ có tên PascalCase và các folder sẽ là kebob-case.
Vì vậy, các đầu vào sau:
$ ng generate dashboard-settings
và
$ ng generate DashboardSettings
sẽ tạo ra kết quả tương tự.
Sơ đồ dịch vụ
Ta có thể tạo một dịch vụ có tên là SocketService bằng cách sử dụng schemas service :
$ ng generate service socket
CREATE src/app/services/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket.service.ts (135 bytes)
Theo mặc định, điều này sẽ không tạo một folder mới cho dịch vụ, mà sẽ tạo dịch vụ và file thử nghiệm trong đường dẫn hiện tại. Bạn có thể thay đổi điều này bằng cách đặt --flat false :
$ ng generate service socket --flat false
CREATE src/app/services/socket/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket/socket.service.ts (135 bytes)
Cũng lưu ý điều này không tự động thêm dịch vụ vào NgModule của bạn, vì vậy bạn cần phải tự thêm nó.
Sơ đồ bảo vệ
CanActivate đồ bảo vệ sẽ yêu cầu loại giao diện bạn muốn triển khai: CanActivate , CanActivateChild hoặc CanLoad . Chuyển điều này trực tiếp bằng cách sử dụng đối số --implements hoặc nhập nó vào tương tác.
Để tạo một bảo vệ có tên AuthGuard triển khai CanActivate , hãy nhập:
$ ng generate guard auth --implements CanActivate
CREATE src/app/auth.guard.spec.ts (346 bytes)
CREATE src/app/auth.guard.ts (456 bytes)
Mở file đã tạo sẽ cho thấy nó thực hiện giao diện CanActivate .
Sơ đồ đường ống
Sơ đồ ống sẽ tạo một Pipe trong folder hiện tại và thêm nó vào module chính. Bạn cũng có thể chỉ định các module bằng cách sử dụng --module tranh cãi. Bạn cũng có tùy chọn chỉ định rằng đường ống sẽ được xuất.
Để tạo một đường dẫn có tên PhonePipe sẽ được xuất, hãy gọi như sau:
$ ng generate pipe phone --export
CREATE src/app/phone.pipe.spec.ts (183 bytes)
CREATE src/app/phone.pipe.ts (203 bytes)
UPDATE src/app/app.module.ts (696 bytes)
Mở app.module.ts cho thấy rằng PhonePipe đã được thêm vào module .
import { PhonePipe } from './phone.pipe';
...
@NgModule({
declarations: [
PhonePipe
],
...
exports: [PhonePipe]
...
Sơ đồ chỉ thị
Sơ đồ chỉ thị sẽ tạo ra một chỉ thị Angular. Theo mặc định, chỉ thị sẽ được thêm vào module .
Để tạo một chỉ thị mới có tên là SamplingDirective, hãy gọi:
$ ng generate pipe sampling
CREATE src/app/sampling.directive.spec.ts (236 bytes)
CREATE src/app/sampling.directive.ts (147 bytes)
UPDATE src/app/app.module.ts (781 bytes)
Sơ đồ sẽ sử dụng tiền tố giống như dự án Angular để đặt tên cho chỉ thị. Ví dụ: nếu dự án của bạn có tiền tố mặc định được đặt thành “ứng dụng”, chỉ thị này sẽ được đặt tên là [appSampling] . Bạn có thể đặt điều này theo cách thủ công bằng cách chuyển đối số --prefix vào CLI.
Tiến về phía trước
Đây chỉ là một vài sơ đồ mà Angular CLI cung cấp. Bạn có thể liệt kê tất cả các sơ đồ có sẵn bằng lệnh vào
$ ng generate --help
Hơn nữa, bạn cũng có thể nhận được thông tin chi tiết cho từng giản đồ bằng cách chuyển vào --help sau khi ng generate [schematic]
Sơ đồ góc là công cụ tuyệt vời giúp hợp lý hóa việc phát triển Angular của bạn.
Chúc bạn viết mã vui vẻ!
Tài nguyên
Các tin liên quan
