Ở bài viết này , mình sẽ cùng các bạn đi tìm hiểu về cấu trúc các file cũng như các thư mục trong project Angular để mọi người có thể dễ dàng hơn trong việc sử dụng cũng như làm việc với nó. Nếu các bạn chưa cài đặt thì hãy theo dõi bài viết trước của mình nhé !
Đầu tiên các bạn hãy cùng mình quan sát cấu trúc project nhé :
Các bạn có thể thấy 1 project Angular ban đầu có khá nhiều tập tin , và mình có thể giải thích nó tóm gọn như sau :
- e2e : Thư mục này dùng để chứa các tập tin dành cho mục đích testing.
- node_modules : Chứa các module cần thiết cho ứng dụng Angular của chúng ta.
- src: Đây là thư mục sẽ chứa toàn bộ source code của ứng dụng Angular các bạn.
- .editorconfig: Chứa các cấu hình liên quan đến phần Editor để chỉnh sửa source code như: indent_size, max_line_length,…
- .gitignore: Đây là tập tin metadata của Git, chứa thông tin những tập tin hoặc thư mục sẽ bị ignore không được commit lên Git Repository.
- angular.json: Đây là tập tin chứa cấu hình cho Angular CLI, giúp chúng ta có thể build ứng dụng Angular.
- karma.conf.js: Tập tin cấu hình cho Karma, liên quan nhiều đến phần testing.
- package-lock.json: Dùng để lock version cho các Node.js module dependencies.
- package.json: Tập tin cấu hình cho Node.js module dependencies.
- README.md: Tập tin này thường được sử dụng để cho các hệ thống Git hiển thị thông tin về Git Repository của chúng ta.
- tslint.json: Tập tin cấu hình để kiểm tra lỗi cho các tập tin .ts (TypeScript) trong Angular project.
- tsconfig.json: Tập tin định nghĩa việc compile cho TypeScript.
Tiếp theo các bạn hãy cùng mở thư mục src ra nhé! Đây là nơi chúng ta sẽ code và xây dựng ứng dụng trong project Angular của mình :
Mình sẽ giải thích thêm cấu trúc của thư mục này như sau :
- app : Đây là thư mục sẽ chứa toàn bộ code của ứng dụng Angular.
- assets: Thư mục này sẽ chứa các file ảnh, CSS, custom JavaScript của ứng dụng Angular.
- environments: Chúng ta có thể viết ứng dụng chạy trên nhiều môi trường khác nhau, đây chính là thư mục giúp chúng ta làm định nghĩa các tập tin cấu hình cho những môi trường khác nhau đó.
- favicon.ico: Icon của ứng dụng.
- index.html: Trang chủ của ứng dụng.
- main.ts: Chứa code bootstrapping cho ứng dụng Angular.
- polyfill.ts: Dùng để định nghĩa các chuẩn để ứng dụng của chúng ta có thể chạy được trên mọi trình duyệt.
- style.css: Định nghĩa style CSS cho ứng dụng Angular
- test.ts: Code để chạy test.
Ở trên mình đã giải thích ý nhĩa các mục trong 1 project mới. Mong các bạn sẽ nắm rõ được cấu trúc của nó. Ở bài sau mình sẽ cùng các bạn đi sâu vô bên trong 1 ứng dụng Angular . Mong các bạn hãy theo dõi .!