Angular - Architecture overview

Angular là một platform và framework để xây dựng các ứng dụng phía client bằng HTML và TypeScript. Angular được viết bởi TypeScript. Nó implement core và các chức năng tùy chọn thông qua các thư viện TypeScript mà bạn import vào app của bạn.

Các block cơ bản của ứng dụng Angular là các NgModules, nó cung cấp một  tập các context cho components. NgModules gom các đoạn code liên quan đến nhau vào các functional sets; một ứng dụng Angular được định nghĩa bởi một tập các NgModules. Một ứng dụng luôn luôn có ít nhất một root module để bootstrapping, và thường là có nhiều module tính năng hơn.

Các Components định nghĩa các views, đây là tập các màn hình mà Angular có thể lựa chọn và chỉnh sửa dựa theo logic và dữ liệu hiện tại của chương trình. Mỗi ứng dụng có ít nhất một root component.

Các Component sử dụng services, các services này cung cấp các chức năng đặc biệt và không liên quan đến các views. Các Services providers có thể được tiêm vào các components như các dependencies, tạo ra các code modular, có thể tái sử dụng và hiệu quả.

Cả components và services đều là các class, với các decorators để đánh dấu kiểu của chúng và cung cấp metadata cho Angular biết làm sao để sử dụng chúng.

Metadata cho một component class kết nối nó với một template, template này định nghĩa một view. Một template kết hợp mã HTML thông thường với các Angular directives và binding markup, cho phép Angular chỉnh sửa HTML trước khi render nó để hiển thị.

Metadata cho một service class cung cấp thông tin Angular cần để có thể cung cấp cho các components khi các components này cần thông qua Dependency Injection (DI).

Các components của một app thường định nghĩa nhiều views, được sắp xếp theo thứ bậc. Angular cung cấp Router service để giúp bạn định nghĩa các đường dẫn điều hướng giữa các views. Router cung cấp khả năng điều hướng trong trình duyệt một các hiệu quả.

Tóm tắt

1. Modules
2. Components
3. Service and dependency injection
4. What's next

Modules

Angular định nghĩa NgModule, NgModule của Angular có các tính chất cải thiện hơn so với JavaScript (ES2015) module. Một NgModule khai báo một tập các context cho một tập các components mà được sử dụng cho một application domain, một quy trình hay một tập các chức năng liên quan chặt chẽ với nhau. Một NgModule có thể kết hợp các components của nó với các đoạn code liên quan, như services, để tạo thành các đơn vị chức năng (functional units).

Mỗi Angular app có một root module, theo như conventionally named thì nó là AppModule, cung cấp cơ chế bootstrap cho việc khởi chạy ứng dụng. Một app thường chứa nhiều functional modules.

Giống như JavaScript modules, các NgModules có thể import chức năng từ các NgModules khác, và cho phép các chức năng của chúng được exported và sử dụng bởi các NgModules khác. Ví dụ, để sử dụng router service trong ứng dụng của bạn, bạn import Router NgModule.

Tổ chức code của bạn thành các functional modules riêng biệt giúp cho bạn quản lý việc phát triển ứng dụng phức tạp, và trong designing thì nó giúp cho việc reusability. Ngoài ra, kỹ thuật này cho phép bạn tận dụng lợi ích của lazy-loading, nghĩa là chỉ load các modules khi cần thiết, để có thể tối thiểu lượng code cần thiết để chạy khi khởi chạy ứng dụng.

Components

Mỗi ứng dụng Angular có ít nhất một component, root component kết nối một hệ thống component với page DOM. Mỗi component định nghĩa một class mà trong đó chứa application data và logic, và được kết hợp với một HTML template dùng để định nghĩa một view cho việc hiển thị trong môi trường mục tiêu (ví dụ như trình duyệt).

Decorator @Component cho biết class ngay dưới nó là một component và dụng cấp template và các component-specific metadata liên quan.

Các Decorators là các functions dùng để modify các JavaScript classes. Angular định nghĩa một số các decorators dùng để gán các metadata cho các classes, như vậy nó có thể biết được những class đó là gì và chúng nên hoạt động như thế nào.

Learn more about decorators on the web.

Templates, directives, and data binding

Một template kết hợp giữa HTML với Angular để có thể thay đổi các HTML elements trước khi chúng được hiển thị. Các Template directives cung cấp program logic, và binding markup kết nối dữ liệu của ứng dụng và document object model (DOM).

Event binding cho phép ứng dụng phản hồi với user input trong môi trường mục tiêu bằng việc cập nhật dữ liệu của ứng dụng.

Property binding cho phép interpolate các giá trị mà được tính toán từ dữ liệu của ứng dụng vào HTML.

Trước khi một view được hiển thị, Angular đánh giá các directives và giải quyết các binding syntax trong template để thay đổi HTML elements và DOM, dựa trên dữ liệu chương trình và logic. Angular hỗ trợ two-way data binding, nghĩa là thay đổi trong DOM, như là lựa chọn của người dùng, cũng được reflected ngược lại vào program data.

Các templates của bạn cũng sử dụng pipes để cải thiện trải nghiệm người dùng (user experience) bằng việc chuyển đổi giá trị hiển thị. Sử dụng pipes để hiển thị, ví dụ, ngày và giá trị tiền tệ một cách phù hợp với địa điểm của người dùng. Angular cung cấp các pipes được định nghĩa trước cho các chuyển đổi thường gặp, bạn cũng có thể định nghĩa pipe của riêng bạn.

For a more detailed discussion of these concepts, see Introduction to components.

Services and dependency injection

Đối với dữ liệu và logic không được kết hợp với một view cụ thể, và bạn muốn chia sẻ chúng với nhiều components, bạn tạo một service class. Việc định nghĩa một service class được thể hiện ngay sau @Injectable decorator. Decorator này cung cấp các metadata cho phép service của bạn có thể được inject vào các client components như một dependency.

Dependency injection (hay DI) cho phép bạn giữ các component classes ngắn gọn và hiệu quả. Chúng không lấy dữ liệu từ server, validate user input hay ghi log trực tiếp vào console; chúng ủy thác những công việc này cho các services.

For a more detailed discussion, see Introduction to services and DI.

Routing

Angular Router NgModule cung cấp một service mà cho phép bạn định nghĩa một đường dẫn điều hướng với mỗi trạng thái ứng dụng khác nhau và giúp hình dung được tổ chức các view trong ứng dụng của bạn. Nó được mô hình hóa dựa trên các browser navigation conventions quen thuộc:

• Nhập một URL trong address bar và trình duyệt điều hướng đến trang tương ứng.
• Click vào links trong trang và trình duyệt điều hướng đến một trang mới.
• Click vào nút back hoặc forward trong browser và trình duyệt điều hướng tương ứng đến trang trước và trang sau thông qua lịch sử trình duyệt.
• Router map các đường dẫn giống URL đến các views thay vì các pages. Khi một user thực hiện hành động, như click vào link, điều này sẽ load một trang mới trong browser, router chặn hành vi đó của browser và hiển thị hoặc ẩn view hierarchies.

Nếu router xác định trạng thái hiện tại của ứng dụng yêu cầu chức năng cụ thể, và module định nghĩa chức năng đó chưa được loaded, thì router có thể lazy-load module đó on demand.

Router diễn giải một link URL dựa trên các quy tắc định hướng của ứng dụng và trạng thái dữ liệu. Bạn có thể điều hướng đến các views mới khi user click một button, lựa chọn trên drop box hay phản hồi với các hành vi khác từ bất kỳ nguồn nào. Router ghi lại các hoạt động trong lịch sử trình duyệt, vì vậy nút back và forward cũng hoạt động tốt.

Để định nghĩa các quy tắc điều hướng, bạn kết hợp các đường dẫn điều hướng với components của bạn. Một path sử dụng một URL-like syntax, URL-like syntax này kết hợp với dữ liệu chương trình. Bạn có thể áp dụng program logic để chọn những views nào để show hoặc ẩn đi, để phản hồi với user input và access rules của bạn.

For a more detailed discussion, see Routing and navigation.

What's next

Bạn đã học các kiến thức cơ bản về main building blocks của một Angular application. Diagram sau cho thấy cách mà các basic pieces liên quan đến nhau.

• Một component và template cùng nhau tạo thành một Angular view.
• Một decorator trên một component class thêm các metadata, bao gồm một con trỏ đến template được kết hợp.
• Directives và binding markup trong một template của component thay đổi các views dựa trên program data và logic.
• The dependency injector provides services to a component, such as the router service that lets you define navigation among views.

Note that the code referenced on these pages is available as a live example / download example.