Metadata Angular là gì

3 năm trước

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ì ?

1. Component 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.

• Nhìn lạiapp.component.ts. Đây là một class AppComponent cái được decorated bởi một vài metadata. Decorator@Componentliên kết class với template và selector app-root để hiển thị được dùng trong fileapp.component.html .@ComponentNó là một khai báo [Decorator] cho class , để chỉ ra rằng class đó là một Angular component, bên cạnh đó nó còn cung cấp các configuration metadata để Angular 2 biết cách tạo ra Component tương ứng. yêu cầu tối thiểu phải truyền vào một Javascript object với ít nhất thuộc tính:selectorvàtemplateUrlhoặctemplate.
• selectormục đích chỉ ra rằng khi trong template có một thẻ dạng như thẻ HTML có tênapp-rootthì Angular sẽ hiển thị Component khai báo bên dưới vào đó.
• templateUrlsử dụng để link đến phần template tương ứng của component này. Trong một số trường hợp, các bạn có thể sử dụng inline template mà không cần tạo file html template riêng lẻ, khi đó bạn thay thế việc sử dụng propertytemplateUrlthành propertytemplate.
• styleUrlsđể link đến phần style tương ứng cho component này, giá trị của nó là 1 mảng các files style. Tương tự như template, style có thể sử dụng inline style bằng cách thay vì dùngstyleUrlsbạn sẽ dùngstylesproperty, nó cũng nhận giá trị là một mảng các string khai báo rule, bạn có thể sử dụng multi-line string nhưtemplateproperty.
• Metadata này nói với Angular rằng bất cứ khi nào thấy phần tử html , thì sẽ render template này trong bối cảnh của AppComponent class.
• Phần import:khi bạn muốn dùng một, một số module, thành phần nào đó từ module khác, bạn import chúng vào, đây là công việc để lấy về các thành phần mà module của bạn phụ thuộc vào.

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 vào nơi mà chúng ta muốn hiển thị chúng. Chúng ta gọi chúng là một directive [chỉ thị]. Một directive về cơ bản là một custom element.

Dưới đây là list đầy đủ các properties của object trên.

{
animations: "list of animations of this component",
changeDetection: "change detection strategy used by this component",
encapsulation: "style encapsulation strategy used by this component",
entryComponents: "list of components that are dynamically inserted into the view of this component",
exportAs: "name under which the component instance is exported in a template",
host: "map of class property to host element bindings for events, properties and attributes",
inputs: "list of class property names to data-bind as component inputs",
interpolation: "custom interpolation markers used in this component's template",
moduleId: "ES/CommonJS module id of the file in which this component is defined",
outputs: "list of class property names that expose output events that others can subscribe to",
providers: "list of providers available to this component and its children",
queries: " configure queries that can be injected into the component",
selector: "css selector that identifies this component in a template",
styleUrls: "list of urls to stylesheets to be applied to this component's view",
styles: "inline-defined styles to be applied to this component's view",
template: "inline-defined template for the view",
templateUrl: "url to an external file containing a template for the view",
viewProviders: "list of providers available to this component and its view children",
}

2. ngModule

Trong 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ì?

• Theimportsarray:

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 ý:

OnlyNgModuleclassesgo in theimportsarray. Dont put any other kind of class inimports.

Dont confuse theimportstatements at the top of the file with the Angular modulesimportsarray. They have different jobs.

TheJavaScriptimportstatements give you access to symbolsexportedby other files so you can reference them withinthisfile. They have nothing to do with Angular and Angular knows nothing about them.

Themodulesimportsarray tells Angular about specific Angular modules classes decorated with@NgModule that the application needs to function properly.

• Thedeclarationsarray:

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.

• Theprovidersarray:

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.

• Thebootstraparray:

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:

Danh mục: Angular 7

Để lại nhận xét

Video liên quan