Sign up
160
0
Web Development

[Angular] Part 4 : Tìm hiểu Component, AppComponent

Nguyễn Nam
Nguyễn Nam
20/04/2020 · 2 min read
160
angular
Thời gian đọc: 2 phút

Ở bài viết trước mình đã cùng các bạn tìm hiểu về cách khởi chạy của một app Angular. Thì trong bài viết này, chúng ta sẽ tìm hiểu tiếp Component trong Angular là gì ?

1.Component trong Angular ?

Hầu hết trong qua trình phát triển ứng dụng Angular thì đều sử dụng component. Component nó là những class cơ bản tương tác với file HTML để tạo ra giao diện ứng dụng của mình. Trong lúc tạo mới một project luôn có một component mặc định được tạo ra đó là AppComponent.

Khi chúng ta mở project Angular ra thì chúng ta sẽ thấy trong mục src/app có các file :

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

Đây chính là AppComponent mặc định.Ý nghĩa của các file này mình sẽ giải thích rõ ràng trong bài viết sau . Tiếp theo, thì chúng ta sẽ xem cách tạo ra một component mới.

2. Tạo Component

Để tạo component mới, ta sử dụng lệnh Angular CLI trong cmd:

ng g component <ten-component>

Ví dụ, để tạo component có tên là my-app, ta chạy lệnh ng g component my-app:

AppComponent

Sau khi tạo xong chúng ta sẽ thấy trong project có xuất hiện thêm thư mục my-app chúng ta mở nó ra :

  • my-app.component.css − file css của component.
  • my-app.component.html − file html của component.
  • my-app.component.spec.ts − file sử dụng cho unit test.
  • my-app.component.ts − file định nghĩa các module, thuộc tính.

Ngoài việc tạo ra mới 4 file này, angular CLI cũng giúp chúng ta khai báo new component này cho project trong file app.module.ts:

app.module.ts:


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

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

@NgModule({
  declarations: [
    AppComponent,
    MyAppComponent // Dòng này mới được thêm vào
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bài viết này chúng ta sẽ dừng ở đây. Ở các bài viết sau mình sẽ hướng dẫn các bạn cách build 1 project Todo list bằng Angular + Springboot để giúp các bạn có thể thực hành tốt hơn với Angular !

0