Thursday, September 3, 2020

Tìm hiểu Module trong Angular

Module trong Angular là một thành phần mà bạn có thể thực hiện nhóm các thành phần bao gồm các component, directives,pipes, và Service thực hiện liên quan đến ứng dụng.

Trong trường hợp bạn đang phát triển một trang web, phần đầu trang, chân trang, bên trái, chính giữa và bên phải trở thành một phần của mô-đun.

Tìm hiểu Module trong Angular

Để xác định mô-đun, chúng ta có thể sử dụng NgModule. Khi bạn tạo một dự án mới bằng lệnh Angular –cli, ngmodule được tạo trong tệp app.module.ts theo mặc định và nó trông như sau:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';


@NgModule({

   declarations: [

      AppComponent,

      NewCmpComponent

   ],

   imports: [

      BrowserModule,

      AppRoutingModule

   ],

   providers: [],

   bootstrap: [AppComponent]

})

export class AppModule { }

Bạn cần phải import NgModule

import { NgModule } from '@angular/core';

Cấu trúc của Module trong Angular

@NgModule({ 

   declarations: [

      AppComponent, 

      NewCmpComponent 

   ],

   imports: [ 

      BrowserModule, 

      AppRoutingModule 

   ], 

   providers: [], 

   bootstrap: [AppComponent] 

})

Tìm hiểu Declaration

Nó là một mảng các thành phần được tạo ra. Nếu bất kỳ thành phần mới nào được tạo, nó sẽ được nhập trước tiên và tham chiếu sẽ được đưa vào khai báo

declarations: [ 

   AppComponent,  

   NewCmpComponent 

]

Import

Nó là một mảng các mô-đun cần thiết để được sử dụng trong ứng dụng. Nó cũng có thể được sử dụng bởi các thành phần trong mảng Khai báo. Ví dụ, ngay bây giờ trong @NgModule, chúng tôi thấy Mô-đun trình duyệt được nhập. Trong trường hợp ứng dụng của bạn cần biểu mẫu, bạn có thể bao gồm mô-đun với mã bên dưới

import { FormsModule } from '@angular/forms';

imports: [ 

   BrowserModule, 

   FormsModule 

]

Providers

Bao gồm các dịch vụ được tạo ra

Bootstrap

Điều này bao gồm Component ứng dụng chính để bắt đầu thực thi.

Bài trước: Tìm hiểu Component trong Angular

No comments:

Post a Comment