Không gian làm việc và Cấu trúc file dự án

Bạn phát triển các ứng dụng trong bối cảnh của một không gian làm việc Angular. Không gian làm việc chứa các file cho một hoặc nhiều dự án. Dự án là một tập hợp các tệp bao gồm một ứng dụng độc lập hoặc một thư viện có thể chia sẻ.

Lệnh Angular CLI ng new tạo một không gian làm việc.

ng new <my-project>

Khi bạn chạy lệnh này, CLI sẽ cài đặt các gói Angular npm cần thiết và các gói phụ thuộc khác trong một không gian làm việc mới, với một ứng dụng gốc có tên là my-project. Thư mục gốc trong không gian làm việc chứa nhiều file hỗ trợ và cấu hình khác nhau và file mô tả dự án README được tạo mà bạn có thể tùy chỉnh.

Theo mặc định, lệnh ng new tạo một khung ứng dụng ban đầu ở cấp cơ sở của không gian làm việc, cùng với các bài kiểm tra đầu cuối của nó. Khung ứng dụng là một ứng dụng Welcome đơn giản, sẵn sàng chạy và dễ sửa đổi. Ứng dụng gốc có cùng tên với không gian làm việc và các file nguồn nằm trong thư mục con src/ của không gian làm việc.

Hành vi mặc định này phù hợp với kiểu phát triển "multi-repo" điển hình trong đó mỗi ứng dụng nằm trong không gian làm việc riêng của nó. Người mới bắt đầu và người dùng trung cấp được khuyến khích sử dụng lệnh ng new để tạo không gian làm việc riêng cho từng ứng dụng.

Angular cũng hỗ trợ không gian làm việc với nhiều dự án. Loại môi trường phát triển này phù hợp với người dùng nâng cao đang phát triển các thư viện có thể chia sẻ và cho các doanh nghiệp sử dụng phong cách phát triển "monorepo", với một kho lưu trữ duy nhất và cấu hình toàn cầu cho tất cả các dự án Angular.

Để thiết lập không gian làm việc monorepo, bạn nên bỏ qua bước tạo ứng dụng gốc. Xem Thiết lập cho không gian làm việc nhiều dự án bên dưới.

File cấu hình không gian làm việc

Tất cả các dự án trong một không gian làm việc chia sẻ một bối cảnh cấu hình CLI. Cấp cao nhất của không gian làm việc chứa các tệp cấu hình trên toàn không gian làm việc, tệp cấu hình cho ứng dụng gốc và các thư mục con cho mã nguồn ứng dụng gốc và các file kiểm thử.

FILE CẤU HÌNH MỤC ĐÍCH
.editorconfig Cấu hình cho trình soạn thảo mã. Xem EditorConfig.
.gitignore Chỉ định các file Git sẽ bỏ qua.
README.md Tài liệu giới thiệu cho ứng dụng gốc.
angular.json Cấu hình CLI mặc định cho tất cả các dự án trong không gian làm việc, bao gồm các tùy chọn cấu hình cho các công cụ build, serve và testing mà CLI sử dụng, chẳng hạn như TSLint, KarmaProtractor. Xem Angular Workspace Configuration để biết định dạng và nội dung cụ thể của tệp này.
package.json Cấu hình các gói phụ thuộc npm package có sẵn cho tất cả các dự án trong không gian làm việc. Xem npm documentation để biết định dạng và nội dung cụ thể của file này.
package-lock.json Cung cấp thông tin phiên bản cho tất cả các gói node_modules được cài đặt bởi npm client. Xem npm documentation để biết chi tiết. Nếu bạn sử dụng yarn client, tệp yarn.lock sẽ thay thế.
src/ Thư mục gốc của ứng dụng.
node_modules/ Cung cấp các gói npm packages cho toàn bộ không gian làm việc.
tsconfig.json Dựa trên cấu hình TypeScript cho các dự án trong không gian làm việc. Tất cả các file cấu hình khác kế thừa từ tệp cơ sở này. Để biết thêm thông tin, hãy xem Kế thừa cấu hình với extends của tài liệu TypeScript.
tslint.json Cấu hình TSLint mặc định cho các dự án trong không gian làm việc.

Cấu trúc file dự án

Theo mặc định, lệnh CLI ng new my-app tạo một thư mục không gian làm việc có tên my-app và tạo một khung ứng dụng mới trong một thư mục src/ ở cấp cao nhất của không gian làm việc. Ứng dụng mới được tạo chứa các file nguồn cho module gốc, với component gốc và template.

Khi cấu trúc file không gian làm việc đã có, bạn có thể sử dụng lệnh ng generate trên dòng lệnh để thêm chức năng và dữ liệu vào ứng dụng. Ứng dụng gốc ban đầu này là ứng dụng mặc định cho các lệnh CLI (trừ khi bạn thay đổi mặc định sau khi tạo ứng dụng bổ sung).

Bên cạnh việc sử dụng CLI trên dòng lệnh, bạn cũng có thể thao tác trực tiếp với các file trong thư mục source và file cấu hình của ứng dụng.

Đối với không gian làm việc đơn ứng dụng, thư mục con src/ của không gian làm việc chứa các file nguồn (logic ứng dụng, dữ liệu và nội dung) cho ứng dụng gốc. Đối với không gian làm việc nhiều dự án, các dự án bổ sung trong thư mục projects/ chứa một thư mục con project-name/src/ có cùng cấu trúc.

File mã nguồn ứng dụng

Các file ở cấp cao nhất của thư mục src/ hỗ trợ việc kiểm thử và chạy ứng dụng của bạn. Các thư mục con chứa mã nguồn ứng dụng và cấu hình dành riêng cho ứng dụng.

FOLDER/FILE MỤC ĐÍCH
app/ Chứa các file component, nó định nghĩa dữ liệu và logic ứng dụng của bạn. Xem chi tiết ở bên dưới.
assets/ Chứa hình ảnh và các file nội dung khác sẽ được sao chép nguyên trạng khi bạn xây dựng ứng dụng của mình.
environments/ Chứa các tùy chọn cấu hình xây dựng cho các môi trường mục tiêu cụ thể. Theo mặc định, có một môi trường phát triển tiêu chuẩn không được đặt tên và một môi trường sản xuất (production). Bạn có thể định nghĩa các cấu hình môi trường mục tiêu bổ sung.
favicon.ico Một biểu tượng để sử dụng cho ứng dụng này trên thanh dấu trang.
index.html Trang HTML chính được phục vụ khi ai đó truy cập trang web của bạn. CLI tự động thêm tất cả các file JavaScript và CSS khi xây dựng ứng dụng của bạn, vì vậy bạn thường không cần thêm bất kỳ thẻ <script> hoặc <link> nào ở đây theo cách thủ công.
main.ts Điểm vào chính cho ứng dụng của bạn. Biên dịch ứng dụng bằng JIT compiler và khởi động module gốc của ứng dụng (AppModule) để chạy trong trình duyệt. Bạn cũng có thể sử dụng AOT compiler mà không cần thay đổi bất kỳ mã nào bằng cách thêm cờ --aot vào các lênh CLI buildserve.
polyfills.ts Cung cấp các tập lệnh polyfill để hỗ trợ trình duyệt.
styles.sass Liệt kê các file CSS cung cấp kiểu cho một dự án. Phần mở rộng phản ánh bộ tiền xử lý kiểu mà bạn đã cấu hình cho dự án.
test.ts Điểm đầu vào chính cho các bài kiểm tra unit test của bạn, với một số cấu hình dành riêng cho Angular. Bạn thường không cần chỉnh sửa file này.
Các dự án Angular mới sử dụng chế độ strict mode theo mặc định. Nếu không mong muốn điều này, bạn có thể chọn không sử dụng strict mode khi tạo dự án. Để biết thêm thông tin, hãy xem strict mode.

Bên trong thư mục src/, thư mục app/ chứa dữ liệu và logic của dự án của bạn. Các component, template và style của Angular có ở đây.

FILE MỤC ĐÍCH
app/app.component.ts Định nghĩa logic cho component gốc của ứng dụng, được đặt tên là AppComponent. View được liên kết với componentgốc này sẽ trở thành view gốc của view phân cấp khi bạn thêm các component và service vào ứng dụng của mình.
app/app.component.html Định nghĩa template HTML được liên kết với component gốc AppComponent.
app/app.component.css Định nghĩa style CSS cho component gốc AppComponent.
app/app.component.spec.ts Định nghĩa unit test cho component gốc AppComponent.
app/app.module.ts Định nghĩa module gốc có tên là AppModule, cho Angular biết cách lắp ráp ứng dụng. Ban đầu chỉ khai báo AppComponent. Khi bạn thêm nhiều component hơn vào ứng dụng, chúng phải được khai báo ở đây.

Tệp cấu hình ứng dụng

Các tệp cấu hình ứng dụng cụ thể cho ứng dụng gốc nằm ở cấp cơ sở không gian làm việc. Đối với không gian làm việc nhiều dự án, các tệp cấu hình dành riêng cho dự án nằm trong thư mục gốc của dự án projects/project-name/.

Dự án cụ thể TypeScriptcác tệp cấu hình kế thừa từ toàn bộ không gian làm việc tsconfig.jsonvà dành riêng cho dự ánTSLintcác tệp cấu hình kế thừa từ toàn bộ không gian làm việc tslint.json.

APPLICATION-SPECIFIC CONFIG FILES PURPOSE
.browserslistrc Configures sharing of target browsers and Node.js versions among various front-end tools. See Browserslist on GitHub for more information.
karma.conf.js Application-specific Karma configuration.
tsconfig.app.json Application-specific TypeScript configuration, including TypeScript and Angular template compiler options. See TypeScript Configuration and Angular Compiler Options.
tsconfig.spec.json TypeScript configuration for the application tests. See TypeScript Configuration.
tslint.json Application-specific TSLint configuration.

Nhiều dự án

Không gian làm việc nhiều dự án phù hợp cho một doanh nghiệp sử dụng một kho lưu trữ duy nhất và cấu hình toàn cầu cho tất cả các dự án Angular (mô hình "monorepo"). Không gian làm việc nhiều dự án cũng hỗ trợ phát triển thư viện.

Thiết lập không gian làm việc nhiều dự án

Nếu bạn dự định có nhiều dự án trong một không gian làm việc, bạn có thể bỏ qua quá trình tạo ứng dụng ban đầu khi tạo không gian làm việc và đặt tên duy nhất cho không gian làm việc. Lệnh sau tạo một không gian làm việc với tất cả các tệp cấu hình toàn không gian làm việc, nhưng không có ứng dụng gốc.

ng new my-workspace --create-application false

Sau đó, bạn có thể tạo các ứng dụng và thư viện có tên không trùng lặp trong không gian làm việc.

cd my-workspace
ng generate application my-first-app

Nhiều cấu trúc file dự án

Ứng dụng được tạo rõ ràng đầu tiên sẽ nằm trong thư mục projects/ cùng với tất cả các dự án khác trong không gian làm việc. Các thư viện mới được tạo cũng được thêm vào thư mục projects/. Khi bạn tạo dự án theo cách này, cấu trúc file của không gian làm việc hoàn toàn phù hợp với cấu trúc của file cấu hình không gian làm việc  - angular.json.

my-workspace/
  ...             (workspace-wide config files)
  projects/       (generated applications and libraries)
    my-first-app/ --(an explicitly generated application)
      ...         --(application-specific config)
      src/        --(source and support files for application)
    my-lib/       --(a generated library)
      ...         --(library-specific config)
      src/        --source and support files for library)

File dự án thư viện

Khi bạn tạo một thư viện bằng CLI (với một lệnh chẳng hạn ng generate library my-lib), các file được tạo sẽ nằm trong thư mục projects/ của không gian làm việc. Để biết thêm thông tin về cách tạo thư viện của riêng bạn, hãy xem Tạo thư viện.

Các thư viện không giống như các ứng dụng có file cấu hình package.json riêng của chúng.

Trong thư mục projects/, thư mục my-lib chứa mã thư viện của bạn.

FOLDER/FILE MỤC ĐÍCH
src/lib Chứa logic và dữ liệu của dự án thư viện của bạn. Giống như một dự án ứng dụng, một dự án thư viện có thể chứa các component, service, module, directive và pipe.
src/test.ts Điểm đầu vào chính cho các bài kiểm tra unit test của bạn, với một số cấu hình dành riêng cho thư viện. Bạn thường không cần chỉnh sửa file này.
src/public-api.ts Chỉ định tất cả các file được export từ thư viện của bạn.
karma.conf.js File cấu hình cho thư viện Karma.
ng-package.json File cấu hình được sử dụng bởi ng-packagr để build thư viện của bạn.
package.json Cấu hình các gói npm package phụ thuộc được yêu cầu cho thư viện này.
tsconfig.lib.json File cấu hình thư viện TypeScript, bao gồm các tùy chọn trình biên dịch template TypeScript và Angular. Xem thêm TypeScript Configuration.
tsconfig.lib.prod.json File cấu hình thư viện TypeScript được sử dụng khi xây dựng thư viện cho môi trường sản xuất.
tsconfig.spec.json File cấu hình TypeScript cho các bài kiểm thử thư viện. Xem thêm TypeScript Configuration.
tslint.json File cấu hình TSLint.
Angular
Bài Viết Liên Quan:
Trình khởi động bootstrap trong Angular
Trung Nguyen 26/07/2021
Trình khởi động bootstrap trong Angular

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về trình khởi động bootstrap và cách Angular hoạt động bên trong và khởi động ứng dụng của chúng ta.

Cách tạo một dự án mới trong Angular
Trung Nguyen 25/07/2021
Cách tạo một dự án mới trong Angular

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng Angular CLI để tạo một dự án mới trong Angular.

Service và Dependency Injection trong Angular
Trung Nguyen 21/07/2021
Service và Dependency Injection trong Angular

Trong bài viết này, bạn sẽ tìm hiểu vì sao Angular lại tách riêng component và service, cách sử dụng dependency injection để khởi tạo instance của service.

Component và Template trong Angular
Trung Nguyen 20/07/2021
Component và Template trong Angular

Trong hướng dẫn này, bạn sẽ tìm hiểu mọi thứ về component trong Angular như: metadata, template và view, data binding, directive, ...