Chuyển đến nội dung chính

Bài đăng

Đang hiển thị bài đăng từ Tháng 9, 2023

Angular: Thao tác DOM trong Angular

Trong Angular, "document ready" thường không hoạt động chính xác trong Angular khi load một component là do: Angular sử dụng cơ chế tải ứng dụng bất đồng bộ: Angular tải ứng dụng bằng cách tải các module và component bất đồng bộ, điều này có nghĩa là nó không cần phải chờ cho đến khi toàn bộ tài liệu HTML của trang đã được tải xong trước khi hiển thị component. Do đó, sự kiện "document ready" có thể xảy ra trước khi Angular hoàn thành quá trình tải và khởi tạo component. Cơ chế kiểm soát của Angular: Angular quản lý cây DOM và hoạt động với DOM thông qua một cơ chế gọi là "View Encapsulation" để đảm bảo tính riêng tư của các component. Điều này có thể làm cho các thao tác trên DOM bằng jQuery hoặc sự kiện "document ready" không hiệu quả. Sự kết hợp của Angular và jQuery: Khi bạn kết hợp Angular với jQuery, có thể xảy ra xung đột giữa hai thư viện này. Angular có thể điều khiển quyền truy cập vào DOM và cấu trúc của ứng dụng, trong khi jQuery thực

Angular: Tạo nhiều project trong cùng 1 workspace

Giả sử bạn có 2 project Angular, muốn tạo cùng 1 folder Angular thì phải làm thế nào? Lúc này chúng ta sử dụng khái niệm workspace Workspace Workspace trong Angular là một thư mục gốc chứa tất cả các project liên quan đến ứng dụng của bạn. Nó bao gồm các tệp cấu hình và các thư mục chứa mã nguồn của các project. Bạn có thể sử dụng workspace để quản lý các project liên quan đến ứng dụng của mình và chia sẻ các thư viện giữa các project khác nhau. Cấu trúc 📁 my-workspace     └──… (workspace-wide config files)     └──📂 projects (generated applications and libraries)         ├──📂 my-first-app --(an explicitly generated application)             ├──📂 src --(source and support files for application)                 ├──*.*         ├──📂 my-lib --(an explicitly generated application)             ├──📂 src --(source and support files for application)                 ├──*.* Đầu tiên, chúng ta tạo một workspace trống: ng new <workspace-name>  --create-application=false