Please enable JavaScript.
Coggle requires JavaScript to display documents.
Angular - Coggle Diagram
Angular
-
Observable
-
Có thể là 1 luồng dữ liệu, 1 luồng sự kiện
-
Observer là một tập hợp các callbacks tương ứng cho việc lắng nghe các giá trị (next, error, hay complete) được gửi đến bởi Observable.
Subscription là kết quả có được sau khi thực hiện một Observable, nó thường dùng cho việc hủy việc tiếp tục xử lý.
-
Hiểu đơn giản như 1 producer cung cấp dữ liệu, muốn lấy dữ liệu thì cần subcrite ob, k subcripe thì giống như lazy loading
Route Guard
CanActivate
Giả sử chúng ta có chức năng edit bài viết, yêu cầu đưa ra là chỉ có ai là author mới có thể edit được bài của người đó. App demo sẽ có config routing như sau
-
CanDeactivate
Giả sử chúng ta có chức năng edit bài viết, khách hàng yêu cầu thêm một điều là khi người ta đã thay đổi một cái gì đó mà chưa save thông tin lại, và nếu người dùng redirect sang một trang khác, thì sẽ phải hỏi người dùng xem có thật sự muốn rời khỏi trang hay không
CanLoad
Đối với các lazy load route, chúng ta có thể kiểm tra trước ở frontend, nếu thỏa mãn điều kiện mới cho phép tải về.
Resolve
Resolver chỉ là một service, có implement interface Resolve ở trên. Các Resolvers sẽ được call hàm resolve và Router sẽ đợi đến khi nào data được resolved xong xuôi thì mới activate components
-
Pipe
đổi dữ liệu đầu ra, hiển thị lên trên template đúng với ý tưởng thiết kế lập trình, thân thiện với người sử dụng
List pipe mà angular cung cấp dùng mặc định: Date, uppercase, json...
- Những nội dung cần làm để tạo một custom pipe:
- Viết một class và decorate nó với decorator Pipe ( báo cho angular biết đây là pipe) và decorator này cần tối thiểu một object có property name, chính là tên của pipe để có thể gọi ra trong template.
- Tiếp theo, chúng ta cần implement một interface là PipeTransform, và implement hàm transform của interface đó. Hàm transform sẽ làm biến đổi dữ liệu
- Sau khi hoàn thiện pipe trên, ta cần import custom pipe trên vào trong NgModule mà template cần sử dụng custom pipe
Dependency Injection
Sử dụng cơ chế Dependency Injection giúp chúng ta có thể nhúng service vào các component hoặc các service với nhau.
-
-
-
Directives
Chúng ta sử dụng Directive để thao tác, cập nhật, thêm, xóa các thành phần giao diện trên web. Hay nói cách khác chúng ta thao tác với các element của DOM
Phân loại directives
Components directives
Không có nghi ngờ gì khi gọi component là directive cũng được, vì rõ ràng là component cho phép định nghĩa selector và gọi ra như một thẻ html tag (<component-name></component-name>)
Structural directives
Là directive cấu trúc, dùng để vẽ html, hiển thị data lên giao diện html, và thay đổi cấu trúc DOM bằng việc thêm bớt các phần tử trong DOM
-
Attribute directives
Thay đổi giao diện, tương tác của các đối tượng hoặc thay đổi directive khác hoặc thêm các thuộc tính động cho element html
ngStyle, class binding, style binding
-
-
-
-