Metadata Angular là gì
[Angular 7 Phần 2] Phân tích một ứng dụng Angularpinonote 3 năm trước X Bảo mật & CookieThis site uses cookies. By continuing, you agree to their use. Learn more, including how to control cookies. Show Đã hiểu! Quảng cáo Trong Angular 7, một ứng dụng là một tập hợp một hay nhiều component và những service cung cấp chức năng cho những component đó. Vậy,component của Angular 7 là gì ?
Component là các khối xây dựng lên ứng dụng Angular. Nó biểu diễn một phần có thể tái sử dụng của UI, thường là một một phần tử html. Mỗi một component bao gồm một mẫu HTML render ra một frame giao diện người dùng và một Class để code những gì liên kết với view. Class chứa những thuộc tính, những phần tử dữ liệu có sẵn để phục vụ cho các view và các phương thức thực hiện những hành động cho view, chẳng hạn như sự phản hồi của một nút bấm. Một component cũng có metadata cung cấp thêm những thông tin của component cho Angular. Metadata này để xác định Class là một Angular component. Vậy tóm lại, một component sẽ hình thành từ một view xác định từ một mẫu HTML, Code xử lý sẽ được định nghĩa với một Class và thông tin bổ xung cho Class thì được xác định bằngmetadata. Metadata, cung cấp thông tin bổ sung choComponent và giúp định nghĩa Class này như một Angular Component. Metadata được định nghĩa bởi một Decorator. Trong đó decorator có thể hiểu đơn giản là phương thức thêm Metadata vào Class.
Hầu hết các ứng dụng Angular có một file index.html có chứa trang chính của ứng dụng. File index.html thường chỉ là một trang. Do đó một ứng dụng Angular thường được gọi là một Single Page Application (SPA). Nhưng đừng lo lắng, mặc dù tên gọi là Ứng dụng một trang nhưng chúng ta sẽ có rất nhiều trang giống như trong bản demo. Những gì chúng ta làm là thêm những phần của HTML vào trong trang index.html. Đoạn code phía bên phải là app.comonent và selector: root-app sẽ là một chỉ thị trong HTML. Đoạn HTML bên trong template là những gì chúng ta muốn hiển thị. Phía bên trái là file index.html, nơi mà chúng ta muốn hiển thị app.component, Để chèn những HTML của app component chúng ta chỉ đơn giản thêm selector Dưới đây là list đầy đủ các properties của object trên.
2. ngModuleTrong quá trình phát triển ứng dụng, bạn cũng sẽ thường xuyên gặp các thư viện của Angular là các NgModule chẳng hạn:FormsModule,ReactiveFormsModule,HttpModule,RouterModule, etc. Mỗi ứng dụng Angular đều có ít nhất một Module đó là root Module, là nơi để khởi chạy ứng dụng. Module có thể chứa các components, pipes, directives, services, Thông thường nó được đặt tên làAppModule, nhưng bạn hoàn toàn có thể đặt bất kỳ tên nào nếu muốn. Bạn có thể tìm thấy Module đó trong filesrc/app/app.module.ts. Hình 8:AppModule root Module Trong class này chúng ta cũng nhìn thấy phần quen thuộc như trong định nghĩa của một Component: các phầnimport,export. Ở đây, mình muốn các bạn chú ý đến@NgModule, nó là một decorator tương tự như@Component, nhưng object truyền vào thì có các properties khác với object của@Component. Như hình 8, các propertiesimports,declarations,providers,bootstrapcó ý nghĩa gì?
Angular chia thành nhiều Module tương ứng với các tính năng chẳng hạn. Khi một Module cần sử dụng đến tính năng đó, chúng ta cần nói cho Angular biết và import vào khi tạo Module. Chẳng hạn, ứng dụng mình đã tạo ở trên, mình làm việc với platform là trình duyệt browser, nên mình cần import BrowserModule, còn FormsModule để làm việc với form, HttpModule để làm việc với Http như call AJAX, Lưu ý:
Dùng để khai báo các thành phần:components, directives and pipes mà nó thuộc về Module đó. Tất cả các loại class khác không thuộc ba nhóm trên đều không được cho vào array này.
Khi làm việc với Dependency injection, chúng ta cần khai báo các Services cho Injector thực hiện việc nạp các dependencies.
Khi định nghĩa root Module, chúng ta cần nói cho Angular biết chương trình cần bắt đầu ở đâu. Trong hình 8, chúng ta muốn Angular khởi chạyAppComponent. Ngoài ra còn cóexportsarraylà list các component mà Module này trả về cho Module khác. Các bạn có thể xem thêm vềkiến trúc của Angular tại đây. Chúng ta đã có Component, có Module, vậy khởi chạy chúng như thế nào? Các bạn có thể tìm thấy câu trả lời trong filesrc/main.ts. Ở đây, chúng ta đã sử dụng platformBrowser, sau đó bootstrapModule là root Module AppModule. Nhưng làm sao để module loader tìm được component để khởi động ứng dụng? Chúng ta sẽ cần định nghĩa một root module, cái mà sẽ khởi động đầu tiên để bắt đầu ứng dụng. Bạn có thể đặt tên module này bất cứ tên nào bạn muốn, thông thường tên module gốc là AppModule. Vậy là tất cả đã rõ, chúng ta có Component, có root Module, có nơi thực hiện bootstrap. Tổng kết:Quảng cáo Share this:Có liên quan
Danh mục: Angular 7 Để lại nhận xét
|